From 15dc83a4eb5fcebef71820a47e3a2edf66df7b3f Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 17 Dec 2025 20:43:28 +0530
Subject: [PATCH] feat: improved survey UI (#6988)

Co-authored-by: Matti Nannt <matti@formbricks.com>
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
---
 .cursor/commands/create-question.md           |  352 +
 apps/storybook/.storybook/main.ts             |   27 +-
 apps/storybook/.storybook/preview.ts          |   31 +-
 apps/storybook/package.json                   |   30 +-
 apps/storybook/postcss.config.js              |    6 -
 apps/storybook/tailwind.config.js             |   14 +-
 apps/storybook/vite.config.ts                 |    5 +-
 apps/web/modules/email/emails/lib/utils.tsx   |    4 +-
 .../emails/survey/response-finished-email.tsx |    4 +-
 .../survey/editor/components/block-card.tsx   |    2 +-
 .../editor/components/survey-menu-bar.tsx     |    2 +-
 .../follow-ups/components/follow-up-email.tsx |    4 +-
 .../follow-ups/components/follow-up-item.tsx  |    2 +-
 .../modules/ui/components/select/index.tsx    |    6 +-
 apps/web/package.json                         |    3 +-
 apps/web/playwright/js.spec.ts                |    6 +-
 apps/web/playwright/survey.spec.ts            |   56 +-
 package.json                                  |    4 +-
 .../src/scripts/generate-data-migration.ts    |    2 +-
 .../database/src/scripts/migration-runner.ts  |    2 +-
 packages/survey-ui/.eslintrc.cjs              |    5 +
 packages/survey-ui/.gitignore                 |    8 +
 packages/survey-ui/README.md                  |  101 +
 packages/survey-ui/components.json            |   20 +
 packages/survey-ui/package.json               |   80 +
 packages/survey-ui/postcss.config.mjs         |    5 +
 .../components/elements/consent.stories.tsx   |  188 +
 .../src/components/elements/consent.tsx       |   92 +
 .../src/components/elements/cta.stories.tsx   |  186 +
 .../survey-ui/src/components/elements/cta.tsx |   89 +
 .../src/components/elements/date.stories.tsx  |  315 +
 .../src/components/elements/date.tsx          |  148 +
 .../elements/file-upload.stories.tsx          |  244 +
 .../src/components/elements/file-upload.tsx   |  336 +
 .../elements/form-field.stories.tsx           |  362 +
 .../src/components/elements/form-field.tsx    |  140 +
 .../components/elements/matrix.stories.tsx    |  307 +
 .../src/components/elements/matrix.tsx        |  166 +
 .../elements/multi-select.stories.tsx         |  353 +
 .../src/components/elements/multi-select.tsx  |  549 ++
 .../src/components/elements/nps.stories.tsx   |  244 +
 .../survey-ui/src/components/elements/nps.tsx |  196 +
 .../components/elements/open-text.stories.tsx |  279 +
 .../src/components/elements/open-text.tsx     |  110 +
 .../elements/picture-select.stories.tsx       |  282 +
 .../components/elements/picture-select.tsx    |  198 +
 .../components/elements/ranking.stories.tsx   |  222 +
 .../src/components/elements/ranking.tsx       |  263 +
 .../components/elements/rating.stories.tsx    |  320 +
 .../src/components/elements/rating.tsx        |  442 +
 .../elements/single-select.stories.tsx        |  382 +
 .../src/components/elements/single-select.tsx |  315 +
 .../src/components/general/alert.stories.tsx  |   66 +
 .../src/components/general/alert.tsx          |   54 +
 .../src/components/general/button.stories.tsx |  243 +
 .../src/components/general/button.tsx         |   58 +
 .../src/components/general/calendar.tsx       |  218 +
 .../components/general/checkbox.stories.tsx   |   90 +
 .../src/components/general/checkbox.tsx       |   27 +
 .../general/dropdown-menu.stories.tsx         |  188 +
 .../src/components/general/dropdown-menu.tsx  |  218 +
 .../src/components/general/element-error.tsx  |   36 +
 .../general/element-header.stories.tsx        |  111 +
 .../src/components/general/element-header.tsx |  102 +
 .../src/components/general/element-media.tsx  |  102 +
 .../src/components/general/input.stories.tsx  |  294 +
 .../src/components/general/input.tsx          |   61 +
 .../src/components/general/label.stories.tsx  |  405 +
 .../src/components/general/label.tsx          |  123 +
 .../src/components/general/popover.tsx        |   39 +
 .../components/general/progress.stories.tsx   |  155 +
 .../src/components/general/progress.tsx       |   29 +
 .../general/radio-group.stories.tsx           |  312 +
 .../src/components/general/radio-group.tsx    |   58 +
 .../src/components/general/smileys.tsx        |  466 ++
 .../components/general/textarea.stories.tsx   |  153 +
 .../src/components/general/textarea.tsx       |   30 +
 packages/survey-ui/src/index.ts               |   49 +
 packages/survey-ui/src/lib/locale.test.ts     |  113 +
 packages/survey-ui/src/lib/locale.ts          |   52 +
 packages/survey-ui/src/lib/story-helpers.tsx  |  442 +
 packages/survey-ui/src/lib/utils.test.ts      |   45 +
 packages/survey-ui/src/lib/utils.ts           |   37 +
 packages/survey-ui/src/lib/video.test.ts      |  154 +
 packages/survey-ui/src/lib/video.ts           |  121 +
 packages/survey-ui/src/styles/globals.css     |  232 +
 packages/survey-ui/tailwind.config.ts         |  118 +
 packages/survey-ui/tsconfig.json              |   15 +
 packages/survey-ui/vite.config.mts            |   67 +
 packages/surveys/i18n.lock                    |   17 +-
 packages/surveys/locales/ar.json              |   17 +-
 packages/surveys/locales/de.json              |   19 +-
 packages/surveys/locales/en.json              |   17 +-
 packages/surveys/locales/es.json              |   17 +-
 packages/surveys/locales/fr.json              |   17 +-
 packages/surveys/locales/hi.json              |   17 +-
 packages/surveys/locales/it.json              |   17 +-
 packages/surveys/locales/ja.json              |   17 +-
 packages/surveys/locales/nl.json              |   17 +-
 packages/surveys/locales/pt.json              |   17 +-
 packages/surveys/locales/ro.json              |   17 +-
 packages/surveys/locales/ru.json              |   17 +-
 packages/surveys/locales/sv.json              |   17 +-
 packages/surveys/locales/uz.json              |   17 +-
 packages/surveys/locales/zh-Hans.json         |   17 +-
 packages/surveys/package.json                 |    9 +-
 packages/surveys/postcss.config.cjs           |    2 +-
 .../src/components/buttons/back-button.tsx    |    2 +-
 .../src/components/buttons/submit-button.tsx  |    2 +-
 .../components/elements/address-element.tsx   |  208 +-
 .../src/components/elements/cal-element.tsx   |    4 +-
 .../components/elements/consent-element.tsx   |   87 +-
 .../elements/contact-info-element.tsx         |  185 +-
 .../src/components/elements/cta-element.tsx   |   65 +-
 .../src/components/elements/date-element.tsx  |  270 +-
 .../elements/file-upload-element.tsx          |  375 +-
 .../components/elements/matrix-element.tsx    |  198 +-
 .../multiple-choice-multi-element.tsx         |  467 +-
 .../multiple-choice-single-element.tsx        |  311 +-
 .../src/components/elements/nps-element.tsx   |  121 +-
 .../components/elements/open-text-element.tsx |  182 +-
 .../elements/picture-selection-element.tsx    |  218 +-
 .../components/elements/ranking-element.tsx   |  309 +-
 .../components/elements/rating-element.tsx    |  341 +-
 .../general/auto-close-progress-bar.tsx       |    4 +-
 .../components/general/block-conditional.tsx  |   10 +-
 .../src/components/general/cal-embed.tsx      |    6 +-
 .../src/components/general/element-media.tsx  |   17 +-
 .../src/components/general/ending-card.tsx    |   16 +-
 .../components/general/error-component.tsx    |   11 +-
 .../src/components/general/file-input.tsx     |  443 -
 .../general/formbricks-branding.tsx           |    6 +-
 .../src/components/general/headline.tsx       |   15 +-
 .../surveys/src/components/general/input.tsx  |    2 +-
 .../surveys/src/components/general/label.tsx  |    2 +-
 .../components/general/language-switch.tsx    |   10 +-
 .../components/general/loading-spinner.tsx    |    8 +-
 .../src/components/general/progress.tsx       |    4 +-
 .../components/general/recaptcha-branding.tsx |    2 +-
 .../general/response-error-component.tsx      |   18 +-
 .../src/components/general/subheader.tsx      |    4 +-
 .../general/survey-close-button.tsx           |    4 +-
 .../surveys/src/components/general/survey.tsx |   26 +-
 .../src/components/general/welcome-card.tsx   |   26 +-
 .../wrappers/auto-close-wrapper.tsx           |    6 +-
 .../wrappers/scrollable-container.tsx         |   12 +-
 .../src/components/wrappers/stacked-card.tsx  |    6 +-
 .../wrappers/stacked-cards-container.tsx      |    4 +-
 .../components/wrappers/survey-container.tsx  |   32 +-
 packages/surveys/src/lib/html-utils.ts        |   16 +-
 packages/surveys/src/lib/styles.test.ts       |    5 +-
 packages/surveys/src/lib/styles.ts            |   21 +-
 packages/surveys/src/styles/date-picker.css   |  115 -
 packages/surveys/src/styles/global.css        |   43 +-
 packages/surveys/src/styles/preflight.css     |   58 +-
 packages/surveys/tailwind.config.cjs          |    4 -
 packages/surveys/vite.config.mts              |   35 +-
 pnpm-lock.yaml                                | 7183 ++++++++++-------
 sonar-project.properties                      |   14 +-
 turbo.json                                    |   32 +
 160 files changed, 18354 insertions(+), 6088 deletions(-)
 create mode 100644 .cursor/commands/create-question.md
 delete mode 100644 apps/storybook/postcss.config.js
 create mode 100644 packages/survey-ui/.eslintrc.cjs
 create mode 100644 packages/survey-ui/.gitignore
 create mode 100644 packages/survey-ui/README.md
 create mode 100644 packages/survey-ui/components.json
 create mode 100644 packages/survey-ui/package.json
 create mode 100644 packages/survey-ui/postcss.config.mjs
 create mode 100644 packages/survey-ui/src/components/elements/consent.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/consent.tsx
 create mode 100644 packages/survey-ui/src/components/elements/cta.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/cta.tsx
 create mode 100644 packages/survey-ui/src/components/elements/date.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/date.tsx
 create mode 100644 packages/survey-ui/src/components/elements/file-upload.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/file-upload.tsx
 create mode 100644 packages/survey-ui/src/components/elements/form-field.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/form-field.tsx
 create mode 100644 packages/survey-ui/src/components/elements/matrix.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/matrix.tsx
 create mode 100644 packages/survey-ui/src/components/elements/multi-select.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/multi-select.tsx
 create mode 100644 packages/survey-ui/src/components/elements/nps.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/nps.tsx
 create mode 100644 packages/survey-ui/src/components/elements/open-text.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/open-text.tsx
 create mode 100644 packages/survey-ui/src/components/elements/picture-select.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/picture-select.tsx
 create mode 100644 packages/survey-ui/src/components/elements/ranking.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/ranking.tsx
 create mode 100644 packages/survey-ui/src/components/elements/rating.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/rating.tsx
 create mode 100644 packages/survey-ui/src/components/elements/single-select.stories.tsx
 create mode 100644 packages/survey-ui/src/components/elements/single-select.tsx
 create mode 100644 packages/survey-ui/src/components/general/alert.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/alert.tsx
 create mode 100644 packages/survey-ui/src/components/general/button.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/button.tsx
 create mode 100644 packages/survey-ui/src/components/general/calendar.tsx
 create mode 100644 packages/survey-ui/src/components/general/checkbox.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/checkbox.tsx
 create mode 100644 packages/survey-ui/src/components/general/dropdown-menu.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/dropdown-menu.tsx
 create mode 100644 packages/survey-ui/src/components/general/element-error.tsx
 create mode 100644 packages/survey-ui/src/components/general/element-header.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/element-header.tsx
 create mode 100644 packages/survey-ui/src/components/general/element-media.tsx
 create mode 100644 packages/survey-ui/src/components/general/input.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/input.tsx
 create mode 100644 packages/survey-ui/src/components/general/label.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/label.tsx
 create mode 100644 packages/survey-ui/src/components/general/popover.tsx
 create mode 100644 packages/survey-ui/src/components/general/progress.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/progress.tsx
 create mode 100644 packages/survey-ui/src/components/general/radio-group.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/radio-group.tsx
 create mode 100644 packages/survey-ui/src/components/general/smileys.tsx
 create mode 100644 packages/survey-ui/src/components/general/textarea.stories.tsx
 create mode 100644 packages/survey-ui/src/components/general/textarea.tsx
 create mode 100644 packages/survey-ui/src/index.ts
 create mode 100644 packages/survey-ui/src/lib/locale.test.ts
 create mode 100644 packages/survey-ui/src/lib/locale.ts
 create mode 100644 packages/survey-ui/src/lib/story-helpers.tsx
 create mode 100644 packages/survey-ui/src/lib/utils.test.ts
 create mode 100644 packages/survey-ui/src/lib/utils.ts
 create mode 100644 packages/survey-ui/src/lib/video.test.ts
 create mode 100644 packages/survey-ui/src/lib/video.ts
 create mode 100644 packages/survey-ui/src/styles/globals.css
 create mode 100644 packages/survey-ui/tailwind.config.ts
 create mode 100644 packages/survey-ui/tsconfig.json
 create mode 100644 packages/survey-ui/vite.config.mts
 delete mode 100644 packages/surveys/src/components/general/file-input.tsx
 delete mode 100644 packages/surveys/src/styles/date-picker.css

diff --git a/.cursor/commands/create-question.md b/.cursor/commands/create-question.md
new file mode 100644
index 0000000000..c34efdcebe
--- /dev/null
+++ b/.cursor/commands/create-question.md
@@ -0,0 +1,352 @@
+# Create New Question Element
+
+Use this command to scaffold a new question element component in `packages/survey-ui/src/elements/`.
+
+## Usage
+
+When creating a new question type (e.g., `single-select`, `rating`, `nps`), follow these steps:
+
+1. **Create the component file** `{question-type}.tsx` with this structure:
+
+```typescript
+import * as React from "react";
+import { ElementHeader } from "../components/element-header";
+import { useTextDirection } from "../hooks/use-text-direction";
+import { cn } from "../lib/utils";
+
+interface {QuestionType}Props {
+    /** Unique identifier for the element container */
+    elementId: string;
+    /** The main question or prompt text displayed as the headline */
+    headline: string;
+    /** Optional descriptive text displayed below the headline */
+    description?: string;
+    /** Unique identifier for the input/control group */
+    inputId: string;
+    /** Current value */
+    value?: {ValueType};
+    /** Callback function called when the value changes */
+    onChange: (value: {ValueType}) => void;
+    /** Whether the field is required (shows asterisk indicator) */
+    required?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+    dir?: "ltr" | "rtl" | "auto";
+    /** Whether the controls are disabled */
+    disabled?: boolean;
+    // Add question-specific props here
+}
+
+function {QuestionType}({
+    elementId,
+    headline,
+    description,
+    inputId,
+    value,
+    onChange,
+    required = false,
+    errorMessage,
+    dir = "auto",
+    disabled = false,
+    // ... question-specific props
+}: {QuestionType}Props): React.JSX.Element {
+    // Ensure value is always the correct type (handle undefined/null)
+    const currentValue = value ?? {defaultValue};
+    
+    // Detect text direction from content
+    const detectedDir = useTextDirection({
+        dir,
+        textContent: [headline, description ?? "", /* add other text content from question */],
+    });
+
+    return (
+        <div className="w-full space-y-4" id={elementId} dir={detectedDir}>
+            {/* Headline */}
+            <ElementHeader 
+                headline={headline} 
+                description={description} 
+                required={required} 
+                htmlFor={inputId} 
+            />
+
+            {/* Question-specific controls */}
+            {/* TODO: Add your question-specific UI here */}
+
+            {/* Error message */}
+            {errorMessage && (
+                <div className="text-destructive flex items-center gap-1 text-sm" dir={detectedDir}>
+                    <span>{errorMessage}</span>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export { {QuestionType} };
+export type { {QuestionType}Props };
+```
+
+2. **Create the Storybook file** `{question-type}.stories.tsx`:
+
+```typescript
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { {QuestionType}, type {QuestionType}Props } from "./{question-type}";
+
+// Styling options for the StylingPlayground story
+interface StylingOptions {
+    // Question styling
+    questionHeadlineFontFamily: string;
+    questionHeadlineFontSize: string;
+    questionHeadlineFontWeight: string;
+    questionHeadlineColor: string;
+    questionDescriptionFontFamily: string;
+    questionDescriptionFontWeight: string;
+    questionDescriptionFontSize: string;
+    questionDescriptionColor: string;
+    // Add component-specific styling options here
+}
+
+type StoryProps = {QuestionType}Props & Partial<StylingOptions>;
+
+const meta: Meta<StoryProps> = {
+    title: "UI-package/Elements/{QuestionType}",
+    component: {QuestionType},
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A complete {question type} question element...",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        headline: {
+            control: "text",
+            description: "The main question text",
+            table: { category: "Content" },
+        },
+        description: {
+            control: "text",
+            description: "Optional description or subheader text",
+            table: { category: "Content" },
+        },
+        value: {
+            control: "object",
+            description: "Current value",
+            table: { category: "State" },
+        },
+        required: {
+            control: "boolean",
+            description: "Whether the field is required",
+            table: { category: "Validation" },
+        },
+        errorMessage: {
+            control: "text",
+            description: "Error message to display",
+            table: { category: "Validation" },
+        },
+        dir: {
+            control: { type: "select" },
+            options: ["ltr", "rtl", "auto"],
+            description: "Text direction for RTL support",
+            table: { category: "Layout" },
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the controls are disabled",
+            table: { category: "State" },
+        },
+        onChange: {
+            action: "changed",
+            table: { category: "Events" },
+        },
+        // Add question-specific argTypes here
+    },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+const withCSSVariables: Decorator<StoryProps> = (Story, context) => {
+    const args = context.args as StoryProps;
+    const {
+        questionHeadlineFontFamily,
+        questionHeadlineFontSize,
+        questionHeadlineFontWeight,
+        questionHeadlineColor,
+        questionDescriptionFontFamily,
+        questionDescriptionFontSize,
+        questionDescriptionFontWeight,
+        questionDescriptionColor,
+        // Extract component-specific styling options
+    } = args;
+
+    const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+        "--fb-question-headline-font-family": questionHeadlineFontFamily,
+        "--fb-question-headline-font-size": questionHeadlineFontSize,
+        "--fb-question-headline-font-weight": questionHeadlineFontWeight,
+        "--fb-question-headline-color": questionHeadlineColor,
+        "--fb-question-description-font-family": questionDescriptionFontFamily,
+        "--fb-question-description-font-size": questionDescriptionFontSize,
+        "--fb-question-description-font-weight": questionDescriptionFontWeight,
+        "--fb-question-description-color": questionDescriptionColor,
+        // Add component-specific CSS variables
+    };
+
+    return (
+        <div style={cssVarStyle} className="w-[600px]">
+            <Story />
+        </div>
+    );
+};
+
+export const StylingPlayground: Story = {
+    args: {
+        headline: "Example question?",
+        description: "Example description",
+        // Default styling values
+        questionHeadlineFontFamily: "system-ui, sans-serif",
+        questionHeadlineFontSize: "1.125rem",
+        questionHeadlineFontWeight: "600",
+        questionHeadlineColor: "#1e293b",
+        questionDescriptionFontFamily: "system-ui, sans-serif",
+        questionDescriptionFontSize: "0.875rem",
+        questionDescriptionFontWeight: "400",
+        questionDescriptionColor: "#64748b",
+        // Add component-specific default values
+    },
+    argTypes: {
+        // Question styling argTypes
+        questionHeadlineFontFamily: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineFontSize: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineFontWeight: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionHeadlineColor: {
+            control: "color",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontFamily: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontSize: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionFontWeight: {
+            control: "text",
+            table: { category: "Question Styling" },
+        },
+        questionDescriptionColor: {
+            control: "color",
+            table: { category: "Question Styling" },
+        },
+        // Add component-specific argTypes
+    },
+    decorators: [withCSSVariables],
+};
+
+export const Default: Story = {
+    args: {
+        headline: "Example question?",
+        // Add default props
+    },
+};
+
+export const WithDescription: Story = {
+    args: {
+        headline: "Example question?",
+        description: "Example description text",
+    },
+};
+
+export const Required: Story = {
+    args: {
+        headline: "Example question?",
+        required: true,
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        headline: "Example question?",
+        errorMessage: "This field is required",
+        required: true,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        headline: "Example question?",
+        disabled: true,
+    },
+};
+
+export const RTL: Story = {
+    args: {
+        headline: "مثال على السؤال؟",
+        description: "مثال على الوصف",
+        // Add RTL-specific props
+    },
+};
+```
+
+3. **Add CSS variables** to `packages/survey-ui/src/styles/globals.css` if needed:
+
+```css
+/* Component-specific CSS variables */
+--fb-{component}-{property}: {default-value};
+```
+
+4. **Export from** `packages/survey-ui/src/index.ts`:
+
+```typescript
+export { {QuestionType}, type {QuestionType}Props } from "./elements/{question-type}";
+```
+
+## Key Requirements
+
+- ✅ Always use `ElementHeader` component for headline/description
+- ✅ Always use `useTextDirection` hook for RTL support
+- ✅ Always handle undefined/null values safely (e.g., `Array.isArray(value) ? value : []`)
+- ✅ Always include error message display if applicable
+- ✅ Always support disabled state if applicable
+- ✅ Always add JSDoc comments to props interface
+- ✅ Always create Storybook stories with styling playground
+- ✅ Always export types from component file
+- ✅ Always add to index.ts exports
+
+## Examples
+
+- `open-text.tsx` - Text input/textarea question (string value)
+- `multi-select.tsx` - Multiple checkbox selection (string[] value)
+
+## Checklist
+
+When creating a new question element, verify:
+
+- [ ] Component file created with proper structure
+- [ ] Props interface with JSDoc comments for all props
+- [ ] Uses `ElementHeader` component (don't duplicate header logic)
+- [ ] Uses `useTextDirection` hook for RTL support
+- [ ] Handles undefined/null values safely
+- [ ] Storybook file created with styling playground
+- [ ] Includes common stories: Default, WithDescription, Required, WithError, Disabled, RTL
+- [ ] CSS variables added to `globals.css` if component needs custom styling
+- [ ] Exported from `index.ts` with types
+- [ ] TypeScript types properly exported
+- [ ] Error message display included if applicable
+- [ ] Disabled state supported if applicable
+
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
index fa597f552f..0b16b26f64 100644
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -1,8 +1,11 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import { createRequire } from "module";
-import { dirname, join } from "path";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
 
 const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -13,7 +16,7 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../../web/modules/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../../../packages/survey-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
@@ -25,5 +28,25 @@ const config: StorybookConfig = {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
+  async viteFinal(config) {
+    const surveyUiPath = resolve(__dirname, "../../../packages/survey-ui/src");
+    const rootPath = resolve(__dirname, "../../../");
+
+    // Configure server to allow files from outside the storybook directory
+    config.server = config.server || {};
+    config.server.fs = {
+      ...config.server.fs,
+      allow: [...(config.server.fs?.allow || []), rootPath],
+    };
+
+    // Configure simple alias resolution
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": surveyUiPath,
+    };
+
+    return config;
+  },
 };
 export default config;
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index b0c7224444..58c0444d37 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -1,19 +1,6 @@
 import type { Preview } from "@storybook/react-vite";
 import React from "react";
-import { I18nProvider } from "../../web/lingodotdev/client";
-import "../../web/modules/ui/globals.css";
-
-// Create a Storybook-specific Lingodot Dev decorator
-const withLingodotDev = (Story: any) => {
-  return React.createElement(
-    I18nProvider,
-    {
-      language: "en-US",
-      defaultLanguage: "en-US",
-    } as any,
-    React.createElement(Story)
-  );
-};
+import "../../../packages/survey-ui/src/styles/globals.css";
 
 const preview: Preview = {
   parameters: {
@@ -22,9 +9,23 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
+      expanded: true,
+    },
+    backgrounds: {
+      default: "light",
     },
   },
-  decorators: [withLingodotDev],
+  decorators: [
+    (Story) =>
+      React.createElement(
+        "div",
+        {
+          id: "fbjs",
+          className: "w-full h-full min-h-screen p-4 bg-background font-sans antialiased text-foreground",
+        },
+        React.createElement(Story)
+      ),
+  ],
 };
 
 export default preview;
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 85ff2a6110..5b32e7d321 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -11,22 +11,24 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "eslint-plugin-react-refresh": "0.4.20"
+    "@formbricks/survey-ui": "workspace:*",
+    "eslint-plugin-react-refresh": "0.4.24"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@storybook/addon-a11y": "9.0.15",
-    "@storybook/addon-links": "9.0.15",
-    "@storybook/addon-onboarding": "9.0.15",
-    "@storybook/react-vite": "9.0.15",
-    "@typescript-eslint/eslint-plugin": "8.32.0",
-    "@typescript-eslint/parser": "8.32.0",
-    "@vitejs/plugin-react": "4.4.1",
-    "esbuild": "0.25.4",
-    "eslint-plugin-storybook": "9.0.15",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-a11y": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/addon-onboarding": "10.0.8",
+    "@storybook/react-vite": "10.0.8",
+    "@typescript-eslint/eslint-plugin": "8.48.0",
+    "@tailwindcss/vite": "4.1.17",
+    "@typescript-eslint/parser": "8.48.0",
+    "@vitejs/plugin-react": "5.1.1",
+    "esbuild": "0.27.0",
+    "eslint-plugin-storybook": "10.0.8",
     "prop-types": "15.8.1",
-    "storybook": "9.0.15",
-    "vite": "6.4.1",
-    "@storybook/addon-docs": "9.0.15"
+    "storybook": "10.0.8",
+    "vite": "7.2.4",
+    "@storybook/addon-docs": "10.0.8"
   }
 }
diff --git a/apps/storybook/postcss.config.js b/apps/storybook/postcss.config.js
deleted file mode 100644
index 2aa7205d4b..0000000000
--- a/apps/storybook/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/apps/storybook/tailwind.config.js b/apps/storybook/tailwind.config.js
index 574e3b7b54..3b65545a60 100644
--- a/apps/storybook/tailwind.config.js
+++ b/apps/storybook/tailwind.config.js
@@ -1,7 +1,15 @@
 /** @type {import('tailwindcss').Config} */
-import base from "../web/tailwind.config";
+import surveyUi from "../../packages/survey-ui/tailwind.config";
 
 export default {
-  ...base,
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "../web/modules/ui/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../../packages/survey-ui/src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      ...surveyUi.theme?.extend,
+    },
+  },
 };
diff --git a/apps/storybook/vite.config.ts b/apps/storybook/vite.config.ts
index 37337dae71..f4068dd20b 100644
--- a/apps/storybook/vite.config.ts
+++ b/apps/storybook/vite.config.ts
@@ -1,16 +1,17 @@
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   define: {
     "process.env": {},
   },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "../web"),
+      "@formbricks/survey-ui": path.resolve(__dirname, "../../packages/survey-ui/src"),
     },
   },
 });
diff --git a/apps/web/modules/email/emails/lib/utils.tsx b/apps/web/modules/email/emails/lib/utils.tsx
index 13903ce0aa..3371ad1d26 100644
--- a/apps/web/modules/email/emails/lib/utils.tsx
+++ b/apps/web/modules/email/emails/lib/utils.tsx
@@ -15,7 +15,7 @@ export const renderEmailResponseValue = async (
       return (
         <Container>
           {overrideFileUploadResponse ? (
-            <Text className="mt-0 whitespace-pre-wrap break-words text-sm italic">
+            <Text className="mt-0 text-sm break-words whitespace-pre-wrap italic">
               {t("emails.render_email_response_value_file_upload_response_link_not_included")}
             </Text>
           ) : (
@@ -65,6 +65,6 @@ export const renderEmailResponseValue = async (
       );
 
     default:
-      return <Text className="mt-0 whitespace-pre-wrap break-words text-sm">{response}</Text>;
+      return <Text className="mt-0 text-sm break-words whitespace-pre-wrap">{response}</Text>;
   }
 };
diff --git a/apps/web/modules/email/emails/survey/response-finished-email.tsx b/apps/web/modules/email/emails/survey/response-finished-email.tsx
index 73688ad89d..89afb04852 100644
--- a/apps/web/modules/email/emails/survey/response-finished-email.tsx
+++ b/apps/web/modules/email/emails/survey/response-finished-email.tsx
@@ -74,7 +74,7 @@ export async function ResponseFinishedEmail({
                         )}
                         {variable.name}
                       </Text>
-                      <Text className="mt-0 whitespace-pre-wrap break-words font-medium">
+                      <Text className="mt-0 font-medium break-words whitespace-pre-wrap">
                         {variableResponse}
                       </Text>
                     </Column>
@@ -94,7 +94,7 @@ export async function ResponseFinishedEmail({
                       <Text className="mb-2 flex items-center gap-2 text-sm">
                         {hiddenFieldId} <EyeOffIcon />
                       </Text>
-                      <Text className="mt-0 whitespace-pre-wrap break-words text-sm">
+                      <Text className="mt-0 text-sm break-words whitespace-pre-wrap">
                         {hiddenFieldResponse}
                       </Text>
                     </Column>
diff --git a/apps/web/modules/survey/editor/components/block-card.tsx b/apps/web/modules/survey/editor/components/block-card.tsx
index d6426a6432..60e911019a 100644
--- a/apps/web/modules/survey/editor/components/block-card.tsx
+++ b/apps/web/modules/survey/editor/components/block-card.tsx
@@ -284,7 +284,7 @@ export const BlockCard = ({
         </div>
 
         <button
-          className="opacity-0 hover:cursor-move group-hover:opacity-100"
+          className="opacity-0 group-hover:opacity-100 hover:cursor-move"
           aria-label="Drag to reorder block">
           <GripIcon className="h-4 w-4" />
         </button>
diff --git a/apps/web/modules/survey/editor/components/survey-menu-bar.tsx b/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
index 02caec3a75..3195a1194e 100644
--- a/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
+++ b/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
@@ -400,7 +400,7 @@ export const SurveyMenuBar = ({
         />
       </div>
 
-      <div className="mt-3 flex items-center gap-2 sm:ml-4 sm:mt-0">
+      <div className="mt-3 flex items-center gap-2 sm:mt-0 sm:ml-4">
         {!isStorageConfigured && (
           <div>
             <Alert variant="warning" size="small">
diff --git a/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx b/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx
index e3aecc0795..62eb62834f 100644
--- a/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx
+++ b/apps/web/modules/survey/follow-ups/components/follow-up-email.tsx
@@ -84,7 +84,7 @@ export async function FollowUpEmail(props: FollowUpEmailProps): Promise<React.JS
                         ? `${t("emails.number_variable")}: ${variable.name}`
                         : `${t("emails.text_variable")}: ${variable.name}`}
                     </Text>
-                    <Text className="mt-0 whitespace-pre-wrap break-words text-sm text-slate-700">
+                    <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
                       {variableResponse}
                     </Text>
                   </Column>
@@ -107,7 +107,7 @@ export async function FollowUpEmail(props: FollowUpEmailProps): Promise<React.JS
                     <Text className="mb-2 text-sm font-semibold text-slate-900">
                       {t("emails.hidden_field")}: {hiddenFieldId}
                     </Text>
-                    <Text className="mt-0 whitespace-pre-wrap break-words text-sm text-slate-700">
+                    <Text className="mt-0 text-sm break-words whitespace-pre-wrap text-slate-700">
                       {hiddenFieldResponse}
                     </Text>
                   </Column>
diff --git a/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx b/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
index 9e6c07908f..c7a088f6ea 100644
--- a/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
+++ b/apps/web/modules/survey/follow-ups/components/follow-up-item.tsx
@@ -155,7 +155,7 @@ export const FollowUpItem = ({
           </div>
         </button>
 
-        <div className="absolute right-4 top-4 flex items-center">
+        <div className="absolute top-4 right-4 flex items-center">
           <TooltipRenderer tooltipContent={t("common.delete")}>
             <Button
               variant="ghost"
diff --git a/apps/web/modules/ui/components/select/index.tsx b/apps/web/modules/ui/components/select/index.tsx
index b1079a0418..a162667977 100644
--- a/apps/web/modules/ui/components/select/index.tsx
+++ b/apps/web/modules/ui/components/select/index.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-1 hover:enabled:border-slate-400 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-slate-400",
+      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm focus:ring-2 focus:ring-slate-400 focus:ring-offset-1 focus:outline-none hover:enabled:border-slate-400 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-slate-400",
       className
     )}
     {...props}>
@@ -52,7 +52,7 @@ const SelectLabel: React.ComponentType<SelectPrimitive.SelectLabelProps> = React
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-slate-900 dark:text-slate-200", className)}
+    className={cn("py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-200", className)}
     {...props}
   />
 ));
@@ -65,7 +65,7 @@ const SelectItem: React.ComponentType<SelectPrimitive.SelectItemProps> = React.f
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-2 pr-2 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer items-center rounded-md py-1.5 pr-2 pl-2 text-sm font-medium outline-none select-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}>
diff --git a/apps/web/package.json b/apps/web/package.json
index 20e05713b0..5edbc13399 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -72,8 +72,8 @@
     "@radix-ui/react-tooltip": "1.2.6",
     "@react-email/components": "0.0.38",
     "@sentry/nextjs": "10.5.0",
-    "@t3-oss/env-nextjs": "0.13.4",
     "@tailwindcss/forms": "0.5.10",
+    "@t3-oss/env-nextjs": "0.13.4",
     "@tailwindcss/typography": "0.5.16",
     "@tanstack/react-table": "8.21.3",
     "@ungap/structured-clone": "1.3.0",
@@ -116,6 +116,7 @@
     "react-day-picker": "9.6.7",
     "react-hook-form": "7.56.2",
     "react-hot-toast": "2.5.2",
+    "react-calendar": "5.1.0",
     "react-i18next": "15.7.3",
     "react-turnstile": "1.1.4",
     "react-use": "17.6.0",
diff --git a/apps/web/playwright/js.spec.ts b/apps/web/playwright/js.spec.ts
index 980a3e6b84..3b0426688c 100644
--- a/apps/web/playwright/js.spec.ts
+++ b/apps/web/playwright/js.spec.ts
@@ -115,12 +115,12 @@ test.describe("JS Package Test", async () => {
     await page.locator("#questionCard-2").getByRole("button", { name: "Next" }).click();
     await page
       .locator("#questionCard-3")
-      .getByLabel("textarea")
+      .getByRole("textbox")
       .fill("People who believe that PMF is necessary");
     await page.locator("#questionCard-3").getByRole("button", { name: "Next" }).click();
-    await page.locator("#questionCard-4").getByLabel("textarea").fill("Much higher response rates!");
+    await page.locator("#questionCard-4").getByRole("textbox").fill("Much higher response rates!");
     await page.locator("#questionCard-4").getByRole("button", { name: "Next" }).click();
-    await page.locator("#questionCard-5").getByLabel("textarea").fill("Make this end to end test pass!");
+    await page.locator("#questionCard-5").getByRole("textbox").fill("Make this end to end test pass!");
     await page.locator("#questionCard-5").getByRole("button", { name: "Finish" }).click();
 
     await page.getByTestId("loading-spinner").waitFor({ state: "hidden" });
diff --git a/apps/web/playwright/survey.spec.ts b/apps/web/playwright/survey.spec.ts
index 554c2ef023..43f2a6bc12 100644
--- a/apps/web/playwright/survey.spec.ts
+++ b/apps/web/playwright/survey.spec.ts
@@ -113,10 +113,12 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       await expect(
         page.locator("#questionCard-3").getByText(surveys.createAndSubmit.ratingQuestion.highLabel)
       ).toBeVisible();
-      expect(await page.getByRole("group", { name: "Choices" }).locator("label").count()).toBe(5);
+      // Rating component uses fieldset with labels, not a group with name "Choices"
+      expect(await page.locator("#questionCard-3").locator("fieldset label").count()).toBe(5);
       await expect(page.locator("#questionCard-3").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-3").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("radio", { name: "Rate 3 out of" }).check();
+      // Click on the label instead of the radio to avoid SVG intercepting pointer events
+      await page.locator("#questionCard-3").locator('label:has(input[value="3"])').click();
       await page.locator("#questionCard-3").getByRole("button", { name: "Next" }).click();
 
       // NPS Question
@@ -165,9 +167,7 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       await expect(page.getByText(surveys.createAndSubmit.fileUploadQuestion.question)).toBeVisible();
       await expect(page.locator("#questionCard-8").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-8").getByRole("button", { name: "Back" })).toBeVisible();
-      await expect(
-        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("button").nth(0)
-      ).toBeVisible();
+      await expect(page.getByRole("button", { name: "Upload files by clicking or" })).toBeVisible();
 
       await page.locator("input[type=file]").setInputFiles({
         name: "file.doc",
@@ -191,22 +191,22 @@ test.describe("Survey Create & Submit Response without logic", async () => {
         page.getByRole("rowheader", { name: surveys.createAndSubmit.matrix.rows[2] })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[0] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[0], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[1] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[1], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[2] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[2], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createAndSubmit.matrix.columns[3] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[3], exact: true })
       ).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-9").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("cell", { name: "Roses – 0" }).locator("div").click();
-      await page.getByRole("cell", { name: "Trees – 0" }).locator("div").click();
-      await page.getByRole("cell", { name: "Ocean – 0" }).locator("div").click();
+      await page.getByRole("radio", { name: "Roses-0" }).click();
+      await page.getByRole("radio", { name: "Trees-0" }).click();
+      await page.getByRole("radio", { name: "Ocean-0" }).click();
       await page.locator("#questionCard-9").getByRole("button", { name: "Next" }).click();
 
       // Address Question
@@ -858,7 +858,8 @@ test.describe("Testing Survey with advanced logic", async () => {
       ).toBeVisible();
       await expect(page.locator("#questionCard-4").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-4").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("radio", { name: "Rate 4 out of" }).check();
+      // Click on the label instead of the radio to avoid SVG intercepting pointer events
+      await page.locator("#questionCard-4").locator('label:has(input[value="4"])').click();
       await page.locator("#questionCard-4").getByRole("button", { name: "Next" }).click();
 
       // NPS Question
@@ -895,22 +896,22 @@ test.describe("Testing Survey with advanced logic", async () => {
         page.getByRole("rowheader", { name: surveys.createWithLogicAndSubmit.matrix.rows[2] })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[0] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[0], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[1] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[1], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[2] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[2], exact: true })
       ).toBeVisible();
       await expect(
-        page.getByRole("columnheader", { name: surveys.createWithLogicAndSubmit.matrix.columns[3] })
+        page.getByRole("cell", { name: surveys.createWithLogicAndSubmit.matrix.columns[3], exact: true })
       ).toBeVisible();
       await expect(page.locator("#questionCard-7").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-7").getByRole("button", { name: "Back" })).toBeVisible();
-      await page.getByRole("cell", { name: "Roses – 0" }).locator("div").click();
-      await page.getByRole("cell", { name: "Trees – 0" }).locator("div").click();
-      await page.getByRole("cell", { name: "Ocean – 0" }).locator("div").click();
+      await page.getByRole("radio", { name: "Roses-0" }).click();
+      await page.getByRole("radio", { name: "Trees-0" }).click();
+      await page.getByRole("radio", { name: "Ocean-0" }).click();
       await page.locator("#questionCard-7").getByRole("button", { name: "Next" }).click();
 
       // CTA Question
@@ -939,9 +940,9 @@ test.describe("Testing Survey with advanced logic", async () => {
       ).toBeVisible();
       await expect(page.locator("#questionCard-10").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-10").getByRole("button", { name: "Back" })).toBeVisible();
-      await expect(
-        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("button").nth(0)
-      ).toBeVisible();
+
+      await expect(page.getByRole("button", { name: "Upload files by clicking or" })).toBeVisible();
+
       await page.locator("input[type=file]").setInputFiles({
         name: "file.doc",
         mimeType: "application/msword",
@@ -952,11 +953,10 @@ test.describe("Testing Survey with advanced logic", async () => {
 
       // Date Question
       await expect(page.getByText(surveys.createWithLogicAndSubmit.date.question)).toBeVisible();
-      await page.getByText("Select a date").click();
-      const date = new Date().getDate();
-      const month = new Date().toLocaleString("default", { month: "long" });
-      await page.getByRole("button", { name: `${month} ${date},` }).click();
-      await page.locator("#questionCard-11").getByRole("button", { name: "Next" }).click();
+      // Click the "Today" button in the date picker - matches format like "Today, Tuesday, December 16th,"
+      await page.getByRole("button", { name: /^Today,/ }).click();
+      await page.getByRole("button", { name: "Scroll to bottom" }).click();
+      await page.locator("#questionCard-11").getByRole("button", { name: "Next", exact: true }).click();
 
       // Cal Question
       await expect(page.getByText(surveys.createWithLogicAndSubmit.cal.question)).toBeVisible();
diff --git a/package.json b/package.json
index 3f46fcb724..2f26e67988 100644
--- a/package.json
+++ b/package.json
@@ -42,8 +42,8 @@
     "i18n:validate": "pnpm scan-translations"
   },
   "dependencies": {
-    "react": "19.1.2",
-    "react-dom": "19.1.2"
+    "react": "19.2.1",
+    "react-dom": "19.2.1"
   },
   "devDependencies": {
     "@azure/identity": "4.13.0",
diff --git a/packages/database/src/scripts/generate-data-migration.ts b/packages/database/src/scripts/generate-data-migration.ts
index ee2ba5d27a..10d4d81b8d 100644
--- a/packages/database/src/scripts/generate-data-migration.ts
+++ b/packages/database/src/scripts/generate-data-migration.ts
@@ -1,8 +1,8 @@
-import { createId } from "@paralleldrive/cuid2";
 import fs from "node:fs/promises";
 import path from "node:path";
 import readline from "node:readline";
 import { fileURLToPath } from "node:url";
+import { createId } from "@paralleldrive/cuid2";
 import { logger } from "@formbricks/logger";
 
 const __filename = fileURLToPath(import.meta.url);
diff --git a/packages/database/src/scripts/migration-runner.ts b/packages/database/src/scripts/migration-runner.ts
index a4eeef2393..a57515d3b5 100644
--- a/packages/database/src/scripts/migration-runner.ts
+++ b/packages/database/src/scripts/migration-runner.ts
@@ -1,9 +1,9 @@
-import { type Prisma, PrismaClient } from "@prisma/client";
 import { exec } from "node:child_process";
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
+import { type Prisma, PrismaClient } from "@prisma/client";
 import { logger } from "@formbricks/logger";
 
 const __filename = fileURLToPath(import.meta.url);
diff --git a/packages/survey-ui/.eslintrc.cjs b/packages/survey-ui/.eslintrc.cjs
new file mode 100644
index 0000000000..f27b79b57a
--- /dev/null
+++ b/packages/survey-ui/.eslintrc.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  extends: ["@formbricks/eslint-config/react.js"],
+  ignorePatterns: ["**/*.stories.tsx", "**/*.stories.ts", "story-helpers.tsx", "**/*.test.ts"],
+};
+
diff --git a/packages/survey-ui/.gitignore b/packages/survey-ui/.gitignore
new file mode 100644
index 0000000000..7b65e978ca
--- /dev/null
+++ b/packages/survey-ui/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+.turbo
+coverage
+*.log
+src/**/*.d.ts
+src/**/*.d.ts.map
+
diff --git a/packages/survey-ui/README.md b/packages/survey-ui/README.md
new file mode 100644
index 0000000000..994a77ecab
--- /dev/null
+++ b/packages/survey-ui/README.md
@@ -0,0 +1,101 @@
+# @formbricks/survey-ui
+
+Reusable UI components package for Formbricks applications.
+
+## Installation
+
+This package is part of the Formbricks monorepo and is available as a workspace dependency.
+
+## Usage
+
+```tsx
+import { Button } from "@formbricks/survey-ui";
+
+function MyComponent() {
+  return (
+    <Button variant="default" size="default">
+      Click me
+    </Button>
+  );
+}
+```
+
+## Development
+
+```bash
+# Build the package
+pnpm build
+
+# Watch mode for development
+pnpm dev
+
+
+# Lint
+pnpm lint
+```
+
+## Structure
+
+```text
+src/
+├── components/     # React components
+├── lib/           # Utility functions
+└── index.ts       # Main entry point
+```
+
+## Adding New Components
+
+### Using shadcn CLI (Recommended)
+
+This package is configured to work with shadcn/ui CLI. You can add components using:
+
+```bash
+cd packages/survey-ui
+pnpm ui:add <component-name>
+```
+
+**Important**: After adding a component, reorganize it into a folder structure:
+
+For example:
+```bash
+pnpm ui:add button
+pnpm ui:organize button
+```
+
+Then export the component from `src/components/index.ts`.
+
+### Manual Component Creation
+
+1. Create a new component directory under `src/components/<component-name>/`
+2. Create `index.tsx` inside that directory
+3. Export the component from `src/components/index.ts`
+4. The component will be available from the main package export
+
+## Component Structure
+
+Components follow this folder structure:
+
+```text
+src/components/
+├── button.tsx
+├── button.stories.tsx
+```
+
+## Theming
+
+This package uses CSS variables for theming. The theme can be customized by modifying `src/styles/globals.css`.
+
+Both light and dark modes are supported out of the box.
+
+## CSS Scoping
+
+By default, this package builds CSS scoped to `#fbjs` for use in the surveys package. This ensures proper specificity and prevents conflicts with preflight CSS.
+
+To build unscoped CSS (e.g., for standalone usage or Storybook), set the `SURVEY_UI_UNSCOPED` environment variable:
+
+```bash
+SURVEY_UI_UNSCOPED=true pnpm build
+```
+
+**Note:** Storybook imports the source CSS directly and compiles it with its own Tailwind config, so it's not affected by this scoping setting.
+
diff --git a/packages/survey-ui/components.json b/packages/survey-ui/components.json
new file mode 100644
index 0000000000..524a1d8409
--- /dev/null
+++ b/packages/survey-ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "ui": "@/components",
+    "utils": "@/lib/utils"
+  },
+  "rsc": false,
+  "style": "new-york",
+  "tailwind": {
+    "baseColor": "slate",
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "tsx": true
+}
diff --git a/packages/survey-ui/package.json b/packages/survey-ui/package.json
new file mode 100644
index 0000000000..9c50389f12
--- /dev/null
+++ b/packages/survey-ui/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "@formbricks/survey-ui",
+  "license": "MIT",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Reusable UI components for Formbricks applications",
+  "homepage": "https://formbricks.com",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formbricks/formbricks"
+  },
+  "sideEffects": false,
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles": "./dist/survey-ui.css"
+  },
+  "scripts": {
+    "dev": "vite build --watch --mode dev",
+    "build": "vite build",
+    "build:dev": "vite build --mode dev",
+    "go": "vite build --watch --mode dev",
+    "lint": "eslint src --fix --ext .ts,.js,.tsx,.jsx",
+    "preview": "vite preview",
+    "clean": "rimraf .turbo node_modules dist coverage",
+    "ui:add": "npx shadcn@latest add",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@formkit/auto-animate": "0.8.2",
+    "@radix-ui/react-checkbox": "1.3.1",
+    "@radix-ui/react-dropdown-menu": "2.1.14",
+    "@radix-ui/react-popover": "1.1.13",
+    "@radix-ui/react-progress": "1.1.8",
+    "@radix-ui/react-radio-group": "1.3.6",
+    "@radix-ui/react-slot": "1.2.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "date-fns": "4.1.0",
+    "isomorphic-dompurify": "2.33.0",
+    "lucide-react": "0.507.0",
+    "react-day-picker": "9.6.7",
+    "tailwind-merge": "3.2.0"
+  },
+  "devDependencies": {
+    "@formbricks/config-typescript": "workspace:*",
+    "@formbricks/eslint-config": "workspace:*",
+    "@storybook/react": "8.5.4",
+    "@storybook/react-vite": "8.5.4",
+    "@tailwindcss/postcss": "4.0.0",
+    "@tailwindcss/vite": "4.1.17",
+    "@types/react": "19.2.1",
+    "@types/react-dom": "19.2.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "rimraf": "6.0.1",
+    "tailwindcss": "4.1.1",
+    "vite": "6.4.1",
+    "vite-plugin-dts": "4.5.3",
+    "vite-tsconfig-paths": "5.1.4",
+    "@vitest/coverage-v8": "3.1.3",
+    "vitest": "3.1.3"
+  }
+}
diff --git a/packages/survey-ui/postcss.config.mjs b/packages/survey-ui/postcss.config.mjs
new file mode 100644
index 0000000000..27ae1c90b5
--- /dev/null
+++ b/packages/survey-ui/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
\ No newline at end of file
diff --git a/packages/survey-ui/src/components/elements/consent.stories.tsx b/packages/survey-ui/src/components/elements/consent.stories.tsx
new file mode 100644
index 0000000000..ecc0e8288f
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/consent.stories.tsx
@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  pickArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { Consent, type ConsentProps } from "./consent";
+
+type StoryProps = ConsentProps & Partial<BaseStylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/Consent",
+  component: Consent,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A consent element that displays a checkbox for users to accept terms, conditions, or agreements.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    checkboxLabel: {
+      control: "text",
+      description: "Label text for the consent checkbox",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "boolean",
+      description: "Whether consent is checked",
+      table: { category: "State" },
+    },
+  },
+  render: createStatefulRender(Consent),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const StylingPlayground: Story = {
+  args: {
+    elementId: "consent-1",
+    inputId: "consent-input-1",
+    headline: "Terms and Conditions",
+    description: "Please read and accept the terms",
+    checkboxLabel: "I agree to the terms and conditions",
+    onChange: () => {},
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, [
+      "inputBgColor",
+      "inputBorderColor",
+      "inputColor",
+      "inputFontSize",
+      "inputFontWeight",
+      "inputWidth",
+      "inputBorderRadius",
+      "inputPaddingX",
+      "inputPaddingY",
+    ]),
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "consent-1",
+    inputId: "consent-input-1",
+    headline: "Terms and Conditions",
+    checkboxLabel: "I agree to the terms and conditions",
+    onChange: () => {},
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "consent-2",
+    inputId: "consent-input-2",
+    headline: "Terms and Conditions",
+    description: "Please read and accept the terms to continue",
+    checkboxLabel: "I agree to the terms and conditions",
+    onChange: () => {},
+  },
+};
+
+export const WithConsent: Story = {
+  args: {
+    elementId: "consent-3",
+    inputId: "consent-input-3",
+    headline: "Terms and Conditions",
+    checkboxLabel: "I agree to the terms and conditions",
+    value: true,
+    onChange: () => {},
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "consent-4",
+    inputId: "consent-input-4",
+    headline: "Terms and Conditions",
+    checkboxLabel: "I agree to the terms and conditions",
+    required: true,
+    onChange: () => {},
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "consent-5",
+    inputId: "consent-input-5",
+    headline: "Terms and Conditions",
+    checkboxLabel: "I agree to the terms and conditions",
+    required: true,
+    errorMessage: "You must accept the terms to continue",
+    onChange: () => {},
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "consent-6",
+    inputId: "consent-input-6",
+    headline: "Terms and Conditions",
+    checkboxLabel: "I agree to the terms and conditions",
+    value: true,
+    disabled: true,
+    onChange: () => {},
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "consent-rtl",
+    inputId: "consent-input-rtl",
+    headline: "الشروط والأحكام",
+    description: "يرجى قراءة الشروط والموافقة عليها",
+    checkboxLabel: "أوافق على الشروط والأحكام",
+    dir: "rtl",
+    onChange: () => {},
+  },
+};
+
+export const RTLWithConsent: Story = {
+  args: {
+    elementId: "consent-rtl-checked",
+    inputId: "consent-input-rtl-checked",
+    headline: "الشروط والأحكام",
+    checkboxLabel: "أوافق على الشروط والأحكام",
+    value: true,
+    dir: "rtl",
+    onChange: () => {},
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <Consent
+        elementId="consent-1"
+        inputId="consent-input-1"
+        headline="Terms and Conditions"
+        description="Please read and accept the terms"
+        checkboxLabel="I agree to the terms and conditions"
+        onChange={() => {}}
+      />
+      <Consent
+        elementId="consent-2"
+        inputId="consent-input-2"
+        headline="Privacy Policy"
+        description="Please review our privacy policy"
+        checkboxLabel="I agree to the privacy policy"
+        value
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/consent.tsx b/packages/survey-ui/src/components/elements/consent.tsx
new file mode 100644
index 0000000000..7cf7bab4f8
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/consent.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { Checkbox } from "@/components/general/checkbox";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { cn } from "@/lib/utils";
+
+/**
+ * Props for the Consent element component
+ */
+export interface ConsentProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the consent checkbox */
+  inputId: string;
+  /** Label text for the consent checkbox */
+  checkboxLabel: string;
+  /** Whether consent is checked */
+  value?: boolean;
+  /** Callback function called when consent changes */
+  onChange: (checked: boolean) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+}
+
+function Consent({
+  elementId,
+  headline,
+  description,
+  inputId,
+  checkboxLabel,
+  value = false,
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<ConsentProps>): React.JSX.Element {
+  const handleCheckboxChange = (checked: boolean): void => {
+    if (disabled) return;
+    onChange(checked);
+  };
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Consent Checkbox */}
+      <div className="relative space-y-2">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+
+        <label
+          htmlFor={`${inputId}-checkbox`}
+          className={cn(
+            "bg-input-bg border-input-border text-input-text w-input px-input-x py-input-y rounded-input flex cursor-pointer items-center gap-3 border p-4 transition-colors",
+            "focus-within:border-ring focus-within:ring-ring/50 font-fontWeight focus-within:shadow-sm",
+            errorMessage && "border-destructive",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+          dir={dir}>
+          <Checkbox
+            id={`${inputId}-checkbox`}
+            checked={value}
+            onCheckedChange={handleCheckboxChange}
+            disabled={disabled}
+            aria-invalid={Boolean(errorMessage)}
+            aria-required={required}
+          />
+          {/* need to use style here because tailwind is not able to use css variables for font size and weight */}
+          <span
+            className="font-input-weight text-input-text flex-1"
+            style={{ fontSize: "var(--fb-input-font-size)" }}
+            dir={dir}>
+            {checkboxLabel}
+          </span>
+        </label>
+      </div>
+    </div>
+  );
+}
+
+export { Consent };
diff --git a/packages/survey-ui/src/components/elements/cta.stories.tsx b/packages/survey-ui/src/components/elements/cta.stories.tsx
new file mode 100644
index 0000000000..874601d034
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/cta.stories.tsx
@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type ButtonStylingOptions,
+  buttonStylingArgTypes,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  elementStylingArgTypes,
+} from "../../lib/story-helpers";
+import { CTA, type CTAProps } from "./cta";
+
+type StoryProps = CTAProps & Partial<BaseStylingOptions & ButtonStylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/CTA",
+  component: CTA,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A Call-to-Action (CTA) element that displays a button. Can optionally open an external URL when clicked.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    buttonLabel: {
+      control: "text",
+      description: "Label text for the CTA button",
+      table: { category: "Content" },
+    },
+    buttonUrl: {
+      control: "text",
+      description: "URL to open when button is clicked (if external)",
+      table: { category: "Content" },
+    },
+    buttonExternal: {
+      control: "boolean",
+      description: "Whether the button opens an external URL",
+      table: { category: "Content" },
+    },
+    buttonVariant: {
+      control: "select",
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link", "custom"],
+      description: "Variant for the button. Must be 'custom' for button styling controls to work.",
+      table: { category: "Button Styling (Only applicable when buttonVariant is 'custom')" },
+    },
+    onClick: {
+      action: () => {
+        alert("clicked");
+      },
+      table: { category: "Events" },
+    },
+    ...elementStylingArgTypes,
+    ...buttonStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  args: {
+    elementId: "cta-1",
+    inputId: "cta-input-1",
+    headline: "Ready to get started?",
+    buttonLabel: "Get Started",
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "cta-2",
+    inputId: "cta-input-2",
+    headline: "Ready to get started?",
+    description: "Click the button below to begin your journey",
+    buttonLabel: "Get Started",
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const ExternalButton: Story = {
+  args: {
+    elementId: "cta-3",
+    inputId: "cta-input-3",
+    headline: "Learn more about us",
+    description: "Visit our website to learn more",
+    buttonLabel: "Visit Website",
+    buttonUrl: "https://example.com",
+    buttonExternal: true,
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "cta-4",
+    inputId: "cta-input-4",
+    headline: "Ready to get started?",
+    buttonLabel: "Get Started",
+    required: true,
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "cta-5",
+    inputId: "cta-input-5",
+    headline: "Ready to get started?",
+    buttonLabel: "Get Started",
+    required: true,
+    errorMessage: "Please click the button to continue",
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "cta-6",
+    inputId: "cta-input-6",
+    headline: "Ready to get started?",
+    buttonLabel: "Get Started",
+    disabled: true,
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "cta-rtl",
+    inputId: "cta-input-rtl",
+    headline: "هل أنت مستعد للبدء؟",
+    description: "انقر على الزر أدناه للبدء",
+    buttonLabel: "ابدأ الآن",
+    dir: "rtl",
+    onClick: () => {
+      alert("clicked");
+    },
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <CTA
+        elementId="cta-1"
+        inputId="cta-input-1"
+        headline="Ready to get started?"
+        description="Click the button below to begin"
+        buttonLabel="Get Started"
+        onClick={() => {
+          alert("clicked");
+        }}
+      />
+      <CTA
+        elementId="cta-2"
+        inputId="cta-input-2"
+        headline="Learn more about us"
+        description="Visit our website"
+        buttonLabel="Visit Website"
+        buttonUrl="https://example.com"
+        buttonExternal
+        onClick={() => {
+          alert("clicked");
+        }}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/cta.tsx b/packages/survey-ui/src/components/elements/cta.tsx
new file mode 100644
index 0000000000..46bcc8df74
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/cta.tsx
@@ -0,0 +1,89 @@
+import { SquareArrowOutUpRightIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/general/button";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+
+/**
+ * Props for the CTA (Call to Action) element component
+ */
+export interface CTAProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the CTA button */
+  inputId: string;
+  /** Label text for the CTA button */
+  buttonLabel: string;
+  /** URL to open when button is clicked (if external button) */
+  buttonUrl?: string;
+  /** Whether the button opens an external URL */
+  buttonExternal?: boolean;
+  /** Callback function called when button is clicked */
+  onClick: () => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** Variant for the button */
+  buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "custom";
+}
+
+function CTA({
+  elementId,
+  headline,
+  description,
+  inputId,
+  buttonLabel,
+  buttonUrl,
+  buttonExternal = false,
+  onClick,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+  buttonVariant = "default",
+}: Readonly<CTAProps>): React.JSX.Element {
+  const handleButtonClick = (): void => {
+    if (disabled) return;
+    onClick();
+
+    if (buttonExternal && buttonUrl) {
+      window.open(buttonUrl, "_blank")?.focus();
+    }
+  };
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* CTA Button */}
+      <div className="relative space-y-2">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+
+        <div className="flex w-full justify-start">
+          <Button
+            id={inputId}
+            type="button"
+            onClick={handleButtonClick}
+            disabled={disabled}
+            className="flex items-center gap-2"
+            variant={buttonVariant}>
+            {buttonLabel}
+            {buttonExternal ? <SquareArrowOutUpRightIcon className="size-4" /> : null}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { CTA };
diff --git a/packages/survey-ui/src/components/elements/date.stories.tsx b/packages/survey-ui/src/components/elements/date.stories.tsx
new file mode 100644
index 0000000000..1392629b22
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/date.stories.tsx
@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type InputLayoutStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { DateElement, type DateElementProps } from "./date";
+
+type StoryProps = DateElementProps &
+  Partial<BaseStylingOptions & Pick<InputLayoutStylingOptions, "inputBorderRadius">> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/Date",
+  component: DateElement,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete date element that combines headline, description, and a date input. Supports date range constraints, validation, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    value: {
+      control: "text",
+      description: "Current date value in ISO format (YYYY-MM-DD)",
+      table: { category: "State" },
+    },
+    minDate: {
+      control: "text",
+      description: "Minimum date allowed (ISO format: YYYY-MM-DD)",
+      table: { category: "Validation" },
+    },
+    maxDate: {
+      control: "text",
+      description: "Maximum date allowed (ISO format: YYYY-MM-DD)",
+      table: { category: "Validation" },
+    },
+    locale: {
+      control: { type: "select" },
+      options: [
+        "en",
+        "de",
+        "fr",
+        "es",
+        "ja",
+        "pt",
+        "pt-BR",
+        "ro",
+        "zh-Hans",
+        "zh-Hant",
+        "nl",
+        "ar",
+        "it",
+        "ru",
+        "uz",
+        "hi",
+      ],
+      description: "Locale code for date formatting (survey language codes: 'en', 'de', 'ar', etc.)",
+      table: { category: "Localization" },
+    },
+  },
+  render: createStatefulRender(DateElement),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "What is your date of birth?",
+    description: "Please select a date",
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...surveyStylingArgTypes,
+    inputBgColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputBorderColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputBorderRadius: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    headline: "What is your date of birth?",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "When would you like to schedule the appointment?",
+    description: "Please select a date for your appointment",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "What is your date of birth?",
+    description: "Please select your date of birth",
+    required: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    headline: "What is your date of birth?",
+    value: "1990-01-15",
+  },
+};
+
+export const WithDateRange: Story = {
+  args: {
+    headline: "Select a date for your event",
+    description: "Please choose a date between today and next year",
+    minDate: new Date().toISOString().split("T")[0],
+    maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).toISOString().split("T")[0],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "What is your date of birth?",
+    description: "Please select your date of birth",
+    errorMessage: "Please select a valid date",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This date field is disabled",
+    description: "You cannot change the date",
+    value: "2024-01-15",
+    disabled: true,
+  },
+};
+
+export const PastDatesOnly: Story = {
+  args: {
+    headline: "When did you start your current job?",
+    description: "Select a date in the past",
+    maxDate: new Date().toISOString().split("T")[0],
+  },
+};
+
+export const FutureDatesOnly: Story = {
+  args: {
+    headline: "When would you like to schedule the meeting?",
+    description: "Select a date in the future",
+    minDate: new Date().toISOString().split("T")[0],
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "ما هو تاريخ ميلادك؟",
+    description: "يرجى اختيار تاريخ",
+    dir: "rtl",
+  },
+};
+
+export const RTLWithValue: Story = {
+  args: {
+    headline: "ما هو تاريخ ميلادك؟",
+    description: "يرجى اختيار تاريخ",
+    value: "1990-01-15",
+    dir: "rtl",
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <DateElement
+        elementId="date-1"
+        inputId="date-1-input"
+        headline="What is your date of birth?"
+        description="Please select your date of birth"
+        onChange={() => {}}
+      />
+      <DateElement
+        elementId="date-2"
+        inputId="date-2-input"
+        headline="When would you like to schedule the appointment?"
+        value="2024-12-25"
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
+
+export const WithLocale: Story = {
+  args: {
+    headline: "What is your date of birth?",
+    description: "Date picker with locale-specific formatting",
+    locale: "en",
+  },
+};
+
+export const LocaleExamples: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">English (en)</h3>
+        <DateElement
+          elementId="date-en"
+          inputId="date-en-input"
+          headline="What is your date of birth?"
+          locale="en"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">German (de)</h3>
+        <DateElement
+          elementId="date-de"
+          inputId="date-de-input"
+          headline="Was ist Ihr Geburtsdatum?"
+          locale="de"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">French (fr)</h3>
+        <DateElement
+          elementId="date-fr"
+          inputId="date-fr-input"
+          headline="Quelle est votre date de naissance ?"
+          locale="fr"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">Spanish (es)</h3>
+        <DateElement
+          elementId="date-es"
+          inputId="date-es-input"
+          headline="¿Cuál es su fecha de nacimiento?"
+          locale="es"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">Japanese (ja)</h3>
+        <DateElement
+          elementId="date-ja"
+          inputId="date-ja-input"
+          headline="生年月日を教えてください"
+          locale="ja"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">Arabic (ar)</h3>
+        <DateElement
+          elementId="date-ar"
+          inputId="date-ar-input"
+          headline="ما هو تاريخ ميلادك؟"
+          locale="ar"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">Russian (ru)</h3>
+        <DateElement
+          elementId="date-ru"
+          inputId="date-ru-input"
+          headline="Какова ваша дата рождения?"
+          locale="ru"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+      <div>
+        <h3 className="mb-4 text-sm font-semibold">Chinese Simplified (zh-Hans)</h3>
+        <DateElement
+          elementId="date-zh"
+          inputId="date-zh-input"
+          headline="您的出生日期是什么？"
+          locale="zh-Hans"
+          value="2024-12-25"
+          onChange={() => {}}
+        />
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/date.tsx b/packages/survey-ui/src/components/elements/date.tsx
new file mode 100644
index 0000000000..d00c2e6e90
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/date.tsx
@@ -0,0 +1,148 @@
+import * as React from "react";
+import { Calendar } from "@/components/general/calendar";
+import { ElementHeader } from "@/components/general/element-header";
+import { getDateFnsLocale } from "@/lib/locale";
+
+interface DateElementProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the date input */
+  inputId: string;
+  /** Current date value in ISO format (YYYY-MM-DD) */
+  value?: string;
+  /** Callback function called when the date value changes */
+  onChange: (value: string) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Minimum date allowed (ISO format: YYYY-MM-DD) */
+  minDate?: string;
+  /** Maximum date allowed (ISO format: YYYY-MM-DD) */
+  maxDate?: string;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the date input is disabled */
+  disabled?: boolean;
+  /** Locale code for date formatting (e.g., "en-US", "de-DE", "fr-FR"). Defaults to browser locale or "en-US" */
+  locale?: string;
+}
+
+function DateElement({
+  elementId,
+  headline,
+  description,
+  inputId,
+  value,
+  onChange,
+  required = false,
+  minDate,
+  maxDate,
+  dir = "auto",
+  disabled = false,
+  locale = "en-US",
+}: Readonly<DateElementProps>): React.JSX.Element {
+  // Initialize date from value string, parsing as local time to avoid timezone issues
+  const [date, setDate] = React.useState<Date | undefined>(() => {
+    if (!value) return undefined;
+    // Parse YYYY-MM-DD format as local date (not UTC)
+    const [year, month, day] = value.split("-").map(Number);
+    return new Date(year, month - 1, day);
+  });
+
+  // Sync date state when value prop changes
+  React.useEffect(() => {
+    if (value) {
+      // Parse YYYY-MM-DD format as local date (not UTC)
+      const [year, month, day] = value.split("-").map(Number);
+      const newDate = new Date(year, month - 1, day);
+      setDate((prevDate) => {
+        // Only update if the date actually changed to avoid unnecessary re-renders
+        if (!prevDate || newDate.getTime() !== prevDate.getTime()) {
+          return newDate;
+        }
+        return prevDate;
+      });
+    } else {
+      setDate(undefined);
+    }
+  }, [value]);
+
+  // Convert Date to ISO string (YYYY-MM-DD) when date changes
+  const handleDateSelect = (selectedDate: Date | undefined): void => {
+    setDate(selectedDate);
+    if (selectedDate) {
+      // Convert to ISO format (YYYY-MM-DD) using local time to avoid timezone issues
+      const year = String(selectedDate.getFullYear());
+      const month = String(selectedDate.getMonth() + 1).padStart(2, "0");
+      const day = String(selectedDate.getDate()).padStart(2, "0");
+      const isoString = `${year}-${month}-${day}`;
+      onChange(isoString);
+    } else {
+      onChange("");
+    }
+  };
+
+  // Convert minDate/maxDate strings to Date objects
+  const minDateObj = minDate ? new Date(minDate) : undefined;
+  const maxDateObj = maxDate ? new Date(maxDate) : undefined;
+
+  // Create disabled function for date restrictions
+  const isDateDisabled = React.useCallback(
+    (dateToCheck: Date): boolean => {
+      if (disabled) return true;
+      if (minDateObj) {
+        const minAtMidnight = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate());
+        const checkAtMidnight = new Date(
+          dateToCheck.getFullYear(),
+          dateToCheck.getMonth(),
+          dateToCheck.getDate()
+        );
+        if (checkAtMidnight < minAtMidnight) return true;
+      }
+      if (maxDateObj) {
+        const maxAtMidnight = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate());
+        const checkAtMidnight = new Date(
+          dateToCheck.getFullYear(),
+          dateToCheck.getMonth(),
+          dateToCheck.getDate()
+        );
+        if (checkAtMidnight > maxAtMidnight) return true;
+      }
+      return false;
+    },
+    [disabled, minDateObj, maxDateObj]
+  );
+
+  // Get locale for date formatting
+  const dateLocale = React.useMemo(() => {
+    return locale ? getDateFnsLocale(locale) : undefined;
+  }, [locale]);
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Calendar - Always visible */}
+      <div className="w-full">
+        <Calendar
+          mode="single"
+          selected={date}
+          captionLayout="dropdown"
+          disabled={isDateDisabled}
+          onSelect={handleDateSelect}
+          locale={dateLocale}
+          className="rounded-input border-input-border bg-input-bg text-input-text shadow-input mx-auto w-full max-w-[25rem] border"
+        />
+      </div>
+    </div>
+  );
+}
+
+export { DateElement };
+export type { DateElementProps };
diff --git a/packages/survey-ui/src/components/elements/file-upload.stories.tsx b/packages/survey-ui/src/components/elements/file-upload.stories.tsx
new file mode 100644
index 0000000000..9658b404b0
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/file-upload.stories.tsx
@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import {
+  type BaseStylingOptions,
+  type InputLayoutStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  pickArgTypes,
+} from "../../lib/story-helpers";
+import { FileUpload, type FileUploadProps, type UploadedFile } from "./file-upload";
+
+type StoryProps = FileUploadProps &
+  Partial<BaseStylingOptions & InputLayoutStylingOptions> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/FileUpload",
+  component: FileUpload,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete file upload element that combines headline, description, and a file upload area with drag-and-drop support. Supports file type restrictions, size limits, multiple files, validation, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+  argTypes: {
+    ...commonArgTypes,
+    value: {
+      control: "object",
+      description: "Array of uploaded files",
+      table: { category: "State" },
+    },
+    allowMultiple: {
+      control: "boolean",
+      description: "Whether multiple files are allowed",
+      table: { category: "Behavior" },
+    },
+    maxSizeInMB: {
+      control: "number",
+      description: "Maximum file size in MB",
+      table: { category: "Validation" },
+    },
+    allowedFileExtensions: {
+      control: "object",
+      description: "Allowed file extensions (e.g., ['.pdf', '.jpg'])",
+      table: { category: "Validation" },
+    },
+    ...elementStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, [
+      "inputBgColor",
+      "inputBorderColor",
+      "inputColor",
+      "inputFontSize",
+      "inputFontWeight",
+      "inputWidth",
+      "inputHeight",
+      "inputBorderRadius",
+      "inputPaddingX",
+      "inputPaddingY",
+    ]),
+  },
+  render: function Render(args: StoryProps) {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    return (
+      <FileUpload
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+      />
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  args: {
+    headline: "Upload your file",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "Upload your resume",
+    description: "Please upload your resume in PDF format",
+  },
+};
+
+export const SingleFile: Story = {
+  args: {
+    headline: "Upload a single file",
+    description: "Select one file to upload",
+    allowMultiple: false,
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    headline: "Upload multiple files",
+    description: "You can upload multiple files at once",
+    allowMultiple: true,
+  },
+};
+
+export const WithFileTypeRestrictions: Story = {
+  args: {
+    headline: "Upload an image",
+    description: "Please upload an image file",
+    allowedFileExtensions: [".jpg", ".jpeg", ".png", ".gif", ".webp"],
+  },
+};
+
+export const WithSizeLimit: Story = {
+  args: {
+    headline: "Upload a document",
+    description: "Maximum file size: 5MB",
+    maxSizeInMB: 5,
+  },
+};
+
+export const WithRestrictions: Story = {
+  args: {
+    headline: "Upload a PDF document",
+    description: "PDF files only, maximum 10MB",
+    allowedFileExtensions: [".pdf"],
+    maxSizeInMB: 10,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "Upload required file",
+    description: "Please upload a file",
+    required: true,
+  },
+};
+
+export const WithUploadedFiles: Story = {
+  args: {
+    headline: "Upload your files",
+    description: "Files you've uploaded",
+    allowMultiple: true,
+    value: [
+      {
+        name: "document.pdf",
+        url: "data:application/pdf;base64,...",
+        size: 1024 * 500, // 500 KB
+      },
+      {
+        name: "image.jpg",
+        url: "data:image/jpeg;base64,...",
+        size: 1024 * 1024 * 2, // 2 MB
+      },
+    ] as UploadedFile[],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "Upload your file",
+    description: "Please upload a file",
+    errorMessage: "Please upload at least one file",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This upload is disabled",
+    description: "You cannot upload files",
+    value: [
+      {
+        name: "existing-file.pdf",
+        url: "data:application/pdf;base64,...",
+        size: 1024 * 300,
+      },
+    ] as UploadedFile[],
+    disabled: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "قم بتحميل ملفك",
+    description: "يرجى اختيار ملف للتحميل",
+    dir: "rtl",
+  },
+};
+
+export const RTLWithFiles: Story = {
+  args: {
+    headline: "قم بتحميل ملفاتك",
+    description: "الملفات التي قمت بتحميلها",
+    allowMultiple: true,
+    value: [
+      {
+        name: "ملف.pdf",
+        url: "data:application/pdf;base64,...",
+        size: 1024 * 500,
+      },
+    ] as UploadedFile[],
+    dir: "rtl",
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <FileUpload
+        elementId="file-1"
+        inputId="file-1-input"
+        headline="Upload your resume"
+        description="PDF format only"
+        allowedFileExtensions={[".pdf"]}
+        onChange={() => {}}
+      />
+      <FileUpload
+        elementId="file-2"
+        inputId="file-2-input"
+        headline="Upload multiple images"
+        description="You can upload multiple images"
+        allowMultiple
+        allowedFileExtensions={[".jpg", ".png", ".gif"]}
+        maxSizeInMB={5}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/file-upload.tsx b/packages/survey-ui/src/components/elements/file-upload.tsx
new file mode 100644
index 0000000000..2674b7c382
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/file-upload.tsx
@@ -0,0 +1,336 @@
+import { Upload, UploadIcon, X } from "lucide-react";
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Input } from "@/components/general/input";
+import { cn } from "@/lib/utils";
+
+/**
+ * Uploaded file information
+ */
+export interface UploadedFile {
+  /** File name */
+  name: string;
+  /** File URL or data URL */
+  url: string;
+  /** File size in bytes */
+  size?: number;
+}
+
+interface FileUploadProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the file input */
+  inputId: string;
+  /** Currently uploaded files */
+  value?: UploadedFile[];
+  /** Callback function called when files change */
+  onChange: (files: UploadedFile[]) => void;
+  /** Callback function called when files are selected (before validation) */
+  onFileSelect?: (files: FileList) => void;
+  /** Whether multiple files are allowed */
+  allowMultiple?: boolean;
+  /** Allowed file extensions (e.g., ['.pdf', '.jpg', '.png']) */
+  allowedFileExtensions?: string[];
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Whether the component is in uploading state */
+  isUploading?: boolean;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the file input is disabled */
+  disabled?: boolean;
+  /** Image URL to display above the headline */
+  imageUrl?: string;
+  /** Video URL to display above the headline */
+  videoUrl?: string;
+  /** Alt text for the image */
+  imageAltText?: string;
+  /** Placeholder text for the file upload */
+  placeholderText?: string;
+}
+
+interface UploadedFileItemProps {
+  file: UploadedFile;
+  index: number;
+  disabled: boolean;
+  onDelete: (index: number, e: React.MouseEvent) => void;
+}
+
+function UploadedFileItem({
+  file,
+  index,
+  disabled,
+  onDelete,
+}: Readonly<UploadedFileItemProps>): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        "border-input-border bg-accent-selected text-input-text rounded-input relative m-1 rounded-md border"
+      )}>
+      <div className="absolute top-0 right-0 m-2">
+        <button
+          type="button"
+          onClick={(e) => {
+            onDelete(index, e);
+          }}
+          disabled={disabled}
+          className={cn(
+            "flex h-5 w-5 cursor-pointer items-center justify-center rounded-md",
+            "bg-background hover:bg-accent",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+          aria-label={`Delete ${file.name}`}>
+          <X className="text-foreground h-5" />
+        </button>
+      </div>
+      <div className="flex flex-col items-center justify-center p-2">
+        <UploadIcon />
+        <p
+          style={{ fontSize: "var(--fb-input-font-size)" }}
+          className="mt-1 w-full overflow-hidden px-2 text-center overflow-ellipsis whitespace-nowrap text-[var(--foreground)]"
+          title={file.name}>
+          {file.name}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface UploadedFilesListProps {
+  files: UploadedFile[];
+  disabled: boolean;
+  onDelete: (index: number, e: React.MouseEvent) => void;
+}
+
+function UploadedFilesList({
+  files,
+  disabled,
+  onDelete,
+}: Readonly<UploadedFilesListProps>): React.JSX.Element | null {
+  if (files.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-2 p-2">
+      {files.map((file, index) => (
+        <UploadedFileItem
+          key={`${file.name}-${file.url}`}
+          file={file}
+          index={index}
+          disabled={disabled}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface UploadAreaProps {
+  inputId: string;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  placeholderText: string;
+  allowMultiple: boolean;
+  acceptAttribute?: string;
+  required: boolean;
+  disabled: boolean;
+  dir: "ltr" | "rtl" | "auto";
+  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onDragOver: (e: React.DragEvent<HTMLLabelElement>) => void;
+  onDrop: (e: React.DragEvent<HTMLLabelElement>) => void;
+  showUploader: boolean;
+}
+
+function UploadArea({
+  inputId,
+  fileInputRef,
+  placeholderText,
+  allowMultiple,
+  acceptAttribute,
+  required,
+  disabled,
+  dir,
+  onFileChange,
+  onDragOver,
+  onDrop,
+  showUploader,
+}: Readonly<UploadAreaProps>): React.JSX.Element | null {
+  if (!showUploader) {
+    return null;
+  }
+
+  return (
+    <label
+      htmlFor={inputId}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      className={cn("block w-full", disabled && "cursor-not-allowed")}>
+      <button
+        type="button"
+        onClick={() => {
+          if (fileInputRef.current) {
+            fileInputRef.current.click();
+          }
+        }}
+        disabled={disabled}
+        className={cn(
+          "flex w-full flex-col items-center justify-center py-6",
+          "hover:cursor-pointer",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+        aria-label="Upload files by clicking or dragging them here">
+        <Upload className="text-input-text h-6" aria-hidden="true" />
+        <span
+          className="text-input-text font-input-weight m-2"
+          style={{ fontSize: "var(--fb-input-font-size)" }}
+          id={`${inputId}-label`}>
+          {placeholderText}
+        </span>
+        <Input
+          ref={fileInputRef}
+          type="file"
+          id={inputId}
+          className="hidden"
+          multiple={allowMultiple}
+          accept={acceptAttribute}
+          onChange={onFileChange}
+          disabled={disabled}
+          required={required}
+          dir={dir}
+          aria-label="File upload"
+          aria-describedby={`${inputId}-label`}
+        />
+      </button>
+    </label>
+  );
+}
+
+function FileUpload({
+  elementId,
+  headline,
+  description,
+  inputId,
+  value = [],
+  onChange,
+  onFileSelect,
+  allowMultiple = false,
+  allowedFileExtensions,
+  required = false,
+  errorMessage,
+  isUploading = false,
+  dir = "auto",
+  disabled = false,
+  imageUrl,
+  videoUrl,
+  imageAltText,
+  placeholderText = "Click or drag to upload files",
+}: Readonly<FileUploadProps>): React.JSX.Element {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Ensure value is always an array
+  const uploadedFiles = Array.isArray(value) ? value : [];
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (!e.target.files || disabled) return;
+    if (onFileSelect) {
+      onFileSelect(e.target.files);
+    }
+    // Reset input to allow selecting the same file again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLLabelElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLLabelElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (onFileSelect && e.dataTransfer.files.length > 0) {
+      onFileSelect(e.dataTransfer.files);
+    }
+  };
+
+  const handleDeleteFile = (index: number, e: React.MouseEvent): void => {
+    e.stopPropagation();
+    const updatedFiles = [...uploadedFiles];
+    updatedFiles.splice(index, 1);
+    onChange(updatedFiles);
+  };
+
+  // Build accept attribute from allowed extensions
+  const acceptAttribute = allowedFileExtensions
+    ?.map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
+    .join(",");
+
+  // Show uploader if uploading, or if multiple files allowed, or if no files uploaded yet
+  const showUploader = isUploading || allowMultiple || uploadedFiles.length === 0;
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      <ElementHeader
+        headline={headline}
+        description={description}
+        required={required}
+        htmlFor={inputId}
+        imageUrl={imageUrl}
+        videoUrl={videoUrl}
+        imageAltText={imageAltText}
+      />
+
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+
+        <div
+          className={cn(
+            "w-input px-input-x py-input-y rounded-input relative flex flex-col items-center justify-center border-2 border-dashed transition-colors",
+            errorMessage ? "border-destructive" : "border-input-border bg-accent",
+            disabled && "cursor-not-allowed opacity-50"
+          )}>
+          <UploadedFilesList files={uploadedFiles} disabled={disabled} onDelete={handleDeleteFile} />
+
+          <div className="w-full">
+            {isUploading ? (
+              <div className="flex animate-pulse items-center justify-center rounded-lg py-4">
+                <p
+                  className="text-muted-foreground font-medium"
+                  style={{ fontSize: "var(--fb-input-font-size)" }}>
+                  Uploading...
+                </p>
+              </div>
+            ) : null}
+
+            <UploadArea
+              inputId={inputId}
+              fileInputRef={fileInputRef}
+              placeholderText={placeholderText}
+              allowMultiple={allowMultiple}
+              acceptAttribute={acceptAttribute}
+              required={required}
+              disabled={disabled}
+              dir={dir}
+              onFileChange={handleFileChange}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              showUploader={showUploader}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { FileUpload };
+export type { FileUploadProps };
diff --git a/packages/survey-ui/src/components/elements/form-field.stories.tsx b/packages/survey-ui/src/components/elements/form-field.stories.tsx
new file mode 100644
index 0000000000..d28f455658
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/form-field.stories.tsx
@@ -0,0 +1,362 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type InputLayoutStylingOptions,
+  type LabelStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+} from "../../lib/story-helpers";
+import { FormField, type FormFieldConfig, type FormFieldProps } from "./form-field";
+
+type StoryProps = FormFieldProps &
+  Partial<BaseStylingOptions & LabelStylingOptions & InputLayoutStylingOptions & { inputShadow: string }> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/FormField",
+  component: FormField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible form field element that can display multiple input fields with different configurations. Replaces Contact Info and Address elements.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    fields: {
+      control: "object",
+      description: "Array of form field configurations",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "object",
+      description: "Current values as a record mapping field IDs to their values",
+      table: { category: "State" },
+    },
+  },
+  render: createStatefulRender(FormField),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+
+// Contact Info fields preset
+const contactInfoFields: FormFieldConfig[] = [
+  { id: "firstName", label: "First Name", placeholder: "First Name", required: true, show: true },
+  { id: "lastName", label: "Last Name", placeholder: "Last Name", required: true, show: true },
+  { id: "email", label: "Email", placeholder: "Email", type: "email", required: true, show: true },
+  { id: "phone", label: "Phone", placeholder: "Phone", type: "tel", required: true, show: true },
+  { id: "company", label: "Company", placeholder: "Company", required: true, show: true },
+];
+
+// Address fields preset
+const addressFields: FormFieldConfig[] = [
+  { id: "addressLine1", label: "Address Line 1", placeholder: "Address Line 1", required: true, show: true },
+  { id: "addressLine2", label: "Address Line 2", placeholder: "Address Line 2", required: true, show: true },
+  { id: "city", label: "City", placeholder: "City", required: true, show: true },
+  { id: "state", label: "State", placeholder: "State", required: true, show: true },
+  { id: "zip", label: "Zip", placeholder: "Zip", required: true, show: true },
+  { id: "country", label: "Country", placeholder: "Country", required: true, show: true },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    elementId: "form-field-1",
+    headline: "Please provide your contact information",
+    description: "We'll use this to contact you",
+    fields: contactInfoFields,
+  },
+  argTypes: {
+    elementHeadlineFontFamily: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineFontSize: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineFontWeight: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineColor: {
+      control: "color",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontFamily: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontSize: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontWeight: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionColor: {
+      control: "color",
+      table: { category: "Element Styling" },
+    },
+    labelFontFamily: {
+      control: "text",
+      table: { category: "Label Styling" },
+    },
+    labelFontSize: {
+      control: "text",
+      table: { category: "Label Styling" },
+    },
+    labelFontWeight: {
+      control: "text",
+      table: { category: "Label Styling" },
+    },
+    labelColor: {
+      control: "color",
+      table: { category: "Label Styling" },
+    },
+    inputWidth: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputHeight: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputBgColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputBorderColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputBorderRadius: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputFontFamily: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputFontSize: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputFontWeight: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputColor: {
+      control: "color",
+      table: { category: "Input Styling" },
+    },
+    inputPaddingX: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputPaddingY: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    inputShadow: {
+      control: "text",
+      table: { category: "Input Styling" },
+    },
+    brandColor: {
+      control: "color",
+      table: { category: "Survey Styling" },
+    },
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "form-field-1",
+    headline: "Please provide your contact information",
+    fields: contactInfoFields,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "form-field-2",
+    headline: "Please provide your contact information",
+    description: "We'll use this to contact you about your inquiry",
+    fields: contactInfoFields,
+  },
+};
+
+export const ContactInfo: Story = {
+  args: {
+    elementId: "form-field-contact",
+    headline: "Contact Information",
+    description: "Please provide your contact details",
+    fields: contactInfoFields,
+  },
+};
+
+export const Address: Story = {
+  args: {
+    elementId: "form-field-address",
+    headline: "Shipping Address",
+    description: "Please provide your shipping address",
+    fields: addressFields,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "form-field-3",
+    headline: "Please provide your contact information",
+    fields: contactInfoFields,
+    required: true,
+  },
+};
+
+export const WithValues: Story = {
+  args: {
+    elementId: "form-field-4",
+    headline: "Please provide your contact information",
+    fields: contactInfoFields,
+    value: {
+      firstName: "John",
+      lastName: "Doe",
+      email: "john.doe@example.com",
+      phone: "+1234567890",
+      company: "Acme Inc.",
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "form-field-5",
+    headline: "Please provide your contact information",
+    fields: contactInfoFields,
+    required: true,
+    errorMessage: "Please fill in all required fields",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "form-field-6",
+    headline: "Please provide your contact information",
+    fields: contactInfoFields,
+    disabled: true,
+    value: {
+      firstName: "John",
+      lastName: "Doe",
+      email: "john.doe@example.com",
+    },
+  },
+};
+
+export const PartialFields: Story = {
+  args: {
+    elementId: "form-field-7",
+    headline: "Basic Information",
+    fields: [
+      { id: "firstName", label: "First Name", placeholder: "First Name", required: true, show: true },
+      { id: "lastName", label: "Last Name", placeholder: "Last Name", required: true, show: true },
+      { id: "email", label: "Email", placeholder: "Email", type: "email", required: false, show: true },
+      {
+        id: "phone",
+        label: "Phone",
+        placeholder: "Phone (optional)",
+        type: "tel",
+        required: false,
+        show: false,
+      },
+    ],
+  },
+};
+
+export const OptionalFields: Story = {
+  args: {
+    elementId: "form-field-8",
+    headline: "Optional Information",
+    fields: [
+      { id: "firstName", label: "First Name", placeholder: "First Name", required: false, show: true },
+      { id: "lastName", label: "Last Name", placeholder: "Last Name", required: false, show: true },
+      { id: "email", label: "Email", placeholder: "Email", type: "email", required: false, show: true },
+    ],
+    required: false,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "form-field-rtl",
+    headline: "يرجى تقديم معلومات الاتصال الخاصة بك",
+    description: "سنستخدم هذا للاتصال بك",
+    dir: "rtl",
+    fields: [
+      { id: "firstName", label: "الاسم الأول", placeholder: "الاسم الأول", required: true, show: true },
+      { id: "lastName", label: "اسم العائلة", placeholder: "اسم العائلة", required: true, show: true },
+      {
+        id: "email",
+        label: "البريد الإلكتروني",
+        placeholder: "البريد الإلكتروني",
+        type: "email",
+        required: true,
+        show: true,
+      },
+    ],
+  },
+};
+
+export const RTLWithValues: Story = {
+  args: {
+    elementId: "form-field-rtl-values",
+    dir: "rtl",
+    headline: "يرجى تقديم معلومات الاتصال الخاصة بك",
+    fields: [
+      { id: "firstName", label: "الاسم الأول", placeholder: "الاسم الأول", required: true, show: true },
+      { id: "lastName", label: "اسم العائلة", placeholder: "اسم العائلة", required: true, show: true },
+      {
+        id: "email",
+        label: "البريد الإلكتروني",
+        placeholder: "البريد الإلكتروني",
+        type: "email",
+        required: true,
+        show: true,
+      },
+    ],
+    value: {
+      firstName: "أحمد",
+      lastName: "محمد",
+      email: "ahmed@example.com",
+    },
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <FormField
+        elementId="form-field-1"
+        headline="Contact Information"
+        description="Please provide your contact details"
+        fields={contactInfoFields}
+        onChange={() => {}}
+      />
+      <FormField
+        elementId="form-field-2"
+        headline="Shipping Address"
+        description="Where should we ship your order?"
+        fields={addressFields}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/form-field.tsx b/packages/survey-ui/src/components/elements/form-field.tsx
new file mode 100644
index 0000000000..ad37f47543
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/form-field.tsx
@@ -0,0 +1,140 @@
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Input } from "@/components/general/input";
+import { Label } from "@/components/general/label";
+
+/**
+ * Form field configuration
+ */
+export interface FormFieldConfig {
+  /** Unique identifier for the field */
+  id: string;
+  /** Label text for the field */
+  label: string;
+  /** Placeholder text for the input */
+  placeholder?: string;
+  /** Input type (text, email, tel, number, url, etc.) */
+  type?: "text" | "email" | "tel" | "number" | "url";
+  /** Whether this field is required */
+  required?: boolean;
+  /** Whether this field should be shown */
+  show?: boolean;
+}
+
+interface FormFieldProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Array of form field configurations */
+  fields: FormFieldConfig[];
+  /** Current values as a record mapping field IDs to their values */
+  value?: Record<string, string>;
+  /** Callback function called when any field value changes */
+  onChange: (value: Record<string, string>) => void;
+  /** Whether the entire form is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the controls are disabled */
+  disabled?: boolean;
+}
+
+function FormField({
+  elementId,
+  headline,
+  description,
+  fields,
+  value = {},
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<FormFieldProps>): React.JSX.Element {
+  // Ensure value is always an object
+  const currentValues = React.useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- value can be undefined
+    return value ?? {};
+  }, [value]);
+
+  // Determine if a field is required
+  const isFieldRequired = (field: FormFieldConfig): boolean => {
+    if (field.required) {
+      return true;
+    }
+
+    // If all fields are optional and the form is required, then fields should be required
+    const visibleFields = fields.filter((f) => f.show !== false);
+    const allOptional = visibleFields.every((f) => !f.required);
+    if (allOptional && required) {
+      return true;
+    }
+
+    return false;
+  };
+
+  // Handle field value change
+  const handleFieldChange = (fieldId: string, fieldValue: string): void => {
+    onChange({
+      ...currentValues,
+      [fieldId]: fieldValue,
+    });
+  };
+
+  // Get visible fields
+  const visibleFields = fields.filter((field) => field.show !== false);
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} />
+
+      {/* Form Fields */}
+      <div className="relative space-y-3">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        {visibleFields.map((field) => {
+          const fieldRequired = isFieldRequired(field);
+          const fieldValue = currentValues[field.id] ?? "";
+          const fieldInputId = `${elementId}-${field.id}`;
+
+          // Determine input type
+          let inputType: "text" | "email" | "tel" | "number" | "url" = field.type ?? "text";
+          if (field.id === "email" && !field.type) {
+            inputType = "email";
+          } else if (field.id === "phone" && !field.type) {
+            inputType = "tel";
+          }
+
+          return (
+            <div key={field.id} className="space-y-2">
+              <Label htmlFor={fieldInputId} variant="default">
+                {fieldRequired ? `${field.label}*` : field.label}
+              </Label>
+              <Input
+                id={fieldInputId}
+                type={inputType}
+                value={fieldValue}
+                onChange={(e) => {
+                  handleFieldChange(field.id, e.target.value);
+                }}
+                required={fieldRequired}
+                disabled={disabled}
+                dir={dir}
+                aria-invalid={Boolean(errorMessage) || undefined}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { FormField };
+export type { FormFieldProps };
diff --git a/packages/survey-ui/src/components/elements/matrix.stories.tsx b/packages/survey-ui/src/components/elements/matrix.stories.tsx
new file mode 100644
index 0000000000..30925d1be8
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/matrix.stories.tsx
@@ -0,0 +1,307 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type InputLayoutStylingOptions,
+  type LabelStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  labelStylingArgTypes,
+  pickArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { Matrix, type MatrixOption, type MatrixProps } from "./matrix";
+
+type StoryProps = MatrixProps &
+  Partial<BaseStylingOptions & LabelStylingOptions & InputLayoutStylingOptions> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/Matrix",
+  component: Matrix,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete matrix element that combines headline, description, and a table with rows and columns. Each row can have one selected column value. Supports validation and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    rows: {
+      control: "object",
+      description: "Array of row options (left side)",
+      table: { category: "Content" },
+    },
+    columns: {
+      control: "object",
+      description: "Array of column options (top header)",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "object",
+      description: "Record mapping row ID to column ID",
+      table: { category: "State" },
+    },
+  },
+  render: createStatefulRender(Matrix),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+
+const defaultRows: MatrixOption[] = [
+  { id: "row-1", label: "Row 1" },
+  { id: "row-2", label: "Row 2" },
+  { id: "row-3", label: "Row 3" },
+];
+
+const defaultColumns: MatrixOption[] = [
+  { id: "col-1", label: "Column 1" },
+  { id: "col-2", label: "Column 2" },
+  { id: "col-3", label: "Column 3" },
+  { id: "col-4", label: "Column 4" },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "Rate each item",
+    description: "Select a value for each row",
+    rows: defaultRows,
+    columns: defaultColumns,
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...labelStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, ["inputBgColor", "inputBorderColor"]),
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "matrix-default",
+    inputId: "matrix-default-input",
+    headline: "Rate each item",
+    rows: defaultRows,
+    columns: defaultColumns,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "matrix-with-description",
+    inputId: "matrix-with-description-input",
+    headline: "How satisfied are you with each feature?",
+    description: "Please rate each feature on a scale from 1 to 5",
+    rows: [
+      { id: "feature-1", label: "Feature 1" },
+      { id: "feature-2", label: "Feature 2" },
+      { id: "feature-3", label: "Feature 3" },
+    ],
+    columns: [
+      { id: "1", label: "1" },
+      { id: "2", label: "2" },
+      { id: "3", label: "3" },
+      { id: "4", label: "4" },
+      { id: "5", label: "5" },
+    ],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "matrix-required",
+    inputId: "matrix-required-input",
+    headline: "Rate each item",
+    description: "Please select a value for each row",
+    rows: defaultRows,
+    columns: defaultColumns,
+    required: true,
+  },
+};
+
+export const WithSelections: Story = {
+  args: {
+    elementId: "matrix-selections",
+    inputId: "matrix-selections-input",
+    headline: "Rate each item",
+    description: "Select a value for each row",
+    rows: defaultRows,
+    columns: defaultColumns,
+    value: {
+      "row-1": "col-2",
+      "row-2": "col-3",
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "matrix-error",
+    inputId: "matrix-error-input",
+    headline: "Rate each item",
+    description: "Please select a value for each row",
+    rows: defaultRows,
+    columns: defaultColumns,
+    errorMessage: "Please complete all rows",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "matrix-disabled",
+    inputId: "matrix-disabled-input",
+    headline: "This element is disabled",
+    description: "You cannot change the selection",
+    rows: defaultRows,
+    columns: defaultColumns,
+    value: {
+      "row-1": "col-2",
+      "row-2": "col-3",
+    },
+    disabled: true,
+  },
+};
+
+export const RatingScale: Story = {
+  args: {
+    elementId: "matrix-rating-scale",
+    inputId: "matrix-rating-scale-input",
+    headline: "Rate your experience",
+    description: "How would you rate each aspect?",
+    rows: [
+      { id: "quality", label: "Quality" },
+      { id: "service", label: "Service" },
+      { id: "value", label: "Value for Money" },
+      { id: "support", label: "Customer Support" },
+    ],
+    columns: [
+      { id: "poor", label: "Poor" },
+      { id: "fair", label: "Fair" },
+      { id: "good", label: "Good" },
+      { id: "very-good", label: "Very Good" },
+      { id: "excellent", label: "Excellent" },
+    ],
+  },
+};
+
+export const NumericScale: Story = {
+  args: {
+    elementId: "matrix-numeric-scale",
+    inputId: "matrix-numeric-scale-input",
+    headline: "Rate from 0 to 10",
+    description: "Select a number for each item",
+    rows: [
+      { id: "item-1", label: "Item 1" },
+      { id: "item-2", label: "Item 2" },
+      { id: "item-3", label: "Item 3" },
+    ],
+    columns: [
+      { id: "0", label: "0" },
+      { id: "1", label: "1" },
+      { id: "2", label: "2" },
+      { id: "3", label: "3" },
+      { id: "4", label: "4" },
+      { id: "5", label: "5" },
+      { id: "6", label: "6" },
+      { id: "7", label: "7" },
+      { id: "8", label: "8" },
+      { id: "9", label: "9" },
+      { id: "10", label: "10" },
+    ],
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "matrix-rtl",
+    inputId: "matrix-rtl-input",
+    headline: "قيم كل عنصر",
+    description: "اختر قيمة لكل صف",
+    dir: "rtl",
+    rows: [
+      { id: "row-1", label: "الصف الأول" },
+      { id: "row-2", label: "الصف الثاني" },
+      { id: "row-3", label: "الصف الثالث" },
+    ],
+    columns: [
+      { id: "col-1", label: "عمود 1" },
+      { id: "col-2", label: "عمود 2" },
+      { id: "col-3", label: "عمود 3" },
+      { id: "col-4", label: "عمود 4" },
+    ],
+  },
+};
+
+export const RTLWithSelections: Story = {
+  args: {
+    elementId: "matrix-rtl-selections",
+    inputId: "matrix-rtl-selections-input",
+    dir: "rtl",
+    headline: "قيم كل عنصر",
+    description: "يرجى اختيار قيمة لكل صف",
+    rows: [
+      { id: "quality", label: "الجودة" },
+      { id: "service", label: "الخدمة" },
+      { id: "value", label: "القيمة" },
+    ],
+    columns: [
+      { id: "poor", label: "ضعيف" },
+      { id: "fair", label: "مقبول" },
+      { id: "good", label: "جيد" },
+      { id: "very-good", label: "جيد جداً" },
+      { id: "excellent", label: "ممتاز" },
+    ],
+    value: {
+      quality: "good",
+      service: "very-good",
+    },
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <Matrix
+        elementId="matrix-1"
+        inputId="matrix-1-input"
+        headline="Rate each item"
+        description="Select a value for each row"
+        rows={defaultRows}
+        columns={defaultColumns}
+        onChange={() => {}}
+      />
+      <Matrix
+        elementId="matrix-2"
+        inputId="matrix-2-input"
+        headline="How satisfied are you?"
+        rows={[
+          { id: "feature-1", label: "Feature 1" },
+          { id: "feature-2", label: "Feature 2" },
+        ]}
+        columns={[
+          { id: "1", label: "1" },
+          { id: "2", label: "2" },
+          { id: "3", label: "3" },
+          { id: "4", label: "4" },
+          { id: "5", label: "5" },
+        ]}
+        value={{
+          "feature-1": "4",
+          "feature-2": "5",
+        }}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/matrix.tsx b/packages/survey-ui/src/components/elements/matrix.tsx
new file mode 100644
index 0000000000..2eb050045d
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/matrix.tsx
@@ -0,0 +1,166 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Label } from "@/components/general/label";
+import { RadioGroupItem } from "@/components/general/radio-group";
+import { cn } from "@/lib/utils";
+
+/**
+ * Option for matrix element rows and columns
+ */
+export interface MatrixOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** Display label for the option */
+  label: string;
+}
+
+interface MatrixProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the matrix group */
+  inputId: string;
+  /** Array of row options (left side) */
+  rows: MatrixOption[];
+  /** Array of column options (top header) */
+  columns: MatrixOption[];
+  /** Currently selected values: Record mapping row ID to column ID */
+  value?: Record<string, string>;
+  /** Callback function called when selection changes */
+  onChange: (value: Record<string, string>) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the options are disabled */
+  disabled?: boolean;
+}
+
+function Matrix({
+  elementId,
+  headline,
+  description,
+  inputId,
+  rows,
+  columns,
+  value = {},
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<MatrixProps>): React.JSX.Element {
+  // Ensure value is always an object (value already has default of {})
+  const selectedValues = value;
+
+  // Check which rows have errors (no selection when required)
+  const hasError = Boolean(errorMessage);
+  const rowsWithErrors = hasError && required ? rows.filter((row) => !selectedValues[row.id]) : [];
+
+  const handleRowChange = (rowId: string, columnId: string): void => {
+    // Toggle: if same column is selected, deselect it
+    if (selectedValues[rowId] === columnId) {
+      // Create new object without the rowId property
+      const { [rowId]: _, ...rest } = selectedValues;
+      onChange(rest);
+    } else {
+      onChange({ ...selectedValues, [rowId]: columnId });
+    }
+  };
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Matrix Table */}
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+
+        {/* Table container with overflow for mobile */}
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            {/* Column headers */}
+            <thead>
+              <tr>
+                <th className="p-2 text-left" />
+                {columns.map((column) => (
+                  <th key={column.id} className="p-2 text-center font-normal">
+                    <Label className="justify-center">{column.label}</Label>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            {/* Rows */}
+            <tbody>
+              {rows.map((row, index) => {
+                const rowGroupId = `${inputId}-row-${row.id}`;
+                const selectedColumnId = selectedValues[row.id];
+                const rowHasError = rowsWithErrors.includes(row);
+                const baseBgColor = index % 2 === 0 ? "bg-input-bg" : "bg-transparent";
+
+                return (
+                  <RadioGroupPrimitive.Root
+                    key={row.id}
+                    asChild
+                    value={selectedColumnId}
+                    onValueChange={(newColumnId) => {
+                      handleRowChange(row.id, newColumnId);
+                    }}
+                    disabled={disabled}
+                    required={required}
+                    aria-invalid={Boolean(errorMessage)}>
+                    <tr className={cn("relative", baseBgColor, rowHasError ? "bg-destructive-muted" : "")}>
+                      {/* Row label */}
+                      <th scope="row" className={cn("p-2 align-middle", !rowHasError && "rounded-l-input")}>
+                        <div className="flex flex-col gap-0 leading-none">
+                          <Label>{row.label}</Label>
+                          {rowHasError ? (
+                            <span className="text-destructive text-xs font-normal">Select one option</span>
+                          ) : null}
+                        </div>
+                      </th>
+                      {/* Column options for this row */}
+                      {columns.map((column, colIndex) => {
+                        const cellId = `${rowGroupId}-${column.id}`;
+                        const isLastColumn = colIndex === columns.length - 1;
+
+                        return (
+                          <td
+                            key={column.id}
+                            className={cn(
+                              "p-2 text-center align-middle",
+                              isLastColumn && !rowHasError && "rounded-r-input"
+                            )}>
+                            <Label htmlFor={cellId} className="flex cursor-pointer justify-center">
+                              <RadioGroupItem
+                                value={column.id}
+                                id={cellId}
+                                disabled={disabled}
+                                aria-label={`${row.label}-${column.label}`}
+                              />
+                            </Label>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  </RadioGroupPrimitive.Root>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Matrix };
+export type { MatrixProps };
diff --git a/packages/survey-ui/src/components/elements/multi-select.stories.tsx b/packages/survey-ui/src/components/elements/multi-select.stories.tsx
new file mode 100644
index 0000000000..c3c05bc8ab
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/multi-select.stories.tsx
@@ -0,0 +1,353 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+import {
+  type BaseStylingOptions,
+  type CheckboxInputStylingOptions,
+  type LabelStylingOptions,
+  type OptionStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  elementStylingArgTypes,
+  labelStylingArgTypes,
+  optionStylingArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { MultiSelect, type MultiSelectOption, type MultiSelectProps } from "./multi-select";
+
+type StoryProps = MultiSelectProps &
+  Partial<BaseStylingOptions & LabelStylingOptions & OptionStylingOptions & CheckboxInputStylingOptions> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/MultiSelect",
+  component: MultiSelect,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete multi-select element that combines headline, description, and checkbox options. Supports multiple selections, validation, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    options: {
+      control: "object",
+      description: "Array of options to choose from",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "object",
+      description: "Array of selected option IDs",
+      table: { category: "State" },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["list", "dropdown"],
+      description: "Display variant: 'list' shows checkboxes, 'dropdown' shows a dropdown menu",
+      table: { category: "Layout" },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for dropdown button when no options are selected",
+      table: { category: "Content" },
+    },
+  },
+  render: function Render(args: StoryProps) {
+    const [value, setValue] = useState(args.value);
+    const [otherValue, setOtherValue] = useState(args.otherValue);
+    const handleOtherValueChange = (v: string) => {
+      setOtherValue(v);
+      args.onOtherValueChange?.(v);
+    };
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    return (
+      <MultiSelect
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+        otherValue={otherValue}
+        onOtherValueChange={handleOtherValueChange}
+      />
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+const defaultOptions: MultiSelectOption[] = [
+  { id: "option-1", label: "Option 1" },
+  { id: "option-2", label: "Option 2" },
+  { id: "option-3", label: "Option 3" },
+  { id: "option-4", label: "Option 4" },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "Which features do you use?",
+    description: "Select all that apply",
+    options: defaultOptions,
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...labelStylingArgTypes,
+    ...optionStylingArgTypes,
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    headline: "Which features do you use?",
+    options: defaultOptions,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "What programming languages do you know?",
+    description: "Select all programming languages you're familiar with",
+    options: [
+      { id: "js", label: "JavaScript" },
+      { id: "ts", label: "TypeScript" },
+      { id: "python", label: "Python" },
+      { id: "java", label: "Java" },
+      { id: "go", label: "Go" },
+      { id: "rust", label: "Rust" },
+    ],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "Select your interests",
+    description: "Please select at least one option",
+    options: [
+      { id: "tech", label: "Technology" },
+      { id: "design", label: "Design" },
+      { id: "marketing", label: "Marketing" },
+      { id: "sales", label: "Sales" },
+    ],
+    required: true,
+  },
+};
+
+export const WithSelections: Story = {
+  args: {
+    headline: "Which features do you use?",
+    description: "Select all that apply",
+    options: defaultOptions,
+    value: ["option-1", "option-3"],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "Select your preferences",
+    description: "Please select at least one option",
+    options: [
+      { id: "email", label: "Email notifications" },
+      { id: "sms", label: "SMS notifications" },
+      { id: "push", label: "Push notifications" },
+    ],
+    errorMessage: "Please select at least one option",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This element is disabled",
+    description: "You cannot change the selection",
+    options: defaultOptions,
+    value: ["option-2"],
+    disabled: true,
+  },
+};
+
+export const ManyOptions: Story = {
+  args: {
+    headline: "Select all that apply",
+    description: "Choose as many as you like",
+    options: [
+      { id: "1", label: "Option 1" },
+      { id: "2", label: "Option 2" },
+      { id: "3", label: "Option 3" },
+      { id: "4", label: "Option 4" },
+      { id: "5", label: "Option 5" },
+      { id: "6", label: "Option 6" },
+      { id: "7", label: "Option 7" },
+      { id: "8", label: "Option 8" },
+      { id: "9", label: "Option 9" },
+      { id: "10", label: "Option 10" },
+    ],
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "ما هي الميزات التي تستخدمها؟",
+    dir: "rtl",
+    description: "اختر كل ما ينطبق",
+    options: [
+      { id: "opt-1", label: "الخيار الأول" },
+      { id: "opt-2", label: "الخيار الثاني" },
+      { id: "opt-3", label: "الخيار الثالث" },
+      { id: "opt-4", label: "الخيار الرابع" },
+    ],
+  },
+};
+
+export const RTLWithSelections: Story = {
+  args: {
+    headline: "ما هي اهتماماتك؟",
+    dir: "rtl",
+    description: "يرجى اختيار جميع الخيارات المناسبة",
+    options: [
+      { id: "tech", label: "التكنولوجيا" },
+      { id: "design", label: "التصميم" },
+      { id: "marketing", label: "التسويق" },
+      { id: "sales", label: "المبيعات" },
+    ],
+    value: ["tech", "design"],
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <MultiSelect
+        elementId="features"
+        inputId="features-input"
+        headline="Which features do you use?"
+        description="Select all that apply"
+        options={defaultOptions}
+        onChange={() => {}}
+      />
+      <MultiSelect
+        elementId="languages"
+        inputId="languages-input"
+        headline="What programming languages do you know?"
+        options={[
+          { id: "js", label: "JavaScript" },
+          { id: "ts", label: "TypeScript" },
+          { id: "python", label: "Python" },
+        ]}
+        value={["js", "ts"]}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
+
+export const Dropdown: Story = {
+  args: {
+    headline: "Which features do you use?",
+    description: "Select all that apply",
+    options: defaultOptions,
+    variant: "dropdown",
+    placeholder: "Select options...",
+  },
+};
+
+export const DropdownWithSelections: Story = {
+  args: {
+    headline: "Which features do you use?",
+    description: "Select all that apply",
+    options: defaultOptions,
+    value: ["option-1", "option-3"],
+    variant: "dropdown",
+    placeholder: "Select options...",
+  },
+};
+
+export const WithOtherOption: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string[]>([]);
+    const [otherValue, setOtherValue] = React.useState<string>("");
+
+    return (
+      <div className="w-[600px]">
+        <MultiSelect
+          elementId="multi-select-other"
+          inputId="multi-select-other-input"
+          headline="Which features do you use?"
+          description="Select all that apply"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithOtherOptionSelected: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string[]>(["option-1", "other"]);
+    const [otherValue, setOtherValue] = React.useState<string>("Custom feature");
+
+    return (
+      <div className="w-[600px]">
+        <MultiSelect
+          elementId="multi-select-other-selected"
+          inputId="multi-select-other-selected-input"
+          headline="Which features do you use?"
+          description="Select all that apply"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const DropdownWithOtherOption: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string[]>([]);
+    const [otherValue, setOtherValue] = React.useState<string>("");
+
+    return (
+      <div className="w-[600px]">
+        <MultiSelect
+          elementId="multi-select-dropdown-other"
+          inputId="multi-select-dropdown-other-input"
+          headline="Which features do you use?"
+          description="Select all that apply"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          variant="dropdown"
+          placeholder="Select options..."
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/survey-ui/src/components/elements/multi-select.tsx b/packages/survey-ui/src/components/elements/multi-select.tsx
new file mode 100644
index 0000000000..129860fd32
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/multi-select.tsx
@@ -0,0 +1,549 @@
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/general/button";
+import { Checkbox } from "@/components/general/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/general/dropdown-menu";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Input } from "@/components/general/input";
+import { cn } from "@/lib/utils";
+
+/**
+ * Option for multi-select element
+ */
+export interface MultiSelectOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** Display label for the option */
+  label: string;
+}
+
+/**
+ * Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content)
+ */
+type TextDirection = "ltr" | "rtl" | "auto";
+
+interface MultiSelectProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the multi-select group */
+  inputId: string;
+  /** Array of options to choose from */
+  options: MultiSelectOption[];
+  /** Currently selected option IDs */
+  value?: string[];
+  /** Callback function called when selection changes */
+  onChange: (value: string[]) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display below the options */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: TextDirection;
+  /** Whether the options are disabled */
+  disabled?: boolean;
+  /** Display variant: 'list' shows checkboxes, 'dropdown' shows a dropdown menu */
+  variant?: "list" | "dropdown";
+  /** Placeholder text for dropdown button when no options are selected */
+  placeholder?: string;
+  /** ID for the 'other' option that allows custom input */
+  otherOptionId?: string;
+  /** Label for the 'other' option */
+  otherOptionLabel?: string;
+  /** Placeholder text for the 'other' input field */
+  otherOptionPlaceholder?: string;
+  /** Custom value entered in the 'other' input field */
+  otherValue?: string;
+  /** Callback when the 'other' input value changes */
+  onOtherValueChange?: (value: string) => void;
+  /** IDs of options that should be exclusive (selecting them deselects all others) */
+  exclusiveOptionIds?: string[];
+}
+
+// Shared className for option labels
+const optionLabelClassName = "font-option text-option font-option-weight text-option-label";
+
+// Shared className for option containers
+const getOptionContainerClassName = (isSelected: boolean, isDisabled: boolean): string =>
+  cn(
+    "relative flex flex-col border transition-colors outline-none",
+    "rounded-option px-option-x py-option-y",
+    isSelected ? "bg-option-selected-bg border-brand" : "bg-option-bg border-option-border",
+    "focus-within:border-brand focus-within:bg-option-selected-bg",
+    "hover:bg-option-hover-bg",
+    isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  );
+
+interface DropdownVariantProps {
+  inputId: string;
+  options: MultiSelectOption[];
+  selectedValues: string[];
+  handleOptionAdd: (optionId: string) => void;
+  handleOptionRemove: (optionId: string) => void;
+  disabled: boolean;
+  headline: string;
+  errorMessage?: string;
+  displayText: string;
+  hasOtherOption: boolean;
+  otherOptionId?: string;
+  isOtherSelected: boolean;
+  otherOptionLabel: string;
+  otherValue: string;
+  handleOtherInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  otherOptionPlaceholder: string;
+  dir: TextDirection;
+  otherInputRef: React.RefObject<HTMLInputElement | null>;
+  required: boolean;
+}
+
+function DropdownVariant({
+  inputId,
+  options,
+  selectedValues,
+  handleOptionAdd,
+  handleOptionRemove,
+  disabled,
+  headline,
+  errorMessage,
+  displayText,
+  hasOtherOption,
+  otherOptionId,
+  isOtherSelected,
+  otherOptionLabel,
+  otherValue,
+  handleOtherInputChange,
+  otherOptionPlaceholder,
+  dir,
+  otherInputRef,
+  required,
+}: Readonly<DropdownVariantProps>): React.JSX.Element {
+  const getIsRequired = (): boolean => {
+    const responseValues = [...selectedValues];
+    if (isOtherSelected && otherValue) {
+      responseValues.push(otherValue);
+    }
+    const hasResponse = Array.isArray(responseValues) && responseValues.length > 0;
+    return required && hasResponse ? false : required;
+  };
+
+  const isRequired = getIsRequired();
+
+  const handleOptionToggle = (optionId: string) => {
+    if (selectedValues.includes(optionId)) {
+      handleOptionRemove(optionId);
+    } else {
+      handleOptionAdd(optionId);
+    }
+  };
+
+  return (
+    <>
+      <ElementError errorMessage={errorMessage} dir={dir} />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            disabled={disabled}
+            className="rounded-input w-full justify-between"
+            aria-invalid={Boolean(errorMessage)}
+            aria-label={headline}>
+            <span className="truncate">{displayText}</span>
+            <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-[var(--radix-dropdown-menu-trigger-width)]" align="start">
+          {options
+            .filter((option) => option.id !== "none")
+            .map((option) => {
+              const isChecked = selectedValues.includes(option.id);
+              const optionId = `${inputId}-${option.id}`;
+
+              return (
+                <DropdownMenuCheckboxItem
+                  key={option.id}
+                  id={optionId}
+                  checked={isChecked}
+                  onCheckedChange={() => {
+                    handleOptionToggle(option.id);
+                  }}
+                  disabled={disabled}>
+                  <span className={optionLabelClassName}>{option.label}</span>
+                </DropdownMenuCheckboxItem>
+              );
+            })}
+          {hasOtherOption && otherOptionId ? (
+            <DropdownMenuCheckboxItem
+              id={`${inputId}-${otherOptionId}`}
+              checked={isOtherSelected}
+              onCheckedChange={() => {
+                if (isOtherSelected) {
+                  handleOptionRemove(otherOptionId);
+                } else {
+                  handleOptionAdd(otherOptionId);
+                }
+              }}
+              disabled={disabled}>
+              <span className={optionLabelClassName}>{otherOptionLabel}</span>
+            </DropdownMenuCheckboxItem>
+          ) : null}
+          {options
+            .filter((option) => option.id === "none")
+            .map((option) => {
+              const isChecked = selectedValues.includes(option.id);
+              const optionId = `${inputId}-${option.id}`;
+
+              return (
+                <DropdownMenuCheckboxItem
+                  key={option.id}
+                  id={optionId}
+                  checked={isChecked}
+                  onCheckedChange={() => {
+                    handleOptionToggle(option.id);
+                  }}
+                  disabled={disabled}>
+                  <span className={optionLabelClassName}>{option.label}</span>
+                </DropdownMenuCheckboxItem>
+              );
+            })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOtherSelected ? (
+        <Input
+          ref={otherInputRef}
+          type="text"
+          value={otherValue}
+          onChange={handleOtherInputChange}
+          placeholder={otherOptionPlaceholder}
+          disabled={disabled}
+          required={isRequired}
+          aria-required={required}
+          dir={dir}
+          className="w-full"
+        />
+      ) : null}
+    </>
+  );
+}
+
+interface ListVariantProps {
+  inputId: string;
+  options: MultiSelectOption[];
+  selectedValues: string[];
+  value: string[];
+  handleOptionAdd: (optionId: string) => void;
+  handleOptionRemove: (optionId: string) => void;
+  disabled: boolean;
+  headline: string;
+  errorMessage?: string;
+  hasOtherOption: boolean;
+  otherOptionId?: string;
+  isOtherSelected: boolean;
+  otherOptionLabel: string;
+  otherValue: string;
+  handleOtherInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  otherOptionPlaceholder: string;
+  dir: TextDirection;
+  otherInputRef: React.RefObject<HTMLInputElement | null>;
+  required: boolean;
+}
+
+function ListVariant({
+  inputId,
+  options,
+  selectedValues,
+  value,
+  handleOptionAdd,
+  handleOptionRemove,
+  disabled,
+  headline,
+  errorMessage,
+  hasOtherOption,
+  otherOptionId,
+  isOtherSelected,
+  otherOptionLabel,
+  otherValue,
+  handleOtherInputChange,
+  otherOptionPlaceholder,
+  dir,
+  otherInputRef,
+  required,
+}: Readonly<ListVariantProps>): React.JSX.Element {
+  const isNoneSelected = value.includes("none");
+
+  const getIsRequired = (): boolean => {
+    const responseValues = [...value];
+    if (isOtherSelected && otherValue) {
+      responseValues.push(otherValue);
+    }
+    const hasResponse = Array.isArray(responseValues) && responseValues.length > 0;
+    return required && hasResponse ? false : required;
+  };
+
+  const isRequired = getIsRequired();
+
+  return (
+    <>
+      <ElementError errorMessage={errorMessage} dir={dir} />
+      <fieldset className="space-y-2" aria-label={headline}>
+        {options
+          .filter((option) => option.id !== "none")
+          .map((option, index) => {
+            const isChecked = selectedValues.includes(option.id);
+            const optionId = `${inputId}-${option.id}`;
+            const isDisabled = disabled || (isNoneSelected && option.id !== "none");
+            // Only mark the first checkbox as required for HTML5 validation
+            // This ensures at least one selection is required, not all
+            const isFirstOption = index === 0;
+            return (
+              <label
+                key={option.id}
+                htmlFor={optionId}
+                className={cn(getOptionContainerClassName(isChecked, isDisabled), isChecked && "z-10")}>
+                <span className="flex items-center">
+                  <Checkbox
+                    id={optionId}
+                    name={inputId}
+                    checked={isChecked}
+                    onCheckedChange={(checked) => {
+                      if (checked === true) {
+                        handleOptionAdd(option.id);
+                      } else {
+                        handleOptionRemove(option.id);
+                      }
+                    }}
+                    disabled={isDisabled}
+                    required={isRequired ? isFirstOption : false}
+                    aria-invalid={Boolean(errorMessage)}
+                  />
+                  <span
+                    className={cn("mr-3 ml-3", optionLabelClassName)}
+                    style={{ fontSize: "var(--fb-option-font-size)" }}>
+                    {option.label}
+                  </span>
+                </span>
+              </label>
+            );
+          })}
+        {hasOtherOption && otherOptionId ? (
+          <div className="space-y-2">
+            <label
+              htmlFor={`${inputId}-${otherOptionId}`}
+              className={cn(
+                getOptionContainerClassName(isOtherSelected, disabled || isNoneSelected),
+                isOtherSelected && "z-10"
+              )}>
+              <span className="flex items-center">
+                <Checkbox
+                  id={`${inputId}-${otherOptionId}`}
+                  name={inputId}
+                  checked={isOtherSelected}
+                  onCheckedChange={(checked) => {
+                    if (checked === true) {
+                      handleOptionAdd(otherOptionId);
+                    } else {
+                      handleOptionRemove(otherOptionId);
+                    }
+                  }}
+                  disabled={disabled || isNoneSelected}
+                  aria-invalid={Boolean(errorMessage)}
+                />
+                <span
+                  className={cn("mr-3 ml-3 grow", optionLabelClassName)}
+                  style={{ fontSize: "var(--fb-option-font-size)" }}>
+                  {otherOptionLabel}
+                </span>
+              </span>
+              {isOtherSelected ? (
+                <Input
+                  type="text"
+                  value={otherValue}
+                  onChange={handleOtherInputChange}
+                  placeholder={otherOptionPlaceholder}
+                  disabled={disabled}
+                  required
+                  aria-required={required}
+                  dir={dir}
+                  className="mt-2 w-full"
+                  ref={otherInputRef}
+                />
+              ) : null}
+            </label>
+          </div>
+        ) : null}
+        {options
+          .filter((option) => option.id === "none")
+          .map((option) => {
+            const isChecked = selectedValues.includes(option.id);
+            const optionId = `${inputId}-${option.id}`;
+            const isDisabled = disabled || (isNoneSelected && option.id !== "none");
+            return (
+              <label
+                key={option.id}
+                htmlFor={optionId}
+                className={cn(getOptionContainerClassName(isChecked, isDisabled), isChecked && "z-10")}>
+                <span className="flex items-center">
+                  <Checkbox
+                    id={optionId}
+                    name={inputId}
+                    checked={isChecked}
+                    onCheckedChange={(checked) => {
+                      if (checked === true) {
+                        handleOptionAdd(option.id);
+                      } else {
+                        handleOptionRemove(option.id);
+                      }
+                    }}
+                    disabled={isDisabled}
+                    required={false}
+                    aria-invalid={Boolean(errorMessage)}
+                  />
+                  <span
+                    className={cn("mr-3 ml-3", optionLabelClassName)}
+                    style={{ fontSize: "var(--fb-option-font-size)" }}>
+                    {option.label}
+                  </span>
+                </span>
+              </label>
+            );
+          })}
+      </fieldset>
+    </>
+  );
+}
+
+function MultiSelect({
+  elementId,
+  headline,
+  description,
+  inputId,
+  options,
+  value = [],
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+  variant = "list",
+  placeholder = "Select options...",
+  otherOptionId,
+  otherOptionLabel = "Other",
+  otherOptionPlaceholder = "Please specify",
+  otherValue = "",
+  onOtherValueChange,
+  exclusiveOptionIds = [],
+}: Readonly<MultiSelectProps>): React.JSX.Element {
+  // Ensure value is always an array
+  const selectedValues = Array.isArray(value) ? value : [];
+  const hasOtherOption = Boolean(otherOptionId);
+  const isOtherSelected = Boolean(hasOtherOption && otherOptionId && selectedValues.includes(otherOptionId));
+  const otherInputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (!isOtherSelected || disabled) return;
+
+    // Delay focus to win against Radix focus restoration when dropdown closes / checkbox receives focus.
+    const timeoutId = globalThis.setTimeout(() => {
+      globalThis.requestAnimationFrame(() => {
+        otherInputRef.current?.focus();
+      });
+    }, 0);
+
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [isOtherSelected, disabled, variant]);
+
+  const handleOptionAdd = (optionId: string): void => {
+    if (exclusiveOptionIds.includes(optionId)) {
+      onChange([optionId]);
+    } else {
+      const newValues = selectedValues.filter((id) => !exclusiveOptionIds.includes(id));
+      onChange([...newValues, optionId]);
+    }
+  };
+
+  const handleOptionRemove = (optionId: string): void => {
+    onChange(selectedValues.filter((id) => id !== optionId));
+  };
+
+  const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    onOtherValueChange?.(e.target.value);
+  };
+
+  // Get selected option labels for dropdown display
+  const selectedLabels = options.filter((opt) => selectedValues.includes(opt.id)).map((opt) => opt.label);
+
+  let displayText = placeholder;
+  if (selectedLabels.length > 0) {
+    displayText =
+      selectedLabels.length === 1 ? selectedLabels[0] : `${String(selectedLabels.length)} selected`;
+  }
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Options */}
+      <div className="relative">
+        {variant === "dropdown" ? (
+          <DropdownVariant
+            inputId={inputId}
+            options={options}
+            selectedValues={selectedValues}
+            handleOptionAdd={handleOptionAdd}
+            handleOptionRemove={handleOptionRemove}
+            disabled={disabled}
+            headline={headline}
+            errorMessage={errorMessage}
+            displayText={displayText}
+            hasOtherOption={hasOtherOption}
+            otherOptionId={otherOptionId}
+            isOtherSelected={isOtherSelected}
+            otherOptionLabel={otherOptionLabel}
+            otherValue={otherValue}
+            handleOtherInputChange={handleOtherInputChange}
+            otherOptionPlaceholder={otherOptionPlaceholder}
+            dir={dir}
+            otherInputRef={otherInputRef}
+            required={required}
+          />
+        ) : (
+          <ListVariant
+            inputId={inputId}
+            options={options}
+            selectedValues={selectedValues}
+            value={value}
+            handleOptionAdd={handleOptionAdd}
+            handleOptionRemove={handleOptionRemove}
+            disabled={disabled}
+            headline={headline}
+            errorMessage={errorMessage}
+            hasOtherOption={hasOtherOption}
+            otherOptionId={otherOptionId}
+            isOtherSelected={isOtherSelected}
+            otherOptionLabel={otherOptionLabel}
+            otherValue={otherValue}
+            handleOtherInputChange={handleOtherInputChange}
+            otherOptionPlaceholder={otherOptionPlaceholder}
+            dir={dir}
+            otherInputRef={otherInputRef}
+            required={required}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { MultiSelect };
+export type { MultiSelectProps };
diff --git a/packages/survey-ui/src/components/elements/nps.stories.tsx b/packages/survey-ui/src/components/elements/nps.stories.tsx
new file mode 100644
index 0000000000..98fc5eb014
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/nps.stories.tsx
@@ -0,0 +1,244 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type LabelStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  labelStylingArgTypes,
+  pickArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { NPS, type NPSProps } from "./nps";
+
+type StoryProps = NPSProps & Partial<BaseStylingOptions & LabelStylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/NPS",
+  component: NPS,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A Net Promoter Score (NPS) element. Users can select a rating from 0 to 10 to indicate how likely they are to recommend something.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    value: {
+      control: { type: "number", min: 0, max: 10 },
+      description: "Currently selected NPS value (0-10)",
+      table: { category: "State" },
+    },
+    lowerLabel: {
+      control: "text",
+      description: "Label for the lower end of the scale",
+      table: { category: "Content" },
+    },
+    upperLabel: {
+      control: "text",
+      description: "Label for the upper end of the scale",
+      table: { category: "Content" },
+    },
+    colorCoding: {
+      control: "boolean",
+      description: "Whether color coding is enabled",
+      table: { category: "Content" },
+    },
+  },
+  render: createStatefulRender(NPS),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const StylingPlayground: Story = {
+  args: {
+    elementId: "nps-1",
+    inputId: "nps-input-1",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    description: "Please rate from 0 to 10",
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...labelStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, [
+      "inputBgColor",
+      "inputBorderColor",
+      "inputColor",
+      "inputFontWeight",
+      "inputBorderRadius",
+    ]),
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "nps-1",
+    inputId: "nps-input-1",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "nps-2",
+    inputId: "nps-input-2",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    description: "Please rate from 0 to 10, where 0 is not at all likely and 10 is extremely likely",
+  },
+};
+
+export const WithLabels: Story = {
+  args: {
+    elementId: "nps-labels",
+    inputId: "nps-input-labels",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    elementId: "nps-selection",
+    inputId: "nps-input-selection",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    value: 9,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "nps-required",
+    inputId: "nps-input-required",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    required: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "nps-error",
+    inputId: "nps-input-error",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    required: true,
+    errorMessage: "Please select a rating",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "nps-disabled",
+    inputId: "nps-input-disabled",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    value: 8,
+    disabled: true,
+  },
+};
+
+export const ColorCoding: Story = {
+  args: {
+    elementId: "nps-color",
+    inputId: "nps-input-color",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    colorCoding: true,
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+};
+
+export const Promoter: Story = {
+  args: {
+    elementId: "nps-promoter",
+    inputId: "nps-input-promoter",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    value: 9,
+    colorCoding: true,
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+};
+
+export const Passive: Story = {
+  args: {
+    elementId: "nps-passive",
+    inputId: "nps-input-passive",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    value: 7,
+    colorCoding: true,
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+};
+
+export const Detractor: Story = {
+  args: {
+    elementId: "nps-detractor",
+    inputId: "nps-input-detractor",
+    headline: "How likely are you to recommend us to a friend or colleague?",
+    value: 5,
+    colorCoding: true,
+    lowerLabel: "Not at all likely",
+    upperLabel: "Extremely likely",
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "nps-rtl",
+    dir: "rtl",
+    inputId: "nps-input-rtl",
+    headline: "ما مدى احتمالية أن توصي بنا لصديق أو زميل؟",
+    description: "يرجى التقييم من 0 إلى 10",
+    lowerLabel: "غير محتمل على الإطلاق",
+    upperLabel: "محتمل للغاية",
+  },
+};
+
+export const RTLWithSelection: Story = {
+  args: {
+    elementId: "nps-rtl-selection",
+    dir: "rtl",
+    inputId: "nps-input-rtl-selection",
+    headline: "ما مدى احتمالية أن توصي بنا لصديق أو زميل؟",
+    value: 8,
+    lowerLabel: "غير محتمل على الإطلاق",
+    upperLabel: "محتمل للغاية",
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <NPS
+        elementId="nps-1"
+        inputId="nps-input-1"
+        headline="How likely are you to recommend our product?"
+        lowerLabel="Not at all likely"
+        upperLabel="Extremely likely"
+        onChange={() => {}}
+      />
+      <NPS
+        elementId="nps-2"
+        inputId="nps-input-2"
+        headline="How likely are you to recommend our service?"
+        description="Please rate from 0 to 10"
+        value={9}
+        colorCoding
+        lowerLabel="Not at all likely"
+        upperLabel="Extremely likely"
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/nps.tsx b/packages/survey-ui/src/components/elements/nps.tsx
new file mode 100644
index 0000000000..fe3a7cfb9c
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/nps.tsx
@@ -0,0 +1,196 @@
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Label } from "@/components/general/label";
+import { cn } from "@/lib/utils";
+
+interface NPSProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the NPS group */
+  inputId: string;
+  /** Currently selected NPS value (0 to 10) */
+  value?: number;
+  /** Callback function called when NPS value changes */
+  onChange: (value: number) => void;
+  /** Optional label for the lower end of the scale */
+  lowerLabel?: string;
+  /** Optional label for the upper end of the scale */
+  upperLabel?: string;
+  /** Whether color coding is enabled */
+  colorCoding?: boolean;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the controls are disabled */
+  disabled?: boolean;
+}
+
+function NPS({
+  elementId,
+  headline,
+  description,
+  inputId,
+  value,
+  onChange,
+  lowerLabel,
+  upperLabel,
+  colorCoding = false,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<NPSProps>): React.JSX.Element {
+  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);
+
+  // Ensure value is within valid range (0-10)
+  const currentValue = value !== undefined && value >= 0 && value <= 10 ? value : undefined;
+
+  // Handle NPS selection
+  const handleSelect = (npsValue: number): void => {
+    if (!disabled) {
+      onChange(npsValue);
+    }
+  };
+
+  // Handle keyboard navigation
+  const handleKeyDown = (npsValue: number) => (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(npsValue);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const direction = e.key === "ArrowLeft" ? -1 : 1;
+      const newValue = Math.max(0, Math.min(10, (currentValue ?? 0) + direction));
+      handleSelect(newValue);
+    }
+  };
+
+  // Get NPS option color for color coding
+  const getNPSOptionColor = (idx: number): string => {
+    if (idx > 8) return "bg-emerald-100"; // 9-10: Promoters (green)
+    if (idx > 6) return "bg-orange-100"; // 7-8: Passives (orange)
+    return "bg-rose-100"; // 0-6: Detractors (red)
+  };
+
+  // Render NPS option (0-10)
+  const renderNPSOption = (number: number): React.JSX.Element => {
+    const isSelected = currentValue === number;
+    const isHovered = hoveredValue === number;
+    const isLast = number === 10; // Last option is 10
+    const isFirst = number === 0; // First option is 0
+
+    // Determine border radius and border classes
+    // Use right border for all items to create separators, left border only on first item
+    let borderRadiusClasses = "";
+    let borderClasses = "border-t border-b border-r";
+
+    if (isFirst) {
+      borderRadiusClasses = dir === "rtl" ? "rounded-r-input" : "rounded-l-input";
+      borderClasses = "border-t border-b border-l border-r";
+    } else if (isLast) {
+      borderRadiusClasses = dir === "rtl" ? "rounded-l-input" : "rounded-r-input";
+      // Last item keeps right border for rounded corner
+    }
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
+      <label
+        key={number}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={handleKeyDown(number)}
+        className={cn(
+          "text-input-text font-input font-input-weight relative flex w-full cursor-pointer items-center justify-center overflow-hidden transition-colors focus:outline-none",
+          borderClasses,
+          isSelected
+            ? "bg-brand-20 border-brand z-10 -ml-[1px] border-2 first:ml-0"
+            : "border-input-border bg-input-bg",
+          borderRadiusClasses,
+          isHovered && !isSelected && "bg-input-selected-bg",
+          colorCoding ? "min-h-[47px]" : "min-h-[41px]",
+          disabled && "cursor-not-allowed opacity-50",
+          "focus:border-brand focus:border-2"
+        )}
+        onMouseEnter={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onMouseLeave={() => {
+          setHoveredValue(null);
+        }}
+        onFocus={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onBlur={() => {
+          setHoveredValue(null);
+        }}>
+        {colorCoding ? (
+          <div className={cn("absolute top-0 left-0 h-[6px] w-full", getNPSOptionColor(number))} />
+        ) : null}
+        <input
+          type="radio"
+          name={inputId}
+          value={number}
+          checked={isSelected}
+          onChange={() => {
+            handleSelect(number);
+          }}
+          disabled={disabled}
+          required={required}
+          className="sr-only"
+          aria-label={`Rate ${String(number)} out of 10`}
+        />
+        <span className="text-sm">{number}</span>
+      </label>
+    );
+  };
+
+  // Generate NPS options (0-10)
+  const npsOptions = Array.from({ length: 11 }, (_, i) => i);
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* NPS Options */}
+      <div className="relative space-y-2">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        <fieldset className="w-full px-[2px]">
+          <legend className="sr-only">NPS rating options</legend>
+          <div className="flex w-full">{npsOptions.map((number) => renderNPSOption(number))}</div>
+
+          {/* Labels */}
+          {(lowerLabel ?? upperLabel) ? (
+            <div className="mt-2 flex justify-between gap-8 px-1.5">
+              {lowerLabel ? (
+                <Label variant="default" className="max-w-[50%] text-xs leading-6" dir={dir}>
+                  {lowerLabel}
+                </Label>
+              ) : null}
+              {upperLabel ? (
+                <Label variant="default" className="max-w-[50%] text-right text-xs leading-6" dir={dir}>
+                  {upperLabel}
+                </Label>
+              ) : null}
+            </div>
+          ) : null}
+        </fieldset>
+      </div>
+    </div>
+  );
+}
+
+export { NPS };
+export type { NPSProps };
diff --git a/packages/survey-ui/src/components/elements/open-text.stories.tsx b/packages/survey-ui/src/components/elements/open-text.stories.tsx
new file mode 100644
index 0000000000..dcb8dbe4a2
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/open-text.stories.tsx
@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type InputLayoutStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  pickArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { OpenText, type OpenTextProps } from "./open-text";
+
+type StoryProps = OpenTextProps &
+  Partial<BaseStylingOptions & InputLayoutStylingOptions> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/OpenText",
+  component: OpenText,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete open text element that combines headline, description, and input/textarea components. Supports short and long answers, validation, character limits, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the input field",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "text",
+      description: "Current input value",
+      table: { category: "State" },
+    },
+    longAnswer: {
+      control: "boolean",
+      description: "Use textarea for long-form answers instead of input",
+      table: { category: "Layout" },
+    },
+    inputType: {
+      control: { type: "select" },
+      options: ["text", "email", "url", "phone", "number"],
+      description: "Type of input field (only used when longAnswer is false)",
+      table: { category: "Validation" },
+    },
+    charLimit: {
+      control: "object",
+      description: "Character limit configuration {min?, max?}",
+      table: { category: "Validation" },
+    },
+    rows: {
+      control: { type: "number", min: 1, max: 20 },
+      description: "Number of rows for textarea (only when longAnswer is true)",
+      table: { category: "Layout" },
+    },
+  },
+  render: createStatefulRender(OpenText),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "What's your feedback?",
+    description: "Please share your thoughts with us",
+    placeholder: "Type your answer here...",
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, [
+      "inputBgColor",
+      "inputBorderColor",
+      "inputColor",
+      "inputFontSize",
+      "inputFontWeight",
+      "inputWidth",
+      "inputHeight",
+      "inputBorderRadius",
+      "inputPlaceholderColor",
+      "inputPaddingX",
+      "inputPaddingY",
+    ]),
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    headline: "What's your feedback?",
+    placeholder: "Type your answer here...",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "What did you think of our service?",
+    description: "We'd love to hear your honest feedback to help us improve",
+    placeholder: "Share your thoughts...",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "What's your email address?",
+    description: "We'll use this to contact you",
+    placeholder: "email@example.com",
+    required: true,
+    inputType: "email",
+  },
+};
+
+export const LongAnswer: Story = {
+  args: {
+    headline: "Tell us about your experience",
+    description: "Please provide as much detail as possible",
+    placeholder: "Write your detailed response here...",
+    longAnswer: true,
+    rows: 5,
+  },
+};
+
+export const LongAnswerWithCharLimit: Story = {
+  args: {
+    headline: "Share your story",
+    description: "Maximum 500 characters",
+    placeholder: "Tell us your story...",
+    longAnswer: true,
+    rows: 6,
+    charLimit: {
+      max: 500,
+    },
+  },
+};
+
+export const EmailInput: Story = {
+  args: {
+    headline: "What's your email?",
+    inputType: "email",
+    placeholder: "email@example.com",
+    required: true,
+  },
+};
+
+export const PhoneInput: Story = {
+  args: {
+    headline: "What's your phone number?",
+    description: "Include country code",
+    inputType: "phone",
+    placeholder: "+1 (555) 123-4567",
+  },
+};
+
+export const URLInput: Story = {
+  args: {
+    headline: "What's your website?",
+    inputType: "url",
+    placeholder: "https://example.com",
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    headline: "How many employees does your company have?",
+    inputType: "number",
+    placeholder: "0",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "What's your email address?",
+    inputType: "email",
+    placeholder: "email@example.com",
+    value: "invalid-email",
+    errorMessage: "Please enter a valid email address",
+    required: true,
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    headline: "What's your name?",
+    placeholder: "Enter your name",
+    value: "John Doe",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This field is disabled",
+    description: "You cannot edit this field",
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};
+
+export const DisabledWithValue: Story = {
+  args: {
+    headline: "Submission ID",
+    value: "SUB-2024-001",
+    disabled: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "ما هو تقييمك؟",
+    description: "يرجى مشاركة أفكارك معنا",
+    placeholder: "اكتب إجابتك هنا...",
+    dir: "rtl",
+  },
+};
+
+export const RTLLongAnswer: Story = {
+  args: {
+    headline: "أخبرنا عن تجربتك",
+    description: "يرجى تقديم أكبر قدر ممكن من التفاصيل",
+    placeholder: "اكتب ردك التفصيلي هنا...",
+    longAnswer: true,
+    rows: 5,
+    dir: "rtl",
+  },
+};
+
+export const WithErrorAndRTL: Story = {
+  args: {
+    headline: "ما هو بريدك الإلكتروني؟",
+    inputType: "email",
+    placeholder: "email@example.com",
+    errorMessage: "يرجى إدخال عنوان بريد إلكتروني صالح",
+    required: true,
+    dir: "rtl",
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <OpenText
+        elementId="name"
+        inputId="name"
+        headline="What's your name?"
+        placeholder="Enter your name"
+        required
+        onChange={() => {}}
+      />
+      <OpenText
+        elementId="email"
+        inputId="email"
+        headline="What's your email?"
+        inputType="email"
+        placeholder="email@example.com"
+        required
+        onChange={() => {}}
+      />
+      <OpenText
+        elementId="bio"
+        inputId="bio"
+        headline="Tell us about yourself"
+        description="Optional: Share a bit about your background"
+        placeholder="Your bio..."
+        longAnswer
+        rows={4}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/open-text.tsx b/packages/survey-ui/src/components/elements/open-text.tsx
new file mode 100644
index 0000000000..6768739b4e
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/open-text.tsx
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Input } from "@/components/general/input";
+import { Textarea } from "@/components/general/textarea";
+import { cn } from "@/lib/utils";
+
+interface OpenTextProps {
+  elementId: string;
+  headline: string;
+  description?: string;
+  placeholder?: string;
+  inputId: string;
+  value?: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  longAnswer?: boolean;
+  inputType?: "text" | "email" | "url" | "phone" | "number";
+  charLimit?: {
+    min?: number;
+    max?: number;
+  };
+  errorMessage?: string;
+  dir?: "ltr" | "rtl" | "auto";
+  rows?: number;
+  disabled?: boolean;
+}
+
+function OpenText({
+  elementId,
+  headline,
+  description,
+  placeholder,
+  value = "",
+  inputId,
+  onChange,
+  required = false,
+  longAnswer = false,
+  inputType = "text",
+  charLimit,
+  errorMessage,
+  dir = "auto",
+  rows = 3,
+  disabled = false,
+}: Readonly<OpenTextProps>): React.JSX.Element {
+  const [currentLength, setCurrentLength] = useState(value.length);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+    const newValue = e.target.value;
+    setCurrentLength(newValue.length);
+    onChange(newValue);
+  };
+
+  const renderCharLimit = (): React.JSX.Element | null => {
+    if (charLimit?.max === undefined) return null;
+    const isOverLimit = currentLength >= charLimit.max;
+    return (
+      <span className={cn("text-xs", isOverLimit ? "font-semibold text-red-500" : "text-brand")}>
+        {currentLength}/{charLimit.max}
+      </span>
+    );
+  };
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Input or Textarea */}
+      <div className="relative space-y-2">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        <div className="space-y-1">
+          {longAnswer ? (
+            <Textarea
+              id={inputId}
+              placeholder={placeholder}
+              value={value}
+              onChange={handleChange}
+              required={required}
+              dir={dir}
+              rows={rows}
+              disabled={disabled}
+              aria-invalid={Boolean(errorMessage) || undefined}
+              minLength={charLimit?.min}
+              maxLength={charLimit?.max}
+            />
+          ) : (
+            <Input
+              id={inputId}
+              type={inputType}
+              placeholder={placeholder}
+              value={value}
+              onChange={handleChange}
+              required={required}
+              dir={dir}
+              disabled={disabled}
+              aria-invalid={Boolean(errorMessage) || undefined}
+              minLength={charLimit?.min}
+              maxLength={charLimit?.max}
+            />
+          )}
+          {renderCharLimit()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { OpenText };
+export type { OpenTextProps };
diff --git a/packages/survey-ui/src/components/elements/picture-select.stories.tsx b/packages/survey-ui/src/components/elements/picture-select.stories.tsx
new file mode 100644
index 0000000000..b12fa9e499
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/picture-select.stories.tsx
@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import {
+  type BaseStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+} from "../../lib/story-helpers";
+import { PictureSelect, type PictureSelectOption, type PictureSelectProps } from "./picture-select";
+
+type StoryProps = PictureSelectProps &
+  Partial<BaseStylingOptions & { optionBorderRadius: string }> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/PictureSelect",
+  component: PictureSelect,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete picture selection element that combines headline, description, and a grid of selectable images. Supports both single and multi-select modes, validation, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    options: {
+      control: "object",
+      description: "Array of picture options to choose from",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "object",
+      description: "Selected option ID(s) - string for single select, string[] for multi select",
+      table: { category: "State" },
+    },
+    allowMulti: {
+      control: "boolean",
+      description: "Whether multiple selections are allowed",
+      table: { category: "Behavior" },
+    },
+  },
+  render: createStatefulRender(PictureSelect),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+
+// Sample image URLs - using placeholder images
+const defaultOptions: PictureSelectOption[] = [
+  {
+    id: "option-1",
+    imageUrl: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop",
+    alt: "Mountain landscape",
+  },
+  {
+    id: "option-2",
+    imageUrl: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=300&h=200&fit=crop",
+    alt: "Ocean view",
+  },
+  {
+    id: "option-3",
+    imageUrl: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=300&h=200&fit=crop",
+    alt: "Forest path",
+  },
+  {
+    id: "option-4",
+    imageUrl: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=300&h=200&fit=crop",
+    alt: "Desert scene",
+  },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    description: "Select one or more images",
+    options: defaultOptions,
+    allowMulti: false,
+  },
+  argTypes: {
+    // Element styling
+    elementHeadlineFontFamily: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineFontSize: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineFontWeight: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementHeadlineColor: {
+      control: "color",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontFamily: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontSize: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionFontWeight: {
+      control: "text",
+      table: { category: "Element Styling" },
+    },
+    elementDescriptionColor: {
+      control: "color",
+      table: { category: "Element Styling" },
+    },
+    brandColor: {
+      control: "color",
+      table: { category: "Survey Styling" },
+    },
+    optionBorderRadius: {
+      control: "text",
+      description: "Border radius for picture options",
+      table: { category: "Option Styling" },
+    },
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    options: defaultOptions,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "Select your favorite travel destination",
+    description: "Choose the image that appeals to you most",
+    options: defaultOptions,
+  },
+};
+
+export const SingleSelect: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    description: "Select one image",
+    options: defaultOptions,
+    allowMulti: false,
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    headline: "Select all images you like",
+    description: "You can select multiple images",
+    options: defaultOptions,
+    allowMulti: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    description: "Please select an image",
+    options: defaultOptions,
+    required: true,
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    options: defaultOptions,
+    value: "option-2",
+  },
+};
+
+export const WithMultipleSelections: Story = {
+  args: {
+    headline: "Select all images you like",
+    description: "You can select multiple images",
+    options: defaultOptions,
+    allowMulti: true,
+    value: ["option-1", "option-3"],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "Which image do you prefer?",
+    description: "Please select an image",
+    options: defaultOptions,
+    errorMessage: "Please select at least one image",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This element is disabled",
+    description: "You cannot change the selection",
+    options: defaultOptions,
+    value: "option-2",
+    disabled: true,
+  },
+};
+
+export const ManyOptions: Story = {
+  args: {
+    headline: "Select your favorite images",
+    description: "Choose from the images below",
+    options: [
+      ...defaultOptions,
+      {
+        id: "option-5",
+        imageUrl: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=300&h=200&fit=crop",
+        alt: "City skyline",
+      },
+      {
+        id: "option-6",
+        imageUrl: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=300&h=200&fit=crop",
+        alt: "Sunset",
+      },
+    ],
+    allowMulti: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "ما هي الصورة التي تفضلها؟",
+    dir: "rtl",
+    description: "اختر صورة واحدة",
+    options: defaultOptions.map((opt) => ({ ...opt, alt: "نص بديل" })),
+  },
+};
+
+export const RTLWithSelection: Story = {
+  args: {
+    headline: "اختر الصور التي تعجبك",
+    dir: "rtl",
+    description: "يمكنك اختيار عدة صور",
+    options: defaultOptions.map((opt) => ({ ...opt, alt: "نص بديل" })),
+    allowMulti: true,
+    value: ["option-1", "option-2"],
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => {
+    const [value1, setValue1] = React.useState<string | string[] | undefined>(undefined);
+    const [value2, setValue2] = React.useState<string | string[]>(["option-1", "option-3"]);
+
+    return (
+      <div className="w-[600px] space-y-8">
+        <PictureSelect
+          elementId="picture-1"
+          inputId="picture-1-input"
+          headline="Which image do you prefer?"
+          description="Select one image"
+          options={defaultOptions}
+          value={value1}
+          onChange={setValue1}
+        />
+        <PictureSelect
+          elementId="picture-2"
+          inputId="picture-2-input"
+          headline="Select all images you like"
+          description="You can select multiple images"
+          options={defaultOptions}
+          allowMulti
+          value={value2}
+          onChange={setValue2}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/survey-ui/src/components/elements/picture-select.tsx b/packages/survey-ui/src/components/elements/picture-select.tsx
new file mode 100644
index 0000000000..165ca696ef
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/picture-select.tsx
@@ -0,0 +1,198 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+import { Checkbox } from "@/components/general/checkbox";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { RadioGroupItem } from "@/components/general/radio-group";
+import { cn } from "@/lib/utils";
+
+/**
+ * Picture option for picture select element
+ */
+export interface PictureSelectOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** URL of the image */
+  imageUrl: string;
+  /** Alt text for the image */
+  alt?: string;
+}
+
+interface PictureSelectProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the picture select group */
+  inputId: string;
+  /** Array of picture options to choose from */
+  options: PictureSelectOption[];
+  /** Currently selected option ID(s) - string for single select, string[] for multi select */
+  value?: string | string[];
+  /** Callback function called when selection changes */
+  onChange: (value: string | string[]) => void;
+  /** Whether multiple selections are allowed */
+  allowMulti?: boolean;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the options are disabled */
+  disabled?: boolean;
+}
+
+function PictureSelect({
+  elementId,
+  headline,
+  description,
+  inputId,
+  options,
+  value,
+  onChange,
+  allowMulti = false,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<PictureSelectProps>): React.JSX.Element {
+  // Ensure value is always the correct type
+  let selectedValues: string[] | string | undefined;
+  if (allowMulti) {
+    selectedValues = Array.isArray(value) ? value : [];
+  } else {
+    selectedValues = typeof value === "string" ? value : undefined;
+  }
+
+  const handleMultiSelectChange = (optionId: string, checked: boolean): void => {
+    if (disabled) return;
+
+    const currentArray = Array.isArray(value) ? value : [];
+    if (checked) {
+      onChange([...currentArray, optionId]);
+    } else {
+      onChange(currentArray.filter((id) => id !== optionId));
+    }
+  };
+
+  const handleSingleSelectChange = (newValue: string): void => {
+    if (disabled) return;
+    onChange(newValue);
+  };
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Picture Grid - 2 columns */}
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        {allowMulti ? (
+          <div className="grid grid-cols-2 gap-2">
+            {options.map((option) => {
+              const isSelected = (selectedValues as string[]).includes(option.id);
+              const optionId = `${inputId}-${option.id}`;
+
+              return (
+                <label
+                  key={option.id}
+                  htmlFor={optionId}
+                  className={cn(
+                    "rounded-option relative aspect-[162/97] w-full cursor-pointer transition-all",
+                    disabled && "cursor-not-allowed opacity-50"
+                  )}>
+                  {/* Image container with border when selected */}
+                  <div
+                    className={cn(
+                      "rounded-option absolute inset-[2px] overflow-hidden",
+                      isSelected && "border-brand border-4 border-solid"
+                    )}>
+                    <img
+                      src={option.imageUrl}
+                      alt={option.alt ?? `Option ${option.id}`}
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                  </div>
+                  {/* Selection indicator - Checkbox for multi select */}
+                  <div
+                    className="absolute top-[5%] right-[5%]"
+                    onPointerDown={(e) => {
+                      e.stopPropagation();
+                    }}>
+                    <Checkbox
+                      id={optionId}
+                      checked={isSelected}
+                      onCheckedChange={(checked) => {
+                        handleMultiSelectChange(option.id, checked === true);
+                      }}
+                      disabled={disabled}
+                      className="h-4 w-4"
+                      aria-label={option.alt ?? `Select ${option.id}`}
+                    />
+                  </div>
+                </label>
+              );
+            })}
+          </div>
+        ) : (
+          <RadioGroupPrimitive.Root
+            value={selectedValues as string}
+            onValueChange={handleSingleSelectChange}
+            disabled={disabled}
+            className="grid grid-cols-2 gap-2">
+            {options.map((option) => {
+              const optionId = `${inputId}-${option.id}`;
+              const isSelected = selectedValues === option.id;
+
+              return (
+                <label
+                  key={option.id}
+                  htmlFor={optionId}
+                  className={cn(
+                    "rounded-option relative aspect-[162/97] w-full cursor-pointer transition-all",
+                    disabled && "cursor-not-allowed opacity-50"
+                  )}>
+                  {/* Image container with border when selected */}
+                  <div
+                    className={cn(
+                      "rounded-option absolute inset-[2px] overflow-hidden",
+                      isSelected && "border-brand border-4 border-solid"
+                    )}>
+                    <img
+                      src={option.imageUrl}
+                      alt={option.alt ?? `Option ${option.id}`}
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                    />
+                  </div>
+                  {/* Selection indicator - Radio button for single select */}
+                  <div
+                    className="absolute top-[5%] right-[5%]"
+                    onPointerDown={(e) => {
+                      e.stopPropagation();
+                    }}>
+                    <RadioGroupItem
+                      value={option.id}
+                      id={optionId}
+                      disabled={disabled}
+                      className="h-4 w-4 bg-white"
+                      aria-label={option.alt ?? `Select ${option.id}`}
+                    />
+                  </div>
+                </label>
+              );
+            })}
+          </RadioGroupPrimitive.Root>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { PictureSelect };
+export type { PictureSelectProps };
diff --git a/packages/survey-ui/src/components/elements/ranking.stories.tsx b/packages/survey-ui/src/components/elements/ranking.stories.tsx
new file mode 100644
index 0000000000..d348a491a4
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/ranking.stories.tsx
@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  type BaseStylingOptions,
+  type OptionStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  optionStylingArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { Ranking, type RankingOption, type RankingProps } from "./ranking";
+
+type StoryProps = RankingProps & Partial<BaseStylingOptions & OptionStylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/Ranking",
+  component: Ranking,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A ranking element that allows users to order items by clicking them. Users can reorder ranked items using up/down buttons.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    options: {
+      control: "object",
+      description: "Array of options to rank",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "object",
+      description: "Currently ranked option IDs in order",
+      table: { category: "State" },
+    },
+  },
+  render: createStatefulRender(Ranking),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+
+// Default options for stories
+const defaultOptions: RankingOption[] = [
+  { id: "1", label: "Option 1" },
+  { id: "2", label: "Option 2" },
+  { id: "3", label: "Option 3" },
+  { id: "4", label: "Option 4" },
+  { id: "5", label: "Option 5" },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    elementId: "ranking-1",
+    inputId: "ranking-input-1",
+    headline: "Rank these items in order of importance",
+    description: "Click items to add them to your ranking, then use arrows to reorder",
+    options: defaultOptions,
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...optionStylingArgTypes,
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "ranking-1",
+    inputId: "ranking-input-1",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "ranking-2",
+    inputId: "ranking-input-2",
+    headline: "Rank these items in order of importance",
+    description: "Click items to add them to your ranking, then use the arrows to reorder them",
+    options: defaultOptions,
+  },
+};
+
+export const WithRanking: Story = {
+  args: {
+    elementId: "ranking-3",
+    inputId: "ranking-input-3",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+    value: ["3", "1", "5"],
+  },
+};
+
+export const FullyRanked: Story = {
+  args: {
+    elementId: "ranking-4",
+    inputId: "ranking-input-4",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+    value: ["5", "2", "1", "4", "3"],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "ranking-5",
+    inputId: "ranking-input-5",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+    required: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "ranking-6",
+    inputId: "ranking-input-6",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+    required: true,
+    errorMessage: "Please rank all items",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "ranking-7",
+    inputId: "ranking-input-7",
+    headline: "Rank these items in order of importance",
+    options: defaultOptions,
+    value: ["2", "4"],
+    disabled: true,
+  },
+};
+
+export const ManyOptions: Story = {
+  args: {
+    elementId: "ranking-8",
+    inputId: "ranking-input-8",
+    headline: "Rank these features by priority",
+    description: "Click to add to ranking, use arrows to reorder",
+    options: [
+      { id: "1", label: "Feature A" },
+      { id: "2", label: "Feature B" },
+      { id: "3", label: "Feature C" },
+      { id: "4", label: "Feature D" },
+      { id: "5", label: "Feature E" },
+      { id: "6", label: "Feature F" },
+      { id: "7", label: "Feature G" },
+      { id: "8", label: "Feature H" },
+    ],
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "ranking-rtl",
+    inputId: "ranking-input-rtl",
+    dir: "rtl",
+    headline: "رتب هذه العناصر حسب الأهمية",
+    description: "انقر على العناصر لإضافتها إلى الترتيب، ثم استخدم الأسهم لإعادة الترتيب",
+    options: [
+      { id: "1", label: "الخيار الأول" },
+      { id: "2", label: "الخيار الثاني" },
+      { id: "3", label: "الخيار الثالث" },
+      { id: "4", label: "الخيار الرابع" },
+    ],
+  },
+};
+
+export const RTLWithRanking: Story = {
+  args: {
+    elementId: "ranking-rtl-ranked",
+    dir: "rtl",
+    inputId: "ranking-input-rtl-ranked",
+    headline: "رتب هذه العناصر حسب الأهمية",
+    options: [
+      { id: "1", label: "الخيار الأول" },
+      { id: "2", label: "الخيار الثاني" },
+      { id: "3", label: "الخيار الثالث" },
+      { id: "4", label: "الخيار الرابع" },
+    ],
+    value: ["3", "1", "4"],
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <Ranking
+        elementId="ranking-1"
+        inputId="ranking-input-1"
+        headline="Rank these features by priority"
+        options={defaultOptions}
+        onChange={() => {}}
+      />
+      <Ranking
+        elementId="ranking-2"
+        inputId="ranking-input-2"
+        headline="Rank these products by preference"
+        description="Click items to rank them"
+        options={[
+          { id: "1", label: "Product A" },
+          { id: "2", label: "Product B" },
+          { id: "3", label: "Product C" },
+        ]}
+        value={["2", "1"]}
+        onChange={() => {}}
+      />
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/elements/ranking.tsx b/packages/survey-ui/src/components/elements/ranking.tsx
new file mode 100644
index 0000000000..fa814e7611
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/ranking.tsx
@@ -0,0 +1,263 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { cn } from "@/lib/utils";
+
+/**
+ * Text direction type for ranking element
+ */
+type TextDirection = "ltr" | "rtl" | "auto";
+
+/**
+ * Option for ranking element
+ */
+export interface RankingOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** Display label for the option */
+  label: string;
+}
+
+interface RankingProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the ranking group */
+  inputId: string;
+  /** Array of options to rank */
+  options: RankingOption[];
+  /** Currently ranked option IDs in order (array of option IDs) */
+  value?: string[];
+  /** Callback function called when ranking changes */
+  onChange: (value: string[]) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: TextDirection;
+  /** Whether the controls are disabled */
+  disabled?: boolean;
+}
+
+interface RankingItemProps {
+  item: RankingOption;
+  rankedIds: string[];
+  onItemClick: (item: RankingOption) => void;
+  onMove: (itemId: string, direction: "up" | "down") => void;
+  disabled: boolean;
+  dir?: TextDirection;
+}
+
+function getTopButtonRadiusClass(isFirst: boolean, dir?: TextDirection): string {
+  if (isFirst) {
+    return "cursor-not-allowed opacity-30";
+  }
+  if (dir === "rtl") {
+    return "rounded-tl-md";
+  }
+  return "rounded-tr-md";
+}
+
+function getBottomButtonRadiusClass(isLast: boolean, dir?: TextDirection): string {
+  if (isLast) {
+    return "cursor-not-allowed opacity-30";
+  }
+  if (dir === "rtl") {
+    return "rounded-bl-md";
+  }
+  return "rounded-br-md";
+}
+
+function RankingItem({ item, rankedIds, onItemClick, onMove, disabled, dir }: Readonly<RankingItemProps>) {
+  const isRanked = rankedIds.includes(item.id);
+  const rankIndex = rankedIds.indexOf(item.id);
+  const isFirst = isRanked && rankIndex === 0;
+  const isLast = isRanked && rankIndex === rankedIds.length - 1;
+  const displayNumber = isRanked ? rankIndex + 1 : undefined;
+
+  // RTL-aware padding class
+  const paddingClass = dir === "rtl" ? "pr-3" : "pl-3";
+
+  // RTL-aware border class for control buttons
+  const borderClass = dir === "rtl" ? "border-r" : "border-l";
+
+  // RTL-aware border radius classes for control buttons
+  const topButtonRadiusClass = getTopButtonRadiusClass(isFirst, dir);
+  const bottomButtonRadiusClass = getBottomButtonRadiusClass(isLast, dir);
+
+  return (
+    <div
+      className={cn(
+        "rounded-option flex h-12 cursor-pointer items-center border transition-all",
+        paddingClass,
+        "bg-option-bg border-option-border",
+        "hover:bg-option-hover-bg focus-within:border-brand focus-within:bg-option-selected-bg focus-within:shadow-sm",
+        isRanked && "bg-option-selected-bg border-brand",
+        disabled && "cursor-not-allowed opacity-50"
+      )}>
+      <button
+        type="button"
+        onClick={() => {
+          onItemClick(item);
+        }}
+        disabled={disabled}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onItemClick(item);
+          }
+        }}
+        className="group flex h-full grow items-center gap-4 text-start focus:outline-none"
+        aria-label={isRanked ? `Remove ${item.label} from ranking` : `Add ${item.label} to ranking`}>
+        <span
+          className={cn(
+            "border-brand flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
+            isRanked
+              ? "bg-brand text-white"
+              : "group-hover:bg-background group-hover:text-foreground border-dashed text-transparent"
+          )}>
+          {displayNumber}
+        </span>
+        <span
+          className="font-option text-option font-option-weight text-option-label shrink grow text-start"
+          dir={dir}>
+          {item.label}
+        </span>
+      </button>
+
+      {/* Up/Down buttons for ranked items */}
+      {isRanked ? (
+        <div className={cn("border-option-border flex h-full grow-0 flex-col", borderClass)}>
+          <button
+            type="button"
+            tabIndex={isFirst ? -1 : 0}
+            onClick={(e) => {
+              e.preventDefault();
+              onMove(item.id, "up");
+            }}
+            disabled={isFirst || disabled}
+            aria-label={`Move ${item.label} up`}
+            className={cn(
+              "flex flex-1 items-center justify-center px-2 transition-colors",
+              topButtonRadiusClass
+            )}>
+            <ChevronUp className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            tabIndex={isLast ? -1 : 0}
+            onClick={(e) => {
+              e.preventDefault();
+              onMove(item.id, "down");
+            }}
+            disabled={isLast || disabled}
+            aria-label={`Move ${item.label} down`}
+            className={cn(
+              "border-option-border flex flex-1 items-center justify-center border-t px-2 transition-colors",
+              bottomButtonRadiusClass
+            )}>
+            <ChevronDown className="h-5 w-5" />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function Ranking({
+  elementId,
+  headline,
+  description,
+  inputId,
+  options,
+  value = [],
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<RankingProps>): React.JSX.Element {
+  // Ensure value is always an array
+  const rankedIds = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
+
+  // Get sorted (ranked) items and unsorted items
+  const sortedItems = React.useMemo(() => {
+    return rankedIds
+      .map((id) => options.find((opt) => opt.id === id))
+      .filter((item): item is RankingOption => item !== undefined);
+  }, [rankedIds, options]);
+
+  const unsortedItems = React.useMemo(() => {
+    return options.filter((opt) => !rankedIds.includes(opt.id));
+  }, [options, rankedIds]);
+
+  // Handle item click (add to ranking or remove from ranking)
+  const handleItemClick = (item: RankingOption): void => {
+    if (disabled) return;
+
+    const isAlreadyRanked = rankedIds.includes(item.id);
+    const newRankedIds = isAlreadyRanked ? rankedIds.filter((id) => id !== item.id) : [...rankedIds, item.id];
+
+    onChange(newRankedIds);
+  };
+
+  // Handle move up/down
+  const handleMove = (itemId: string, direction: "up" | "down"): void => {
+    if (disabled) return;
+
+    const index = rankedIds.indexOf(itemId);
+    if (index === -1) return;
+
+    const newRankedIds = [...rankedIds];
+    const [movedItem] = newRankedIds.splice(index, 1);
+    const newIndex = direction === "up" ? Math.max(0, index - 1) : Math.min(newRankedIds.length, index + 1);
+    newRankedIds.splice(newIndex, 0, movedItem);
+
+    onChange(newRankedIds);
+  };
+
+  // Combine sorted and unsorted items for display
+  const allItems = [...sortedItems, ...unsortedItems];
+
+  // Animation ref for smooth transitions
+  const [parent] = useAutoAnimate();
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Ranking Options */}
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+
+        <fieldset className="w-full" dir={dir}>
+          <legend className="sr-only">Ranking options</legend>
+          <div className="space-y-2" ref={parent as React.Ref<HTMLDivElement>}>
+            {allItems.map((item) => (
+              <RankingItem
+                key={item.id}
+                item={item}
+                rankedIds={rankedIds}
+                onItemClick={handleItemClick}
+                onMove={handleMove}
+                disabled={disabled}
+                dir={dir}
+              />
+            ))}
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  );
+}
+
+export { Ranking };
+export type { RankingProps };
diff --git a/packages/survey-ui/src/components/elements/rating.stories.tsx b/packages/survey-ui/src/components/elements/rating.stories.tsx
new file mode 100644
index 0000000000..dd07193231
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/rating.stories.tsx
@@ -0,0 +1,320 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import {
+  type BaseStylingOptions,
+  type LabelStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  createStatefulRender,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  labelStylingArgTypes,
+  pickArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { Rating, type RatingProps } from "./rating";
+
+type StoryProps = RatingProps & Partial<BaseStylingOptions & LabelStylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/Rating",
+  component: Rating,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A rating element that supports number, star, and smiley scales. Users can select a rating from 1 to the specified range.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    scale: {
+      control: { type: "select" },
+      options: ["number", "star", "smiley"],
+      description: "Rating scale type",
+      table: { category: "Content" },
+    },
+    range: {
+      control: { type: "select" },
+      options: [3, 4, 5, 6, 7, 10],
+      description: "Number of rating options",
+      table: { category: "Content" },
+    },
+    value: {
+      control: { type: "number", min: 1 },
+      description: "Currently selected rating value",
+      table: { category: "State" },
+    },
+    lowerLabel: {
+      control: "text",
+      description: "Label for the lower end of the scale",
+      table: { category: "Content" },
+    },
+    upperLabel: {
+      control: "text",
+      description: "Label for the upper end of the scale",
+      table: { category: "Content" },
+    },
+    colorCoding: {
+      control: "boolean",
+      description: "Whether color coding is enabled (for smiley scale)",
+      table: { category: "Content" },
+    },
+  },
+  render: createStatefulRender(Rating),
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+export const StylingPlayground: Story = {
+  args: {
+    elementId: "rating-1",
+    inputId: "rating-input-1",
+    headline: "How satisfied are you?",
+    description: "Please rate your experience",
+    scale: "number",
+    range: 5,
+    lowerLabel: "Not satisfied",
+    upperLabel: "Very satisfied",
+    elementHeadlineFontFamily: "system-ui, sans-serif",
+    elementHeadlineFontSize: "1.125rem",
+    elementHeadlineFontWeight: "600",
+    elementHeadlineColor: "#1e293b",
+    elementDescriptionFontFamily: "system-ui, sans-serif",
+    elementDescriptionFontSize: "0.875rem",
+    elementDescriptionFontWeight: "400",
+    elementDescriptionColor: "#64748b",
+    labelFontFamily: "system-ui, sans-serif",
+    labelFontSize: "0.75rem",
+    labelFontWeight: "400",
+    labelColor: "#64748b",
+    labelOpacity: "1",
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...labelStylingArgTypes,
+    ...pickArgTypes(inputStylingArgTypes, [
+      "inputBgColor",
+      "inputBorderColor",
+      "inputColor",
+      "inputFontWeight",
+      "inputBorderRadius",
+    ]),
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    elementId: "rating-1",
+    inputId: "rating-input-1",
+    headline: "How satisfied are you?",
+    scale: "number",
+    range: 5,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    elementId: "rating-2",
+    inputId: "rating-input-2",
+    headline: "How satisfied are you?",
+    description: "Please rate your experience from 1 to 5",
+    scale: "number",
+    range: 5,
+  },
+};
+
+export const NumberScale: Story = {
+  args: {
+    elementId: "rating-number",
+    inputId: "rating-input-number",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+  },
+};
+
+export const StarScale: Story = {
+  args: {
+    elementId: "rating-star",
+    inputId: "rating-input-star",
+    headline: "Rate this product",
+    scale: "star",
+    range: 5,
+  },
+};
+
+export const SmileyScale: Story = {
+  args: {
+    elementId: "rating-smiley",
+    inputId: "rating-input-smiley",
+    headline: "How do you feel?",
+    scale: "smiley",
+    range: 5,
+  },
+};
+
+export const WithLabels: Story = {
+  args: {
+    elementId: "rating-labels",
+    inputId: "rating-input-labels",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+    lowerLabel: "Not satisfied",
+    upperLabel: "Very satisfied",
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    elementId: "rating-selection",
+    inputId: "rating-input-selection",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+    value: 4,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    elementId: "rating-required",
+    inputId: "rating-input-required",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+    required: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    elementId: "rating-error",
+    inputId: "rating-input-error",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+    required: true,
+    errorMessage: "Please select a rating",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    elementId: "rating-disabled",
+    inputId: "rating-input-disabled",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 5,
+    value: 3,
+    disabled: true,
+  },
+};
+
+export const Range3: Story = {
+  args: {
+    elementId: "rating-range3",
+    inputId: "rating-input-range3",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 3,
+  },
+};
+
+export const Range10: Story = {
+  args: {
+    elementId: "rating-range10",
+    inputId: "rating-input-range10",
+    headline: "Rate your experience",
+    scale: "number",
+    range: 10,
+  },
+};
+
+export const ColorCoding: Story = {
+  args: {
+    elementId: "rating-color",
+    inputId: "rating-input-color",
+    headline: "How do you feel?",
+    scale: "smiley",
+    range: 5,
+    colorCoding: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    elementId: "rating-rtl",
+    dir: "rtl",
+    inputId: "rating-input-rtl",
+    headline: "كيف تقيم تجربتك؟",
+    description: "يرجى تقييم تجربتك من 1 إلى 5",
+    scale: "number",
+    range: 5,
+    lowerLabel: "غير راض",
+    upperLabel: "راض جداً",
+  },
+};
+
+export const RTLWithSelection: Story = {
+  args: {
+    elementId: "rating-rtl-selection",
+    dir: "rtl",
+    inputId: "rating-input-rtl-selection",
+    headline: "كيف تقيم تجربتك؟",
+    scale: "star",
+    range: 5,
+    value: 4,
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => {
+    const [value1, setValue1] = React.useState<number | undefined>(undefined);
+    const [value2, setValue2] = React.useState<number | undefined>(undefined);
+    const [value3, setValue3] = React.useState<number | undefined>(undefined);
+
+    return (
+      <div className="w-[600px] space-y-8">
+        <Rating
+          elementId="rating-1"
+          inputId="rating-input-1"
+          headline="How satisfied are you with our service?"
+          scale="number"
+          range={5}
+          lowerLabel="Not satisfied"
+          upperLabel="Very satisfied"
+          value={value1}
+          onChange={setValue1}
+        />
+        <Rating
+          elementId="rating-2"
+          inputId="rating-input-2"
+          headline="Rate this product"
+          description="Please rate from 1 to 5 stars"
+          scale="star"
+          range={5}
+          value={value2}
+          onChange={setValue2}
+        />
+        <Rating
+          elementId="rating-3"
+          inputId="rating-input-3"
+          headline="How do you feel?"
+          scale="smiley"
+          range={5}
+          colorCoding
+          value={value3}
+          onChange={setValue3}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/survey-ui/src/components/elements/rating.tsx b/packages/survey-ui/src/components/elements/rating.tsx
new file mode 100644
index 0000000000..90feda8ea5
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/rating.tsx
@@ -0,0 +1,442 @@
+import { Star } from "lucide-react";
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Label } from "@/components/general/label";
+import {
+  ConfusedFace,
+  FrowningFace,
+  GrinningFaceWithSmilingEyes,
+  GrinningSquintingFace,
+  NeutralFace,
+  PerseveringFace,
+  SlightlySmilingFace,
+  SmilingFaceWithSmilingEyes,
+  TiredFace,
+  WearyFace,
+} from "@/components/general/smileys";
+import { cn } from "@/lib/utils";
+
+/**
+ * Get smiley color class based on range and index
+ */
+const getSmileyColor = (range: number, idx: number): string => {
+  if (range > 5) {
+    if (range - idx < 3) return "fill-emerald-100";
+    if (range - idx < 5) return "fill-orange-100";
+    return "fill-rose-100";
+  } else if (range < 5) {
+    if (range - idx < 2) return "fill-emerald-100";
+    if (range - idx < 3) return "fill-orange-100";
+    return "fill-rose-100";
+  }
+  if (range - idx < 3) return "fill-emerald-100";
+  if (range - idx < 4) return "fill-orange-100";
+  return "fill-rose-100";
+};
+
+/**
+ * Get active smiley color class based on range and index
+ */
+const getActiveSmileyColor = (range: number, idx: number): string => {
+  if (range > 5) {
+    if (range - idx < 3) return "fill-emerald-300";
+    if (range - idx < 5) return "fill-orange-300";
+    return "fill-rose-300";
+  } else if (range < 5) {
+    if (range - idx < 2) return "fill-emerald-300";
+    if (range - idx < 3) return "fill-orange-300";
+    return "fill-rose-300";
+  }
+  if (range - idx < 3) return "fill-emerald-300";
+  if (range - idx < 4) return "fill-orange-300";
+  return "fill-rose-300";
+};
+
+/**
+ * Get the appropriate smiley icon based on range and index
+ */
+const getSmileyIcon = (
+  iconIdx: number,
+  idx: number,
+  range: number,
+  active: boolean,
+  addColors: boolean
+): React.JSX.Element => {
+  const activeColor = addColors ? getActiveSmileyColor(range, idx) : "fill-yellow-200";
+  const inactiveColor = addColors ? getSmileyColor(range, idx) : "fill-none";
+
+  const icons = [
+    <TiredFace key="tired-face" className={active ? activeColor : inactiveColor} />,
+    <WearyFace key="weary-face" className={active ? activeColor : inactiveColor} />,
+    <PerseveringFace key="persevering-face" className={active ? activeColor : inactiveColor} />,
+    <FrowningFace key="frowning-face" className={active ? activeColor : inactiveColor} />,
+    <ConfusedFace key="confused-face" className={active ? activeColor : inactiveColor} />,
+    <NeutralFace key="neutral-face" className={active ? activeColor : inactiveColor} />,
+    <SlightlySmilingFace key="slightly-smiling-face" className={active ? activeColor : inactiveColor} />,
+    <SmilingFaceWithSmilingEyes
+      key="smiling-face-with-smiling-eyes"
+      className={active ? activeColor : inactiveColor}
+    />,
+    <GrinningFaceWithSmilingEyes
+      key="grinning-face-with-smiling-eyes"
+      className={active ? activeColor : inactiveColor}
+    />,
+    <GrinningSquintingFace key="grinning-squinting-face" className={active ? activeColor : inactiveColor} />,
+  ];
+  return icons[iconIdx];
+};
+
+/**
+ * Smiley component for rating scale
+ */
+const RatingSmiley = ({
+  active,
+  idx,
+  range,
+  addColors = false,
+}: {
+  active: boolean;
+  idx: number;
+  range: number;
+  addColors?: boolean;
+}): React.JSX.Element => {
+  let iconsIdx: number[] = [];
+  if (range === 10) iconsIdx = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  else if (range === 7) iconsIdx = [1, 3, 4, 5, 6, 8, 9];
+  else if (range === 6) iconsIdx = [0, 2, 4, 5, 7, 9];
+  else if (range === 5) iconsIdx = [3, 4, 5, 6, 7];
+  else if (range === 4) iconsIdx = [4, 5, 6, 7];
+  else if (range === 3) iconsIdx = [4, 5, 7];
+
+  return getSmileyIcon(iconsIdx[idx], idx, range, active, addColors);
+};
+
+interface RatingProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the rating group */
+  inputId: string;
+  /** Rating scale type: 'number', 'star', or 'smiley' */
+  scale: "number" | "star" | "smiley";
+  /** Number of rating options (3, 4, 5, 6, 7, or 10) */
+  range: 3 | 4 | 5 | 6 | 7 | 10;
+  /** Currently selected rating value (1 to range) */
+  value?: number;
+  /** Callback function called when rating changes */
+  onChange: (value: number) => void;
+  /** Optional label for the lower end of the scale */
+  lowerLabel?: string;
+  /** Optional label for the upper end of the scale */
+  upperLabel?: string;
+  /** Whether color coding is enabled (for smiley scale) */
+  colorCoding?: boolean;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the controls are disabled */
+  disabled?: boolean;
+}
+
+function Rating({
+  elementId,
+  headline,
+  description,
+  inputId,
+  scale,
+  range,
+  value,
+  onChange,
+  lowerLabel,
+  upperLabel,
+  colorCoding = false,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+}: Readonly<RatingProps>): React.JSX.Element {
+  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);
+
+  // Ensure value is within valid range
+  const currentValue = value && value >= 1 && value <= range ? value : undefined;
+
+  // Handle rating selection
+  const handleSelect = (ratingValue: number): void => {
+    if (!disabled) {
+      onChange(ratingValue);
+    }
+  };
+
+  // Handle keyboard navigation
+  const handleKeyDown = (ratingValue: number) => (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(ratingValue);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const direction = e.key === "ArrowLeft" ? -1 : 1;
+      const newValue = Math.max(1, Math.min(range, (currentValue ?? 1) + direction));
+      handleSelect(newValue);
+    }
+  };
+
+  // Get number option color for color coding
+  const getRatingNumberOptionColor = (ratingRange: number, idx: number): string => {
+    if (ratingRange > 5) {
+      if (ratingRange - idx < 2) return "bg-emerald-100";
+      if (ratingRange - idx < 4) return "bg-orange-100";
+      return "bg-rose-100";
+    } else if (ratingRange < 5) {
+      if (ratingRange - idx < 1) return "bg-emerald-100";
+      if (ratingRange - idx < 2) return "bg-orange-100";
+      return "bg-rose-100";
+    }
+    if (ratingRange - idx < 2) return "bg-emerald-100";
+    if (ratingRange - idx < 3) return "bg-orange-100";
+    return "bg-rose-100";
+  };
+
+  // Render number scale option
+  const renderNumberOption = (number: number, totalLength: number): React.JSX.Element => {
+    const isSelected = currentValue === number;
+    const isHovered = hoveredValue === number;
+    const isLast = totalLength === number;
+    const isFirst = number === 1;
+
+    // Determine border radius and border classes
+    // Use right border for all items to create separators, left border only on first item
+    let borderRadiusClasses = "";
+    let borderClasses = "border-t border-b border-r";
+
+    if (isFirst) {
+      borderRadiusClasses = dir === "rtl" ? "rounded-r-input" : "rounded-l-input";
+      borderClasses = "border-t border-b border-l border-r";
+    } else if (isLast) {
+      borderRadiusClasses = dir === "rtl" ? "rounded-l-input" : "rounded-r-input";
+      // Last item keeps right border for rounded corner
+    }
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
+      <label
+        key={number}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={handleKeyDown(number)}
+        className={cn(
+          "text-input-text font-input font-input-weight relative flex w-full cursor-pointer items-center justify-center overflow-hidden transition-colors focus:outline-none",
+          borderClasses,
+          isSelected
+            ? "bg-brand-20 border-brand z-10 -ml-[1px] border-2 first:ml-0"
+            : "border-input-border bg-input-bg",
+          borderRadiusClasses,
+          isHovered && !isSelected && "bg-input-selected-bg",
+          colorCoding ? "min-h-[47px]" : "min-h-[41px]",
+          disabled && "cursor-not-allowed opacity-50",
+          "focus:border-brand focus:border-2"
+        )}
+        onMouseEnter={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onMouseLeave={() => {
+          setHoveredValue(null);
+        }}
+        onFocus={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onBlur={() => {
+          setHoveredValue(null);
+        }}>
+        {colorCoding ? (
+          <div
+            className={cn("absolute top-0 left-0 h-[6px] w-full", getRatingNumberOptionColor(range, number))}
+          />
+        ) : null}
+        <input
+          type="radio"
+          name={inputId}
+          value={number}
+          checked={isSelected}
+          onChange={() => {
+            handleSelect(number);
+          }}
+          disabled={disabled}
+          required={required}
+          className="sr-only"
+          aria-label={`Rate ${String(number)} out of ${String(range)}`}
+        />
+        <span className="text-sm">{number}</span>
+      </label>
+    );
+  };
+
+  // Render star scale option
+  const renderStarOption = (number: number): React.JSX.Element => {
+    const isSelected = currentValue === number;
+    // Fill all stars up to the hovered value (if hovering) or selected value
+    const activeValue = hoveredValue ?? currentValue ?? 0;
+    const isActive = number <= activeValue;
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
+      <label
+        key={number}
+        className={cn(
+          "flex min-h-[48px] flex-1 cursor-pointer items-center justify-center transition-opacity",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+        onMouseEnter={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onMouseLeave={() => {
+          setHoveredValue(null);
+        }}
+        onFocus={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onBlur={() => {
+          setHoveredValue(null);
+        }}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={handleKeyDown(number)}>
+        <input
+          type="radio"
+          name={inputId}
+          value={number}
+          checked={isSelected}
+          onChange={() => {
+            handleSelect(number);
+          }}
+          disabled={disabled}
+          required={required}
+          className="sr-only"
+          aria-label={`Rate ${String(number)} out of ${String(range)} stars`}
+        />
+        <div className="pointer-events-none flex w-full max-w-[74px] items-center justify-center">
+          {isActive ? (
+            <Star className="h-full w-full fill-yellow-400 text-yellow-400 transition-colors" />
+          ) : (
+            <Star className="h-full w-full fill-slate-300 text-slate-300 transition-colors" />
+          )}
+        </div>
+      </label>
+    );
+  };
+
+  // Render smiley scale option
+  const renderSmileyOption = (number: number, index: number): React.JSX.Element => {
+    const isSelected = currentValue === number;
+    const isHovered = hoveredValue === number;
+    const isActive = isSelected || isHovered;
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- label is interactive
+      <label
+        key={number}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={handleKeyDown(number)}
+        className={cn(
+          "relative flex max-h-16 min-h-9 w-full cursor-pointer justify-center transition-colors focus:outline-none",
+          isActive
+            ? "stroke-brand text-brand"
+            : "stroke-muted-foreground text-muted-foreground focus:border-accent focus:border-2",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+        onMouseEnter={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onMouseLeave={() => {
+          setHoveredValue(null);
+        }}
+        onFocus={() => {
+          if (!disabled) {
+            setHoveredValue(number);
+          }
+        }}
+        onBlur={() => {
+          setHoveredValue(null);
+        }}>
+        <input
+          type="radio"
+          name={inputId}
+          value={number}
+          checked={isSelected}
+          onChange={() => {
+            handleSelect(number);
+          }}
+          disabled={disabled}
+          required={required}
+          className="sr-only"
+          aria-label={`Rate ${String(number)} out of ${String(range)}`}
+        />
+        <div className="text-input-text pointer-events-none h-full w-full max-w-[74px] object-contain">
+          <RatingSmiley active={isActive} idx={index} range={range} addColors={colorCoding} />
+        </div>
+      </label>
+    );
+  };
+
+  // Generate rating options
+  const ratingOptions = Array.from({ length: range }, (_, i) => i + 1);
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Rating Options */}
+      <div className="relative space-y-2">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        <fieldset className="w-full">
+          <legend className="sr-only">Rating options</legend>
+          <div className="flex w-full px-[2px]">
+            {ratingOptions.map((number, index) => {
+              if (scale === "number") {
+                return renderNumberOption(number, ratingOptions.length);
+              } else if (scale === "star") {
+                return renderStarOption(number);
+              }
+              return renderSmileyOption(number, index);
+            })}
+          </div>
+
+          {/* Labels */}
+          {(lowerLabel ?? upperLabel) ? (
+            <div className="mt-4 flex justify-between gap-8 px-1.5">
+              {lowerLabel ? (
+                <Label variant="default" className="max-w-[50%] text-xs leading-6" dir={dir}>
+                  {lowerLabel}
+                </Label>
+              ) : null}
+              {upperLabel ? (
+                <Label variant="default" className="max-w-[50%] text-right text-xs leading-6" dir={dir}>
+                  {upperLabel}
+                </Label>
+              ) : null}
+            </div>
+          ) : null}
+        </fieldset>
+      </div>
+    </div>
+  );
+}
+
+export { Rating };
+export type { RatingProps };
diff --git a/packages/survey-ui/src/components/elements/single-select.stories.tsx b/packages/survey-ui/src/components/elements/single-select.stories.tsx
new file mode 100644
index 0000000000..344be9e516
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/single-select.stories.tsx
@@ -0,0 +1,382 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import {
+  type BaseStylingOptions,
+  type LabelStylingOptions,
+  type OptionStylingOptions,
+  commonArgTypes,
+  createCSSVariablesDecorator,
+  elementStylingArgTypes,
+  inputStylingArgTypes,
+  labelStylingArgTypes,
+  optionStylingArgTypes,
+  surveyStylingArgTypes,
+} from "../../lib/story-helpers";
+import { SingleSelect, type SingleSelectOption, type SingleSelectProps } from "./single-select";
+
+type StoryProps = SingleSelectProps &
+  Partial<BaseStylingOptions & LabelStylingOptions & OptionStylingOptions> &
+  Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/Elements/SingleSelect",
+  component: SingleSelect,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete single-select element that combines headline, description, and radio button options. Supports single selection, validation, and RTL text direction.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    ...commonArgTypes,
+    options: {
+      control: "object",
+      description: "Array of options to choose from",
+      table: { category: "Content" },
+    },
+    value: {
+      control: "text",
+      description: "Selected option ID",
+      table: { category: "State" },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["list", "dropdown"],
+      description: "Display variant: 'list' shows radio buttons, 'dropdown' shows a dropdown menu",
+      table: { category: "Layout" },
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for dropdown button when no option is selected",
+      table: { category: "Content" },
+    },
+  },
+  render: function Render(args: StoryProps) {
+    const [value, setValue] = useState(args.value);
+    const [otherValue, setOtherValue] = useState(args.otherValue);
+    const handleOtherValueChange = (v: string) => {
+      setOtherValue(v);
+      args.onOtherValueChange?.(v);
+    };
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    return (
+      <SingleSelect
+        {...args}
+        value={value}
+        onChange={(v) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+        otherValue={otherValue}
+        onOtherValueChange={handleOtherValueChange}
+      />
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+const defaultOptions: SingleSelectOption[] = [
+  { id: "option-1", label: "Option 1" },
+  { id: "option-2", label: "Option 2" },
+  { id: "option-3", label: "Option 3" },
+  { id: "option-4", label: "Option 4" },
+];
+
+export const StylingPlayground: Story = {
+  args: {
+    headline: "Which option do you prefer?",
+    description: "Select one option",
+    options: defaultOptions,
+  },
+  argTypes: {
+    ...elementStylingArgTypes,
+    ...labelStylingArgTypes,
+    ...optionStylingArgTypes,
+    ...inputStylingArgTypes,
+    ...surveyStylingArgTypes,
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const Default: Story = {
+  args: {
+    headline: "Which option do you prefer?",
+    options: defaultOptions,
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "What is your favorite programming language?",
+    description: "Select the language you use most frequently",
+    options: [
+      { id: "js", label: "JavaScript" },
+      { id: "ts", label: "TypeScript" },
+      { id: "python", label: "Python" },
+      { id: "java", label: "Java" },
+      { id: "go", label: "Go" },
+      { id: "rust", label: "Rust" },
+    ],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "Select your preferred plan",
+    description: "Please choose one option",
+    options: [
+      { id: "basic", label: "Basic Plan" },
+      { id: "pro", label: "Pro Plan" },
+      { id: "enterprise", label: "Enterprise Plan" },
+    ],
+    required: true,
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    headline: "Which option do you prefer?",
+    description: "Select one option",
+    options: defaultOptions,
+    value: "option-2",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    headline: "Select your preference",
+    description: "Please select an option",
+    options: [
+      { id: "yes", label: "Yes" },
+      { id: "no", label: "No" },
+      { id: "maybe", label: "Maybe" },
+    ],
+    errorMessage: "Please select an option",
+    required: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    headline: "This element is disabled",
+    description: "You cannot change the selection",
+    options: defaultOptions,
+    value: "option-2",
+    disabled: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    headline: "ما هو خيارك المفضل؟",
+    dir: "rtl",
+    description: "اختر خيارًا واحدًا",
+    options: [
+      { id: "opt-1", label: "الخيار الأول" },
+      { id: "opt-2", label: "الخيار الثاني" },
+      { id: "opt-3", label: "الخيار الثالث" },
+      { id: "opt-4", label: "الخيار الرابع" },
+    ],
+  },
+};
+
+export const RTLWithSelection: Story = {
+  args: {
+    headline: "ما هو تفضيلك؟",
+    dir: "rtl",
+    description: "يرجى اختيار خيار واحد",
+    options: [
+      { id: "tech", label: "التكنولوجيا" },
+      { id: "design", label: "التصميم" },
+      { id: "marketing", label: "التسويق" },
+      { id: "sales", label: "المبيعات" },
+    ],
+    value: "tech",
+  },
+};
+
+export const MultipleElements: Story = {
+  render: () => {
+    const [value1, setValue1] = React.useState<string | undefined>(undefined);
+    const [value2, setValue2] = React.useState<string>("js");
+
+    return (
+      <div className="w-[600px] space-y-8">
+        <SingleSelect
+          elementId="preference"
+          inputId="preference-input"
+          headline="Which option do you prefer?"
+          description="Select one option"
+          options={defaultOptions}
+          value={value1}
+          onChange={setValue1}
+        />
+        <SingleSelect
+          elementId="language"
+          inputId="language-input"
+          headline="What is your favorite programming language?"
+          options={[
+            { id: "js", label: "JavaScript" },
+            { id: "ts", label: "TypeScript" },
+            { id: "python", label: "Python" },
+          ]}
+          value={value2}
+          onChange={setValue2}
+        />
+      </div>
+    );
+  },
+};
+
+export const Dropdown: Story = {
+  args: {
+    headline: "Which option do you prefer?",
+    description: "Select one option",
+    options: defaultOptions,
+    variant: "dropdown",
+    placeholder: "Choose an option...",
+  },
+};
+
+export const DropdownWithSelection: Story = {
+  args: {
+    headline: "Which option do you prefer?",
+    description: "Select one option",
+    options: defaultOptions,
+    value: "option-2",
+    variant: "dropdown",
+    placeholder: "Choose an option...",
+  },
+};
+
+export const WithOtherOption: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string | undefined>(undefined);
+    const [otherValue, setOtherValue] = React.useState<string>("");
+
+    return (
+      <div className="w-[600px]">
+        <SingleSelect
+          elementId="single-select-other"
+          inputId="single-select-other-input"
+          headline="Which option do you prefer?"
+          description="Select one option"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithOtherOptionSelected: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("other");
+    const [otherValue, setOtherValue] = React.useState<string>("Custom option");
+
+    return (
+      <div className="w-[600px]">
+        <SingleSelect
+          elementId="single-select-other-selected"
+          inputId="single-select-other-selected-input"
+          headline="Which option do you prefer?"
+          description="Select one option"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const DropdownWithOtherOption: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string | undefined>(undefined);
+    const [otherValue, setOtherValue] = React.useState<string>("");
+
+    return (
+      <div className="w-[600px]">
+        <SingleSelect
+          elementId="single-select-dropdown-other"
+          inputId="single-select-dropdown-other-input"
+          headline="Which option do you prefer?"
+          description="Select one option"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          variant="dropdown"
+          placeholder="Choose an option..."
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithContainerStyling: Story = {
+  args: {
+    headline: "Select your preferred option",
+    description: "Each option has a container with custom styling",
+    options: [
+      { id: "option-1", label: "Option 1" },
+      { id: "option-2", label: "Option 2" },
+      { id: "option-3", label: "Option 3" },
+      { id: "option-4", label: "Option 4" },
+    ],
+    value: "option-2",
+  },
+  decorators: [createCSSVariablesDecorator<StoryProps>()],
+};
+
+export const WithContainerStylingAndOther: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string | undefined>(undefined);
+    const [otherValue, setOtherValue] = React.useState<string>("");
+
+    return (
+      <div className="w-[600px]">
+        <SingleSelect
+          elementId="container-styling-other"
+          inputId="container-styling-other-input"
+          headline="Select an option"
+          description="Options have containers, including the 'Other' option"
+          options={defaultOptions}
+          value={value}
+          onChange={setValue}
+          otherOptionId="other"
+          otherOptionLabel="Other"
+          otherOptionPlaceholder="Please specify"
+          otherValue={otherValue}
+          onOtherValueChange={setOtherValue}
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/survey-ui/src/components/elements/single-select.tsx b/packages/survey-ui/src/components/elements/single-select.tsx
new file mode 100644
index 0000000000..d6dcfd8656
--- /dev/null
+++ b/packages/survey-ui/src/components/elements/single-select.tsx
@@ -0,0 +1,315 @@
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/general/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/general/dropdown-menu";
+import { ElementError } from "@/components/general/element-error";
+import { ElementHeader } from "@/components/general/element-header";
+import { Input } from "@/components/general/input";
+import { RadioGroup, RadioGroupItem } from "@/components/general/radio-group";
+import { cn } from "@/lib/utils";
+
+/**
+ * Option for single-select element
+ */
+export interface SingleSelectOption {
+  /** Unique identifier for the option */
+  id: string;
+  /** Display label for the option */
+  label: string;
+}
+
+interface SingleSelectProps {
+  /** Unique identifier for the element container */
+  elementId: string;
+  /** The main element or prompt text displayed as the headline */
+  headline: string;
+  /** Optional descriptive text displayed below the headline */
+  description?: string;
+  /** Unique identifier for the single-select group */
+  inputId: string;
+  /** Array of options to choose from */
+  options: SingleSelectOption[];
+  /** Currently selected option ID */
+  value?: string;
+  /** Callback function called when selection changes */
+  onChange: (value: string) => void;
+  /** Whether the field is required (shows asterisk indicator) */
+  required?: boolean;
+  /** Error message to display below the options */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the options are disabled */
+  disabled?: boolean;
+  /** Display variant: 'list' shows radio buttons, 'dropdown' shows a dropdown menu */
+  variant?: "list" | "dropdown";
+  /** Placeholder text for dropdown button when no option is selected */
+  placeholder?: string;
+  /** ID for the 'other' option that allows custom input */
+  otherOptionId?: string;
+  /** Label for the 'other' option */
+  otherOptionLabel?: string;
+  /** Placeholder text for the 'other' input field */
+  otherOptionPlaceholder?: string;
+  /** Custom value entered in the 'other' input field */
+  otherValue?: string;
+  /** Callback when the 'other' input value changes */
+  onOtherValueChange?: (value: string) => void;
+}
+
+function SingleSelect({
+  elementId,
+  headline,
+  description,
+  inputId,
+  options,
+  value,
+  onChange,
+  required = false,
+  errorMessage,
+  dir = "auto",
+  disabled = false,
+  variant = "list",
+  placeholder = "Select an option...",
+  otherOptionId,
+  otherOptionLabel = "Other",
+  otherOptionPlaceholder = "Please specify",
+  otherValue = "",
+  onOtherValueChange,
+}: Readonly<SingleSelectProps>): React.JSX.Element {
+  // Ensure value is always a string or undefined
+  const selectedValue = value ?? undefined;
+  const hasOtherOption = Boolean(otherOptionId);
+  const isOtherSelected = hasOtherOption && selectedValue === otherOptionId;
+  const otherInputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (!isOtherSelected || disabled) return;
+
+    // Delay focus to win against Radix focus restoration when dropdown closes / radio item receives focus.
+    const timeoutId = globalThis.setTimeout(() => {
+      globalThis.requestAnimationFrame(() => {
+        otherInputRef.current?.focus();
+      });
+    }, 0);
+
+    return () => {
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [isOtherSelected, disabled, variant]);
+
+  const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    onOtherValueChange?.(e.target.value);
+  };
+
+  // Shared className for option containers
+  const getOptionContainerClassName = (isSelected: boolean): string =>
+    cn(
+      "relative flex cursor-pointer flex-col border transition-colors outline-none",
+      "rounded-option px-option-x py-option-y",
+      isSelected ? "bg-option-selected-bg border-brand" : "bg-option-bg border-option-border",
+      "focus-within:border-brand focus-within:bg-option-selected-bg",
+      "hover:bg-option-hover-bg",
+      disabled && "cursor-not-allowed opacity-50"
+    );
+
+  // Shared className for option labels
+  const optionLabelClassName = "font-option  font-option-weight text-option-label";
+
+  // Get selected option label for dropdown display
+  const selectedOption = options.find((opt) => opt.id === selectedValue);
+  const displayText = isOtherSelected
+    ? otherValue || otherOptionLabel
+    : (selectedOption?.label ?? placeholder);
+
+  return (
+    <div className="w-full space-y-4" id={elementId} dir={dir}>
+      {/* Headline */}
+      <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
+
+      {/* Options */}
+      <div className="space-y-3">
+        {variant === "dropdown" ? (
+          <>
+            <ElementError errorMessage={errorMessage} dir={dir} />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  disabled={disabled}
+                  className="rounded-input w-full justify-between"
+                  aria-invalid={Boolean(errorMessage)}
+                  aria-label={headline}>
+                  <span className="truncate">{displayText}</span>
+                  <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="bg-option-bg w-[var(--radix-dropdown-menu-trigger-width)]"
+                align="start">
+                <DropdownMenuRadioGroup value={selectedValue} onValueChange={onChange}>
+                  {options
+                    .filter((option) => option.id !== "none")
+                    .map((option) => {
+                      const optionId = `${inputId}-${option.id}`;
+
+                      return (
+                        <DropdownMenuRadioItem
+                          key={option.id}
+                          value={option.id}
+                          id={optionId}
+                          disabled={disabled}>
+                          <span className={optionLabelClassName}>{option.label}</span>
+                        </DropdownMenuRadioItem>
+                      );
+                    })}
+                  {hasOtherOption && otherOptionId ? (
+                    <DropdownMenuRadioItem
+                      value={otherOptionId}
+                      id={`${inputId}-${otherOptionId}`}
+                      disabled={disabled}>
+                      <span className={optionLabelClassName}>{otherValue || otherOptionLabel}</span>
+                    </DropdownMenuRadioItem>
+                  ) : null}
+                  {options
+                    .filter((option) => option.id === "none")
+                    .map((option) => {
+                      const optionId = `${inputId}-${option.id}`;
+
+                      return (
+                        <DropdownMenuRadioItem
+                          key={option.id}
+                          value={option.id}
+                          id={optionId}
+                          disabled={disabled}>
+                          <span className={optionLabelClassName}>{option.label}</span>
+                        </DropdownMenuRadioItem>
+                      );
+                    })}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            {isOtherSelected ? (
+              <Input
+                ref={otherInputRef}
+                type="text"
+                value={otherValue}
+                onChange={handleOtherInputChange}
+                placeholder={otherOptionPlaceholder}
+                disabled={disabled}
+                dir={dir}
+                className="w-full"
+              />
+            ) : null}
+          </>
+        ) : (
+          <RadioGroup
+            name={inputId}
+            value={selectedValue}
+            onValueChange={onChange}
+            disabled={disabled}
+            errorMessage={errorMessage}
+            required={required}
+            className="w-full gap-0 space-y-2">
+            {options
+              .filter((option) => option.id !== "none")
+              .map((option) => {
+                const optionId = `${inputId}-${option.id}`;
+                const isSelected = selectedValue === option.id;
+
+                return (
+                  <label
+                    key={option.id}
+                    htmlFor={optionId}
+                    className={cn(getOptionContainerClassName(isSelected), isSelected && "z-10")}>
+                    <span className="flex items-center">
+                      <RadioGroupItem
+                        value={option.id}
+                        id={optionId}
+                        disabled={disabled}
+                        required={required}
+                      />
+                      <span
+                        className={cn("mr-3 ml-3 grow", optionLabelClassName)}
+                        style={{ fontSize: "var(--fb-option-font-size)" }}>
+                        {option.label}
+                      </span>
+                    </span>
+                  </label>
+                );
+              })}
+            {hasOtherOption && otherOptionId ? (
+              <label
+                htmlFor={`${inputId}-${otherOptionId}`}
+                className={cn(getOptionContainerClassName(isOtherSelected), isOtherSelected && "z-10")}>
+                <span className="flex items-center">
+                  <RadioGroupItem
+                    value={otherOptionId}
+                    id={`${inputId}-${otherOptionId}`}
+                    disabled={disabled}
+                    required={required}
+                  />
+                  <span
+                    className={cn("mr-3 ml-3 grow", optionLabelClassName)}
+                    style={{ fontSize: "var(--fb-option-font-size)" }}>
+                    {otherOptionLabel}
+                  </span>
+                </span>
+                {isOtherSelected ? (
+                  <Input
+                    ref={otherInputRef}
+                    type="text"
+                    value={otherValue}
+                    onChange={handleOtherInputChange}
+                    placeholder={otherOptionPlaceholder}
+                    disabled={disabled}
+                    aria-required={required}
+                    dir={dir}
+                    className="mt-2 w-full"
+                    required={required}
+                  />
+                ) : null}
+              </label>
+            ) : null}
+            {options
+              .filter((option) => option.id === "none")
+              .map((option) => {
+                const optionId = `${inputId}-${option.id}`;
+                const isSelected = selectedValue === option.id;
+
+                return (
+                  <label
+                    key={option.id}
+                    htmlFor={optionId}
+                    className={cn(getOptionContainerClassName(isSelected), isSelected && "z-10")}>
+                    <span className="flex items-center">
+                      <RadioGroupItem
+                        value={option.id}
+                        id={optionId}
+                        disabled={disabled}
+                        required={required}
+                      />
+                      <span
+                        className={cn("mr-3 ml-3 grow", optionLabelClassName)}
+                        style={{ fontSize: "var(--fb-option-font-size)" }}>
+                        {option.label}
+                      </span>
+                    </span>
+                  </label>
+                );
+              })}
+          </RadioGroup>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { SingleSelect };
+export type { SingleSelectProps };
diff --git a/packages/survey-ui/src/components/general/alert.stories.tsx b/packages/survey-ui/src/components/general/alert.stories.tsx
new file mode 100644
index 0000000000..4aaabf963b
--- /dev/null
+++ b/packages/survey-ui/src/components/general/alert.stories.tsx
@@ -0,0 +1,66 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TriangleAlertIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "UI-package/General/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive"],
+      description: "Style variant of the alert",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Alert Title</AlertTitle>
+      <AlertDescription>This is a default alert message.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const DestructiveWithIcon: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <TriangleAlertIcon />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const WithTitleOnly: Story = {
+  render: () => (
+    <Alert>
+      <AlertTitle>Important Notice</AlertTitle>
+    </Alert>
+  ),
+};
+
+export const WithDescriptionOnly: Story = {
+  render: () => (
+    <Alert>
+      <AlertDescription>This alert only has a description.</AlertDescription>
+    </Alert>
+  ),
+};
diff --git a/packages/survey-ui/src/components/general/alert.tsx b/packages/survey-ui/src/components/general/alert.tsx
new file mode 100644
index 0000000000..3ec85031ff
--- /dev/null
+++ b/packages/survey-ui/src/components/general/alert.tsx
@@ -0,0 +1,54 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element {
+  return (
+    <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/packages/survey-ui/src/components/general/button.stories.tsx b/packages/survey-ui/src/components/general/button.stories.tsx
new file mode 100644
index 0000000000..4b6e544328
--- /dev/null
+++ b/packages/survey-ui/src/components/general/button.stories.tsx
@@ -0,0 +1,243 @@
+import type { Decorator, Meta, StoryContext, StoryObj } from "@storybook/react";
+import React from "react";
+import { Button } from "./button";
+
+// Styling options for the StylingPlayground story
+interface StylingOptions {
+  buttonHeight: string;
+  buttonWidth: string;
+  buttonFontSize: string;
+  buttonFontFamily: string;
+  buttonFontWeight: string;
+  buttonBorderRadius: string;
+  buttonBgColor: string;
+  buttonTextColor: string;
+  buttonPaddingX: string;
+  buttonPaddingY: string;
+}
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+type StoryProps = ButtonProps & StylingOptions;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/General/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link", "custom"],
+      description: "Visual style variant of the button",
+      table: { category: "Component Props" },
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+      description: "Size of the button",
+      table: { category: "Component Props" },
+    },
+    disabled: {
+      control: "boolean",
+      table: { category: "Component Props" },
+    },
+    asChild: {
+      table: { disable: true },
+    },
+    children: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+const withCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const {
+    buttonHeight,
+    buttonWidth,
+    buttonFontSize,
+    buttonFontFamily,
+    buttonFontWeight,
+    buttonBorderRadius,
+    buttonBgColor,
+    buttonTextColor,
+    buttonPaddingX,
+    buttonPaddingY,
+  } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-button-height": buttonHeight,
+    "--fb-button-width": buttonWidth,
+    "--fb-button-font-size": buttonFontSize,
+    "--fb-button-font-family": buttonFontFamily,
+    "--fb-button-font-weight": buttonFontWeight,
+    "--fb-button-border-radius": buttonBorderRadius,
+    "--fb-button-bg-color": buttonBgColor,
+    "--fb-button-text-color": buttonTextColor,
+    "--fb-button-padding-x": buttonPaddingX,
+    "--fb-button-padding-y": buttonPaddingY,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+export const StylingPlayground: Story = {
+  args: {
+    variant: "custom",
+    children: "Custom Button",
+  },
+  argTypes: {
+    // Button Styling (CSS Variables) - Only for this story
+    buttonHeight: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonWidth: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonFontSize: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonFontFamily: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonFontWeight: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonBorderRadius: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonBgColor: {
+      control: "color",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonTextColor: {
+      control: "color",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonPaddingX: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+    buttonPaddingY: {
+      control: "text",
+      table: {
+        category: "Button Styling",
+      },
+    },
+  },
+  decorators: [withCSSVariables],
+};
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Delete",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Button",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Button",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large Button",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    size: "icon",
+    children: "×",
+  },
+};
+
+export const Custom: Story = {
+  args: {
+    variant: "custom",
+    children: "Custom Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
diff --git a/packages/survey-ui/src/components/general/button.tsx b/packages/survey-ui/src/components/general/button.tsx
new file mode 100644
index 0000000000..32ca145d04
--- /dev/null
+++ b/packages/survey-ui/src/components/general/button.tsx
@@ -0,0 +1,58 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        custom: "button-custom",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/packages/survey-ui/src/components/general/calendar.tsx b/packages/survey-ui/src/components/general/calendar.tsx
new file mode 100644
index 0000000000..7f8aa3d95b
--- /dev/null
+++ b/packages/survey-ui/src/components/general/calendar.tsx
@@ -0,0 +1,218 @@
+import { type Locale, format } from "date-fns";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { type DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+import { Button, buttonVariants } from "@/components/general/button";
+import { getDateFnsLocale } from "@/lib/locale";
+import { cn } from "@/lib/utils";
+
+// Extracted components to avoid defining during render
+function CalendarRoot({
+  className,
+  rootRef,
+  ...props
+}: Readonly<{
+  className?: string;
+  rootRef?: React.Ref<HTMLDivElement>;
+  children?: React.ReactNode;
+}>): React.JSX.Element {
+  return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+}
+
+function CalendarChevron({
+  className,
+  orientation,
+  ...props
+}: Readonly<{
+  className?: string;
+  orientation?: "left" | "right" | "up" | "down";
+}>): React.JSX.Element {
+  if (orientation === "left") {
+    return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+  }
+
+  if (orientation === "right") {
+    return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+  }
+
+  return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+}
+
+function CalendarWeekNumber({
+  children,
+  ...props
+}: Readonly<{ children?: React.ReactNode }>): React.JSX.Element {
+  return (
+    <td {...props}>
+      <div className="flex h-[--cell-size] w-[--cell-size] items-center justify-center text-center">
+        {children}
+      </div>
+    </td>
+  );
+}
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  locale,
+  ...props
+}: Readonly<
+  React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    locale?: Locale | string;
+  }
+>): React.JSX.Element {
+  const defaultClassNames = getDefaultClassNames();
+
+  // Resolve locale to Locale object if string is provided
+  const resolvedLocale = React.useMemo(() => {
+    if (!locale) return undefined;
+    if (typeof locale === "string") {
+      return getDateFnsLocale(locale);
+    }
+    return locale;
+  }, [locale]);
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      locale={resolvedLocale}
+      formatters={{
+        formatMonthDropdown: (date) => {
+          if (resolvedLocale) {
+            return format(date, "MMM", { locale: resolvedLocale });
+          }
+          return date.toLocaleString("default", { month: "short" });
+        },
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input-border shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none text-[var(--fb-input-color)] opacity-70",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn("select-none w-[--cell-size]", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none bg-brand opacity-50",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-[var(--fb-input-color)] opacity-70 aria-selected:text-[var(--fb-input-color)] opacity-70",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        // @ts-expect-error - React types version mismatch - the project uses React 19 types, but some Radix UI packages (react-day-picker) bundle their own older React types, creating incompatible Ref type definitions
+        Root: CalendarRoot,
+        Chevron: CalendarChevron,
+        DayButton: CalendarDayButton,
+        WeekNumber: CalendarWeekNumber,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>): React.JSX.Element {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end ? !modifiers.range_middle : null
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-brand data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground hover:text-primary-foreground data-[selected-single=true]:hover:bg-brand data-[selected-single=true]:hover:text-primary-foreground data-[range-start=true]:hover:bg-primary data-[range-start=true]:hover:text-primary-foreground data-[range-end=true]:hover:bg-primary data-[range-end=true]:hover:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] hover:bg-[color-mix(in_srgb,var(--fb-survey-brand-color)_70%,transparent)] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
diff --git a/packages/survey-ui/src/components/general/checkbox.stories.tsx b/packages/survey-ui/src/components/general/checkbox.stories.tsx
new file mode 100644
index 0000000000..5c3a2cb954
--- /dev/null
+++ b/packages/survey-ui/src/components/general/checkbox.stories.tsx
@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "UI-package/General/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A checkbox component built with Radix UI primitives. Supports checked, unchecked, and indeterminate states with full accessibility support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    checked: {
+      control: { type: "boolean" },
+      description: "The controlled checked state of the checkbox",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the checkbox is required",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    "aria-label": "Checkbox",
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    "aria-label": "Checked checkbox",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    "aria-label": "Disabled checkbox",
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+    "aria-label": "Disabled checked checkbox",
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithLabelChecked: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms-checked" checked />
+      <Label htmlFor="terms-checked">Accept terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithLabelDisabled: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms-disabled" disabled />
+      <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
+    </div>
+  ),
+};
diff --git a/packages/survey-ui/src/components/general/checkbox.tsx b/packages/survey-ui/src/components/general/checkbox.tsx
new file mode 100644
index 0000000000..ed19be7518
--- /dev/null
+++ b/packages/survey-ui/src/components/general/checkbox.tsx
@@ -0,0 +1,27 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input-border dark:bg-input/30 data-[state=checked]:bg-brand data-[state=checked]:text-brand-foreground dark:data-[state=checked]:bg-brand data-[state=checked]:border-brand focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-input-text peer size-4 shrink-0 rounded-[4px] border bg-white shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="text-brand-foreground flex items-center justify-center text-current transition-none">
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/packages/survey-ui/src/components/general/dropdown-menu.stories.tsx b/packages/survey-ui/src/components/general/dropdown-menu.stories.tsx
new file mode 100644
index 0000000000..f042ecf2cc
--- /dev/null
+++ b/packages/survey-ui/src/components/general/dropdown-menu.stories.tsx
@@ -0,0 +1,188 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon, UsersIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: "UI-package/General/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <UserIcon />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCardIcon />
+          Billing
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <SettingsIcon />
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOutIcon />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithShortcuts: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <UserIcon />
+          Profile
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCardIcon />
+          Billing
+          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <SettingsIcon />
+          Settings
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOutIcon />
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const WithCheckboxes: Story = {
+  render: () => {
+    const [showStatusBar, setShowStatusBar] = React.useState(true);
+    const [showActivityBar, setShowActivityBar] = React.useState(false);
+    const [showPanel, setShowPanel] = React.useState(false);
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">View Options</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
+            Status Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar}>
+            Activity Bar
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+            Panel
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithRadioGroup: Story = {
+  render: () => {
+    const [position, setPosition] = React.useState("bottom");
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Position</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+};
+
+export const WithSubmenu: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <UserIcon />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCardIcon />
+          Billing
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <UsersIcon />
+            Invite users
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Email</DropdownMenuItem>
+            <DropdownMenuItem>Message</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>More...</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOutIcon />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
diff --git a/packages/survey-ui/src/components/general/dropdown-menu.tsx b/packages/survey-ui/src/components/general/dropdown-menu.tsx
new file mode 100644
index 0000000000..f1f1fc8096
--- /dev/null
+++ b/packages/survey-ui/src/components/general/dropdown-menu.tsx
@@ -0,0 +1,218 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function DropdownMenu({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Root>>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Portal>>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Content>>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none focus-visible:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Sub>>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:outline-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/packages/survey-ui/src/components/general/element-error.tsx b/packages/survey-ui/src/components/general/element-error.tsx
new file mode 100644
index 0000000000..38badde2b6
--- /dev/null
+++ b/packages/survey-ui/src/components/general/element-error.tsx
@@ -0,0 +1,36 @@
+import { AlertCircle } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface ElementErrorProps {
+  /** Error message to display */
+  errorMessage?: string;
+  /** Text direction: 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (auto-detect from content) */
+  dir?: "ltr" | "rtl" | "auto";
+}
+
+function ElementError({ errorMessage, dir = "auto" }: Readonly<ElementErrorProps>): React.JSX.Element | null {
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Error indicator bar */}
+      <div
+        className={cn(
+          "bg-destructive absolute top-0 bottom-0 w-[4px]",
+          dir === "rtl" ? "right-[-10px]" : "left-[-10px]"
+        )}
+      />
+      {/* Error message - shown at top */}
+      <div className="text-destructive mb-2 flex items-center gap-1 text-sm" dir={dir}>
+        <AlertCircle className="size-4" />
+        <span>{errorMessage}</span>
+      </div>
+    </>
+  );
+}
+
+export { ElementError };
+export type { ElementErrorProps };
diff --git a/packages/survey-ui/src/components/general/element-header.stories.tsx b/packages/survey-ui/src/components/general/element-header.stories.tsx
new file mode 100644
index 0000000000..423cbd3283
--- /dev/null
+++ b/packages/survey-ui/src/components/general/element-header.stories.tsx
@@ -0,0 +1,111 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { ElementHeader } from "./element-header";
+
+const meta: Meta<typeof ElementHeader> = {
+  title: "UI-package/General/ElementHeader",
+  component: ElementHeader,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    headline: {
+      control: "text",
+      description: "The main headline text",
+    },
+    description: {
+      control: "text",
+      description: "Optional description text displayed below the headline",
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the field is required (shows asterisk)",
+    },
+    htmlFor: {
+      control: "text",
+      description: "The id of the form control this header is associated with",
+    },
+    imageUrl: {
+      control: "text",
+      description: "URL of an image to display above the headline",
+    },
+    videoUrl: {
+      control: "text",
+      description: "URL of a video (YouTube, Vimeo, or Loom) to display above the headline",
+    },
+    imageAltText: {
+      control: "text",
+      description: "Alt text for the image",
+    },
+  },
+  args: {
+    headline: "Element Title",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ElementHeader>;
+
+export const Default: Story = {
+  args: {
+    headline: "What is your name?",
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    headline: "How satisfied are you?",
+    description: "Please rate your experience from 1 to 10",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    headline: "Email Address",
+    required: true,
+  },
+};
+
+export const RequiredWithDescription: Story = {
+  args: {
+    headline: "Phone Number",
+    description: "We'll use this to contact you about your order",
+    required: true,
+  },
+};
+
+export const WithHtmlFor: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <ElementHeader headline="Username" description="Choose a unique username" htmlFor="username" />
+      <input id="username" type="text" placeholder="Enter username" className="rounded border px-3 py-2" />
+    </div>
+  ),
+};
+
+export const WithImage: Story = {
+  args: {
+    headline: "What do you see in this image?",
+    description: "Please describe what you observe",
+    imageUrl: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop",
+    imageAltText: "Mountain landscape",
+  },
+};
+
+export const WithVideo: Story = {
+  args: {
+    headline: "Watch this video",
+    description: "Please watch the video and answer the questions below",
+    videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+  },
+};
+
+export const WithImageAndDescription: Story = {
+  args: {
+    headline: "Rate this design",
+    description: "On a scale of 1-10, how would you rate this design?",
+    required: true,
+    imageUrl: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop",
+    imageAltText: "Design mockup",
+  },
+};
diff --git a/packages/survey-ui/src/components/general/element-header.tsx b/packages/survey-ui/src/components/general/element-header.tsx
new file mode 100644
index 0000000000..3e38dcb960
--- /dev/null
+++ b/packages/survey-ui/src/components/general/element-header.tsx
@@ -0,0 +1,102 @@
+import DOMPurify from "isomorphic-dompurify";
+import * as React from "react";
+import { ElementMedia } from "@/components/general/element-media";
+import { Label } from "@/components/general/label";
+import { cn, stripInlineStyles } from "@/lib/utils";
+
+interface ElementHeaderProps extends React.ComponentProps<"div"> {
+  headline: string;
+  description?: string;
+  required?: boolean;
+  htmlFor?: string;
+  imageUrl?: string;
+  videoUrl?: string;
+  imageAltText?: string;
+}
+
+/**
+ * Checks if a string contains valid HTML markup
+ * @param str - The input string to test
+ * @returns true if the string contains valid HTML elements, false otherwise
+ */
+const isValidHTML = (str: string): boolean => {
+  if (!str) return false;
+
+  try {
+    const doc = new DOMParser().parseFromString(str, "text/html");
+    const errorNode = doc.querySelector("parsererror");
+    if (errorNode) return false;
+    return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Strips inline style attributes to prevent CSP violations
+ * Uses a safe regex pattern to avoid ReDoS (Regular Expression Denial of Service) vulnerabilities
+ * @param html - The HTML string to clean
+ * @returns HTML string without inline style attributes
+ */
+
+function ElementHeader({
+  headline,
+  description,
+  required = false,
+  htmlFor,
+  className,
+  imageUrl,
+  videoUrl,
+  imageAltText,
+  ...props
+}: Readonly<ElementHeaderProps>): React.JSX.Element {
+  const isMediaAvailable = imageUrl ?? videoUrl;
+
+  // Check if headline is HTML
+  const strippedHeadline = stripInlineStyles(headline);
+  const isHeadlineHtml = isValidHTML(strippedHeadline);
+  const safeHeadlineHtml =
+    isHeadlineHtml && strippedHeadline
+      ? DOMPurify.sanitize(strippedHeadline, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"],
+        })
+      : "";
+
+  return (
+    <div className={cn("space-y-2", className)} {...props}>
+      {/* Media (Image or Video) */}
+      {isMediaAvailable ? (
+        <ElementMedia imgUrl={imageUrl} videoUrl={videoUrl} altText={imageAltText} />
+      ) : null}
+
+      {/* Headline */}
+      <div>
+        <div>
+          {required ? <span className="label-headline mb-[3px] text-xs opacity-60">Required</span> : null}
+        </div>
+        <div className="flex">
+          {isHeadlineHtml && safeHeadlineHtml ? (
+            <Label htmlFor={htmlFor} variant="headline">
+              {headline}
+            </Label>
+          ) : (
+            <Label htmlFor={htmlFor} variant="headline" className="font-semibold">
+              {headline}
+            </Label>
+          )}
+        </div>
+      </div>
+
+      {/* Description/Subheader */}
+      {description ? (
+        <Label htmlFor={htmlFor} variant="description">
+          {description}
+        </Label>
+      ) : null}
+    </div>
+  );
+}
+
+export { ElementHeader };
+export type { ElementHeaderProps };
diff --git a/packages/survey-ui/src/components/general/element-media.tsx b/packages/survey-ui/src/components/general/element-media.tsx
new file mode 100644
index 0000000000..79b37d4ca1
--- /dev/null
+++ b/packages/survey-ui/src/components/general/element-media.tsx
@@ -0,0 +1,102 @@
+import { Download, ExternalLink } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "@/lib/video";
+
+// Function to add extra params to videoUrls in order to reduce video controls
+const getVideoUrlWithParams = (videoUrl: string): string | undefined => {
+  // First convert to embed URL
+  const embedUrl = convertToEmbedUrl(videoUrl);
+  if (!embedUrl) return undefined;
+
+  const isYoutubeVideo = checkForYoutubeUrl(videoUrl);
+  const isVimeoUrl = checkForVimeoUrl(videoUrl);
+  const isLoomUrl = checkForLoomUrl(videoUrl);
+
+  if (isYoutubeVideo) {
+    // For YouTube, add parameters to embed URL
+    const separator = embedUrl.includes("?") ? "&" : "?";
+    return `${embedUrl}${separator}controls=0`;
+  } else if (isVimeoUrl) {
+    // For Vimeo, add parameters to embed URL
+    const separator = embedUrl.includes("?") ? "&" : "?";
+    return `${embedUrl}${separator}title=false&transcript=false&speed=false&quality_selector=false&progress_bar=false&pip=false&fullscreen=false&cc=false&chromecast=false`;
+  } else if (isLoomUrl) {
+    // For Loom, add parameters to embed URL
+    const separator = embedUrl.includes("?") ? "&" : "?";
+    return `${embedUrl}${separator}hide_share=true&hideEmbedTopBar=true&hide_title=true`;
+  }
+  return embedUrl;
+};
+
+interface ElementMediaProps {
+  imgUrl?: string;
+  videoUrl?: string;
+  altText?: string;
+}
+
+function ElementMedia({
+  imgUrl,
+  videoUrl,
+  altText = "Image",
+}: Readonly<ElementMediaProps>): React.JSX.Element {
+  const videoUrlWithParams = videoUrl ? getVideoUrlWithParams(videoUrl) : undefined;
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  if (!imgUrl && !videoUrl) {
+    return <></>;
+  }
+
+  return (
+    <div className="group/image relative mb-6 block min-h-40 rounded-md">
+      {isLoading ? (
+        <div className="absolute inset-auto flex h-full w-full animate-pulse items-center justify-center rounded-md bg-slate-200" />
+      ) : null}
+      {imgUrl ? (
+        <img
+          key={imgUrl}
+          src={imgUrl}
+          alt={altText}
+          className={cn("mx-auto max-h-[40dvh] rounded-md object-contain", isLoading ? "opacity-0" : "")}
+          onLoad={() => {
+            setIsLoading(false);
+          }}
+          onError={() => {
+            setIsLoading(false);
+          }}
+        />
+      ) : null}
+      {videoUrlWithParams ? (
+        <div className="relative">
+          <div className="rounded-md bg-black">
+            <iframe
+              src={videoUrlWithParams}
+              title="Question video"
+              style={{ border: 0 }}
+              className={cn("aspect-video w-full rounded-md", isLoading ? "opacity-0" : "")}
+              onLoad={() => {
+                setIsLoading(false);
+              }}
+              onError={() => {
+                setIsLoading(false);
+              }}
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
+              referrerPolicy="strict-origin-when-cross-origin"
+            />
+          </div>
+        </div>
+      ) : null}
+      <a
+        href={imgUrl ?? convertToEmbedUrl(videoUrl ?? "")}
+        target="_blank"
+        rel="noreferrer"
+        aria-label="Open in new tab"
+        className="bg-opacity-40 hover:bg-opacity-65 absolute right-2 bottom-2 flex items-center gap-2 rounded-md bg-slate-800 p-1.5 text-white opacity-0 backdrop-blur-lg transition duration-300 ease-in-out group-hover/image:opacity-100">
+        {imgUrl ? <Download size={20} /> : <ExternalLink size={20} />}
+      </a>
+    </div>
+  );
+}
+
+export { ElementMedia };
+export type { ElementMediaProps };
diff --git a/packages/survey-ui/src/components/general/input.stories.tsx b/packages/survey-ui/src/components/general/input.stories.tsx
new file mode 100644
index 0000000000..96a9e895ff
--- /dev/null
+++ b/packages/survey-ui/src/components/general/input.stories.tsx
@@ -0,0 +1,294 @@
+import type { Decorator, Meta, StoryContext, StoryObj } from "@storybook/react";
+import React from "react";
+import { Input, type InputProps } from "./input";
+
+// Styling options for the StylingPlayground story
+interface StylingOptions {
+  inputWidth: string;
+  inputHeight: string;
+  inputBgColor: string;
+  inputBorderColor: string;
+  inputBorderRadius: string;
+  inputFontFamily: string;
+  inputFontSize: string;
+  inputFontWeight: string;
+  inputColor: string;
+  inputPlaceholderColor: string;
+  inputPaddingX: string;
+  inputPaddingY: string;
+  inputShadow: string;
+  brandColor: string;
+}
+
+type StoryProps = InputProps & Partial<StylingOptions>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/General/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "number", "tel", "url", "search", "file"],
+      table: { category: "Component Props" },
+    },
+    placeholder: {
+      control: "text",
+      table: { category: "Component Props" },
+    },
+    disabled: {
+      control: "boolean",
+      table: { category: "Component Props" },
+    },
+    errorMessage: {
+      control: "text",
+      table: { category: "Component Props" },
+    },
+    dir: {
+      control: { type: "select" },
+      options: ["ltr", "rtl"],
+      table: { category: "Component Props" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+const withCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const {
+    inputWidth,
+    inputHeight,
+    inputBgColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputFontFamily,
+    inputFontSize,
+    inputFontWeight,
+    inputColor,
+    inputPlaceholderColor,
+    inputPaddingX,
+    inputPaddingY,
+    inputShadow,
+    brandColor,
+  } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-input-width": inputWidth,
+    "--fb-input-height": inputHeight,
+    "--fb-input-bg-color": inputBgColor,
+    "--fb-input-border-color": inputBorderColor,
+    "--fb-input-border-radius": inputBorderRadius,
+    "--fb-input-font-family": inputFontFamily,
+    "--fb-input-font-size": inputFontSize,
+    "--fb-input-font-weight": inputFontWeight,
+    "--fb-input-color": inputColor,
+    "--fb-input-placeholder-color": inputPlaceholderColor,
+    "--fb-input-padding-x": inputPaddingX,
+    "--fb-input-padding-y": inputPaddingY,
+    "--fb-input-shadow": inputShadow,
+    "--fb-survey-brand-color": brandColor,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+export const StylingPlayground: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+  argTypes: {
+    // Input Styling (CSS Variables) - Only for this story
+    inputWidth: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "100%" },
+      },
+    },
+    inputHeight: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "2.25rem" },
+      },
+    },
+    inputBgColor: {
+      control: "color",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "transparent" },
+      },
+    },
+    inputBorderColor: {
+      control: "color",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "var(--input)" },
+      },
+    },
+    inputBorderRadius: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "0.5rem" },
+      },
+    },
+    inputFontFamily: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "inherit" },
+      },
+    },
+    inputFontSize: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "0.875rem" },
+      },
+    },
+    inputFontWeight: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "400" },
+      },
+    },
+    inputColor: {
+      control: "color",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "var(--foreground)" },
+      },
+    },
+    inputPlaceholderColor: {
+      control: "color",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "var(--muted-foreground)" },
+      },
+    },
+    inputPaddingX: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "0.75rem" },
+      },
+    },
+    inputPaddingY: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "0.25rem" },
+      },
+    },
+    inputShadow: {
+      control: "text",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+      },
+    },
+    brandColor: {
+      control: "color",
+      table: {
+        category: "Input Styling",
+        defaultValue: { summary: "var(--fb-survey-brand-color)" },
+      },
+    },
+  },
+  decorators: [withCSSVariables],
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    defaultValue: "Sample text",
+    placeholder: "Enter text...",
+  },
+};
+
+export const Email: Story = {
+  args: {
+    type: "email",
+    placeholder: "email@example.com",
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: "password",
+    placeholder: "Enter password",
+  },
+};
+
+export const NumberInput: Story = {
+  args: {
+    type: "number",
+    placeholder: "0",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    placeholder: "Enter your email",
+    defaultValue: "invalid-email",
+    errorMessage: "Please enter a valid email address",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};
+
+export const DisabledWithValue: Story = {
+  args: {
+    defaultValue: "Cannot edit this",
+    disabled: true,
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    dir: "rtl",
+    placeholder: "أدخل النص هنا",
+    defaultValue: "نص تجريبي",
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    placeholder: "Full width input",
+    className: "w-96",
+  },
+};
+
+export const WithErrorAndRTL: Story = {
+  args: {
+    dir: "rtl",
+    placeholder: "أدخل بريدك الإلكتروني",
+    errorMessage: "هذا الحقل مطلوب",
+  },
+};
diff --git a/packages/survey-ui/src/components/general/input.tsx b/packages/survey-ui/src/components/general/input.tsx
new file mode 100644
index 0000000000..795a92a9a4
--- /dev/null
+++ b/packages/survey-ui/src/components/general/input.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { ElementError } from "@/components/general/element-error";
+import { cn } from "@/lib/utils";
+
+interface InputProps extends React.ComponentProps<"input"> {
+  /** Text direction for RTL language support */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Error message to display above the input */
+  errorMessage?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, type, errorMessage, dir, ...props },
+  ref
+): React.JSX.Element {
+  const hasError = Boolean(errorMessage);
+
+  return (
+    <div className="space-y-1">
+      <ElementError errorMessage={errorMessage} dir={dir} />
+      <input
+        ref={ref}
+        type={type}
+        dir={dir}
+        data-slot="input"
+        style={{ fontSize: "var(--fb-input-font-size)" }}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          // Layout and behavior
+          "flex min-w-0 border transition-[color,box-shadow] outline-none",
+          // Customizable styles via CSS variables (using Tailwind theme extensions)
+          "w-input h-input",
+          "bg-input-bg border-input-border rounded-input",
+          "font-input font-input-weight",
+          "text-input-text",
+          "px-input-x py-input-y",
+          "shadow-input",
+          // Placeholder styling
+          "placeholder:opacity-input-placeholder",
+          "placeholder:text-input-placeholder placeholder:text-sm",
+
+          // Selection styling
+          "selection:bg-primary selection:text-primary-foreground",
+          // File input specifics
+          "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          // Focus ring
+          "focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]",
+          // Error state ring
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          // Disabled state
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+
+export { Input };
+export type { InputProps };
diff --git a/packages/survey-ui/src/components/general/label.stories.tsx b/packages/survey-ui/src/components/general/label.stories.tsx
new file mode 100644
index 0000000000..eed7148b31
--- /dev/null
+++ b/packages/survey-ui/src/components/general/label.stories.tsx
@@ -0,0 +1,405 @@
+import type { Decorator, Meta, StoryContext, StoryObj } from "@storybook/react";
+import React from "react";
+import { Checkbox } from "./checkbox";
+import { Input } from "./input";
+import { Label, type LabelProps } from "./label";
+import { Textarea } from "./textarea";
+
+// Styling options for the StylingPlayground stories
+interface HeadlineStylingOptions {
+  headlineFontFamily: string;
+  headlineFontWeight: string;
+  headlineFontSize: string;
+  headlineColor: string;
+  headlineOpacity: string;
+}
+
+interface DescriptionStylingOptions {
+  descriptionFontFamily: string;
+  descriptionFontWeight: string;
+  descriptionFontSize: string;
+  descriptionColor: string;
+  descriptionOpacity: string;
+}
+
+interface DefaultStylingOptions {
+  labelFontFamily: string;
+  labelFontWeight: string;
+  labelFontSize: string;
+  labelColor: string;
+  labelOpacity: string;
+}
+
+type StoryProps = LabelProps &
+  Partial<HeadlineStylingOptions & DescriptionStylingOptions & DefaultStylingOptions>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/General/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A label component built with Radix UI primitives. Provides accessible labeling for form controls with proper association and styling.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "headline", "description"],
+      description: "Visual style variant of the label",
+      table: { category: "Component Props" },
+    },
+    htmlFor: {
+      control: { type: "text" },
+      description: "The id of the form control this label is associated with",
+      table: { category: "Component Props" },
+    },
+    style: {
+      control: "object",
+      table: { category: "Component Props" },
+    },
+  },
+  args: {
+    children: "Label text",
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables for headline variant
+const withHeadlineCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const { headlineFontFamily, headlineFontWeight, headlineFontSize, headlineColor, headlineOpacity } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-element-headline-font-family": headlineFontFamily ?? undefined,
+    "--fb-element-headline-font-weight": headlineFontWeight ?? undefined,
+    "--fb-element-headline-font-size": headlineFontSize ?? undefined,
+    "--fb-element-headline-color": headlineColor ?? undefined,
+    "--fb-element-headline-opacity": headlineOpacity ?? undefined,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+// Decorator to apply CSS variables for description variant
+const withDescriptionCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const {
+    descriptionFontFamily,
+    descriptionFontWeight,
+    descriptionFontSize,
+    descriptionColor,
+    descriptionOpacity,
+  } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-element-description-font-family": descriptionFontFamily ?? undefined,
+    "--fb-element-description-font-weight": descriptionFontWeight ?? undefined,
+    "--fb-element-description-font-size": descriptionFontSize ?? undefined,
+    "--fb-element-description-color": descriptionColor ?? undefined,
+    "--fb-element-description-opacity": descriptionOpacity ?? undefined,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+const withCustomCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const { labelFontFamily, labelFontWeight, labelFontSize, labelColor, labelOpacity } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-label-font-family": labelFontFamily ?? undefined,
+    "--fb-label-font-weight": labelFontWeight ?? undefined,
+    "--fb-label-font-size": labelFontSize ?? undefined,
+    "--fb-label-color": labelColor ?? undefined,
+    "--fb-label-opacity": labelOpacity ?? undefined,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="username">Username</Label>
+      <Input id="username" placeholder="Enter your username..." />
+    </div>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">I agree to the terms and conditions</Label>
+    </div>
+  ),
+};
+
+export const WithTextarea: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="message">Message</Label>
+      <Textarea id="message" placeholder="Enter your message..." />
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="email">
+        Email address <span className="text-red-500">*</span>
+      </Label>
+      <Input id="email" type="email" placeholder="Enter your email..." required />
+    </div>
+  ),
+};
+
+export const Optional: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="website">
+        Website <span className="text-muted-foreground">(optional)</span>
+      </Label>
+      <Input id="website" type="url" placeholder="https://..." />
+    </div>
+  ),
+};
+
+export const WithHelpText: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="password">Password</Label>
+      <Input id="password" type="password" placeholder="Enter your password..." />
+      <p className="text-muted-foreground text-sm">
+        Must be at least 8 characters with a mix of letters and numbers
+      </p>
+    </div>
+  ),
+};
+
+export const ErrorState: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <Label htmlFor="invalid-email">
+        Email address <span className="text-red-500">*</span>
+      </Label>
+      <Input
+        id="invalid-email"
+        type="email"
+        aria-invalid
+        value="invalid-email"
+        placeholder="Enter your email..."
+      />
+      <p className="text-destructive text-sm">Please enter a valid email address</p>
+    </div>
+  ),
+};
+
+export const FormSection: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-6">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Personal Information</h3>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="first-name">First name</Label>
+            <Input id="first-name" placeholder="Enter your first name..." />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="last-name">Last name</Label>
+            <Input id="last-name" placeholder="Enter your last name..." />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="birth-date">Date of birth</Label>
+            <Input id="birth-date" type="date" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Contact Information</h3>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="contact-email">
+              Email address <span className="text-red-500">*</span>
+            </Label>
+            <Input id="contact-email" type="email" placeholder="Enter your email..." />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="phone">
+              Phone number <span className="text-muted-foreground">(optional)</span>
+            </Label>
+            <Input id="phone" type="tel" placeholder="Enter your phone number..." />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Preferences</h3>
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox id="newsletter" />
+            <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox id="notifications" />
+            <Label htmlFor="notifications">Enable email notifications</Label>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const LongLabel: Story = {
+  render: () => (
+    <div className="w-[350px] space-y-2">
+      <Label htmlFor="long-label">
+        This is a very long label that demonstrates how labels wrap when they contain a lot of text and need
+        to span multiple lines
+      </Label>
+      <Input id="long-label" placeholder="Enter value..." />
+    </div>
+  ),
+};
+
+export const HeadlineVariant: Story = {
+  args: {
+    variant: "headline",
+    children: "Headline Label",
+    headlineFontFamily: "system-ui, sans-serif",
+    headlineFontWeight: "600",
+    headlineFontSize: "1.25rem",
+    headlineColor: "#1e293b",
+    headlineOpacity: "1",
+  },
+  argTypes: {
+    headlineFontFamily: {
+      control: "text",
+      table: { category: "Headline Styling" },
+    },
+    headlineFontWeight: {
+      control: "text",
+      table: { category: "Headline Styling" },
+    },
+    headlineFontSize: {
+      control: "text",
+      table: { category: "Headline Styling" },
+    },
+    headlineColor: {
+      control: "color",
+      table: { category: "Headline Styling" },
+    },
+    headlineOpacity: {
+      control: "text",
+      table: { category: "Headline Styling" },
+    },
+  },
+  decorators: [withHeadlineCSSVariables],
+};
+
+export const DescriptionVariant: Story = {
+  args: {
+    variant: "description",
+    children: "Description Label",
+    descriptionFontFamily: "system-ui, sans-serif",
+    descriptionFontWeight: "400",
+    descriptionFontSize: "0.875rem",
+    descriptionColor: "#64748b",
+    descriptionOpacity: "1",
+  },
+  argTypes: {
+    descriptionFontFamily: {
+      control: "text",
+      table: { category: "Description Styling" },
+    },
+    descriptionFontWeight: {
+      control: "text",
+      table: { category: "Description Styling" },
+    },
+    descriptionFontSize: {
+      control: "text",
+      table: { category: "Description Styling" },
+    },
+    descriptionColor: {
+      control: "color",
+      table: { category: "Description Styling" },
+    },
+    descriptionOpacity: {
+      control: "text",
+      table: { category: "Description Styling" },
+    },
+  },
+  decorators: [withDescriptionCSSVariables],
+};
+
+export const DefaultVariant: Story = {
+  args: {
+    variant: "default",
+    children: "Default Label",
+    labelFontFamily: "system-ui, sans-serif",
+    labelFontWeight: "500",
+    labelFontSize: "0.875rem",
+    labelColor: "#1e293b",
+    labelOpacity: "1",
+  },
+  argTypes: {
+    labelFontFamily: {
+      control: "text",
+      table: { category: "Default Label Styling" },
+    },
+    labelFontWeight: {
+      control: "text",
+      table: { category: "Default Label Styling" },
+    },
+    labelFontSize: {
+      control: "text",
+      table: { category: "Default Label Styling" },
+    },
+    labelColor: {
+      control: "color",
+      table: { category: "Default Label Styling" },
+    },
+    labelOpacity: {
+      control: "text",
+      table: { category: "Default Label Styling" },
+    },
+  },
+  decorators: [withCustomCSSVariables],
+};
diff --git a/packages/survey-ui/src/components/general/label.tsx b/packages/survey-ui/src/components/general/label.tsx
new file mode 100644
index 0000000000..346e5bd5e8
--- /dev/null
+++ b/packages/survey-ui/src/components/general/label.tsx
@@ -0,0 +1,123 @@
+import DOMPurify from "isomorphic-dompurify";
+import * as React from "react";
+import { cn, stripInlineStyles } from "@/lib/utils";
+
+interface LabelProps extends React.ComponentProps<"label"> {
+  /** Label variant for different styling contexts */
+  variant?: "default" | "headline" | "description";
+}
+
+/**
+ * Checks if a string contains valid HTML markup
+ * @param str - The input string to test
+ * @returns true if the string contains valid HTML elements, false otherwise
+ */
+const isValidHTML = (str: string): boolean => {
+  if (!str) return false;
+
+  try {
+    const doc = new DOMParser().parseFromString(str, "text/html");
+    const errorNode = doc.querySelector("parsererror");
+    if (errorNode) return false;
+    return Array.from(doc.body.childNodes).some((node) => node.nodeType === 1);
+  } catch {
+    return false;
+  }
+};
+
+function Label({
+  className,
+  variant = "default",
+  children,
+  ...props
+}: Readonly<LabelProps>): React.JSX.Element {
+  const { htmlFor, form, ...restProps } = props;
+
+  // Check if children is a string and contains HTML
+  const childrenString = typeof children === "string" ? children : null;
+  const strippedContent = childrenString ? stripInlineStyles(childrenString) : "";
+  const isHtml = childrenString ? isValidHTML(strippedContent) : false;
+  const safeHtml =
+    isHtml && strippedContent
+      ? DOMPurify.sanitize(strippedContent, {
+          ADD_ATTR: ["target"],
+          FORBID_ATTR: ["style"],
+        })
+      : "";
+
+  // Determine variant class
+  let variantClass = "label-default";
+  if (variant === "headline") {
+    variantClass = "label-headline";
+  } else if (variant === "description") {
+    variantClass = "label-description";
+  }
+
+  // Base classes - use flex-col for HTML content to allow line breaks, flex items-center for non-HTML
+  const baseClasses =
+    isHtml && safeHtml
+      ? "flex flex-col gap-2 leading-6 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      : "flex items-center gap-2 leading-6 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+
+  // If HTML, render with dangerouslySetInnerHTML, otherwise render normally
+  if (isHtml && safeHtml) {
+    if (htmlFor) {
+      return (
+        <label
+          data-slot="label"
+          data-variant={variant}
+          className={cn(baseClasses, variantClass, className)}
+          htmlFor={htmlFor}
+          form={form}
+          {...restProps}
+          dangerouslySetInnerHTML={{ __html: safeHtml }}
+        />
+      );
+    }
+
+    return (
+      <span
+        data-slot="label"
+        data-variant={variant}
+        className={cn(baseClasses, variantClass, className)}
+        {...(restProps as React.HTMLAttributes<HTMLSpanElement>)}
+        dangerouslySetInnerHTML={{ __html: safeHtml }}
+      />
+    );
+  }
+
+  if (htmlFor) {
+    return (
+      <label
+        data-slot="label"
+        data-variant={variant}
+        className={cn(
+          "flex items-center gap-2 leading-6 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          variantClass,
+          className
+        )}
+        htmlFor={htmlFor}
+        form={form}
+        {...restProps}>
+        {children}
+      </label>
+    );
+  }
+
+  return (
+    <span
+      data-slot="label"
+      data-variant={variant}
+      className={cn(
+        "flex items-center gap-2 leading-6 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        variantClass,
+        className
+      )}
+      {...(restProps as React.HTMLAttributes<HTMLSpanElement>)}>
+      {children}
+    </span>
+  );
+}
+
+export { Label };
+export type { LabelProps };
diff --git a/packages/survey-ui/src/components/general/popover.tsx b/packages/survey-ui/src/components/general/popover.tsx
new file mode 100644
index 0000000000..b09becf9da
--- /dev/null
+++ b/packages/survey-ui/src/components/general/popover.tsx
@@ -0,0 +1,39 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Popover({ ...props }: Readonly<React.ComponentProps<typeof PopoverPrimitive.Root>>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: Readonly<React.ComponentProps<typeof PopoverPrimitive.Content>>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/packages/survey-ui/src/components/general/progress.stories.tsx b/packages/survey-ui/src/components/general/progress.stories.tsx
new file mode 100644
index 0000000000..65164b3397
--- /dev/null
+++ b/packages/survey-ui/src/components/general/progress.stories.tsx
@@ -0,0 +1,155 @@
+import type { Decorator, Meta, StoryContext, StoryObj } from "@storybook/react";
+import React from "react";
+import { Progress, type ProgressProps } from "./progress";
+
+// Styling options for the StylingPlayground story
+interface StylingOptions {
+  trackHeight: string;
+  trackBgColor: string;
+  trackBorderRadius: string;
+  indicatorBgColor: string;
+  indicatorBorderRadius: string;
+}
+
+type StoryProps = ProgressProps & Partial<StylingOptions> & Record<string, unknown>;
+
+const meta: Meta<StoryProps> = {
+  title: "UI-package/General/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    value: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+      description: "Progress value (0-100)",
+      table: { category: "Component Props" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryProps>;
+
+// Decorator to apply CSS variables from story args
+const withCSSVariables: Decorator<StoryProps> = (
+  Story: React.ComponentType,
+  context: StoryContext<StoryProps>
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- Storybook's Decorator type doesn't properly infer args type
+  const args = context.args as StoryProps;
+  const { trackHeight, trackBgColor, trackBorderRadius, indicatorBgColor, indicatorBorderRadius } = args;
+
+  const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {
+    "--fb-progress-track-height": trackHeight,
+    "--fb-progress-track-bg-color": trackBgColor,
+    "--fb-progress-track-border-radius": trackBorderRadius,
+    "--fb-progress-indicator-bg-color": indicatorBgColor,
+    "--fb-progress-indicator-border-radius": indicatorBorderRadius,
+  };
+
+  return (
+    <div style={cssVarStyle}>
+      <Story />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args: StoryProps) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
+  args: {
+    value: 50,
+  },
+};
+
+export const Zero: Story = {
+  render: (args: StoryProps) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
+  args: {
+    value: 0,
+  },
+};
+
+export const Half: Story = {
+  render: (args: StoryProps) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
+  args: {
+    value: 50,
+  },
+};
+
+export const Complete: Story = {
+  render: (args: StoryProps) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
+  args: {
+    value: 100,
+  },
+};
+
+export const CustomStyles: Story = {
+  render: (args: StoryProps) => (
+    <div className="w-64">
+      <Progress {...args} />
+    </div>
+  ),
+  args: {
+    value: 75,
+    trackHeight: "1.25rem",
+    trackBgColor: "hsl(0 0% 0% / 0.3)",
+    trackBorderRadius: "0.75rem",
+    indicatorBgColor: "hsl(142 76% 36%)",
+    indicatorBorderRadius: "0.75rem",
+  },
+  argTypes: {
+    trackHeight: {
+      control: "text",
+      table: {
+        category: "Progress Styling",
+        defaultValue: { summary: "0.5rem" },
+      },
+    },
+    trackBgColor: {
+      control: "color",
+      table: {
+        category: "Progress Styling",
+        defaultValue: { summary: "hsl(222.2 47.4% 11.2% / 0.2)" },
+      },
+    },
+    trackBorderRadius: {
+      control: "text",
+      table: {
+        category: "Progress Styling",
+        defaultValue: { summary: "var(--radius)" },
+      },
+    },
+    indicatorBgColor: {
+      control: "color",
+      table: {
+        category: "Progress Styling",
+        defaultValue: { summary: "hsl(222.2 47.4% 11.2%)" },
+      },
+    },
+    indicatorBorderRadius: {
+      control: "text",
+      table: {
+        category: "Progress Styling",
+        defaultValue: { summary: "var(--radius)" },
+      },
+    },
+  },
+  decorators: [withCSSVariables],
+};
diff --git a/packages/survey-ui/src/components/general/progress.tsx b/packages/survey-ui/src/components/general/progress.tsx
new file mode 100644
index 0000000000..c8165e8290
--- /dev/null
+++ b/packages/survey-ui/src/components/general/progress.tsx
@@ -0,0 +1,29 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
+  value?: number;
+}
+
+function Progress({ className, value, ...props }: Readonly<ProgressProps>): React.JSX.Element {
+  const progressValue: number = typeof value === "number" ? value : 0;
+  return (
+    // @ts-expect-error - React types version mismatch - the project uses React 19 types, but some Radix UI packages (@radix-ui/react-progress) bundle their own older React types, creating incompatible Ref type definitions
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      value={progressValue}
+      className={cn("progress-track relative w-full overflow-hidden", className)}
+      {...props}>
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="progress-indicator h-full w-full flex-1 transition-all"
+        style={{
+          transform: `translateX(-${String(100 - progressValue)}%)`,
+        }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };
diff --git a/packages/survey-ui/src/components/general/radio-group.stories.tsx b/packages/survey-ui/src/components/general/radio-group.stories.tsx
new file mode 100644
index 0000000000..8cedd4f605
--- /dev/null
+++ b/packages/survey-ui/src/components/general/radio-group.stories.tsx
@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./label";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "UI-package/General/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A radio group component built with Radix UI primitives. Allows users to select one option from a set of mutually exclusive choices.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: { type: "text" },
+      description: "The default selected value",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the entire radio group is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether a selection is required",
+    },
+    dir: {
+      control: { type: "select" },
+      options: ["ltr", "rtl"],
+      description: "Text direction",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args: React.ComponentProps<typeof RadioGroup>) => (
+    <RadioGroup defaultValue="option1" {...args}>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="option1" />
+        <Label htmlFor="option1">Option 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="option2" />
+        <Label htmlFor="option2">Option 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="option3" />
+        <Label htmlFor="option3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+  args: {
+    defaultValue: "option1",
+  },
+};
+
+export const WithoutDefault: Story = {
+  render: () => (
+    <RadioGroup>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="no-default-1" />
+        <Label htmlFor="no-default-1">Option 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="no-default-2" />
+        <Label htmlFor="no-default-2">Option 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="no-default-3" />
+        <Label htmlFor="no-default-3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1" disabled>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="disabled-1" />
+        <Label htmlFor="disabled-1">Option 1 (Selected)</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="disabled-2" />
+        <Label htmlFor="disabled-2">Option 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="disabled-3" />
+        <Label htmlFor="disabled-3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const SingleDisabledOption: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option1">
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="single-disabled-1" />
+        <Label htmlFor="single-disabled-1">Option 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="single-disabled-2" disabled />
+        <Label htmlFor="single-disabled-2">Option 2 (Disabled)</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="single-disabled-3" />
+        <Label htmlFor="single-disabled-3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const PaymentMethod: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <h3 className="text-lg font-medium">Payment Method</h3>
+      <RadioGroup defaultValue="credit-card">
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="credit-card" id="credit-card" />
+          <Label htmlFor="credit-card">Credit Card</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="paypal" id="paypal" />
+          <Label htmlFor="paypal">PayPal</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="bank-transfer" id="bank-transfer" />
+          <Label htmlFor="bank-transfer">Bank Transfer</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="crypto" id="crypto" disabled />
+          <Label htmlFor="crypto">Cryptocurrency (Coming Soon)</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+export const SurveyElement: Story = {
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <div>
+        <h3 className="text-lg font-medium">How satisfied are you with our service?</h3>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Please select one option that best describes your experience.
+        </p>
+      </div>
+      <RadioGroup>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="very-satisfied" id="very-satisfied" />
+          <Label htmlFor="very-satisfied">Very satisfied</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="satisfied" id="satisfied" />
+          <Label htmlFor="satisfied">Satisfied</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="neutral" id="neutral" />
+          <Label htmlFor="neutral">Neutral</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="dissatisfied" id="dissatisfied" />
+          <Label htmlFor="dissatisfied">Dissatisfied</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="very-dissatisfied" id="very-dissatisfied" />
+          <Label htmlFor="very-dissatisfied">Very dissatisfied</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <h3 className="text-lg font-medium">Choose your plan</h3>
+      <RadioGroup defaultValue="basic">
+        <div className="space-y-2 rounded-lg border p-4">
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="basic" id="plan-basic" />
+            <Label htmlFor="plan-basic" className="font-medium">
+              Basic Plan
+            </Label>
+          </div>
+          <p className="text-muted-foreground ml-6 text-sm">
+            Perfect for individuals. Includes basic features and 5GB storage.
+          </p>
+          <p className="ml-6 text-sm font-medium">$9/month</p>
+        </div>
+        <div className="space-y-2 rounded-lg border p-4">
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="pro" id="plan-pro" />
+            <Label htmlFor="plan-pro" className="font-medium">
+              Pro Plan
+            </Label>
+          </div>
+          <p className="text-muted-foreground ml-6 text-sm">
+            Great for small teams. Advanced features and 50GB storage.
+          </p>
+          <p className="ml-6 text-sm font-medium">$29/month</p>
+        </div>
+        <div className="space-y-2 rounded-lg border p-4">
+          <div className="flex items-center gap-2">
+            <RadioGroupItem value="enterprise" id="plan-enterprise" />
+            <Label htmlFor="plan-enterprise" className="font-medium">
+              Enterprise Plan
+            </Label>
+          </div>
+          <p className="text-muted-foreground ml-6 text-sm">
+            For large organizations. Custom features and unlimited storage.
+          </p>
+          <p className="ml-6 text-sm font-medium">Contact sales</p>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-medium">
+          Gender <span className="text-red-500">*</span>
+        </h3>
+        <p className="text-muted-foreground text-sm">This field is required</p>
+      </div>
+      <RadioGroup required>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="male" id="gender-male" />
+          <Label htmlFor="gender-male">Male</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="female" id="gender-female" />
+          <Label htmlFor="gender-female">Female</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="other" id="gender-other" />
+          <Label htmlFor="gender-other">Other</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="prefer-not-to-say" id="gender-prefer-not" />
+          <Label htmlFor="gender-prefer-not">Prefer not to say</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+export const WithRTL: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <RadioGroup dir="rtl" required>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="male" id="gender-male" />
+          <Label htmlFor="gender-male">Male</Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem value="female" id="gender-female" />
+          <Label htmlFor="gender-female">Female</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  ),
+};
+
+export const WithErrorMessage: Story = {
+  render: () => (
+    <RadioGroup errorMessage="Please select an option">
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="option1" />
+        <Label htmlFor="option1">Option 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="option2" />
+        <Label htmlFor="option2">Option 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="option3" />
+        <Label htmlFor="option3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const WithErrorMessageAndRTL: Story = {
+  render: () => (
+    <RadioGroup errorMessage="يرجى اختيار الخيار" dir="rtl">
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option1" id="option1" />
+        <Label htmlFor="option1">اختر الخيار 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option2" id="option2" />
+        <Label htmlFor="option2">اختر الخيار 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option3" id="option3" />
+        <Label htmlFor="option3">اختر الخيار 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
diff --git a/packages/survey-ui/src/components/general/radio-group.tsx b/packages/survey-ui/src/components/general/radio-group.tsx
new file mode 100644
index 0000000000..312163b195
--- /dev/null
+++ b/packages/survey-ui/src/components/general/radio-group.tsx
@@ -0,0 +1,58 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { AlertCircle, CircleIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+function RadioGroup({
+  className,
+  errorMessage,
+  dir,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & {
+  errorMessage?: string;
+  dir?: "ltr" | "rtl";
+}): React.JSX.Element {
+  return (
+    <div className="flex w-full gap-2" dir={dir}>
+      {errorMessage ? <div className="bg-destructive min-h-full w-1" /> : null}
+      <div className="w-full space-y-2">
+        {errorMessage ? (
+          <div className="text-destructive flex items-center gap-1 text-sm">
+            <AlertCircle className="size-4" />
+            <span>{errorMessage}</span>
+          </div>
+        ) : null}
+        <RadioGroupPrimitive.Root
+          aria-invalid={Boolean(errorMessage)}
+          data-slot="radio-group"
+          dir={dir}
+          className={className}
+          {...props}
+        />
+      </div>
+    </div>
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input-border text-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border bg-white shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex items-center justify-center">
+        <CircleIcon className="fill-brand stroke-brand size-2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/packages/survey-ui/src/components/general/smileys.tsx b/packages/survey-ui/src/components/general/smileys.tsx
new file mode 100644
index 0000000000..520abbb82d
--- /dev/null
+++ b/packages/survey-ui/src/components/general/smileys.tsx
@@ -0,0 +1,466 @@
+import type { FunctionComponent } from "react";
+
+export const TiredFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m21.88 23.92c5.102-0.06134 7.273-1.882 8.383-3.346"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m46.24 47.56c0-2.592-2.867-7.121-10.25-6.93-6.974 0.1812-10.22 4.518-10.22 7.111s4.271-1.611 10.05-1.492c6.317 0.13 10.43 3.903 10.43 1.311z"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m23.16 28.47c5.215 1.438 5.603 0.9096 8.204 1.207 1.068 0.1221-2.03 2.67-7.282 4.397"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m50.12 23.92c-5.102-0.06134-7.273-1.882-8.383-3.346"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m48.84 28.47c-5.215 1.438-5.603 0.9096-8.204 1.207-1.068 0.1221 2.03 2.67 7.282 4.397"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const WearyFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m22.88 23.92c5.102-0.06134 7.273-1.882 8.383-3.346"
+        />
+        <path
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m46.24 47.56c0-2.592-2.867-7.121-10.25-6.93-6.974 0.1812-10.22 4.518-10.22 7.111s4.271-1.611 10.05-1.492c6.317 0.13 10.43 3.903 10.43 1.311z"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m49.12 23.92c-5.102-0.06134-7.273-1.882-8.383-3.346"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m48.24 30.51c-6.199 1.47-7.079 1.059-8.868-1.961"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="m23.76 30.51c6.199 1.47 7.079 1.059 8.868-1.961"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const PerseveringFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <line
+          x1="44.5361"
+          x2="50.9214"
+          y1="21.4389"
+          y2="24.7158"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <line
+          x1="26.9214"
+          x2="20.5361"
+          y1="21.4389"
+          y2="24.7158"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M24,28c2.3334,1.3333,4.6666,2.6667,7,4c-2.3334,1.3333-4.6666,2.6667-7,4"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M48,28c-2.3334,1.3333-4.6666,2.6667-7,4c2.3334,1.3333,4.6666,2.6667,7,4"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M28,51c0.2704-0.3562,1-8,8.4211-8.0038C43,42.9929,43.6499,50.5372,44,51C38.6667,51,33.3333,51,28,51z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const FrowningFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M26.5,48c1.8768-3.8326,5.8239-6.1965,10-6c3.8343,0.1804,7.2926,2.4926,9,6"
+        />
+        <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31" />
+        <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31" />
+      </g>
+    </svg>
+  );
+};
+
+export const ConfusedFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m44.7 43.92c-6.328-1.736-11.41-0.906-17.4 1.902"
+        />
+        <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31" />
+        <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31" />
+      </g>
+    </svg>
+  );
+};
+
+export const NeutralFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          {...props}
+        />
+        <line
+          x1="27"
+          x2="45"
+          y1="43"
+          y2="43"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31" />
+        <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31" />
+      </g>
+    </svg>
+  );
+};
+
+export const SlightlySmilingFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M45.8149,44.9293 c-2.8995,1.6362-6.2482,2.5699-9.8149,2.5699s-6.9153-0.9336-9.8149-2.5699"
+        />
+        <path d="M30,31c0,1.6568-1.3448,3-3,3c-1.6553,0-3-1.3433-3-3c0-1.6552,1.3447-3,3-3C28.6552,28,30,29.3448,30,31" />
+        <path d="M48,31c0,1.6568-1.3447,3-3,3s-3-1.3433-3-3c0-1.6552,1.3447-3,3-3S48,29.3448,48,31" />
+      </g>
+    </svg>
+  );
+};
+
+export const SmilingFaceWithSmilingEyes: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M45.8147,45.2268a15.4294,15.4294,0,0,1-19.6294,0"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M31.6941,33.4036a4.7262,4.7262,0,0,0-8.6382,0"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M48.9441,33.4036a4.7262,4.7262,0,0,0-8.6382,0"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const GrinningFaceWithSmilingEyes: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          {...props}
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M50.595,41.64a11.5554,11.5554,0,0,1-.87,4.49c-12.49,3.03-25.43.34-27.49-.13a11.4347,11.4347,0,0,1-.83-4.36h.11s14.8,3.59,28.89.07Z"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M49.7251,46.13c-1.79,4.27-6.35,7.23-13.69,7.23-7.41,0-12.03-3.03-13.8-7.36C24.2951,46.47,37.235,49.16,49.7251,46.13Z"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M31.6941,32.4036a4.7262,4.7262,0,0,0-8.6382,0"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+          d="M48.9441,32.4036a4.7262,4.7262,0,0,0-8.6382,0"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const GrinningSquintingFace: FunctionComponent<React.SVGProps<SVGCircleElement>> = (props) => {
+  return (
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+      <g id="line">
+        <circle
+          cx="36"
+          cy="36"
+          r="23"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          {...props}
+        />
+        <polyline
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          points="25.168 27.413 31.755 31.427 25.168 35.165"
+        />
+        <polyline
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          points="46.832 27.413 40.245 31.427 46.832 35.165"
+        />
+
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M50.595,41.64a11.5554,11.5554,0,0,1-.87,4.49c-12.49,3.03-25.43.34-27.49-.13a11.4347,11.4347,0,0,1-.83-4.36h.11s14.8,3.59,28.89.07Z"
+        />
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M49.7251,46.13c-1.79,4.27-6.35,7.23-13.69,7.23-7.41,0-12.03-3.03-13.8-7.36C24.2951,46.47,37.235,49.16,49.7251,46.13Z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const icons = [<svg key="smiley" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" />];
diff --git a/packages/survey-ui/src/components/general/textarea.stories.tsx b/packages/survey-ui/src/components/general/textarea.stories.tsx
new file mode 100644
index 0000000000..38de4f9a56
--- /dev/null
+++ b/packages/survey-ui/src/components/general/textarea.stories.tsx
@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./label";
+import { Textarea } from "./textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "UI-package/General/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible textarea component with error handling, custom styling, and RTL support. Built with accessibility in mind using proper ARIA attributes and automatic resizing.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text for the textarea",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the textarea is disabled",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the textarea is required",
+    },
+    rows: {
+      control: { type: "number" },
+      description: "Number of visible text lines",
+    },
+    errorMessage: {
+      control: "text",
+      description: "Error message to display below the textarea",
+    },
+    dir: {
+      control: { type: "select" },
+      options: ["ltr", "rtl"],
+      description: "Text direction",
+    },
+    style: {
+      control: { type: "object" },
+      description: "Custom styling for the textarea",
+    },
+  },
+  args: {
+    placeholder: "Enter your text...",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithValue: Story = {
+  args: {
+    value:
+      "This textarea has some predefined content that spans multiple lines.\n\nIt demonstrates how the component handles existing text.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "This textarea is disabled and cannot be edited.",
+  },
+};
+
+export const WithRows: Story = {
+  args: {
+    rows: 5,
+    placeholder: "This textarea has 5 visible rows...",
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-2">
+      <Label htmlFor="message">Message</Label>
+      <Textarea id="message" placeholder="Enter your message..." />
+    </div>
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-2">
+      <Label htmlFor="long-content">Terms and Conditions</Label>
+      <Textarea
+        id="long-content"
+        rows={8}
+        readOnly
+        value={`Terms of Service
+
+1. Acceptance of Terms
+By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.
+
+2. Use License
+Permission is granted to temporarily download one copy of the materials on this website for personal, non-commercial transitory viewing only.
+
+3. Disclaimer
+The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
+
+4. Limitations
+In no event shall our company or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on this website.`}
+        className="font-mono text-sm"
+      />
+    </div>
+  ),
+};
+
+export const WithError: Story = {
+  args: {
+    placeholder: "Enter your message",
+    defaultValue: "Too short",
+    errorMessage: "Message must be at least 10 characters long",
+  },
+};
+
+export const RTL: Story = {
+  args: {
+    dir: "rtl",
+    placeholder: "أدخل رسالتك هنا",
+    defaultValue: "نص تجريبي طويل",
+  },
+};
+
+export const CustomStyling: Story = {
+  args: {
+    placeholder: "Custom styled textarea",
+    style: {
+      height: "120px",
+      borderRadius: "12px",
+      padding: "16px",
+      backgroundColor: "#f8f9fa",
+      border: "2px solid #e9ecef",
+    },
+  },
+};
+
+export const WithErrorAndRTL: Story = {
+  args: {
+    dir: "rtl",
+    placeholder: "أدخل رسالتك",
+    errorMessage: "هذا الحقل مطلوب",
+  },
+};
diff --git a/packages/survey-ui/src/components/general/textarea.tsx b/packages/survey-ui/src/components/general/textarea.tsx
new file mode 100644
index 0000000000..ceb0d59375
--- /dev/null
+++ b/packages/survey-ui/src/components/general/textarea.tsx
@@ -0,0 +1,30 @@
+import { ElementError } from "@/components/general/element-error";
+import { cn } from "@/lib/utils";
+
+type TextareaProps = React.ComponentProps<"textarea"> & {
+  dir?: "ltr" | "rtl" | "auto";
+  errorMessage?: string;
+};
+
+function Textarea({ className, errorMessage, dir = "auto", ...props }: TextareaProps): React.JSX.Element {
+  const hasError = Boolean(errorMessage);
+
+  return (
+    <div className="relative space-y-2">
+      <ElementError errorMessage={errorMessage} dir={dir} />
+      <textarea
+        data-slot="textarea"
+        style={{ fontSize: "var(--fb-input-font-size)" }}
+        dir={dir}
+        aria-invalid={hasError || undefined}
+        className={cn(
+          "w-input bg-input-bg border-input-border rounded-input font-input font-input-weight px-input-x py-input-y shadow-input placeholder:text-input-placeholder placeholder:opacity-input-placeholder focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 text-input text-input-text flex field-sizing-content min-h-16 border transition-[color,box-shadow] outline-none placeholder:text-sm focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export { Textarea };
diff --git a/packages/survey-ui/src/index.ts b/packages/survey-ui/src/index.ts
new file mode 100644
index 0000000000..4477567ed0
--- /dev/null
+++ b/packages/survey-ui/src/index.ts
@@ -0,0 +1,49 @@
+import "@/styles/globals.css";
+
+export { Button, buttonVariants } from "@/components/general/button";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "@/components/general/dropdown-menu";
+export { ElementHeader, type ElementHeaderProps } from "@/components/general/element-header";
+export { ElementMedia, type ElementMediaProps } from "@/components/general/element-media";
+export { Input, type InputProps } from "@/components/general/input";
+export { OpenText, type OpenTextProps } from "@/components/elements/open-text";
+export {
+  MultiSelect,
+  type MultiSelectProps,
+  type MultiSelectOption,
+} from "@/components/elements/multi-select";
+export {
+  SingleSelect,
+  type SingleSelectProps,
+  type SingleSelectOption,
+} from "@/components/elements/single-select";
+export { Matrix, type MatrixProps, type MatrixOption } from "@/components/elements/matrix";
+export { DateElement, type DateElementProps } from "@/components/elements/date";
+export { getDateFnsLocale } from "@/lib/locale";
+export {
+  PictureSelect,
+  type PictureSelectProps,
+  type PictureSelectOption,
+} from "@/components/elements/picture-select";
+export { FileUpload, type FileUploadProps, type UploadedFile } from "@/components/elements/file-upload";
+export { FormField, type FormFieldProps, type FormFieldConfig } from "@/components/elements/form-field";
+export { Rating, type RatingProps } from "@/components/elements/rating";
+export { NPS, type NPSProps } from "@/components/elements/nps";
+export { Ranking, type RankingProps, type RankingOption } from "@/components/elements/ranking";
+export { CTA, type CTAProps } from "@/components/elements/cta";
+export { Consent, type ConsentProps } from "@/components/elements/consent";
diff --git a/packages/survey-ui/src/lib/locale.test.ts b/packages/survey-ui/src/lib/locale.test.ts
new file mode 100644
index 0000000000..d5cb4120e9
--- /dev/null
+++ b/packages/survey-ui/src/lib/locale.test.ts
@@ -0,0 +1,113 @@
+import { ar, de, enUS, es, fr, hi, it, ja, nl, pt, ptBR, ro, ru, uz, zhCN, zhTW } from "date-fns/locale";
+import { describe, expect, test } from "vitest";
+import { getDateFnsLocale } from "./locale";
+
+describe("getDateFnsLocale", () => {
+  test("returns enUS when localeCode is undefined", () => {
+    expect(getDateFnsLocale()).toBe(enUS);
+  });
+
+  test("returns enUS when localeCode is empty string", () => {
+    expect(getDateFnsLocale("")).toBe(enUS);
+  });
+
+  test("handles English locales", () => {
+    expect(getDateFnsLocale("en")).toBe(enUS);
+    expect(getDateFnsLocale("en-US")).toBe(enUS);
+    expect(getDateFnsLocale("EN-US")).toBe(enUS);
+  });
+
+  test("handles German locales", () => {
+    expect(getDateFnsLocale("de")).toBe(de);
+    expect(getDateFnsLocale("de-DE")).toBe(de);
+    expect(getDateFnsLocale("DE")).toBe(de);
+  });
+
+  test("handles Spanish locales", () => {
+    expect(getDateFnsLocale("es")).toBe(es);
+    expect(getDateFnsLocale("es-ES")).toBe(es);
+  });
+
+  test("handles French locales", () => {
+    expect(getDateFnsLocale("fr")).toBe(fr);
+    expect(getDateFnsLocale("fr-FR")).toBe(fr);
+  });
+
+  test("handles Japanese locales", () => {
+    expect(getDateFnsLocale("ja")).toBe(ja);
+    expect(getDateFnsLocale("ja-JP")).toBe(ja);
+  });
+
+  test("handles Dutch locales", () => {
+    expect(getDateFnsLocale("nl")).toBe(nl);
+    expect(getDateFnsLocale("nl-NL")).toBe(nl);
+  });
+
+  test("handles Portuguese locales - Brazilian", () => {
+    expect(getDateFnsLocale("pt")).toBe(ptBR);
+    expect(getDateFnsLocale("pt-BR")).toBe(ptBR);
+    expect(getDateFnsLocale("pt-br")).toBe(ptBR);
+  });
+
+  test("handles Portuguese locales - Portugal", () => {
+    expect(getDateFnsLocale("pt-PT")).toBe(pt);
+    expect(getDateFnsLocale("pt-pt")).toBe(pt);
+  });
+
+  test("handles Romanian locales", () => {
+    expect(getDateFnsLocale("ro")).toBe(ro);
+    expect(getDateFnsLocale("ro-RO")).toBe(ro);
+  });
+
+  test("handles Arabic locales", () => {
+    expect(getDateFnsLocale("ar")).toBe(ar);
+    expect(getDateFnsLocale("ar-SA")).toBe(ar);
+  });
+
+  test("handles Italian locales", () => {
+    expect(getDateFnsLocale("it")).toBe(it);
+    expect(getDateFnsLocale("it-IT")).toBe(it);
+  });
+
+  test("handles Russian locales", () => {
+    expect(getDateFnsLocale("ru")).toBe(ru);
+    expect(getDateFnsLocale("ru-RU")).toBe(ru);
+  });
+
+  test("handles Uzbek locales", () => {
+    expect(getDateFnsLocale("uz")).toBe(uz);
+    expect(getDateFnsLocale("uz-UZ")).toBe(uz);
+  });
+
+  test("handles Hindi locales", () => {
+    expect(getDateFnsLocale("hi")).toBe(hi);
+    expect(getDateFnsLocale("hi-IN")).toBe(hi);
+  });
+
+  test("handles Chinese Simplified locales", () => {
+    expect(getDateFnsLocale("zh")).toBe(zhCN);
+    expect(getDateFnsLocale("zh-Hans")).toBe(zhCN);
+    expect(getDateFnsLocale("zh-hans")).toBe(zhCN);
+    expect(getDateFnsLocale("zh-CN")).toBe(zhCN);
+    expect(getDateFnsLocale("zh-cn")).toBe(zhCN);
+  });
+
+  test("handles Chinese Traditional locales", () => {
+    expect(getDateFnsLocale("zh-Hant")).toBe(zhTW);
+    expect(getDateFnsLocale("zh-hant")).toBe(zhTW);
+    expect(getDateFnsLocale("zh-TW")).toBe(zhTW);
+    expect(getDateFnsLocale("zh-tw")).toBe(zhTW);
+    expect(getDateFnsLocale("zh-HK")).toBe(zhTW);
+    expect(getDateFnsLocale("zh-hk")).toBe(zhTW);
+  });
+
+  test("returns enUS for unknown locale codes", () => {
+    expect(getDateFnsLocale("unknown")).toBe(enUS);
+    expect(getDateFnsLocale("xx-XX")).toBe(enUS);
+  });
+
+  test("handles case-insensitive locale codes", () => {
+    expect(getDateFnsLocale("FR")).toBe(fr);
+    expect(getDateFnsLocale("Fr-Fr")).toBe(fr);
+  });
+});
diff --git a/packages/survey-ui/src/lib/locale.ts b/packages/survey-ui/src/lib/locale.ts
new file mode 100644
index 0000000000..dfb7d11541
--- /dev/null
+++ b/packages/survey-ui/src/lib/locale.ts
@@ -0,0 +1,52 @@
+import { type Locale } from "date-fns";
+import { ar, de, enUS, es, fr, hi, it, ja, nl, pt, ptBR, ro, ru, uz, zhCN, zhTW } from "date-fns/locale";
+
+/**
+ * Maps locale codes to date-fns locale objects
+ * Supports survey language codes (e.g., "en", "de", "ar", "zh-Hans") and
+ * common locale formats (e.g., "en-US", "de-DE", etc.)
+ */
+export function getDateFnsLocale(localeCode?: string): Locale {
+  if (!localeCode) {
+    return enUS; // Default to English (US)
+  }
+
+  const normalized = localeCode.toLowerCase();
+
+  // Handle special cases for full locale codes first
+  if (normalized.startsWith("pt-br")) {
+    return ptBR;
+  }
+  if (normalized.startsWith("pt-pt")) {
+    return pt;
+  }
+  if (normalized.startsWith("zh-hans") || normalized === "zh-cn") {
+    return zhCN;
+  }
+  if (normalized.startsWith("zh-hant") || normalized === "zh-tw" || normalized === "zh-hk") {
+    return zhTW;
+  }
+
+  // Extract base language code (e.g., "en-US" -> "en", "de-DE" -> "de")
+  const baseCode = normalized.split("-")[0];
+
+  // Map survey language codes to date-fns locales
+  const localeMap: Record<string, Locale> = {
+    en: enUS,
+    de,
+    es,
+    fr,
+    ja,
+    nl,
+    pt: ptBR, // Default Portuguese to Brazilian
+    ro,
+    ar,
+    it,
+    ru,
+    uz,
+    hi,
+    zh: zhCN, // Default Chinese to Simplified
+  };
+
+  return localeMap[baseCode] ?? enUS;
+}
diff --git a/packages/survey-ui/src/lib/story-helpers.tsx b/packages/survey-ui/src/lib/story-helpers.tsx
new file mode 100644
index 0000000000..6f5d1b7f7e
--- /dev/null
+++ b/packages/survey-ui/src/lib/story-helpers.tsx
@@ -0,0 +1,442 @@
+import type { Decorator, StoryContext } from "@storybook/react";
+import React, { useEffect, useState } from "react";
+
+// ============================================================================
+// Shared Styling Options Interfaces
+// ============================================================================
+
+export interface BaseStylingOptions {
+  // Element styling
+  elementHeadlineFontFamily: string;
+  elementHeadlineFontSize: string;
+  elementHeadlineFontWeight: string;
+  elementHeadlineColor: string;
+  elementDescriptionFontFamily: string;
+  elementDescriptionFontWeight: string;
+  elementDescriptionFontSize: string;
+  elementDescriptionColor: string;
+  // Input styling
+  inputBgColor: string;
+  inputBorderColor: string;
+  inputColor: string;
+  inputFontSize: string;
+  inputFontWeight: string;
+  // Survey styling
+  brandColor: string;
+}
+
+export interface LabelStylingOptions {
+  labelFontFamily: string;
+  labelFontSize: string;
+  labelFontWeight: string;
+  labelColor: string;
+  labelOpacity: string;
+}
+
+export interface InputLayoutStylingOptions {
+  inputWidth: string;
+  inputHeight: string;
+  inputBorderRadius: string;
+  inputPlaceholderColor: string;
+  inputPaddingX: string;
+  inputPaddingY: string;
+}
+
+export interface OptionStylingOptions {
+  optionBorderColor: string;
+  optionBgColor: string;
+  optionLabelColor: string;
+  optionBorderRadius: string;
+  optionPaddingX: string;
+  optionPaddingY: string;
+  optionFontFamily: string;
+  optionFontSize: string;
+  optionFontWeight: string;
+}
+
+export interface ButtonStylingOptions {
+  buttonHeight: string;
+  buttonWidth: string;
+  buttonFontSize: string;
+  buttonBorderRadius: string;
+  buttonBgColor: string;
+  buttonTextColor: string;
+  buttonPaddingX: string;
+  buttonPaddingY: string;
+}
+
+export interface CheckboxInputStylingOptions {
+  checkboxInputBorderColor: string;
+  checkboxInputBgColor: string;
+  checkboxInputColor: string;
+}
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Selects a subset of argTypes by key, with type safety.
+ * Useful for stories that only need specific styling controls.
+ *
+ * @example
+ * pickArgTypes(inputStylingArgTypes, ['inputBgColor', 'inputBorderColor'])
+ */
+export function pickArgTypes<T extends Record<string, unknown>>(argTypes: T, keys: (keyof T)[]): Partial<T> {
+  const result: Partial<T> = {};
+  for (const key of keys) {
+    if (key in argTypes) {
+      result[key] = argTypes[key];
+    }
+  }
+  return result;
+}
+
+// ============================================================================
+// Common argTypes Configurations
+// ============================================================================
+
+export const commonArgTypes = {
+  headline: {
+    control: "text",
+    description: "The main element text",
+    table: { category: "Content" },
+  },
+  description: {
+    control: "text",
+    description: "Optional description or subheader text",
+    table: { category: "Content" },
+  },
+  required: {
+    control: "boolean",
+    description: "Whether the field is required",
+    table: { category: "Validation" },
+  },
+  errorMessage: {
+    control: "text",
+    description: "Error message to display",
+    table: { category: "Validation" },
+  },
+  dir: {
+    control: { type: "select" },
+    options: ["ltr", "rtl", "auto"],
+    description: "Text direction for RTL support",
+    table: { category: "Layout" },
+  },
+  disabled: {
+    control: "boolean",
+    description: "Whether the input is disabled",
+    table: { category: "State" },
+  },
+  onChange: {
+    action: "changed",
+    table: { category: "Events" },
+  },
+};
+
+export const elementStylingArgTypes = {
+  elementHeadlineFontFamily: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementHeadlineFontSize: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementHeadlineFontWeight: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementHeadlineColor: {
+    control: "color",
+    table: { category: "Element Styling" },
+  },
+  elementDescriptionFontFamily: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementDescriptionFontSize: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementDescriptionFontWeight: {
+    control: "text",
+    table: { category: "Element Styling" },
+  },
+  elementDescriptionColor: {
+    control: "color",
+    table: { category: "Element Styling" },
+  },
+};
+
+export const inputStylingArgTypes = {
+  inputBgColor: {
+    control: "color",
+    table: { category: "Input Styling" },
+  },
+  inputBorderColor: {
+    control: "color",
+    table: { category: "Input Styling" },
+  },
+  inputColor: {
+    control: "color",
+    table: { category: "Input Styling" },
+  },
+  inputFontSize: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputFontWeight: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputWidth: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputHeight: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputBorderRadius: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputPlaceholderColor: {
+    control: "color",
+    table: { category: "Input Styling" },
+  },
+  inputPaddingX: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+  inputPaddingY: {
+    control: "text",
+    table: { category: "Input Styling" },
+  },
+};
+
+export const labelStylingArgTypes = {
+  labelFontFamily: {
+    control: "text",
+    table: { category: "Label Styling" },
+  },
+  labelFontSize: {
+    control: "text",
+    table: { category: "Label Styling" },
+  },
+  labelFontWeight: {
+    control: "text",
+    table: { category: "Label Styling" },
+  },
+  labelColor: {
+    control: "color",
+    table: { category: "Label Styling" },
+  },
+  labelOpacity: {
+    control: "text",
+    table: { category: "Label Styling" },
+  },
+};
+
+export const surveyStylingArgTypes = {
+  brandColor: {
+    control: "color",
+    table: { category: "Survey Styling" },
+  },
+};
+
+export const optionStylingArgTypes = {
+  optionBorderColor: {
+    control: "color",
+    table: { category: "Option Styling" },
+  },
+  optionBgColor: {
+    control: "color",
+    table: { category: "Option Styling" },
+  },
+  optionLabelColor: {
+    control: "color",
+    table: { category: "Option Styling" },
+  },
+  optionBorderRadius: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+  optionPaddingX: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+  optionPaddingY: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+  optionFontFamily: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+  optionFontSize: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+  optionFontWeight: {
+    control: "text",
+    table: { category: "Option Styling" },
+  },
+};
+
+export const buttonStylingArgTypes = {
+  buttonHeight: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+  buttonWidth: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+  buttonFontSize: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+  buttonBorderRadius: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+  buttonBgColor: {
+    control: "color",
+    table: { category: "Button Styling" },
+  },
+  buttonTextColor: {
+    control: "color",
+    table: { category: "Button Styling" },
+  },
+  buttonPaddingX: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+  buttonPaddingY: {
+    control: "text",
+    table: { category: "Button Styling" },
+  },
+};
+
+// ============================================================================
+// CSS Variable Mapping and Decorator Factory
+// ============================================================================
+
+type CSSVarMapping = Record<string, string>;
+
+const CSS_VAR_MAP: CSSVarMapping = {
+  elementHeadlineFontFamily: "--fb-element-headline-font-family",
+  elementHeadlineFontSize: "--fb-element-headline-font-size",
+  elementHeadlineFontWeight: "--fb-element-headline-font-weight",
+  elementHeadlineColor: "--fb-element-headline-color",
+  elementDescriptionFontFamily: "--fb-element-description-font-family",
+  elementDescriptionFontSize: "--fb-element-description-font-size",
+  elementDescriptionFontWeight: "--fb-element-description-font-weight",
+  elementDescriptionColor: "--fb-element-description-color",
+  inputBgColor: "--fb-input-bg-color",
+  inputBorderColor: "--fb-input-border-color",
+  inputColor: "--fb-input-color",
+  inputFontSize: "--fb-input-font-size",
+  inputFontWeight: "--fb-input-font-weight",
+  inputWidth: "--fb-input-width",
+  inputHeight: "--fb-input-height",
+  inputBorderRadius: "--fb-input-border-radius",
+  inputPlaceholderColor: "--fb-input-placeholder-color",
+  inputPaddingX: "--fb-input-padding-x",
+  inputPaddingY: "--fb-input-padding-y",
+  labelFontFamily: "--fb-label-font-family",
+  labelFontSize: "--fb-label-font-size",
+  labelFontWeight: "--fb-label-font-weight",
+  labelColor: "--fb-label-color",
+  labelOpacity: "--fb-label-opacity",
+  brandColor: "--fb-survey-brand-color",
+  optionBorderColor: "--fb-option-border-color",
+  optionBgColor: "--fb-option-bg-color",
+  optionLabelColor: "--fb-option-label-color",
+  optionBorderRadius: "--fb-option-border-radius",
+  optionPaddingX: "--fb-option-padding-x",
+  optionPaddingY: "--fb-option-padding-y",
+  optionFontFamily: "--fb-option-font-family",
+  optionFontSize: "--fb-option-font-size",
+  optionFontWeight: "--fb-option-font-weight",
+  buttonHeight: "--fb-button-height",
+  buttonWidth: "--fb-button-width",
+  buttonFontSize: "--fb-button-font-size",
+  buttonBorderRadius: "--fb-button-border-radius",
+  buttonBgColor: "--fb-button-bg-color",
+  buttonTextColor: "--fb-button-text-color",
+  buttonPaddingX: "--fb-button-padding-x",
+  buttonPaddingY: "--fb-button-padding-y",
+  checkboxInputBorderColor: "--fb-checkbox-input-border-color",
+  checkboxInputBgColor: "--fb-checkbox-input-bg-color",
+  checkboxInputColor: "--fb-checkbox-input-color",
+};
+
+export function createCSSVariablesDecorator<T extends Record<string, unknown> = Record<string, unknown>>(
+  additionalMappings?: CSSVarMapping
+): Decorator<T & Record<string, unknown>> {
+  const fullMapping = { ...CSS_VAR_MAP, ...additionalMappings };
+
+  function CSSVariablesDecorator(
+    Story: React.ComponentType,
+    context: StoryContext<T & Record<string, unknown>>
+  ): React.ReactElement {
+    // Storybook's Decorator type doesn't properly infer args type, so we safely extract it
+    // Access args through a type-safe helper
+    interface ContextWithArgs {
+      args?: T & Record<string, unknown>;
+    }
+    const safeContext = context as unknown as ContextWithArgs;
+    const args = (safeContext.args ?? {}) as Record<string, string | undefined>;
+
+    const cssVarStyle: React.CSSProperties & Record<string, string | undefined> = {};
+
+    Object.entries(fullMapping).forEach(([argKey, cssVar]) => {
+      if (args[argKey] !== undefined) {
+        cssVarStyle[cssVar] = args[argKey];
+      }
+    });
+
+    return (
+      <div style={cssVarStyle} className="w-[600px]">
+        <Story />
+      </div>
+    );
+  }
+
+  CSSVariablesDecorator.displayName = "CSSVariablesDecorator";
+  return CSSVariablesDecorator;
+}
+
+// ============================================================================
+// Stateful Render Function Creator
+// ============================================================================
+
+export function createStatefulRender<
+  TValue,
+  TProps extends { value?: TValue; onChange?: (v: TValue) => void } & Record<string, unknown>,
+>(Component: any): (args: TProps) => React.ReactElement {
+  function StatefulRender(args: Readonly<TProps>): React.ReactElement {
+    const [value, setValue] = useState<TValue | undefined>(args.value);
+
+    useEffect(() => {
+      setValue(args.value);
+    }, [args.value]);
+
+    return (
+      <Component
+        {...args}
+        value={value}
+        onChange={(v: TValue) => {
+          setValue(v);
+          args.onChange?.(v);
+        }}
+      />
+    );
+  }
+
+  StatefulRender.displayName = "StatefulRender";
+  return StatefulRender;
+}
diff --git a/packages/survey-ui/src/lib/utils.test.ts b/packages/survey-ui/src/lib/utils.test.ts
new file mode 100644
index 0000000000..662374d9e6
--- /dev/null
+++ b/packages/survey-ui/src/lib/utils.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, test } from "vitest";
+import { cn } from "./utils";
+
+describe("cn", () => {
+  test("merges class names correctly", () => {
+    expect(cn("foo", "bar")).toBe("foo bar");
+  });
+
+  test("handles conditional classes", () => {
+    const condition = false;
+    expect(cn("foo", condition && "bar", "baz")).toBe("foo baz");
+  });
+
+  test("handles undefined and null", () => {
+    expect(cn("foo", undefined, null, "bar")).toBe("foo bar");
+  });
+
+  test("merges Tailwind classes and resolves conflicts", () => {
+    // tailwind-merge should resolve conflicting classes
+    const result = cn("px-2", "px-4");
+    expect(result).toBe("px-4");
+  });
+
+  test("handles empty input", () => {
+    expect(cn()).toBe("");
+  });
+
+  test("handles arrays of classes", () => {
+    expect(cn(["foo", "bar"], "baz")).toBe("foo bar baz");
+  });
+
+  test("handles objects with conditional classes", () => {
+    expect(cn({ foo: true, bar: false, baz: true })).toBe("foo baz");
+  });
+
+  test("handles mixed inputs", () => {
+    expect(cn("foo", ["bar", "baz"], { qux: true })).toBe("foo bar baz qux");
+  });
+
+  test("handles custom Tailwind tokens", () => {
+    // Test that custom tokens work with the extended tailwind-merge
+    const result = cn("text-input", "text-button");
+    expect(result).toContain("text-button");
+  });
+});
diff --git a/packages/survey-ui/src/lib/utils.ts b/packages/survey-ui/src/lib/utils.ts
new file mode 100644
index 0000000000..429354649f
--- /dev/null
+++ b/packages/survey-ui/src/lib/utils.ts
@@ -0,0 +1,37 @@
+import { type ClassValue, clsx } from "clsx";
+import DOMPurify from "isomorphic-dompurify";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    // Custom tokens from `packages/survey-ui/tailwind.config.ts`
+    fontSize: ["input", "option", "button"],
+    textColor: ["input-text", "input-placeholder", "option-label", "button-text"],
+  },
+} as Parameters<typeof extendTailwindMerge>[0]);
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for optimal class merging
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Strip inline style attributes from HTML string to avoid CSP violations
+ * Uses DOMPurify for secure, proper HTML parsing instead of regex
+ * @param html - The HTML string to process
+ * @returns HTML string with all style attributes removed
+ */
+export const stripInlineStyles = (html: string): string => {
+  if (!html) return html;
+
+  // Use DOMPurify to safely remove style attributes
+  // This is more secure than regex-based approaches and handles edge cases properly
+  return DOMPurify.sanitize(html, {
+    FORBID_ATTR: ["style"],
+    // Keep other attributes and tags as-is, only remove style attributes
+    KEEP_CONTENT: true,
+  });
+};
diff --git a/packages/survey-ui/src/lib/video.test.ts b/packages/survey-ui/src/lib/video.test.ts
new file mode 100644
index 0000000000..c11196a791
--- /dev/null
+++ b/packages/survey-ui/src/lib/video.test.ts
@@ -0,0 +1,154 @@
+import { describe, expect, test } from "vitest";
+import { checkForLoomUrl, checkForVimeoUrl, checkForYoutubeUrl, convertToEmbedUrl } from "./video";
+
+describe("checkForYoutubeUrl", () => {
+  test("returns true for valid YouTube URLs with https", () => {
+    expect(checkForYoutubeUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(true);
+    expect(checkForYoutubeUrl("https://youtube.com/watch?v=dQw4w9WgXcQ")).toBe(true);
+    expect(checkForYoutubeUrl("https://www.youtu.be/dQw4w9WgXcQ")).toBe(true);
+    expect(checkForYoutubeUrl("https://youtu.be/dQw4w9WgXcQ")).toBe(true);
+    expect(checkForYoutubeUrl("https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ")).toBe(true);
+    expect(checkForYoutubeUrl("https://youtube-nocookie.com/embed/dQw4w9WgXcQ")).toBe(true);
+  });
+
+  test("returns false for YouTube URLs with http", () => {
+    expect(checkForYoutubeUrl("http://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(false);
+  });
+
+  test("returns false for invalid URLs", () => {
+    expect(checkForYoutubeUrl("not-a-url")).toBe(false);
+    expect(checkForYoutubeUrl("")).toBe(false);
+  });
+
+  test("returns false for non-YouTube domains", () => {
+    expect(checkForYoutubeUrl("https://vimeo.com/123456")).toBe(false);
+    expect(checkForYoutubeUrl("https://example.com")).toBe(false);
+  });
+});
+
+describe("checkForVimeoUrl", () => {
+  test("returns true for valid Vimeo URLs with https", () => {
+    expect(checkForVimeoUrl("https://www.vimeo.com/123456789")).toBe(true);
+    expect(checkForVimeoUrl("https://vimeo.com/123456789")).toBe(true);
+  });
+
+  test("returns false for Vimeo URLs with http", () => {
+    expect(checkForVimeoUrl("http://www.vimeo.com/123456789")).toBe(false);
+  });
+
+  test("returns false for invalid URLs", () => {
+    expect(checkForVimeoUrl("not-a-url")).toBe(false);
+    expect(checkForVimeoUrl("")).toBe(false);
+  });
+
+  test("returns false for non-Vimeo domains", () => {
+    expect(checkForVimeoUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(false);
+    expect(checkForVimeoUrl("https://example.com")).toBe(false);
+  });
+});
+
+describe("checkForLoomUrl", () => {
+  test("returns true for valid Loom URLs with https", () => {
+    expect(checkForLoomUrl("https://www.loom.com/share/abc123")).toBe(true);
+    expect(checkForLoomUrl("https://loom.com/share/abc123")).toBe(true);
+  });
+
+  test("returns false for Loom URLs with http", () => {
+    expect(checkForLoomUrl("http://www.loom.com/share/abc123")).toBe(false);
+  });
+
+  test("returns false for invalid URLs", () => {
+    expect(checkForLoomUrl("not-a-url")).toBe(false);
+    expect(checkForLoomUrl("")).toBe(false);
+  });
+
+  test("returns false for non-Loom domains", () => {
+    expect(checkForLoomUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(false);
+    expect(checkForLoomUrl("https://example.com")).toBe(false);
+  });
+});
+
+describe("convertToEmbedUrl", () => {
+  describe("YouTube URL conversion", () => {
+    test("converts youtu.be URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://youtu.be/dQw4w9WgXcQ");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("converts www.youtu.be URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.youtu.be/dQw4w9WgXcQ");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("converts youtube.com/watch URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("converts youtube.com/embed URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.youtube.com/embed/dQw4w9WgXcQ");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("converts youtube-nocookie.com/embed URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("handles YouTube URLs with additional parameters", () => {
+      const result = convertToEmbedUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=10s");
+      expect(result).toBe("https://www.youtube.com/embed/dQw4w9WgXcQ");
+    });
+
+    test("returns undefined for invalid YouTube URLs", () => {
+      const result = convertToEmbedUrl("https://www.youtube.com/invalid");
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("Vimeo URL conversion", () => {
+    test("converts vimeo.com URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.vimeo.com/123456789");
+      expect(result).toBe("https://player.vimeo.com/video/123456789");
+    });
+
+    test("converts www.vimeo.com URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://vimeo.com/987654321");
+      expect(result).toBe("https://player.vimeo.com/video/987654321");
+    });
+
+    test("returns undefined for invalid Vimeo URLs", () => {
+      const result = convertToEmbedUrl("https://www.vimeo.com/invalid");
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("Loom URL conversion", () => {
+    test("converts loom.com/share URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://www.loom.com/share/abc123def456");
+      expect(result).toBe("https://www.loom.com/embed/abc123def456");
+    });
+
+    test("converts www.loom.com/share URLs to embed format", () => {
+      const result = convertToEmbedUrl("https://loom.com/share/xyz789");
+      expect(result).toBe("https://www.loom.com/embed/xyz789");
+    });
+
+    test("returns undefined for invalid Loom URLs", () => {
+      const result = convertToEmbedUrl("https://www.loom.com/invalid");
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe("Unsupported URLs", () => {
+    test("returns undefined for unsupported video platforms", () => {
+      expect(convertToEmbedUrl("https://example.com/video")).toBeUndefined();
+      expect(convertToEmbedUrl("https://dailymotion.com/video/xyz")).toBeUndefined();
+    });
+
+    test("returns undefined for invalid URLs", () => {
+      expect(convertToEmbedUrl("not-a-url")).toBeUndefined();
+      expect(convertToEmbedUrl("")).toBeUndefined();
+    });
+  });
+});
diff --git a/packages/survey-ui/src/lib/video.ts b/packages/survey-ui/src/lib/video.ts
new file mode 100644
index 0000000000..1d98530f15
--- /dev/null
+++ b/packages/survey-ui/src/lib/video.ts
@@ -0,0 +1,121 @@
+export const checkForYoutubeUrl = (url: string): boolean => {
+  try {
+    const youtubeUrl = new URL(url);
+
+    if (youtubeUrl.protocol !== "https:") return false;
+
+    const youtubeDomains = [
+      "www.youtube.com",
+      "www.youtu.be",
+      "www.youtube-nocookie.com",
+      "youtube.com",
+      "youtu.be",
+      "youtube-nocookie.com",
+    ];
+    const hostname = youtubeUrl.hostname;
+
+    return youtubeDomains.includes(hostname);
+  } catch {
+    // invalid URL
+    return false;
+  }
+};
+
+export const checkForVimeoUrl = (url: string): boolean => {
+  try {
+    const vimeoUrl = new URL(url);
+
+    if (vimeoUrl.protocol !== "https:") return false;
+
+    const vimeoDomains = ["www.vimeo.com", "vimeo.com"];
+    const hostname = vimeoUrl.hostname;
+
+    return vimeoDomains.includes(hostname);
+  } catch {
+    // invalid URL
+    return false;
+  }
+};
+
+export const checkForLoomUrl = (url: string): boolean => {
+  try {
+    const loomUrl = new URL(url);
+
+    if (loomUrl.protocol !== "https:") return false;
+
+    const loomDomains = ["www.loom.com", "loom.com"];
+    const hostname = loomUrl.hostname;
+
+    return loomDomains.includes(hostname);
+  } catch {
+    // invalid URL
+    return false;
+  }
+};
+
+const extractYoutubeId = (url: string): string | null => {
+  let id = "";
+
+  // Regular expressions for various YouTube URL formats
+  const regExpList = [
+    /youtu\.be\/(?<videoId>[a-zA-Z0-9_-]+)/, // youtu.be/<id>
+    /youtube\.com.*v=(?<videoId>[a-zA-Z0-9_-]+)/, // youtube.com/watch?v=<id>
+    /youtube\.com.*embed\/(?<videoId>[a-zA-Z0-9_-]+)/, // youtube.com/embed/<id>
+    /youtube-nocookie\.com\/embed\/(?<videoId>[a-zA-Z0-9_-]+)/, // youtube-nocookie.com/embed/<id>
+  ];
+
+  regExpList.some((regExp) => {
+    const match = regExp.exec(url);
+    if (match?.groups?.videoId) {
+      id = match.groups.videoId;
+      return true;
+    }
+    return false;
+  });
+
+  return id || null;
+};
+
+const extractVimeoId = (url: string): string | null => {
+  const regExp = /vimeo\.com\/(?<videoId>\d+)/;
+  const match = regExp.exec(url);
+
+  return match?.groups?.videoId ?? null;
+};
+
+const extractLoomId = (url: string): string | null => {
+  const regExp = /loom\.com\/share\/(?<videoId>[a-zA-Z0-9]+)/;
+  const match = regExp.exec(url);
+
+  return match?.groups?.videoId ?? null;
+};
+
+// Always convert a given URL into its embed form if supported.
+export const convertToEmbedUrl = (url: string): string | undefined => {
+  // YouTube
+  if (checkForYoutubeUrl(url)) {
+    const videoId = extractYoutubeId(url);
+    if (videoId) {
+      return `https://www.youtube.com/embed/${videoId}`;
+    }
+  }
+
+  // Vimeo
+  if (checkForVimeoUrl(url)) {
+    const videoId = extractVimeoId(url);
+    if (videoId) {
+      return `https://player.vimeo.com/video/${videoId}`;
+    }
+  }
+
+  // Loom
+  if (checkForLoomUrl(url)) {
+    const videoId = extractLoomId(url);
+    if (videoId) {
+      return `https://www.loom.com/embed/${videoId}`;
+    }
+  }
+
+  // If no supported platform found, return undefined
+  return undefined;
+};
diff --git a/packages/survey-ui/src/styles/globals.css b/packages/survey-ui/src/styles/globals.css
new file mode 100644
index 0000000000..6548277884
--- /dev/null
+++ b/packages/survey-ui/src/styles/globals.css
@@ -0,0 +1,232 @@
+/* =============================================================================
+   Survey UI - Global Styles
+   
+   This file contains:
+   1. Tailwind CSS setup and configuration
+   2. Base design tokens (colors, radius)
+   3. Survey-specific theming tokens (--fb-* variables)
+   
+   All tokens are designed to be overridden by consumers for custom theming.
+   Components use Tailwind utilities backed by these CSS variables.
+   ============================================================================= */
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities) important;
+
+/* NOSONAR: Tailwind CSS v4 directives - @config and @source are valid at-rules */
+@config "../../tailwind.config.ts";
+/* NOSONAR */
+@source "../../src/**/*.{ts,tsx,js,jsx}";
+/* NOSONAR */
+
+/* =============================================================================
+   Design Tokens
+   ============================================================================= */
+
+:root {
+  /* ---------------------------------------------------------------------------
+     Base Primitives
+     These are the foundation tokens used throughout the design system.
+     --------------------------------------------------------------------------- */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-muted: oklch(0.97 0.02 27.325);
+  --border: oklch(0.922 0 0);
+  --input: black;
+  --slate-50: rgb(248, 250, 252);
+  --slate-100: rgb(241 245 249);
+  --slate-200: rgb(226 232 240);
+
+  /* ---------------------------------------------------------------------------
+     Survey general Colors
+     The primary accent color used throughout the survey. Override this to 
+     customize the brand appearance.
+     --------------------------------------------------------------------------- */
+  --fb-survey-brand-color: #64748b;
+
+  --fb-accent-background-color: var(--slate-200);
+  --fb-accent-background-color-selected: var(--slate-100);
+
+
+  /* ---------------------------------------------------------------------------
+     Element Headline Tokens
+     Used for question headlines and main element titles.
+     --------------------------------------------------------------------------- */
+  --fb-element-headline-font-family: inherit;
+  --fb-element-headline-font-weight: 400;
+  --fb-element-headline-font-size: 1rem;
+  --fb-element-headline-color: (--input);
+  --fb-element-headline-opacity: 1;
+
+  /* ---------------------------------------------------------------------------
+     Element Description Tokens
+     Used for descriptive text below headlines.
+     --------------------------------------------------------------------------- */
+  --fb-element-description-font-family: inherit;
+  --fb-element-description-font-weight: 400;
+  --fb-element-description-font-size: 0.875rem;
+  --fb-element-description-color: var(--input);
+  --fb-element-description-opacity: 1;
+
+  /* ---------------------------------------------------------------------------
+     Label Tokens
+     Used for form labels and secondary text.
+     --------------------------------------------------------------------------- */
+  --fb-label-font-family: inherit;
+  --fb-label-font-weight: 400;
+  --fb-label-font-size: 0.875rem;
+  --fb-label-color: var(--foreground);
+  --fb-label-opacity: 1;
+
+  /* ---------------------------------------------------------------------------
+     Button Tokens
+     Used for the custom button variant. Standard variants use Tailwind defaults.
+     --------------------------------------------------------------------------- */
+  --fb-button-height: 2.25rem;
+  --fb-button-width: auto;
+  --fb-button-font-size: 0.875rem;
+  --fb-button-font-family: inherit;
+  --fb-button-font-weight: 500;
+  --fb-button-border-radius: var(--radius);
+  --fb-button-bg-color: hsl(222.2 47.4% 11.2%);
+  --fb-button-text-color: hsl(210 40% 98%);
+  --fb-button-padding-x: 1rem;
+  --fb-button-padding-y: 0.5rem;
+
+  /* ---------------------------------------------------------------------------
+     Input Tokens
+     Used for text inputs, textareas, and other form controls.
+     --------------------------------------------------------------------------- */
+  --fb-input-bg-color: var(--slate-50);
+  --fb-input-border-color: var(--fb-survey-brand-color);
+  --fb-input-border-radius: var(--radius);
+  --fb-input-font-family: inherit;
+  --fb-input-font-size: 0.875rem !important;
+  --fb-input-font-weight: 400;
+  --fb-input-color: var(--foreground);
+  --fb-input-placeholder-color: var(--fb-input-color);
+  --fb-input-placeholder-opacity: 0.5;
+  --fb-input-width: 100%;
+  --fb-input-height: 40px;
+  --fb-input-padding-x: 16px;
+  --fb-input-padding-y: 16px;
+  --fb-input-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* ---------------------------------------------------------------------------
+     Progress Tokens
+     Used for the Progress component track and indicator.
+     --------------------------------------------------------------------------- */
+  --fb-progress-track-height: 0.5rem;
+  --fb-progress-track-bg-color: hsl(222.2 47.4% 11.2% / 0.2);
+  --fb-progress-track-border-radius: var(--radius);
+  --fb-progress-indicator-bg-color: hsl(222.2 47.4% 11.2%);
+  --fb-progress-indicator-border-radius: var(--radius);
+
+  /* ---------------------------------------------------------------------------
+     Option Tokens
+     Used for selectable options (radio, checkbox, multi-select).
+     These inherit from input tokens by default for consistency.
+     --------------------------------------------------------------------------- */
+  --fb-option-bg-color: var(--fb-input-bg-color);
+  --fb-option-label-color: var(--fb-input-color);
+  --fb-option-border-radius: var(--fb-input-border-radius);
+  --fb-option-padding-x: var(--fb-input-padding-x);
+  --fb-option-padding-y: var(--fb-input-padding-y);
+  --fb-option-font-family: var(--fb-input-font-family);
+  --fb-option-font-size: var(--fb-input-font-size);
+  --fb-option-font-weight: var(--fb-input-font-weight);
+}
+
+.button-custom {
+  width: var(--fb-button-width);
+  height: var(--fb-button-height);
+  background-color: var(--fb-button-bg-color);
+  border-radius: var(--fb-button-border-radius);
+  font-family: var(--fb-button-font-family);
+  font-weight: var(--fb-button-font-weight);
+  padding-left: var(--fb-button-padding-x);
+  padding-right: var(--fb-button-padding-x);
+  padding-top: var(--fb-button-padding-y);
+  padding-bottom: var(--fb-button-padding-y);
+  color: var(--fb-button-text-color);
+  font-size: var(--fb-button-font-size);
+}
+
+.label-headline {
+  font-family: var(--fb-element-headline-font-family);
+  font-weight: var(--fb-element-headline-font-weight);
+  font-size: var(--fb-element-headline-font-size) !important;
+  color: var(--fb-element-headline-color);
+  opacity: var(--fb-element-headline-opacity);
+}
+
+.label-description {
+  font-family: var(--fb-element-description-font-family);
+  font-weight: var(--fb-element-description-font-weight);
+  font-size: var(--fb-element-description-font-size) !important;
+  color: var(--fb-element-description-color);
+  opacity: var(--fb-element-description-opacity);
+}
+
+.label-default {
+  font-family: var(--fb-label-font-family);
+  font-weight: var(--fb-label-font-weight);
+  font-size: var(--fb-label-font-size) !important;
+  color: var(--fb-label-color);
+  opacity: var(--fb-label-opacity);
+}
+
+.progress-track {
+  height: var(--fb-progress-track-height);
+  background-color: var(--fb-progress-track-bg-color);
+  border-radius: var(--fb-progress-track-border-radius);
+}
+
+.progress-indicator {
+  background-color: var(--fb-progress-indicator-bg-color);
+  border-radius: var(--fb-progress-indicator-border-radius);
+}
+
+/* ---------------------------------------------------------------------------
+   Textarea Scrollbar Styling
+   Smaller, more subtle scrollbars for textarea elements.
+   --------------------------------------------------------------------------- */
+textarea {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+textarea::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background-color: hsl(215.4 16.3% 46.9% / 0.3);
+  border-radius: 2px;
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(215.4 16.3% 46.9% / 0.5);
+}
\ No newline at end of file
diff --git a/packages/survey-ui/tailwind.config.ts b/packages/survey-ui/tailwind.config.ts
new file mode 100644
index 0000000000..3f3cd3eddc
--- /dev/null
+++ b/packages/survey-ui/tailwind.config.ts
@@ -0,0 +1,118 @@
+import type { Config } from "tailwindcss";
+
+function getForeground(color: string) {
+  // simple luminance check
+  const rgb = color.match(/\w\w/g)?.map((x) => Number.parseInt(x, 16)) ?? [0, 0, 0];
+  const luminance = (0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+
+export default {
+  darkMode: "class",
+  // Scope all utilities to #fbjs when used in surveys package
+  // This ensures proper specificity and prevents conflicts with preflight CSS
+  important: "#fbjs",
+  content: ["./src/**/*.{tsx,ts,jsx,js}"],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--fb-accent-background-color)",
+          selected: "var(--fb-accent-background-color-selected)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--foreground)",
+          muted: "var(--destructive-muted)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--fb-survey-brand-color)",
+        brand: {
+          DEFAULT: "var(--fb-survey-brand-color)",
+          "20": "color-mix(in srgb, var(--fb-survey-brand-color) 20%, white)",
+          foreground: getForeground("var(--fb-survey-brand-color)"),
+        },
+        // Input CSS variables (shorter names)
+        "input-bg": "var(--fb-input-bg-color)",
+        "input-border": "var(--fb-input-border-color, var(--fb-survey-brand-color))",
+        "input-text": "var(--fb-input-color)",
+        "input-placeholder": "var(--fb-input-placeholder-color)",
+        // Option CSS variables
+        "option-bg": "var(--fb-option-bg-color)",
+        "option-border": "color-mix(in srgb, var(--fb-option-bg-color) 95%, black 5%)",
+        "option-label": "var(--fb-option-label-color)",
+        "option-selected-bg": "color-mix(in srgb, var(--fb-option-bg-color) 95%, black)",
+        "option-hover-bg": "color-mix(in srgb, var(--fb-option-bg-color) 95%, black)",
+        "input-selected-bg": "color-mix(in srgb, var(--fb-input-bg-color) 95%, black)",
+        // Button CSS variables
+        "button-bg": "var(--fb-button-bg-color)",
+        "button-text": "var(--fb-button-text-color)",
+      },
+      width: {
+        input: "var(--fb-input-width)",
+        button: "var(--fb-button-width)",
+      },
+      height: {
+        input: "var(--fb-input-height)",
+        button: "var(--fb-button-height)",
+      },
+      borderRadius: {
+        input: "var(--fb-input-border-radius)",
+        option: "var(--fb-option-border-radius)",
+        button: "var(--fb-button-border-radius)",
+      },
+      fontSize: {
+        input: "var(--fb-input-font-size)",
+        option: "var(--fb-option-font-size)",
+        button: "var(--fb-button-font-size)",
+      },
+      fontWeight: {
+        "input-weight": "var(--fb-input-font-weight)",
+        "option-weight": "var(--fb-option-font-weight)",
+        "button-weight": "var(--fb-button-font-weight)",
+      },
+      fontFamily: {
+        input: "var(--fb-input-font-family)",
+        option: "var(--fb-option-font-family)",
+        button: "var(--fb-button-font-family)",
+      },
+      padding: {
+        "input-x": "var(--fb-input-padding-x)",
+        "input-y": "var(--fb-input-padding-y)",
+        "option-x": "var(--fb-option-padding-x)",
+        "option-y": "var(--fb-option-padding-y)",
+        "button-x": "var(--fb-button-padding-x)",
+        "button-y": "var(--fb-button-padding-y)",
+      },
+      boxShadow: {
+        input: "var(--fb-input-shadow)",
+      },
+      opacity: {
+        "input-placeholder": "var(--fb-input-placeholder-opacity)",
+      },
+    },
+  },
+} satisfies Config;
diff --git a/packages/survey-ui/tsconfig.json b/packages/survey-ui/tsconfig.json
new file mode 100644
index 0000000000..82069ba91c
--- /dev/null
+++ b/packages/survey-ui/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true
+  },
+  "extends": "@formbricks/config-typescript/react-library.json",
+  "include": ["src"]
+}
diff --git a/packages/survey-ui/vite.config.mts b/packages/survey-ui/vite.config.mts
new file mode 100644
index 0000000000..5de43961df
--- /dev/null
+++ b/packages/survey-ui/vite.config.mts
@@ -0,0 +1,67 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import tsconfigPaths from "vite-tsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+/**
+ * Plugin to strip "use client" directives from bundled dependencies.
+ *
+ * This fixes warnings from Radix UI and other packages that include "use client"
+ * directives for Next.js React Server Components compatibility. When Vite bundles
+ * these packages, it emits warnings because module-level directives aren't supported
+ * in the bundled output.
+ *
+ * The "use client" directive is only relevant for Next.js RSC and doesn't affect
+ * our library build, so it's safe to remove during bundling.
+ *
+ * Related issue: https://github.com/TanStack/query/issues/5175
+ */
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: [
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        /^@formkit\/auto-animate/,
+        /^@radix-ui/,
+        "class-variance-authority",
+        "clsx",
+        /^date-fns/,
+        "isomorphic-dompurify",
+        "lucide-react",
+        /^react-day-picker/,
+        "tailwind-merge",
+      ],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: "src",
+        entryFileNames: "[name].js",
+      },
+    },
+  },
+  plugins: [
+    tsconfigPaths(),
+    dts({ include: ["src"] }),
+    tailwindcss(),
+  ],
+  test: {
+    environment: "node",
+    globals: true,
+    include: ["src/**/*.test.ts"],
+    exclude: ["dist/**", "node_modules/**"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html", "lcov"],
+      reportsDirectory: "./coverage",
+      include: ["src/lib/**/*.ts"],
+      exclude: ["**/*.test.ts", "**/*.stories.tsx"],
+    },
+  },
+});
+
diff --git a/packages/surveys/i18n.lock b/packages/surveys/i18n.lock
index 9fc90ac58e..7a28170813 100644
--- a/packages/surveys/i18n.lock
+++ b/packages/surveys/i18n.lock
@@ -5,44 +5,32 @@ checksums:
     common/apply: eb61ee65aa06a70b2bc908cf0e9f2104
     common/auto_close_wrapper: fd0948e4d47150513e2b354c7685c1a7
     common/back: f541015a827e37cb3b1234e56bc2aa3c
-    common/click_or_drag_to_upload_files: 64f59bc339568d52b8464b82546b70ea
     common/close_survey: 36e6aaa19051cb253aa155ad69a9edbc
     common/company_logo: 82d5c0d5994508210ee02d684819f4b8
-    common/delete_file: ee2f3e3fb4d2b227aea90e44fdaca861
-    common/file_upload: fe254dc8892e76cf5a008d712c6ce9c8
     common/finish: ffa7a10f71182b48fefed7135bee24fa
     common/language_switch: fd72a9ada13f672f4fd5da863b22cc46
     common/less_than_x_minutes: 8a8528651d0b60dc93be451abf6a139b
-    common/move_down: 479ab9ea756d1d814f7dcfe7cd7c21ba
-    common/move_up: c18fce90954378eb8573f5c3050bf140
     common/next: 89ddbcf710eba274963494f312bdc8a9
     common/open_in_new_tab: 6844e4922a7a40a7ee25c10ea109cdeb
-    common/optional: 396fb9a0472daf401c392bdc3e248943
-    common/options: 59156082418d80acb211f973b1218f11
     common/people_responded: b685fb877090d8658db724ad07a0dbd8
     common/please_retry_now_or_try_again_later: 949a3841e2eb01fa249790a42bf23aa5
+    common/please_specify: e1faa6cd085144f7339c7e74dc6fb366
     common/powered_by: 6b6f88e2fa5a1ecec6cebf813abaeebb
     common/privacy_policy: 7459744a63ef8af4e517a09024bd7c08
     common/protected_by_reCAPTCHA_and_the_Google: 32de026bff5d52e9edf5410d7d7b835f
     common/question: 0576462ce60d4263d7c482463fcc9547
     common/question_video: cc554b661fd62ac59db500307b3ba44e
-    common/ranking_items: 463f2eb500f1b42fbce6cec17612fb9a
+    common/required: 04d7fb6f37ffe0a6ca97d49e2a8b6eb5
     common/respondents_will_not_see_this_card: 18c3dd44d6ff6ca2310ad196b84f30d3
     common/retry: 6e44d18639560596569a1278f9c83676
     common/retrying: 0cb623dbdcbf16d3680f0180ceac734c
-    common/select_a_date: 521e4a705800da06d091fde3e801ce02
-    common/select_for_ranking: e5f4e20752d1c2d852cd02dc3a0e9dd0
     common/sending_responses: 184772f70cca69424eaf34f73520789f
     common/takes: 01f96e2e84741ea8392d97ff4bd2aa52
     common/terms_of_service: 5add91f519e39025708e54a7eb7a9fc5
     common/the_servers_cannot_be_reached_at_the_moment: f8adbeccac69f9230a55b5b3af52b081
     common/they_will_be_redirected_immediately: 936bc99cb575cba95ea8f04d82bb353b
-    common/upload_files_by_clicking_or_dragging_them_here: 771d058cb341fe8f5c5866d0a617d9d2
-    common/uploading: 31c3e8fa5eca1a3108d3fa6178962d5d
     common/x_minutes: bf6ec8800c29b1447226447a991b9510
     common/x_plus_minutes: 2ef597aa029e3c71d442455fbb751991
-    common/you_have_selected_x_date: 38eae371bac832a099c235cac97f3ef3
-    common/you_have_successfully_uploaded_the_file: 42fa83be555dc13e619241502cda6d9c
     common/your_feedback_is_stuck: db2b6aba26723b01aee0fc918d3ca052
     errors/file_input/duplicate_files: 198dd29e67beb6abc5b2534ede7d7f68
     errors/file_input/file_size_exceeded: 072045b042a39fa1df76200f8fa36dd4
@@ -60,6 +48,7 @@ checksums:
     errors/please_fill_out_this_field: 88d4fd502ae8d423277aef723afcd1a7
     errors/please_rank_all_items_before_submitting: 24fb14a2550bd7ec3e253dda0997cea8
     errors/please_select_a_date: 1abdc8ffb887dbbdcc0d05486cd84de7
+    errors/please_select_an_option: 9fede3bb9ded29301e89b98616e3583a
     errors/please_upload_a_file: 4356dfca88553acb377664c923c2d6b7
     errors/recaptcha_error/message: b3f2c5950cbc0887f391f9e2bccb676e
     errors/recaptcha_error/title: 8e923ec38a92041569879a39c6467131
diff --git a/packages/surveys/locales/ar.json b/packages/surveys/locales/ar.json
index 440c1caa4a..801f67cc8f 100644
--- a/packages/surveys/locales/ar.json
+++ b/packages/surveys/locales/ar.json
@@ -4,44 +4,32 @@
     "apply": "تطبيق",
     "auto_close_wrapper": "غلاف إغلاق تلقائي",
     "back": "رجوع",
-    "click_or_drag_to_upload_files": "انقر أو اسحب لتحميل الملفات.",
     "close_survey": "إغلاق الاستبيان",
     "company_logo": "شعار الشركة",
-    "delete_file": "حذف الملف",
-    "file_upload": "تحميل الملف",
     "finish": "إنهاء",
     "language_switch": "تبديل اللغة",
     "less_than_x_minutes": "{count, plural, one {أقل من دقيقة واحدة} two {أقل من دقيقتين} few {أقل من {count} دقائق} many {أقل من {count} دقيقة} other {أقل من {count} دقيقة}}",
-    "move_down": "نقل {item} للأسفل",
-    "move_up": "نقل {item} للأعلى",
     "next": "التالي",
     "open_in_new_tab": "فتح في علامة تبويب جديدة",
-    "optional": "اختياري",
-    "options": "خيارات",
     "people_responded": "{count, plural, one {شخص واحد استجاب} two {شخصان استجابا} few {{count} أشخاص استجابوا} many {{count} شخصًا استجابوا} other {{count} شخص استجابوا}}",
     "please_retry_now_or_try_again_later": "يرجى إعادة المحاولة الآن أو المحاولة مرة أخرى لاحقًا.",
+    "please_specify": "يرجى التحديد",
     "powered_by": "مشغل بواسطة",
     "privacy_policy": "سياسة الخصوصية",
     "protected_by_reCAPTCHA_and_the_Google": "محمي بواسطة reCAPTCHA و Google",
     "question": "سؤال",
     "question_video": "فيديو السؤال",
-    "ranking_items": "عناصر الترتيب",
+    "required": "مطلوب",
     "respondents_will_not_see_this_card": "لن يرى المستجيبون هذه البطاقة",
     "retry": "إعادة المحاولة",
     "retrying": "إعادة المحاولة...",
-    "select_a_date": "اختر تاريخًا",
-    "select_for_ranking": "اختر {item} للترتيب",
     "sending_responses": "جارٍ إرسال الردود...",
     "takes": "يأخذ",
     "terms_of_service": "شروط الخدمة",
     "the_servers_cannot_be_reached_at_the_moment": "لا يمكن الوصول إلى الخوادم في الوقت الحالي.",
     "they_will_be_redirected_immediately": "سيتم إعادة توجيههم فورًا",
-    "upload_files_by_clicking_or_dragging_them_here": "قم بتحميل الملفات بالنقر عليها أو سحبها إلى هنا",
-    "uploading": "جارٍ التحميل",
     "x_minutes": "{count, plural, one {دقيقة واحدة} two {دقيقتان} few {{count} دقائق} many {{count} دقيقة} other {{count} دقيقة}}",
     "x_plus_minutes": "{count}+ دقيقة",
-    "you_have_selected_x_date": "لقد اخترت {date}",
-    "you_have_successfully_uploaded_the_file": "لقد قمت بتحميل الملف {fileName} بنجاح",
     "your_feedback_is_stuck": "تعليقك عالق :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "يرجى ملء هذا الحقل",
     "please_rank_all_items_before_submitting": "يرجى ترتيب جميع العناصر قبل الإرسال",
     "please_select_a_date": "يرجى اختيار تاريخ",
+    "please_select_an_option": "يرجى اختيار خيار",
     "please_upload_a_file": "يرجى تحميل ملف",
     "recaptcha_error": {
       "message": "تعذر إرسال ردك لأنه تم تصنيفه كنشاط آلي. إذا كنت تتنفس، يرجى المحاولة مرة أخرى.",
diff --git a/packages/surveys/locales/de.json b/packages/surveys/locales/de.json
index b6ae0a3857..2609d158db 100644
--- a/packages/surveys/locales/de.json
+++ b/packages/surveys/locales/de.json
@@ -4,44 +4,32 @@
     "apply": "anwenden",
     "auto_close_wrapper": "Automatisches Schließen",
     "back": "Zurück",
-    "click_or_drag_to_upload_files": "Klicken oder ziehen Sie, um Dateien hochzuladen.",
     "close_survey": "Umfrage schließen",
     "company_logo": "Firmenlogo",
-    "delete_file": "Datei löschen",
-    "file_upload": "Datei-Upload",
     "finish": "Fertig",
     "language_switch": "Sprachwechsel",
     "less_than_x_minutes": "{count, plural, one {weniger als 1 Minute} other {weniger als {count} Minuten}}",
-    "move_down": "{item} nach unten verschieben",
-    "move_up": "{item} nach oben verschieben",
     "next": "Weiter",
     "open_in_new_tab": "In neuem Tab öffnen",
-    "optional": "Optional",
-    "options": "Optionen",
     "people_responded": "{count, plural, one {1 Person hat geantwortet} other {{count} Personen haben geantwortet}}",
     "please_retry_now_or_try_again_later": "Bitte versuchen Sie es jetzt erneut oder später noch einmal.",
+    "please_specify": "Bitte angeben",
     "powered_by": "Bereitgestellt von",
     "privacy_policy": "Datenschutzrichtlinie",
     "protected_by_reCAPTCHA_and_the_Google": "Geschützt durch reCAPTCHA und die Google",
     "question": "Frage",
     "question_video": "Fragevideo",
-    "ranking_items": "Ranking-Elemente",
+    "required": "Erforderlich",
     "respondents_will_not_see_this_card": "Befragte werden diese Karte nicht sehen",
     "retry": "Wiederholen",
-    "retrying": "Wird wiederholt...",
-    "select_a_date": "Datum auswählen",
-    "select_for_ranking": "{item} für Ranking auswählen",
+    "retrying": "Erneuter Versuch...",
     "sending_responses": "Antworten werden gesendet...",
     "takes": "Dauert",
     "terms_of_service": "Nutzungsbedingungen",
     "the_servers_cannot_be_reached_at_the_moment": "Die Server sind momentan nicht erreichbar.",
     "they_will_be_redirected_immediately": "Sie werden sofort weitergeleitet",
-    "upload_files_by_clicking_or_dragging_them_here": "Laden Sie Dateien hoch, indem Sie sie hier anklicken oder hierher ziehen",
-    "uploading": "Wird hochgeladen",
     "x_minutes": "{count, plural, one {1 Minute} other {{count} Minuten}}",
     "x_plus_minutes": "{count}+ Minuten",
-    "you_have_selected_x_date": "Sie haben {date} ausgewählt",
-    "you_have_successfully_uploaded_the_file": "Sie haben die Datei {fileName} erfolgreich hochgeladen",
     "your_feedback_is_stuck": "Ihr Feedback steckt fest :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Bitte füllen Sie dieses Feld aus",
     "please_rank_all_items_before_submitting": "Bitte ordnen Sie alle Elemente vor dem Absenden",
     "please_select_a_date": "Bitte wählen Sie ein Datum aus",
+    "please_select_an_option": "Bitte wählen Sie eine Option",
     "please_upload_a_file": "Bitte laden Sie eine Datei hoch",
     "recaptcha_error": {
       "message": "Ihre Antwort konnte nicht übermittelt werden, da sie als automatisierte Aktivität eingestuft wurde. Wenn Sie atmen, versuchen Sie es bitte erneut.",
diff --git a/packages/surveys/locales/en.json b/packages/surveys/locales/en.json
index d0b6a1b4e9..3559f3002a 100644
--- a/packages/surveys/locales/en.json
+++ b/packages/surveys/locales/en.json
@@ -4,44 +4,32 @@
     "apply": "apply",
     "auto_close_wrapper": "Auto close wrapper",
     "back": "Back",
-    "click_or_drag_to_upload_files": "Click or drag to upload files.",
     "close_survey": "Close survey",
     "company_logo": "Company Logo",
-    "delete_file": "Delete file",
-    "file_upload": "File upload",
     "finish": "Finish",
     "language_switch": "Language switch",
     "less_than_x_minutes": "{count, plural, one {less than 1 minute} other {less than {count} minutes}}",
-    "move_down": "Move {item} down",
-    "move_up": "Move {item} up",
     "next": "Next",
     "open_in_new_tab": "Open in new tab",
-    "optional": "Optional",
-    "options": "Options",
     "people_responded": "{count, plural, one {1 person responded} other {{count} people responded}}",
     "please_retry_now_or_try_again_later": "Please retry now or try again later.",
+    "please_specify": "Please specify",
     "powered_by": "Powered by",
     "privacy_policy": "Privacy Policy",
     "protected_by_reCAPTCHA_and_the_Google": "Protected by reCAPTCHA and the Google",
     "question": "Question",
     "question_video": "Question Video",
-    "ranking_items": "Ranking Items",
+    "required": "Required",
     "respondents_will_not_see_this_card": "Respondents will not see this card",
     "retry": "Retry",
     "retrying": "Retrying...",
-    "select_a_date": "Select a date",
-    "select_for_ranking": "Select {item} for ranking",
     "sending_responses": "Sending responses...",
     "takes": "Takes",
     "terms_of_service": "Terms of Service",
     "the_servers_cannot_be_reached_at_the_moment": "The servers cannot be reached at the moment.",
     "they_will_be_redirected_immediately": "They will be redirected immediately",
-    "upload_files_by_clicking_or_dragging_them_here": "Upload files by clicking or dragging them here",
-    "uploading": "Uploading",
     "x_minutes": "{count, plural, one {1 minute} other {{count} minutes}}",
     "x_plus_minutes": "{count}+ minutes",
-    "you_have_selected_x_date": "You have selected {date}",
-    "you_have_successfully_uploaded_the_file": "You've successfully uploaded the file {fileName}",
     "your_feedback_is_stuck": "Your feedback is stuck :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Please fill out this field",
     "please_rank_all_items_before_submitting": "Please rank all items before submitting",
     "please_select_a_date": "Please select a date",
+    "please_select_an_option": "Please select an option",
     "please_upload_a_file": "Please upload a file",
     "recaptcha_error": {
       "message": "Your response could not be submitted because it was flagged as automated activity. If you breathe, please try again.",
diff --git a/packages/surveys/locales/es.json b/packages/surveys/locales/es.json
index 0572ad03b0..0997e7984a 100644
--- a/packages/surveys/locales/es.json
+++ b/packages/surveys/locales/es.json
@@ -4,44 +4,32 @@
     "apply": "aplicar",
     "auto_close_wrapper": "Cerrar automáticamente",
     "back": "Atrás",
-    "click_or_drag_to_upload_files": "Haz clic o arrastra para subir archivos.",
     "close_survey": "Cerrar encuesta",
     "company_logo": "Logo de la empresa",
-    "delete_file": "Eliminar archivo",
-    "file_upload": "Subida de archivos",
     "finish": "Finalizar",
     "language_switch": "Cambio de idioma",
     "less_than_x_minutes": "{count, plural, one {menos de 1 minuto} other {menos de {count} minutos}}",
-    "move_down": "Mover {item} hacia abajo",
-    "move_up": "Mover {item} hacia arriba",
     "next": "Siguiente",
     "open_in_new_tab": "Abrir en nueva pestaña",
-    "optional": "Opcional",
-    "options": "Opciones",
     "people_responded": "{count, plural, one {1 persona respondió} other {{count} personas respondieron}}",
     "please_retry_now_or_try_again_later": "Por favor, inténtalo ahora o prueba más tarde.",
+    "please_specify": "Por favor especifique",
     "powered_by": "Desarrollado por",
     "privacy_policy": "Política de privacidad",
     "protected_by_reCAPTCHA_and_the_Google": "Protegido por reCAPTCHA y Google",
     "question": "Pregunta",
     "question_video": "Video de la pregunta",
-    "ranking_items": "Elementos de clasificación",
+    "required": "Obligatorio",
     "respondents_will_not_see_this_card": "Los encuestados no verán esta tarjeta",
     "retry": "Reintentar",
     "retrying": "Reintentando...",
-    "select_a_date": "Seleccionar una fecha",
-    "select_for_ranking": "Seleccionar {item} para clasificación",
     "sending_responses": "Enviando respuestas...",
     "takes": "Tomas",
     "terms_of_service": "Términos de servicio",
     "the_servers_cannot_be_reached_at_the_moment": "Los servidores no pueden ser alcanzados en este momento.",
     "they_will_be_redirected_immediately": "Serán redirigidos inmediatamente",
-    "upload_files_by_clicking_or_dragging_them_here": "Sube archivos haciendo clic o arrastrándolos aquí",
-    "uploading": "Subiendo",
     "x_minutes": "{count, plural, one {1 minuto} other {{count} minutos}}",
     "x_plus_minutes": "{count}+ minutos",
-    "you_have_selected_x_date": "Has seleccionado {date}",
-    "you_have_successfully_uploaded_the_file": "Has subido correctamente el archivo {fileName}",
     "your_feedback_is_stuck": "Tu feedback está atascado :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Por favor, complete este campo",
     "please_rank_all_items_before_submitting": "Por favor, clasifique todos los elementos antes de enviar",
     "please_select_a_date": "Por favor, seleccione una fecha",
+    "please_select_an_option": "Por favor selecciona una opción",
     "please_upload_a_file": "Por favor, suba un archivo",
     "recaptcha_error": {
       "message": "Su respuesta no pudo ser enviada porque fue marcada como actividad automatizada. Si respira, por favor inténtelo de nuevo.",
diff --git a/packages/surveys/locales/fr.json b/packages/surveys/locales/fr.json
index 646a0e33e8..f246a03ee7 100644
--- a/packages/surveys/locales/fr.json
+++ b/packages/surveys/locales/fr.json
@@ -4,44 +4,32 @@
     "apply": "appliquer",
     "auto_close_wrapper": "Fermeture automatique du wrapper",
     "back": "Retour",
-    "click_or_drag_to_upload_files": "Cliquez ou glissez pour télécharger des fichiers.",
     "close_survey": "Fermer le sondage",
     "company_logo": "Logo de l'entreprise",
-    "delete_file": "Supprimer le fichier",
-    "file_upload": "Téléchargement de fichier",
     "finish": "Terminer",
     "language_switch": "Changement de langue",
     "less_than_x_minutes": "{count, plural, one {moins d'une minute} other {moins de {count} minutes}}",
-    "move_down": "Déplacer {item} vers le bas",
-    "move_up": "Déplacer {item} vers le haut",
     "next": "Suivant",
     "open_in_new_tab": "Ouvrir dans un nouvel onglet",
-    "optional": "Facultatif",
-    "options": "Options",
     "people_responded": "{count, plural, one {1 personne a répondu} other {{count} personnes ont répondu}}",
     "please_retry_now_or_try_again_later": "Veuillez réessayer maintenant ou réessayer plus tard.",
+    "please_specify": "Veuillez préciser",
     "powered_by": "Propulsé par",
     "privacy_policy": "Politique de confidentialité",
     "protected_by_reCAPTCHA_and_the_Google": "Protégé par reCAPTCHA et Google",
     "question": "Question",
     "question_video": "Vidéo de la question",
-    "ranking_items": "Éléments de classement",
+    "required": "Obligatoire",
     "respondents_will_not_see_this_card": "Les répondants ne verront pas cette carte",
     "retry": "Réessayer",
     "retrying": "Nouvelle tentative...",
-    "select_a_date": "Sélectionner une date",
-    "select_for_ranking": "Sélectionner {item} pour le classement",
     "sending_responses": "Envoi des réponses...",
     "takes": "Prises",
     "terms_of_service": "Conditions d'utilisation",
     "the_servers_cannot_be_reached_at_the_moment": "Les serveurs ne sont pas accessibles pour le moment.",
     "they_will_be_redirected_immediately": "Ils seront redirigés immédiatement",
-    "upload_files_by_clicking_or_dragging_them_here": "Téléchargez des fichiers en cliquant ou en les faisant glisser ici",
-    "uploading": "Téléchargement en cours",
     "x_minutes": "{count, plural, one {1 minute} other {{count} minutes}}",
     "x_plus_minutes": "{count}+ minutes",
-    "you_have_selected_x_date": "Vous avez sélectionné {date}",
-    "you_have_successfully_uploaded_the_file": "Vous avez téléchargé le fichier {fileName} avec succès",
     "your_feedback_is_stuck": "Votre feedback est bloqué :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Veuillez remplir ce champ",
     "please_rank_all_items_before_submitting": "Veuillez classer tous les éléments avant de soumettre",
     "please_select_a_date": "Veuillez sélectionner une date",
+    "please_select_an_option": "Veuillez sélectionner une option",
     "please_upload_a_file": "Veuillez télécharger un fichier",
     "recaptcha_error": {
       "message": "Votre réponse n'a pas pu être soumise car elle a été signalée comme une activité automatisée. Si vous respirez, veuillez réessayer.",
diff --git a/packages/surveys/locales/hi.json b/packages/surveys/locales/hi.json
index e39c576c0b..cee1292338 100644
--- a/packages/surveys/locales/hi.json
+++ b/packages/surveys/locales/hi.json
@@ -4,44 +4,32 @@
     "apply": "लागू करें",
     "auto_close_wrapper": "स्वचालित बंद रैपर",
     "back": "वापस",
-    "click_or_drag_to_upload_files": "फ़ाइलें अपलोड करने के लिए क्लिक करें या खींचें।",
     "close_survey": "सर्वेक्षण बंद करें",
     "company_logo": "कंपनी लोगो",
-    "delete_file": "फ़ाइल हटाएं",
-    "file_upload": "फ़ाइल अपलोड",
     "finish": "समाप्त करें",
     "language_switch": "भाषा बदलें",
     "less_than_x_minutes": "{count, plural, one {1 मिनट से कम} other {{count} मिनट से कम}}",
-    "move_down": "{item} को नीचे ले जाएं",
-    "move_up": "{item} को ऊपर ले जाएं",
     "next": "अगला",
     "open_in_new_tab": "नए टैब में खोलें",
-    "optional": "वैकल्पिक",
-    "options": "विकल्प",
     "people_responded": "{count, plural, one {1 व्यक्ति ने जवाब दिया} other {{count} लोगों ने जवाब दिया}}",
     "please_retry_now_or_try_again_later": "कृपया अभी पुनः प्रयास करें या बाद में फिर से प्रयास करें।",
+    "please_specify": "कृपया निर्दिष्ट करें",
     "powered_by": "द्वारा संचालित",
     "privacy_policy": "गोपनीयता नीति",
     "protected_by_reCAPTCHA_and_the_Google": "reCAPTCHA और Google द्वारा संरक्षित",
     "question": "प्रश्न",
     "question_video": "प्रश्न वीडियो",
-    "ranking_items": "रैंकिंग आइटम",
+    "required": "आवश्यक",
     "respondents_will_not_see_this_card": "उत्तरदाता इस कार्ड को नहीं देखेंगे",
     "retry": "पुनः प्रयास करें",
     "retrying": "पुनः प्रयास कर रहे हैं...",
-    "select_a_date": "एक तिथि चुनें",
-    "select_for_ranking": "रैंकिंग के लिए {item} चुनें",
     "sending_responses": "प्रतिक्रियाएँ भेज रहे हैं...",
     "takes": "लेता है",
     "terms_of_service": "सेवा की शर्तें",
     "the_servers_cannot_be_reached_at_the_moment": "इस समय सर्वर तक पहुंचा नहीं जा सकता है।",
     "they_will_be_redirected_immediately": "उन्हें तुरंत रीडायरेक्ट किया जाएगा",
-    "upload_files_by_clicking_or_dragging_them_here": "क्लिक करके या यहां खींचकर फ़ाइलें अपलोड करें",
-    "uploading": "अपलोड हो रहा है",
     "x_minutes": "{count, plural, one {1 मिनट} other {{count} मिनट}}",
     "x_plus_minutes": "{count}+ मिनट",
-    "you_have_selected_x_date": "आपने {date} चुना है",
-    "you_have_successfully_uploaded_the_file": "आपने {fileName} फ़ाइल सफलतापूर्वक अपलोड कर दी है",
     "your_feedback_is_stuck": "आपकी प्रतिक्रिया अटक गई है :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "कृपया इस फील्ड को भरें",
     "please_rank_all_items_before_submitting": "जमा करने से पहले कृपया सभी आइटम्स को रैंक करें",
     "please_select_a_date": "कृपया एक तारीख चुनें",
+    "please_select_an_option": "कृपया एक विकल्प चुनें",
     "please_upload_a_file": "कृपया एक फाइल अपलोड करें",
     "recaptcha_error": {
       "message": "आपका प्रतिसाद जमा नहीं किया जा सका क्योंकि इसे स्वचालित गतिविधि के रूप में चिह्नित किया गया था। यदि आप सांस लेते हैं, तो कृपया पुनः प्रयास करें।",
diff --git a/packages/surveys/locales/it.json b/packages/surveys/locales/it.json
index b71e9694c9..24d9522c52 100644
--- a/packages/surveys/locales/it.json
+++ b/packages/surveys/locales/it.json
@@ -4,44 +4,32 @@
     "apply": "applica",
     "auto_close_wrapper": "Wrapper a chiusura automatica",
     "back": "Indietro",
-    "click_or_drag_to_upload_files": "Clicca o trascina per caricare i file.",
     "close_survey": "Chiudi sondaggio",
     "company_logo": "Logo aziendale",
-    "delete_file": "Elimina file",
-    "file_upload": "Caricamento file",
     "finish": "Fine",
     "language_switch": "Cambio lingua",
     "less_than_x_minutes": "{count, plural, one {meno di 1 minuto} other {meno di {count} minuti}}",
-    "move_down": "Sposta {item} giù",
-    "move_up": "Sposta {item} su",
     "next": "Avanti",
     "open_in_new_tab": "Apri in una nuova scheda",
-    "optional": "Facoltativo",
-    "options": "Opzioni",
     "people_responded": "{count, plural, one {1 persona ha risposto} other {{count} persone hanno risposto}}",
     "please_retry_now_or_try_again_later": "Riprova ora o più tardi.",
+    "please_specify": "Si prega di specificare",
     "powered_by": "Offerto da",
     "privacy_policy": "Informativa sulla privacy",
     "protected_by_reCAPTCHA_and_the_Google": "Protetto da reCAPTCHA e da Google",
     "question": "Domanda",
     "question_video": "Video della domanda",
-    "ranking_items": "Elementi di classifica",
+    "required": "Obbligatorio",
     "respondents_will_not_see_this_card": "I rispondenti non vedranno questa scheda",
     "retry": "Riprova",
     "retrying": "Riprovando...",
-    "select_a_date": "Seleziona una data",
-    "select_for_ranking": "Seleziona {item} per la classifica",
     "sending_responses": "Invio risposte in corso...",
     "takes": "Riprese",
     "terms_of_service": "Termini di servizio",
     "the_servers_cannot_be_reached_at_the_moment": "I server non sono raggiungibili al momento.",
     "they_will_be_redirected_immediately": "Saranno reindirizzati immediatamente",
-    "upload_files_by_clicking_or_dragging_them_here": "Carica file cliccando o trascinandoli qui",
-    "uploading": "Caricamento in corso",
     "x_minutes": "{count, plural, one {1 minuto} other {{count} minuti}}",
     "x_plus_minutes": "{count}+ minuti",
-    "you_have_selected_x_date": "Hai selezionato {date}",
-    "you_have_successfully_uploaded_the_file": "Hai caricato con successo il file {fileName}",
     "your_feedback_is_stuck": "Il tuo feedback è bloccato :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Compila questo campo",
     "please_rank_all_items_before_submitting": "Classifica tutti gli elementi prima di inviare",
     "please_select_a_date": "Seleziona una data",
+    "please_select_an_option": "Seleziona un'opzione",
     "please_upload_a_file": "Carica un file",
     "recaptcha_error": {
       "message": "La tua risposta non può essere inviata perché è stata segnalata come attività automatizzata. Se respiri, riprova.",
diff --git a/packages/surveys/locales/ja.json b/packages/surveys/locales/ja.json
index 1225a8fb80..57852eec97 100644
--- a/packages/surveys/locales/ja.json
+++ b/packages/surveys/locales/ja.json
@@ -4,44 +4,32 @@
     "apply": "適用",
     "auto_close_wrapper": "自動クローズラッパー",
     "back": "戻る",
-    "click_or_drag_to_upload_files": "クリックまたはドラッグしてファイルをアップロード。",
     "close_survey": "アンケートを閉じる",
     "company_logo": "会社ロゴ",
-    "delete_file": "ファイルを削除",
-    "file_upload": "ファイルアップロード",
     "finish": "完了",
     "language_switch": "言語切替",
     "less_than_x_minutes": "{count, plural, other {{count}分未満}}",
-    "move_down": "{item}を下に移動",
-    "move_up": "{item}を上に移動",
     "next": "次へ",
     "open_in_new_tab": "新しいタブで開く",
-    "optional": "任意",
-    "options": "オプション",
     "people_responded": "{count, plural, other {{count}人が回答しました}}",
     "please_retry_now_or_try_again_later": "今すぐ再試行するか、後でもう一度お試しください。",
+    "please_specify": "具体的に記入してください",
     "powered_by": "提供：",
     "privacy_policy": "プライバシーポリシー",
     "protected_by_reCAPTCHA_and_the_Google": "reCAPTCHAとGoogleによって保護されています",
     "question": "質問",
     "question_video": "質問ビデオ",
-    "ranking_items": "ランキング項目",
+    "required": "必須",
     "respondents_will_not_see_this_card": "回答者はこのカードを見ることができません",
     "retry": "再試行",
     "retrying": "再試行中...",
-    "select_a_date": "日付を選択",
-    "select_for_ranking": "ランキング用に{item}を選択",
     "sending_responses": "回答を送信中...",
     "takes": "所要時間",
     "terms_of_service": "利用規約",
     "the_servers_cannot_be_reached_at_the_moment": "現在サーバーに接続できません。",
     "they_will_be_redirected_immediately": "すぐにリダイレクトされます",
-    "upload_files_by_clicking_or_dragging_them_here": "クリックまたはドラッグしてファイルをアップロード",
-    "uploading": "アップロード中",
     "x_minutes": "{count, plural, one {1分} other {{count}分}}",
     "x_plus_minutes": "{count}分以上",
-    "you_have_selected_x_date": "{date}を選択しました",
-    "you_have_successfully_uploaded_the_file": "ファイル{fileName}のアップロードに成功しました",
     "your_feedback_is_stuck": "フィードバックが送信できません :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "このフィールドに入力してください",
     "please_rank_all_items_before_submitting": "送信する前にすべての項目をランク付けしてください",
     "please_select_a_date": "日付を選択してください",
+    "please_select_an_option": "オプションを選択してください",
     "please_upload_a_file": "ファイルをアップロードしてください",
     "recaptcha_error": {
       "message": "自動化された活動としてフラグが立てられたため、回答を送信できませんでした。人間の方は、もう一度お試しください。",
diff --git a/packages/surveys/locales/nl.json b/packages/surveys/locales/nl.json
index 4e18cc7445..3bb6ad3633 100644
--- a/packages/surveys/locales/nl.json
+++ b/packages/surveys/locales/nl.json
@@ -4,44 +4,32 @@
     "apply": "Toepassen",
     "auto_close_wrapper": "Automatisch sluitende wrapper",
     "back": "Terug",
-    "click_or_drag_to_upload_files": "Klik of sleep om bestanden te uploaden.",
     "close_survey": "Enquête sluiten",
     "company_logo": "Bedrijfslogo",
-    "delete_file": "Bestand verwijderen",
-    "file_upload": "Bestand uploaden",
     "finish": "Voltooien",
     "language_switch": "Taalschakelaar",
     "less_than_x_minutes": "{count, plural, one {minder dan 1 minuut} other {minder dan {count} minuten}}",
-    "move_down": "Verplaats {item} naar beneden",
-    "move_up": "Verplaats {item} omhoog",
     "next": "Volgende",
     "open_in_new_tab": "Openen in nieuw tabblad",
-    "optional": "Optioneel",
-    "options": "Opties",
     "people_responded": "{count, plural, one {1 persoon heeft gereageerd} other {{count} mensen hebben gereageerd}}",
     "please_retry_now_or_try_again_later": "Probeer het nu opnieuw of probeer het later opnieuw.",
+    "please_specify": "Graag specificeren",
     "powered_by": "Aangedreven door",
     "privacy_policy": "Privacybeleid",
     "protected_by_reCAPTCHA_and_the_Google": "Beschermd door reCAPTCHA en Google",
     "question": "Vraag",
     "question_video": "Vraagvideo",
-    "ranking_items": "Items rangschikken",
+    "required": "Verplicht",
     "respondents_will_not_see_this_card": "Respondenten zien deze kaart niet",
     "retry": "Opnieuw proberen",
     "retrying": "Opnieuw proberen...",
-    "select_a_date": "Selecteer een datum",
-    "select_for_ranking": "Selecteer {item} voor rangschikking",
     "sending_responses": "Reacties verzenden...",
     "takes": "Neemt",
     "terms_of_service": "Servicevoorwaarden",
     "the_servers_cannot_be_reached_at_the_moment": "De servers zijn momenteel niet bereikbaar.",
     "they_will_be_redirected_immediately": "Ze worden onmiddellijk doorgestuurd",
-    "upload_files_by_clicking_or_dragging_them_here": "Upload bestanden door ze hierheen te klikken of te slepen",
-    "uploading": "Uploaden",
     "x_minutes": "{count, plural, one {1 minuut} other {{count} minuten}}",
     "x_plus_minutes": "{count}+ minuten",
-    "you_have_selected_x_date": "Je hebt {date} geselecteerd",
-    "you_have_successfully_uploaded_the_file": "Je hebt het bestand {fileName} succesvol geüpload",
     "your_feedback_is_stuck": "Je feedback blijft hangen :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Vul dit veld in",
     "please_rank_all_items_before_submitting": "Rangschik alle items voordat u ze verzendt",
     "please_select_a_date": "Selecteer een datum",
+    "please_select_an_option": "Selecteer een optie",
     "please_upload_a_file": "Upload een bestand",
     "recaptcha_error": {
       "message": "Uw reactie kan niet worden verzonden omdat deze is gemarkeerd als geautomatiseerde activiteit. Als u ademhaalt, probeer het dan opnieuw.",
diff --git a/packages/surveys/locales/pt.json b/packages/surveys/locales/pt.json
index baccecbc62..f646719478 100644
--- a/packages/surveys/locales/pt.json
+++ b/packages/surveys/locales/pt.json
@@ -4,44 +4,32 @@
     "apply": "aplicar",
     "auto_close_wrapper": "Fechamento automático do wrapper",
     "back": "Voltar",
-    "click_or_drag_to_upload_files": "Clique ou arraste para carregar arquivos.",
     "close_survey": "Fechar pesquisa",
     "company_logo": "Logo da empresa",
-    "delete_file": "Excluir arquivo",
-    "file_upload": "Carregamento de arquivo",
     "finish": "Finalizar",
     "language_switch": "Alternar idioma",
     "less_than_x_minutes": "{count, plural, one {menos de 1 minuto} other {menos de {count} minutos}}",
-    "move_down": "Mover {item} para baixo",
-    "move_up": "Mover {item} para cima",
     "next": "Próximo",
     "open_in_new_tab": "Abrir em nova aba",
-    "optional": "Opcional",
-    "options": "Opções",
     "people_responded": "{count, plural, one {1 pessoa respondeu} other {{count} pessoas responderam}}",
     "please_retry_now_or_try_again_later": "Por favor, tente novamente agora ou mais tarde.",
+    "please_specify": "Por favor, especifique",
     "powered_by": "Desenvolvido por",
     "privacy_policy": "Política de privacidade",
     "protected_by_reCAPTCHA_and_the_Google": "Protegido pelo reCAPTCHA e o Google",
     "question": "Pergunta",
     "question_video": "Vídeo da pergunta",
-    "ranking_items": "Itens de classificação",
+    "required": "Obrigatório",
     "respondents_will_not_see_this_card": "Os respondentes não verão este cartão",
     "retry": "Tentar novamente",
     "retrying": "Tentando novamente...",
-    "select_a_date": "Selecione uma data",
-    "select_for_ranking": "Selecione {item} para classificação",
     "sending_responses": "Enviando respostas...",
     "takes": "Leva",
     "terms_of_service": "Termos de serviço",
     "the_servers_cannot_be_reached_at_the_moment": "Os servidores não podem ser alcançados no momento.",
     "they_will_be_redirected_immediately": "Eles serão redirecionados imediatamente",
-    "upload_files_by_clicking_or_dragging_them_here": "Carregue arquivos clicando ou arrastando-os aqui",
-    "uploading": "Carregando",
     "x_minutes": "{count, plural, one {1 minuto} other {{count} minutos}}",
     "x_plus_minutes": "{count}+ minutos",
-    "you_have_selected_x_date": "Você selecionou {date}",
-    "you_have_successfully_uploaded_the_file": "Você carregou o arquivo {fileName} com sucesso",
     "your_feedback_is_stuck": "Seu feedback está preso :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Por favor, preencha este campo",
     "please_rank_all_items_before_submitting": "Por favor, classifique todos os itens antes de enviar",
     "please_select_a_date": "Por favor, selecione uma data",
+    "please_select_an_option": "Por favor, selecione uma opção",
     "please_upload_a_file": "Por favor, carregue um arquivo",
     "recaptcha_error": {
       "message": "Sua resposta não pôde ser enviada porque foi sinalizada como atividade automatizada. Se você respira, por favor tente novamente.",
diff --git a/packages/surveys/locales/ro.json b/packages/surveys/locales/ro.json
index f2c4663c93..6266a0bee8 100644
--- a/packages/surveys/locales/ro.json
+++ b/packages/surveys/locales/ro.json
@@ -4,44 +4,32 @@
     "apply": "aplică",
     "auto_close_wrapper": "Închidere automată a învelișului",
     "back": "Înapoi",
-    "click_or_drag_to_upload_files": "Fă clic sau trage pentru a încărca fișiere.",
     "close_survey": "Închide sondajul",
     "company_logo": "Sigla companiei",
-    "delete_file": "Șterge fișierul",
-    "file_upload": "Încărcare fișier",
     "finish": "Finalizează",
     "language_switch": "Schimbare limbă",
     "less_than_x_minutes": "{count, plural, one {mai puțin de 1 minut} other {mai puțin de {count} minute}}",
-    "move_down": "Mută {item} în jos",
-    "move_up": "Mută {item} în sus",
     "next": "Următorul",
     "open_in_new_tab": "Deschide într-o filă nouă",
-    "optional": "Opțional",
-    "options": "Opțiuni",
     "people_responded": "{count, plural, one {1 persoană a răspuns} other {{count} persoane au răspuns}}",
     "please_retry_now_or_try_again_later": "Te rugăm să încerci din nou acum sau mai târziu.",
+    "please_specify": "Vă rugăm să specificați",
     "powered_by": "Susținut de",
     "privacy_policy": "Politica de confidențialitate",
     "protected_by_reCAPTCHA_and_the_Google": "Protejat de reCAPTCHA și de Google",
     "question": "Întrebare",
     "question_video": "Video întrebare",
-    "ranking_items": "Clasificare articole",
+    "required": "Obligatoriu",
     "respondents_will_not_see_this_card": "Respondenții nu vor vedea acest card",
     "retry": "Reîncearcă",
     "retrying": "Se reîncearcă...",
-    "select_a_date": "Selectează o dată",
-    "select_for_ranking": "Selectează {item} pentru clasificare",
     "sending_responses": "Trimiterea răspunsurilor...",
     "takes": "Durează",
     "terms_of_service": "Termeni și condiții",
     "the_servers_cannot_be_reached_at_the_moment": "Serverele nu pot fi accesate momentan.",
     "they_will_be_redirected_immediately": "Vor fi redirecționați imediat",
-    "upload_files_by_clicking_or_dragging_them_here": "Încarcă fișiere făcând clic sau trăgându-le aici",
-    "uploading": "Se încarcă",
     "x_minutes": "{count, plural, one {1 minut} other {{count} minute}}",
     "x_plus_minutes": "{count}+ minute",
-    "you_have_selected_x_date": "Ai selectat data {date}",
-    "you_have_successfully_uploaded_the_file": "Ai încărcat cu succes fișierul {fileName}",
     "your_feedback_is_stuck": "Feedback-ul tău este blocat :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Vă rugăm să completați acest câmp",
     "please_rank_all_items_before_submitting": "Vă rugăm să clasificați toate elementele înainte de a trimite",
     "please_select_a_date": "Vă rugăm să selectați o dată",
+    "please_select_an_option": "Vă rugăm să selectați o opțiune",
     "please_upload_a_file": "Vă rugăm să încărcați un fișier",
     "recaptcha_error": {
       "message": "Răspunsul dumneavoastră nu a putut fi trimis deoarece a fost marcat ca activitate automată. Dacă respirați, încercați din nou.",
diff --git a/packages/surveys/locales/ru.json b/packages/surveys/locales/ru.json
index f841174022..7378630da0 100644
--- a/packages/surveys/locales/ru.json
+++ b/packages/surveys/locales/ru.json
@@ -4,44 +4,32 @@
     "apply": "применить",
     "auto_close_wrapper": "Автоматическое закрытие оболочки",
     "back": "Назад",
-    "click_or_drag_to_upload_files": "Нажмите или перетащите, чтобы загрузить файлы.",
     "close_survey": "Закрыть опрос",
     "company_logo": "Логотип компании",
-    "delete_file": "Удалить файл",
-    "file_upload": "Загрузка файла",
     "finish": "Завершить",
     "language_switch": "Переключение языка",
     "less_than_x_minutes": "{count, plural, one {менее 1 минуты} other {менее {count} минут}}",
-    "move_down": "Переместить {item} вниз",
-    "move_up": "Переместить {item} вверх",
     "next": "Далее",
     "open_in_new_tab": "Открыть в новой вкладке",
-    "optional": "Необязательно",
-    "options": "Опции",
     "people_responded": "{count, plural, one {1 человек ответил} other {{count} человека ответили}}",
     "please_retry_now_or_try_again_later": "Пожалуйста, повторите попытку сейчас или попробуйте позже.",
+    "please_specify": "Пожалуйста, уточните",
     "powered_by": "Работает на основе",
     "privacy_policy": "Политика конфиденциальности",
     "protected_by_reCAPTCHA_and_the_Google": "Защищено reCAPTCHA и Google",
     "question": "Вопрос",
     "question_video": "Видео вопрос",
-    "ranking_items": "Ранжирование элементов",
+    "required": "Обязательно",
     "respondents_will_not_see_this_card": "Респонденты не увидят эту карточку",
     "retry": "Повторить",
     "retrying": "Повторная попытка...",
-    "select_a_date": "Выберите дату",
-    "select_for_ranking": "Выберите {item} для ранжирования",
     "sending_responses": "Отправка ответов...",
     "takes": "Занимает",
     "terms_of_service": "Условия использования",
     "the_servers_cannot_be_reached_at_the_moment": "Сервера в данный момент недоступны.",
     "they_will_be_redirected_immediately": "Они будут немедленно перенаправлены",
-    "upload_files_by_clicking_or_dragging_them_here": "Загрузите файлы, нажав или перетащив их сюда",
-    "uploading": "Загрузка",
     "x_minutes": "{count, plural, one {1 минута} few {{count} минуты} many {{count} минут}}",
     "x_plus_minutes": "{count}+ минут",
-    "you_have_selected_x_date": "Вы выбрали дату {date}",
-    "you_have_successfully_uploaded_the_file": "Вы успешно загрузили файл {fileName}",
     "your_feedback_is_stuck": "Ваш отзыв застрял :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Пожалуйста, заполните это поле",
     "please_rank_all_items_before_submitting": "Пожалуйста, оцените все элементы перед отправкой",
     "please_select_a_date": "Пожалуйста, выберите дату",
+    "please_select_an_option": "Пожалуйста, выберите вариант",
     "please_upload_a_file": "Пожалуйста, загрузите файл",
     "recaptcha_error": {
       "message": "Ваш ответ не может быть отправлен, так как он был помечен как автоматическая активность. Если вы дышите, попробуйте ещё раз.",
diff --git a/packages/surveys/locales/sv.json b/packages/surveys/locales/sv.json
index af8e05b9a9..d81680eb6a 100644
--- a/packages/surveys/locales/sv.json
+++ b/packages/surveys/locales/sv.json
@@ -4,44 +4,32 @@
     "apply": "Tillämpa",
     "auto_close_wrapper": "Automatisk stängning",
     "back": "Tillbaka",
-    "click_or_drag_to_upload_files": "Klicka eller dra för att ladda upp filer.",
     "close_survey": "Stäng enkät",
     "company_logo": "Företagslogotyp",
-    "delete_file": "Ta bort fil",
-    "file_upload": "Ladda upp fil",
     "finish": "Slutför",
     "language_switch": "Språkväxlare",
     "less_than_x_minutes": "{count, plural, one {mindre än 1 minut} other {mindre än {count} minuter}}",
-    "move_down": "Flytta {item} nedåt",
-    "move_up": "Flytta {item} uppåt",
     "next": "Nästa",
     "open_in_new_tab": "Öppna i ny flik",
-    "optional": "Valfritt",
-    "options": "Alternativ",
     "people_responded": "{count, plural, one {1 person har svarat} other {{count} personer har svarat}}",
     "please_retry_now_or_try_again_later": "Försök igen nu eller försök igen senare.",
+    "please_specify": "Vänligen ange",
     "powered_by": "Drivs av",
     "privacy_policy": "Integritetspolicy",
     "protected_by_reCAPTCHA_and_the_Google": "Skyddas av reCAPTCHA och Googles",
     "question": "Fråga",
     "question_video": "Frågevideo",
-    "ranking_items": "Rangordna objekt",
+    "required": "Obligatorisk",
     "respondents_will_not_see_this_card": "Respondenter kommer inte att se detta kort",
     "retry": "Försök igen",
     "retrying": "Försöker igen...",
-    "select_a_date": "Välj ett datum",
-    "select_for_ranking": "Välj {item} för rangordning",
     "sending_responses": "Skickar svar...",
     "takes": "Tar",
     "terms_of_service": "Användarvillkor",
     "the_servers_cannot_be_reached_at_the_moment": "Servrarna kan inte nås för tillfället.",
     "they_will_be_redirected_immediately": "De kommer att omdirigeras omedelbart",
-    "upload_files_by_clicking_or_dragging_them_here": "Ladda upp filer genom att klicka eller dra dem hit",
-    "uploading": "Laddar upp",
     "x_minutes": "{count, plural, one {1 minut} other {{count} minuter}}",
     "x_plus_minutes": "{count}+ minuter",
-    "you_have_selected_x_date": "Du har valt {date}",
-    "you_have_successfully_uploaded_the_file": "Du har framgångsrikt laddat upp filen {fileName}",
     "your_feedback_is_stuck": "Din feedback fastnade :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Vänligen fyll i detta fält",
     "please_rank_all_items_before_submitting": "Vänligen rangordna alla objekt innan du skickar",
     "please_select_a_date": "Vänligen välj ett datum",
+    "please_select_an_option": "Vänligen välj ett alternativ",
     "please_upload_a_file": "Vänligen ladda upp en fil",
     "recaptcha_error": {
       "message": "Ditt svar kunde inte skickas eftersom det flaggades som automatiserad aktivitet. Om du andas, försök igen.",
diff --git a/packages/surveys/locales/uz.json b/packages/surveys/locales/uz.json
index 0826e7958f..6ee263a31a 100644
--- a/packages/surveys/locales/uz.json
+++ b/packages/surveys/locales/uz.json
@@ -4,44 +4,32 @@
     "apply": "qo‘llash",
     "auto_close_wrapper": "Avtomatik yopiladigan o‘ram",
     "back": "Orqaga",
-    "click_or_drag_to_upload_files": "Fayllarni yuklash uchun bosing yoki sudrab olib keling.",
     "close_survey": "So‘rovnomani yopish",
     "company_logo": "Kompaniya logotipi",
-    "delete_file": "Faylni o‘chirish",
-    "file_upload": "Fayl yuklash",
     "finish": "Tugatish",
     "language_switch": "Tilni almashtirish",
     "less_than_x_minutes": "{count, plural, one {1 daqiqadan kam} other {{count} daqiqadan kam}}",
-    "move_down": "{item} ni pastga tushirish",
-    "move_up": "{item} ni yuqoriga ko‘tarish",
     "next": "Keyingisi",
     "open_in_new_tab": "Yangi oynada ochish",
-    "optional": "Ixtiyoriy",
-    "options": "Variantlar",
     "people_responded": "{count, plural, one {1 kishi javob berdi} other {{count} kishi javob berdi}}",
     "please_retry_now_or_try_again_later": "Iltimos, hozir qayta urinib ko‘ring yoki keyinroq urinib ko‘ring.",
+    "please_specify": "Iltimos, aniqlang",
     "powered_by": "Quvvatlanadi",
     "privacy_policy": "Maxfiylik siyosati",
     "protected_by_reCAPTCHA_and_the_Google": "reCAPTCHA va Google tomonidan himoyalangan",
     "question": "Savol",
     "question_video": "Savol videosi",
-    "ranking_items": "Reyting elementlari",
+    "required": "Majburiy",
     "respondents_will_not_see_this_card": "Javob beruvchilar ushbu kartani ko'rmaydi",
     "retry": "Qayta urinib ko'ring",
     "retrying": "Qayta urinilmoqda...",
-    "select_a_date": "Sanani tanlang",
-    "select_for_ranking": "Reyting uchun {item} ni tanlang",
     "sending_responses": "Javoblar yuborilmoqda...",
     "takes": "Davomiyligi",
     "terms_of_service": "Xizmat ko'rsatish shartlari",
     "the_servers_cannot_be_reached_at_the_moment": "Hozirda serverlarga ulanish imkoni yo'q.",
     "they_will_be_redirected_immediately": "Ular darhol yo'naltiriladi",
-    "upload_files_by_clicking_or_dragging_them_here": "Fayllarni bu yerga bosish yoki sudrab olib kelish orqali yuklang",
-    "uploading": "Yuklanmoqda",
     "x_minutes": "{count, plural, one {1 daqiqa} other {{count} daqiqa}}",
     "x_plus_minutes": "{count}+ daqiqa",
-    "you_have_selected_x_date": "Siz {date} sanasini tanladingiz",
-    "you_have_successfully_uploaded_the_file": "Siz {fileName} faylini muvaffaqiyatli yukladingiz",
     "your_feedback_is_stuck": "Sizning fikr-mulohazangiz qotib qoldi :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "Iltimos, ushbu maydonni to'ldiring",
     "please_rank_all_items_before_submitting": "Iltimos, yuborishdan oldin barcha elementlarni baholang",
     "please_select_a_date": "Iltimos, sanani tanlang",
+    "please_select_an_option": "Iltimos, biror bir variantni tanlang",
     "please_upload_a_file": "Iltimos, faylni yuklang",
     "recaptcha_error": {
       "message": "Sizning javobingiz avtomatlashtirilgan faoliyat sifatida belgilanganligi sababli yuborilmadi. Agar siz nafas olayotgan bo'lsangiz, qayta urinib ko'ring.",
diff --git a/packages/surveys/locales/zh-Hans.json b/packages/surveys/locales/zh-Hans.json
index b6582364bf..54a14e6697 100644
--- a/packages/surveys/locales/zh-Hans.json
+++ b/packages/surveys/locales/zh-Hans.json
@@ -4,44 +4,32 @@
     "apply": "应用",
     "auto_close_wrapper": "自动关闭包装器",
     "back": "返回",
-    "click_or_drag_to_upload_files": "点击或拖动上传文件。",
     "close_survey": "关闭调查",
     "company_logo": "公司标志",
-    "delete_file": "删除文件",
-    "file_upload": "文件上传",
     "finish": "完成",
     "language_switch": "语言切换",
     "less_than_x_minutes": "{count, plural, one {少于 1 分钟} other {少于 {count} 分钟}}",
-    "move_down": "将{item}下移",
-    "move_up": "将{item}上移",
     "next": "下一步",
     "open_in_new_tab": "在新标签页中打开",
-    "optional": "可选",
-    "options": "选项",
     "people_responded": "{count, plural, one {1 人已回应} other {{count} 人已回应}}",
     "please_retry_now_or_try_again_later": "请立即重试或稍后再试。",
+    "please_specify": "请具体说明",
     "powered_by": "技术支持",
     "privacy_policy": "隐私政策",
     "protected_by_reCAPTCHA_and_the_Google": "受 reCAPTCHA 和 Google 保护",
     "question": "问题",
     "question_video": "问题视频",
-    "ranking_items": "排名项目",
+    "required": "必填",
     "respondents_will_not_see_this_card": "受访者将不会看到此卡片",
     "retry": "重试",
     "retrying": "重试中...",
-    "select_a_date": "选择日期",
-    "select_for_ranking": "选择{item}进行排名",
     "sending_responses": "正在发送响应...",
     "takes": "需要",
     "terms_of_service": "服务条款",
     "the_servers_cannot_be_reached_at_the_moment": "目前无法连接到服务器。",
     "they_will_be_redirected_immediately": "他们将立即被重定向",
-    "upload_files_by_clicking_or_dragging_them_here": "通过点击或拖动文件到此处上传",
-    "uploading": "正在上传",
     "x_minutes": "{count, plural, one {1 分钟} other {{count} 分钟}}",
     "x_plus_minutes": "{count}+ 分钟",
-    "you_have_selected_x_date": "您已选择日期 {date}",
-    "you_have_successfully_uploaded_the_file": "您已成功上传文件 {fileName}",
     "your_feedback_is_stuck": "您的反馈卡住了 :("
   },
   "errors": {
@@ -65,6 +53,7 @@
     "please_fill_out_this_field": "请填写此字段",
     "please_rank_all_items_before_submitting": "请在提交之前对所有项目进行排名",
     "please_select_a_date": "请选择一个日期",
+    "please_select_an_option": "请选择一个选项",
     "please_upload_a_file": "请上传一个文件",
     "recaptcha_error": {
       "message": "您的响应未能提交，因为它被标记为自动活动。如果您是人类，请重试。",
diff --git a/packages/surveys/package.json b/packages/surveys/package.json
index a2b7eb6daa..bd13ad79f3 100644
--- a/packages/surveys/package.json
+++ b/packages/surveys/package.json
@@ -39,13 +39,11 @@
   },
   "dependencies": {
     "@calcom/embed-snippet": "1.3.3",
-    "@formkit/auto-animate": "0.8.2",
+    "@formbricks/survey-ui": "workspace:*",
     "i18next": "25.5.2",
     "i18next-icu": "2.4.0",
-    "isomorphic-dompurify": "2.24.0",
+    "isomorphic-dompurify": "2.33.0",
     "preact": "10.26.6",
-    "react-calendar": "5.1.0",
-    "react-date-picker": "11.0.0",
     "react-i18next": "15.7.3"
   },
   "devDependencies": {
@@ -54,12 +52,13 @@
     "@formbricks/i18n-utils": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@preact/preset-vite": "2.10.1",
+    "@tailwindcss/postcss": "4.1.17",
     "@testing-library/preact": "3.2.4",
     "@types/react": "19.1.4",
     "autoprefixer": "10.4.21",
     "concurrently": "9.1.2",
     "postcss": "8.5.3",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.17",
     "terser": "5.39.1",
     "vite": "6.4.1",
     "vite-plugin-dts": "4.5.3",
diff --git a/packages/surveys/postcss.config.cjs b/packages/surveys/postcss.config.cjs
index 75a10b1f60..69f51a51a7 100644
--- a/packages/surveys/postcss.config.cjs
+++ b/packages/surveys/postcss.config.cjs
@@ -27,5 +27,5 @@ const remtoEm = (opts = {}) => {
 };
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer"), remtoEm()],
+  plugins: [require("@tailwindcss/postcss"), require("autoprefixer"), remtoEm()],
 };
diff --git a/packages/surveys/src/components/buttons/back-button.tsx b/packages/surveys/src/components/buttons/back-button.tsx
index dbf4916d56..36be486abb 100644
--- a/packages/surveys/src/components/buttons/back-button.tsx
+++ b/packages/surveys/src/components/buttons/back-button.tsx
@@ -15,7 +15,7 @@ export function BackButton({ onClick, backButtonLabel, tabIndex = 2 }: BackButto
       tabIndex={tabIndex}
       type="button"
       className={cn(
-        "fb-mb-1 hover:fb-bg-input-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-flex fb-items-center fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2"
+        "hover:bg-input-bg text-heading focus:ring-focus rounded-custom mb-1 flex items-center px-3 py-3 text-base leading-4 font-medium focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
       )}
       onClick={onClick}>
       {backButtonLabel || t("common.back")}
diff --git a/packages/surveys/src/components/buttons/submit-button.tsx b/packages/surveys/src/components/buttons/submit-button.tsx
index e92daef59e..3fb18c8007 100644
--- a/packages/surveys/src/components/buttons/submit-button.tsx
+++ b/packages/surveys/src/components/buttons/submit-button.tsx
@@ -72,7 +72,7 @@ export function SubmitButton({
       type={type}
       tabIndex={tabIndex}
       autoFocus={focus}
-      className="fb-bg-brand fb-border-submit-button-border fb-text-on-brand focus:fb-ring-focus fb-rounded-custom fb-flex fb-items-center fb-border fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 fb-shadow-sm hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-mb-1"
+      className="bg-brand border-submit-button-border text-on-brand focus:ring-focus rounded-custom mb-1 flex items-center border px-3 py-3 text-base leading-4 font-medium shadow-xs hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
       onClick={onClick}
       disabled={disabled}>
       {buttonLabel || (isLastQuestion ? t("common.finish") : t("common.next"))}
diff --git a/packages/surveys/src/components/elements/address-element.tsx b/packages/surveys/src/components/elements/address-element.tsx
index ea59117371..74d28b3f60 100644
--- a/packages/surveys/src/components/elements/address-element.tsx
+++ b/packages/surveys/src/components/elements/address-element.tsx
@@ -1,12 +1,7 @@
-import { useMemo, useRef, useState } from "preact/hooks";
-import { useCallback } from "react";
+import { useState } from "preact/hooks";
+import { FormField, type FormFieldConfig } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyAddressElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Input } from "@/components/general/input";
-import { Label } from "@/components/general/label";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 
@@ -30,72 +25,35 @@ export function AddressElement({
   ttc,
   setTtc,
   currentElementId,
-  autoFocusEnabled,
   dir = "auto",
 }: Readonly<AddressElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  const formRef = useRef<HTMLFormElement>(null);
+  const isCurrent = element.id === currentElementId;
 
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  const safeValue = useMemo(() => {
-    return Array.isArray(value) ? value : ["", "", "", "", "", ""];
-  }, [value]);
+  // Convert array value to object for FormField
+  const convertToValueObject = (arrayValue: string[] | undefined): Record<string, string> => {
+    if (!Array.isArray(arrayValue)) return {};
 
-  const fields = useMemo(
-    () => [
-      {
-        id: "addressLine1",
-        ...element.addressLine1,
-        label: element.addressLine1.placeholder[languageCode],
-      },
-      {
-        id: "addressLine2",
-        ...element.addressLine2,
-        label: element.addressLine2.placeholder[languageCode],
-      },
-      {
-        id: "city",
-        ...element.city,
-        label: element.city.placeholder[languageCode],
-      },
-      {
-        id: "state",
-        ...element.state,
-        label: element.state.placeholder[languageCode],
-      },
-      {
-        id: "zip",
-        ...element.zip,
-        label: element.zip.placeholder[languageCode],
-      },
-      {
-        id: "country",
-        ...element.country,
-        label: element.country.placeholder[languageCode],
-      },
-    ],
-    [
-      element.addressLine1,
-      element.addressLine2,
-      element.city,
-      element.state,
-      element.zip,
-      element.country,
-      languageCode,
-    ]
-  );
+    const fieldIds = ["addressLine1", "addressLine2", "city", "state", "zip", "country"];
+    const result: Record<string, string> = {};
 
-  const handleChange = (fieldId: string, fieldValue: string) => {
-    const newValue = fields.map((field) => {
-      if (field.id === fieldId) {
-        return fieldValue;
-      }
-      const existingValue = safeValue[fields.findIndex((f) => f.id === field.id)] || "";
-      return field.show ? existingValue : "";
+    fieldIds.forEach((fieldId, index) => {
+      result[fieldId] = arrayValue[index] || "";
     });
-    onChange({ [element.id]: newValue });
+
+    return result;
+  };
+
+  // Convert object value back to array for onChange
+  const convertToValueArray = (objectValue: Record<string, string>): string[] => {
+    const fieldIds = ["addressLine1", "addressLine2", "city", "state", "zip", "country"];
+    return fieldIds.map((fieldId) => objectValue[fieldId] || "");
+  };
+
+  const handleChange = (newValue: Record<string, string>) => {
+    onChange({ [element.id]: convertToValueArray(newValue) });
   };
 
   const handleSubmit = (e: Event) => {
@@ -104,76 +62,64 @@ export function AddressElement({
     setTtc(updatedTtc);
   };
 
-  const addressRef = useCallback(
-    (currentElement: HTMLInputElement | null) => {
-      // will focus on current element when the element ID matches the current element
-      if (element.id && currentElement && autoFocusEnabled && element.id === currentElementId) {
-        currentElement.focus();
-      }
+  // Convert element fields to FormFieldConfig
+  const formFields: FormFieldConfig[] = [
+    {
+      id: "addressLine1",
+      label: element.addressLine1.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.addressLine1.placeholder, languageCode),
+      required: element.addressLine1.required,
+      show: element.addressLine1.show,
     },
-    [element.id, autoFocusEnabled, currentElementId]
-  );
-
-  const isFieldRequired = useCallback(
-    (field: (typeof fields)[number]) => {
-      if (field.required) {
-        return true;
-      }
-
-      // if all fields are optional and the element is required, then the fields should be required
-      if (
-        fields.filter((currField) => currField.show).every((currField) => !currField.required) &&
-        element.required
-      ) {
-        return true;
-      }
-
-      return false;
+    {
+      id: "addressLine2",
+      label: element.addressLine2.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.addressLine2.placeholder, languageCode),
+      required: element.addressLine2.required,
+      show: element.addressLine2.show,
     },
-    [fields, element.required]
-  );
+    {
+      id: "city",
+      label: element.city.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.city.placeholder, languageCode),
+      required: element.city.required,
+      show: element.city.show,
+    },
+    {
+      id: "state",
+      label: element.state.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.state.placeholder, languageCode),
+      required: element.state.required,
+      show: element.state.show,
+    },
+    {
+      id: "zip",
+      label: element.zip.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.zip.placeholder, languageCode),
+      required: element.zip.required,
+      show: element.zip.show,
+    },
+    {
+      id: "country",
+      label: element.country.placeholder[languageCode],
+      placeholder: getLocalizedValue(element.country.placeholder, languageCode),
+      required: element.country.required,
+      show: element.country.show,
+    },
+  ];
 
   return (
-    <form key={element.id} onSubmit={handleSubmit} className="fb-w-full" ref={formRef}>
-      <div>
-        {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-        <Headline
-          headline={getLocalizedValue(element.headline, languageCode)}
-          elementId={element.id}
-          required={element.required}
-        />
-        <Subheader
-          subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-          elementId={element.id}
-        />
-
-        <div className="fb-flex fb-flex-col fb-space-y-2 fb-mt-4 fb-w-full">
-          {fields.map((field, index) => {
-            const isRequired = isFieldRequired(field);
-
-            return (
-              field.show && (
-                <div className="fb-space-y-1" key={field.id}>
-                  <Label htmlForId={field.id} text={isRequired ? `${field.label}*` : field.label} />
-                  <Input
-                    id={field.id}
-                    required={isRequired}
-                    value={safeValue[index] || ""}
-                    type="text"
-                    onChange={(e) => {
-                      handleChange(field.id, e.currentTarget.value);
-                    }}
-                    ref={index === 0 ? addressRef : null}
-                    tabIndex={0}
-                    aria-label={field.label}
-                    dir={!safeValue[index] ? dir : "auto"}
-                  />
-                </div>
-              )
-            );
-          })}
-        </div>
-      </div>
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <FormField
+        elementId={element.id}
+        headline={getLocalizedValue(element.headline, languageCode)}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        fields={formFields}
+        value={convertToValueObject(value)}
+        onChange={handleChange}
+        required={element.required}
+        dir={dir}
+      />
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/cal-element.tsx b/packages/surveys/src/components/elements/cal-element.tsx
index 36b9aa94d0..ff67c33290 100644
--- a/packages/surveys/src/components/elements/cal-element.tsx
+++ b/packages/surveys/src/components/elements/cal-element.tsx
@@ -56,7 +56,7 @@ export function CalElement({
 
         onChange({ [element.id]: value });
       }}
-      className="fb-w-full">
+      className="w-full">
       <div>
         {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
         <Headline
@@ -69,7 +69,7 @@ export function CalElement({
           elementId={element.id}
         />
         <CalEmbed key={element.id} element={element} onSuccessfulBooking={onSuccessfulBooking} />
-        {errorMessage ? <span className="fb-text-red-500">{errorMessage}</span> : null}
+        {errorMessage ? <span className="text-red-500">{errorMessage}</span> : null}
       </div>
     </form>
   );
diff --git a/packages/surveys/src/components/elements/consent-element.tsx b/packages/surveys/src/components/elements/consent-element.tsx
index 5ead6cf95d..dd60323ecb 100644
--- a/packages/surveys/src/components/elements/consent-element.tsx
+++ b/packages/surveys/src/components/elements/consent-element.tsx
@@ -1,9 +1,7 @@
-import { useCallback, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
+import { Consent } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyConsentElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 
@@ -27,78 +25,35 @@ export function ConsentElement({
   ttc,
   setTtc,
   currentElementId,
-  autoFocusEnabled,
   dir = "auto",
 }: Readonly<ConsentElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
+  const isCurrent = element.id === currentElementId;
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const handleChange = (checked: boolean) => {
+    onChange({ [element.id]: checked ? "accepted" : "" });
+  };
 
-  const consentRef = useCallback(
-    (currentElement: HTMLLabelElement | null) => {
-      // will focus on current element when the element ID matches the current element
-      if (element.id && currentElement && autoFocusEnabled && element.id === currentElementId) {
-        currentElement.focus();
-      }
-    },
-    [element.id, autoFocusEnabled, currentElementId]
-  );
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
+  };
 
   return (
-    <form
-      key={element.id}
-      onSubmit={(e) => {
-        e.preventDefault();
-        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-        setTtc(updatedTtcObj);
-      }}>
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <Consent
+        elementId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        inputId={element.id}
+        checkboxLabel={getLocalizedValue(element.label, languageCode)}
+        value={value === "accepted"}
+        onChange={handleChange}
         required={element.required}
+        dir={dir}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <label
-        ref={consentRef}
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        id={`${element.id}-label`}
-        onKeyDown={(e) => {
-          // Accessibility: if spacebar was pressed pass this down to the input
-          if (e.key === " ") {
-            e.preventDefault();
-            document.getElementById(element.id)?.click();
-            document.getElementById(`${element.id}-label`)?.focus();
-          }
-        }}
-        className="fb-border-border fb-bg-input-bg fb-text-heading hover:fb-bg-input-bg-selected focus:fb-bg-input-bg-selected focus:fb-ring-brand fb-rounded-custom fb-relative fb-z-10 fb-my-2 fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-border fb-p-4 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2">
-        <input
-          tabIndex={-1}
-          type="checkbox"
-          dir={dir}
-          id={element.id}
-          name={element.id}
-          value={getLocalizedValue(element.label, languageCode)}
-          onChange={(e) => {
-            if (e.target instanceof HTMLInputElement && e.target.checked) {
-              onChange({ [element.id]: "accepted" });
-            } else {
-              onChange({ [element.id]: "" });
-            }
-          }}
-          checked={value === "accepted"}
-          className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-          aria-labelledby={`${element.id}-label`}
-          required={element.required}
-        />
-        <span className="fb-ml-3 fb-mr-3 fb-font-medium fb-flex-1" dir="auto">
-          {getLocalizedValue(element.label, languageCode)}
-        </span>
-      </label>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/contact-info-element.tsx b/packages/surveys/src/components/elements/contact-info-element.tsx
index faf20fa1db..fd4763ef37 100644
--- a/packages/surveys/src/components/elements/contact-info-element.tsx
+++ b/packages/surveys/src/components/elements/contact-info-element.tsx
@@ -1,11 +1,7 @@
-import { useCallback, useMemo, useRef, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
+import { FormField, type FormFieldConfig } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyContactInfoElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Input } from "@/components/general/input";
-import { Label } from "@/components/general/label";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 
@@ -30,54 +26,35 @@ export function ContactInfoElement({
   ttc,
   setTtc,
   currentElementId,
-  autoFocusEnabled,
   dir = "auto",
 }: Readonly<ContactInfoElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  const formRef = useRef<HTMLFormElement>(null);
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
-  const safeValue = useMemo(() => {
-    return Array.isArray(value) ? value : ["", "", "", "", ""];
-  }, [value]);
+  const isCurrent = element.id === currentElementId;
 
-  const fields = [
-    {
-      id: "firstName",
-      ...element.firstName,
-      label: element.firstName.placeholder[languageCode],
-    },
-    {
-      id: "lastName",
-      ...element.lastName,
-      label: element.lastName.placeholder[languageCode],
-    },
-    {
-      id: "email",
-      ...element.email,
-      label: element.email.placeholder[languageCode],
-    },
-    {
-      id: "phone",
-      ...element.phone,
-      label: element.phone.placeholder[languageCode],
-    },
-    {
-      id: "company",
-      ...element.company,
-      label: element.company.placeholder[languageCode],
-    },
-  ];
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  const handleChange = (fieldId: string, fieldValue: string) => {
-    const newValue = fields.map((field) => {
-      if (field.id === fieldId) {
-        return fieldValue;
-      }
-      const existingValue = safeValue[fields.findIndex((f) => f.id === field.id)] || "";
-      return field.show ? existingValue : "";
+  // Convert array value to object for FormField
+  const convertToValueObject = (arrayValue: string[] | undefined): Record<string, string> => {
+    if (!Array.isArray(arrayValue)) return {};
+
+    const fieldIds = ["firstName", "lastName", "email", "phone", "company"];
+    const result: Record<string, string> = {};
+
+    fieldIds.forEach((fieldId, index) => {
+      result[fieldId] = arrayValue[index] || "";
     });
-    onChange({ [element.id]: newValue });
+
+    return result;
+  };
+
+  // Convert object value back to array for onChange
+  const convertToValueArray = (objectValue: Record<string, string>): string[] => {
+    const fieldIds = ["firstName", "lastName", "email", "phone", "company"];
+    return fieldIds.map((fieldId) => objectValue[fieldId] || "");
+  };
+
+  const handleChange = (newValue: Record<string, string>) => {
+    onChange({ [element.id]: convertToValueArray(newValue) });
   };
 
   const handleSubmit = (e: Event) => {
@@ -86,77 +63,59 @@ export function ContactInfoElement({
     setTtc(updatedTtc);
   };
 
-  const contactInfoRef = useCallback(
-    (currentElement: HTMLInputElement | null) => {
-      // will focus on current element when the element ID matches the current element
-      if (element.id && currentElement && autoFocusEnabled && element.id === currentElementId) {
-        currentElement.focus();
-      }
+  // Convert element fields to FormFieldConfig
+  const formFields: FormFieldConfig[] = [
+    {
+      id: "firstName",
+      label: getLocalizedValue(element.firstName.placeholder, languageCode),
+      placeholder: getLocalizedValue(element.firstName.placeholder, languageCode),
+      required: element.firstName.required,
+      show: element.firstName.show,
     },
-    [element.id, autoFocusEnabled, currentElementId]
-  );
+    {
+      id: "lastName",
+      label: getLocalizedValue(element.lastName.placeholder, languageCode),
+      placeholder: getLocalizedValue(element.lastName.placeholder, languageCode),
+      required: element.lastName.required,
+      show: element.lastName.show,
+    },
+    {
+      id: "email",
+      label: getLocalizedValue(element.email.placeholder, languageCode),
+      placeholder: getLocalizedValue(element.email.placeholder, languageCode),
+      required: element.email.required,
+      show: element.email.show,
+      type: "email",
+    },
+    {
+      id: "phone",
+      label: getLocalizedValue(element.phone.placeholder, languageCode),
+      placeholder: getLocalizedValue(element.phone.placeholder, languageCode),
+      required: element.phone.required,
+      show: element.phone.show,
+      type: "tel",
+    },
+    {
+      id: "company",
+      label: getLocalizedValue(element.company.placeholder, languageCode),
+      placeholder: getLocalizedValue(element.company.placeholder, languageCode),
+      required: element.company.required,
+      show: element.company.show,
+    },
+  ];
 
   return (
-    <form key={element.id} onSubmit={handleSubmit} className="fb-w-full" ref={formRef}>
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <FormField
+        elementId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        fields={formFields}
+        value={convertToValueObject(value)}
+        onChange={handleChange}
         required={element.required}
+        dir={dir}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-
-      <div className="fb-flex fb-flex-col fb-space-y-2 fb-mt-4 fb-w-full">
-        {fields.map((field, index) => {
-          const isFieldRequired = () => {
-            if (field.required) {
-              return true;
-            }
-
-            // if all fields are optional and the element is required, then the fields should be required
-            if (
-              fields.filter((currField) => currField.show).every((currField) => !currField.required) &&
-              element.required
-            ) {
-              return true;
-            }
-
-            return false;
-          };
-
-          let inputType = "text";
-          if (field.id === "email") {
-            inputType = "email";
-          } else if (field.id === "phone") {
-            inputType = "number";
-          }
-
-          return (
-            field.show && (
-              <div className="fb-space-y-1">
-                <Label htmlForId={field.id} text={isFieldRequired() ? `${field.label}*` : field.label} />
-                <Input
-                  id={field.id}
-                  ref={index === 0 ? contactInfoRef : null}
-                  key={field.id}
-                  required={isFieldRequired()}
-                  value={safeValue[index] || ""}
-                  type={inputType}
-                  onChange={(e) => {
-                    handleChange(field.id, e.currentTarget.value);
-                  }}
-                  tabIndex={0}
-                  aria-label={field.label}
-                  dir={!safeValue[index] ? dir : "auto"}
-                />
-              </div>
-            )
-          );
-        })}
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/cta-element.tsx b/packages/surveys/src/components/elements/cta-element.tsx
index d5d4ee94c5..cae5f4fb8c 100644
--- a/packages/surveys/src/components/elements/cta-element.tsx
+++ b/packages/surveys/src/components/elements/cta-element.tsx
@@ -1,10 +1,8 @@
 import { useState } from "preact/hooks";
+// Import as Cta to fix sonar issue - "Imported JSX component CTA must be in PascalCase"
+import { CTA as Cta } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyCTAElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
-import { LinkIcon } from "@/components/icons/link-icon";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 
@@ -30,53 +28,44 @@ export function CTAElement({
   onOpenExternalURL,
 }: Readonly<CTAElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
   const isCurrent = element.id === currentElementId;
   useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  const handleExternalButtonClick = () => {
+  const handleClick = () => {
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
     onChange({ [element.id]: "clicked" });
 
-    if (element.buttonUrl) {
+    // Handle external URL opening if needed
+    if (element.buttonExternal && element.buttonUrl) {
       if (onOpenExternalURL) {
         onOpenExternalURL(element.buttonUrl);
-      } else {
-        window.open(element.buttonUrl, "_blank")?.focus();
       }
+      // Note: The survey-ui CTA component handles external URL opening itself
     }
   };
 
   return (
-    <div key={element.id}>
-      <div>
-        {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-        <Headline
-          headline={getLocalizedValue(element.headline, languageCode)}
-          elementId={element.id}
-          required={true}
-        />
-        <Subheader
-          subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-          elementId={element.id}
-        />
-        {element.buttonExternal && (
-          <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-between fb-pt-4">
-            <div className="fb-flex fb-flex-row-reverse fb-w-full fb-justify-start">
-              <button
-                dir="auto"
-                type="button"
-                tabIndex={0}
-                onClick={handleExternalButtonClick}
-                className="fb-text-heading focus:fb-ring-focus fb-flex fb-items-center fb-rounded-md fb-px-3 fb-py-3 fb-text-base fb-font-medium fb-leading-4 hover:fb-opacity-90 focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2">
-                {getLocalizedValue(element.ctaButtonLabel, languageCode)}
-                <LinkIcon className="fb-ml-2 fb-h-4 fb-w-4" />
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
+    <form
+      key={element.id}
+      onSubmit={(e) => {
+        e.preventDefault();
+        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+        setTtc(updatedTtcObj);
+      }}
+      className="w-full">
+      <Cta
+        elementId={element.id}
+        inputId={element.id}
+        headline={getLocalizedValue(element.headline, languageCode)}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        buttonLabel={getLocalizedValue(element.ctaButtonLabel, languageCode)}
+        buttonUrl={element.buttonUrl}
+        buttonExternal={element.buttonExternal}
+        onClick={handleClick}
+        // CTA cannot be required
+        required={false}
+      />
+    </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/date-element.tsx b/packages/surveys/src/components/elements/date-element.tsx
index 626acdaa46..9a922e0051 100644
--- a/packages/surveys/src/components/elements/date-element.tsx
+++ b/packages/surveys/src/components/elements/date-element.tsx
@@ -1,16 +1,10 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
-import DatePicker, { DatePickerProps } from "react-date-picker";
+import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { DateElement as SurveyUIDateElement } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyDateElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
-import { getMonthName, getOrdinalDate } from "@/lib/date-time";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn } from "@/lib/utils";
-import "../../styles/date-picker.css";
 
 interface DateElementProps {
   element: TSurveyDateElement;
@@ -24,248 +18,68 @@ interface DateElementProps {
   currentElementId: string;
 }
 
-function CalendarIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="lucide lucide-calendar-days">
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
-      <path d="M8 14h.01" />
-      <path d="M12 14h.01" />
-      <path d="M16 14h.01" />
-      <path d="M8 18h.01" />
-      <path d="M12 18h.01" />
-      <path d="M16 18h.01" />
-    </svg>
-  );
-}
-
-function CalendarCheckIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="lucide lucide-calendar-check">
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
-      <path d="m9 16 2 2 4-4" />
-    </svg>
-  );
-}
-
 export function DateElement({
   element,
   value,
   onChange,
   languageCode,
-  setTtc,
   ttc,
+  setTtc,
   currentElementId,
 }: Readonly<DateElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const [errorMessage, setErrorMessage] = useState("");
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
-  const [datePickerOpen, setDatePickerOpen] = useState(false);
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value ? new Date(value) : undefined);
-  const [hideInvalid, setHideInvalid] = useState(!selectedDate);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const isCurrent = element.id === currentElementId;
 
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    if (datePickerOpen) {
-      if (!selectedDate) setSelectedDate(new Date());
-      const input: HTMLInputElement = document.querySelector(".react-date-picker__inputGroup__input")!;
-      if (input) {
-        input.focus();
-      }
+  const handleChange = (dateValue: string) => {
+    // Clear error when user selects a date
+    setErrorMessage(undefined);
+    onChange({ [element.id]: dateValue });
+  };
+
+  const validateRequired = (): boolean => {
+    if (element.required && (!value || value.trim() === "")) {
+      setErrorMessage(t("errors.please_select_a_date"));
+      return false;
     }
-  }, [datePickerOpen, selectedDate]);
+    return true;
+  };
 
-  useEffect(() => {
-    if (selectedDate) {
-      if (hideInvalid) {
-        setHideInvalid(false);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDate]);
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (!validateRequired()) return;
 
-  const formattedDate = useMemo(() => {
-    if (!selectedDate) return "";
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
+  };
 
-    const day = selectedDate.getDate();
-    const monthIndex = selectedDate.getMonth();
-    const year = selectedDate.getFullYear();
+  // Use default date range (100 years ago to year 3000)
+  const getMinDate = (): string | undefined => {
+    return new Date(new Date().getFullYear() - 100, 0, 1).toISOString().split("T")[0];
+  };
 
-    return `${getOrdinalDate(day)} of ${getMonthName(monthIndex)}, ${year}`;
-  }, [selectedDate]);
+  const getMaxDate = (): string | undefined => {
+    return "3000-12-31";
+  };
 
   return (
-    <form
-      key={element.id}
-      onSubmit={(e) => {
-        e.preventDefault();
-
-        // Validate required field
-        if (element.required && !value) {
-          setErrorMessage(t("errors.please_select_a_date"));
-          return;
-        }
-
-        setErrorMessage("");
-        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-        setTtc(updatedTtcObj);
-      }}
-      className="fb-w-full">
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <SurveyUIDateElement
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        value={value}
+        onChange={handleChange}
+        minDate={getMinDate()}
+        maxDate={getMaxDate()}
         required={element.required}
+        errorMessage={errorMessage}
+        locale={languageCode}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div id="error-message" className="fb-text-red-600" aria-live="assertive">
-        <span>{errorMessage}</span>
-      </div>
-      <div
-        className={cn("fb-mt-4 fb-w-full", errorMessage && "fb-rounded-lg fb-border-2 fb-border-red-500")}
-        id="date-picker-root">
-        <div className="fb-relative">
-          {!datePickerOpen && (
-            <button
-              onClick={() => {
-                setDatePickerOpen(true);
-              }}
-              tabIndex={0}
-              type="button"
-              onKeyDown={(e) => {
-                if (e.key === " ") setDatePickerOpen(true);
-              }}
-              aria-label={
-                selectedDate
-                  ? t("common.you_have_selected_x_date", { date: formattedDate })
-                  : t("common.select_a_date")
-              }
-              aria-describedby={errorMessage ? "error-message" : undefined}
-              className="focus:fb-outline-brand fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-text-heading fb-rounded-custom fb-relative fb-flex fb-h-[12dvh] fb-w-full fb-cursor-pointer fb-appearance-none fb-items-center fb-justify-center fb-border fb-text-left fb-text-base fb-font-normal">
-              <div className="fb-flex fb-items-center fb-gap-2">
-                {selectedDate ? (
-                  <div className="fb-flex fb-items-center fb-gap-2">
-                    <CalendarCheckIcon /> <span>{formattedDate}</span>
-                  </div>
-                ) : (
-                  <div className="fb-flex fb-items-center fb-gap-2">
-                    <CalendarIcon /> <span>{t("common.select_a_date")}</span>
-                  </div>
-                )}
-              </div>
-            </button>
-          )}
-
-          <DatePicker
-            key={datePickerOpen}
-            value={selectedDate}
-            isOpen={datePickerOpen}
-            onChange={(value) => {
-              const date = value as Date;
-
-              if (!date) {
-                if (element.required) {
-                  setErrorMessage(t("errors.please_select_a_date"));
-                }
-                return;
-              }
-
-              setErrorMessage("");
-              setSelectedDate(date);
-
-              // Get the timezone offset in minutes and convert it to milliseconds
-              const timezoneOffset = date.getTimezoneOffset() * 60000;
-
-              // Adjust the date by subtracting the timezone offset
-              const adjustedDate = new Date(date.getTime() - timezoneOffset);
-
-              // Format the date as YYYY-MM-DD
-              const dateString = adjustedDate.toISOString().split("T")[0];
-
-              onChange({ [element.id]: dateString });
-            }}
-            minDate={new Date(new Date().getFullYear() - 100, new Date().getMonth(), new Date().getDate())}
-            maxDate={new Date("3000-12-31")}
-            dayPlaceholder="DD"
-            monthPlaceholder="MM"
-            yearPlaceholder="YYYY"
-            format={element.format ?? "M-d-y"}
-            className={`dp-input-root fb-rounded-custom wrapper-hide ${!datePickerOpen ? "" : "fb-h-[46dvh] sm:fb-h-[34dvh]"} ${hideInvalid ? "hide-invalid" : ""} `}
-            calendarProps={{
-              className:
-                "calendar-root !fb-text-heading !fb-bg-input-bg fb-border fb-border-border fb-rounded-custom fb-p-3 fb-h-[46dvh] sm:fb-h-[33dvh] fb-overflow-auto",
-              tileClassName: ({ date }: { date: Date }) => {
-                const baseClass =
-                  "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200";
-                // active date class (check first to take precedence over today's date)
-                if (
-                  selectedDate &&
-                  date.getDate() === selectedDate?.getDate() &&
-                  date.getMonth() === selectedDate.getMonth() &&
-                  date.getFullYear() === selectedDate.getFullYear()
-                ) {
-                  return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile`;
-                }
-                // today's date class
-                if (
-                  date.getDate() === new Date().getDate() &&
-                  date.getMonth() === new Date().getMonth() &&
-                  date.getFullYear() === new Date().getFullYear()
-                ) {
-                  return `${baseClass} !fb-bg-brand !fb-opacity-50 !fb-border-border-highlight !fb-text-calendar-tile focus:fb-ring-2 focus:fb-bg-slate-200`;
-                }
-
-                return `${baseClass} !fb-text-heading`;
-              },
-              formatShortWeekday: (_: any, date: Date) => {
-                return date.toLocaleDateString("en-US", { weekday: "short" }).slice(0, 2);
-              },
-              showNeighboringMonth: false,
-            }}
-            clearIcon={null}
-            onCalendarOpen={() => {
-              setDatePickerOpen(true);
-            }}
-            onCalendarClose={() => {
-              // reset state
-              setDatePickerOpen(false);
-              setSelectedDate(selectedDate);
-            }}
-            calendarIcon={(<CalendarIcon />) as DatePickerProps["calendarIcon"]}
-            showLeadingZeros={false}
-          />
-        </div>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/file-upload-element.tsx b/packages/surveys/src/components/elements/file-upload-element.tsx
index 096b5b00a3..6abb927c94 100644
--- a/packages/surveys/src/components/elements/file-upload-element.tsx
+++ b/packages/surveys/src/components/elements/file-upload-element.tsx
@@ -1,21 +1,17 @@
-import { useState } from "preact/hooks";
+import { useCallback, useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
-import { type TJsFileUploadParams } from "@formbricks/types/js";
+import { FileUpload, type UploadedFile } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
-import { type TUploadFileConfig } from "@formbricks/types/storage";
+import type { TAllowedFileExtension } from "@formbricks/types/storage";
 import type { TSurveyFileUploadElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { FileInput } from "../general/file-input";
-import { Subheader } from "../general/subheader";
 
 interface FileUploadElementProps {
   element: TSurveyFileUploadElement;
   value: string[];
   onChange: (responseData: TResponseData) => void;
-  onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
+  onFileUpload: (file: any, config?: any) => Promise<string>;
   surveyId: string;
   languageCode: string;
   ttc: TResponseTtc;
@@ -24,61 +20,344 @@ interface FileUploadElementProps {
   currentElementId: string;
 }
 
+const FILE_LIMIT = 25;
+
 export function FileUploadElement({
   element,
   value,
   onChange,
-  surveyId,
   onFileUpload,
+  surveyId,
   languageCode,
   ttc,
   setTtc,
   currentElementId,
 }: Readonly<FileUploadElementProps>) {
-  const { t } = useTranslation();
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const [isUploading, setIsUploading] = useState(false);
+  const isCurrent = element.id === currentElementId;
+
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+  const { t } = useTranslation();
+  const [fileNames, setFileNames] = useState<Record<string, string>>({});
+
+  // Convert string[] to UploadedFile[] for survey-ui component
+  const convertToUploadedFiles = (urls: string[]): UploadedFile[] => {
+    return urls.map((url) => {
+      // Check if we have the name stored locally
+      if (fileNames[url]) {
+        return {
+          name: fileNames[url],
+          url,
+        };
+      }
+
+      // Extract filename from URL path
+      const urlPath = url.split("?")[0]; // Remove query params
+      let fileName = urlPath.split("/").pop() || "Unknown file";
+
+      try {
+        fileName = decodeURIComponent(fileName);
+      } catch (e) {
+        console.error(`Error decoding file name: ${e}`);
+      }
+
+      // Clean up Formbricks storage pattern: name--fid--uuid.ext
+      if (fileName.includes("--fid--")) {
+        const parts = fileName.split("--fid--");
+        const extension = fileName.split(".").pop();
+        if (parts[0] && extension) {
+          fileName = `${parts[0]}.${extension}`;
+        }
+      }
+
+      return {
+        name: fileName,
+        url,
+      };
+    });
+  };
+
+  // Convert UploadedFile[] to string[] for the onChange callback
+  const convertToStringArray = (files: UploadedFile[]): string[] => {
+    return files.map((file) => file.url);
+  };
+
+  const handleChange = (files: UploadedFile[]) => {
+    // Clear error when user uploads files
+    setErrorMessage(undefined);
+
+    // Store names locally
+    const newFileNames: Record<string, string> = {};
+    files.forEach((f) => {
+      newFileNames[f.url] = f.name;
+    });
+    setFileNames((prev) => ({ ...prev, ...newFileNames }));
+
+    const urls = convertToStringArray(files);
+    onChange({ [element.id]: urls });
+  };
+
+  /**
+   * Convert File to base64
+   */
+  const toBase64 = (file: File): Promise<string> =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = reject;
+    });
+
+  /**
+   * Filter duplicate files
+   */
+  const filterDuplicateFiles = useCallback(
+    (files: File[]): { filteredFiles: File[]; duplicateFiles: File[] } => {
+      const existingFileNames = new Set(
+        (value || []).map((url) => {
+          const fileName = fileNames[url] || url.split("/").pop() || "";
+          return fileName.toLowerCase();
+        })
+      );
+
+      const duplicateFiles = files.filter((file) => existingFileNames.has(file.name.toLowerCase()));
+
+      const filteredFiles = files.filter((file) => !existingFileNames.has(file.name.toLowerCase()));
+
+      if (duplicateFiles.length > 0) {
+        const duplicateNames = duplicateFiles.map((file) => file.name).join(", ");
+        setErrorMessage(t("errors.file_input.duplicate_files", { duplicateNames }));
+      }
+
+      return { filteredFiles, duplicateFiles };
+    },
+    [value, fileNames, t]
+  );
+
+  /**
+   * Validate file extension
+   */
+  const validateFileExtension = useCallback(
+    (file: File): boolean => {
+      if (!element.allowedFileExtensions || element.allowedFileExtensions.length === 0) {
+        return true; // No restrictions
+      }
+
+      const fileExtensionPart = file.name.split(".").pop()?.toLowerCase();
+      if (!fileExtensionPart) {
+        return false; // No extension
+      }
+
+      return element.allowedFileExtensions.includes(fileExtensionPart as TAllowedFileExtension);
+    },
+    [element.allowedFileExtensions]
+  );
+
+  /**
+   * Validate file size
+   */
+  const validateFileSize = useCallback(
+    async (file: File): Promise<boolean> => {
+      if (!element.maxSizeInMB) {
+        return true; // No size restriction
+      }
+
+      const fileSizeInMB = file.size / (1024 * 1024);
+      if (fileSizeInMB > element.maxSizeInMB) {
+        setErrorMessage(
+          t("errors.file_input.file_size_exceeded_alert", { maxSizeInMB: element.maxSizeInMB })
+        );
+        return false;
+      }
+
+      return true;
+    },
+    [element.maxSizeInMB, t]
+  );
+
+  /**
+   * Validate file limits
+   */
+  const validateFileLimits = useCallback(
+    (fileArray: File[]): boolean => {
+      if (!element.allowMultipleFiles && fileArray.length > 1) {
+        setErrorMessage(t("errors.file_input.only_one_file_can_be_uploaded_at_a_time"));
+        return false;
+      }
+
+      if (element.allowMultipleFiles && (value?.length || 0) + fileArray.length > FILE_LIMIT) {
+        setErrorMessage(t("errors.file_input.you_can_only_upload_a_maximum_of_files", { FILE_LIMIT }));
+        return false;
+      }
+
+      return true;
+    },
+    [element.allowMultipleFiles, value, t]
+  );
+
+  /**
+   * Validates and filters files by extension and size
+   */
+  const validateAndFilterFiles = useCallback(
+    async (files: File[]): Promise<{ filesToUpload: File[]; sizeRejectedFiles: string[] }> => {
+      const validFiles = files.filter((file) => validateFileExtension(file));
+      if (validFiles.length === 0) {
+        setErrorMessage(t("errors.file_input.no_valid_file_types_selected"));
+        return { filesToUpload: [], sizeRejectedFiles: [] };
+      }
+
+      const filesToUpload: File[] = [];
+      const sizeRejectedFiles: string[] = [];
+
+      for (const file of validFiles) {
+        const isValidSize = await validateFileSize(file);
+        if (isValidSize) {
+          filesToUpload.push(file);
+        } else {
+          sizeRejectedFiles.push(file.name);
+        }
+      }
+
+      if (sizeRejectedFiles.length > 0 && element.maxSizeInMB) {
+        const fileNames = sizeRejectedFiles.join(", ");
+        setErrorMessage(
+          t("errors.file_input.file_size_exceeded", { fileNames, maxSizeInMB: element.maxSizeInMB })
+        );
+      }
+
+      return { filesToUpload, sizeRejectedFiles };
+    },
+    [validateFileExtension, validateFileSize, element.maxSizeInMB, t]
+  );
+
+  /**
+   * Uploads files and updates state
+   */
+  const uploadFiles = useCallback(
+    async (filesToUpload: File[]): Promise<void> => {
+      setIsUploading(true);
+
+      try {
+        // Convert files to base64 and upload
+        const uploadPromises = filesToUpload.map(async (file) => {
+          const base64 = await toBase64(file);
+          const uploadedUrl = await onFileUpload(
+            {
+              name: file.name,
+              type: file.type,
+              base64,
+            },
+            {
+              allowedFileExtensions: element.allowedFileExtensions,
+              surveyId,
+            }
+          );
+          return { name: file.name, url: uploadedUrl };
+        });
+
+        const uploadedFiles = await Promise.all(uploadPromises);
+
+        // Store file names
+        const newFileNames: Record<string, string> = {};
+        uploadedFiles.forEach((f) => {
+          newFileNames[f.url] = f.name;
+        });
+        setFileNames((prev) => ({ ...prev, ...newFileNames }));
+
+        // Update value
+        const newUrls = uploadedFiles.map((f) => f.url);
+        if (element.allowMultipleFiles) {
+          onChange({ [element.id]: [...(value || []), ...newUrls] });
+        } else {
+          onChange({ [element.id]: newUrls.slice(0, 1) });
+        }
+
+        // Clear error on success
+        setErrorMessage(undefined);
+      } catch (err: any) {
+        // Handle upload errors
+        if (err?.name === "FileTooLargeError") {
+          setErrorMessage(err.message);
+        } else if (err?.name === "InvalidFileNameError") {
+          setErrorMessage(t("errors.file_input.upload_failed"));
+        } else {
+          setErrorMessage(t("errors.file_input.upload_failed"));
+        }
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [element, surveyId, value, onChange, onFileUpload, t]
+  );
+
+  /**
+   * Handle file selection and validation
+   */
+  const handleFileSelect = useCallback(
+    async (files: FileList): Promise<void> => {
+      // Clear previous errors
+      setErrorMessage(undefined);
+
+      const fileArray = Array.from(files);
+
+      // Validate file limits first
+      if (!validateFileLimits(fileArray)) {
+        return;
+      }
+
+      // Filter duplicate files
+      const { filteredFiles } = filterDuplicateFiles(fileArray);
+      if (filteredFiles.length === 0) {
+        return; // All files were duplicates
+      }
+
+      // Validate and filter files by extension and size
+      const { filesToUpload } = await validateAndFilterFiles(filteredFiles);
+      if (filesToUpload.length === 0) {
+        return; // No valid files to upload
+      }
+
+      // Upload files
+      await uploadFiles(filesToUpload);
+    },
+    [validateFileLimits, filterDuplicateFiles, validateAndFilterFiles, uploadFiles]
+  );
+
+  const validateRequired = (): boolean => {
+    if (element.required && (!value || value.length === 0)) {
+      setErrorMessage(t("errors.please_upload_a_file"));
+      return false;
+    }
+    return true;
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (!validateRequired()) return;
+
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
+  };
 
   return (
-    <form
-      key={element.id}
-      onSubmit={(e) => {
-        e.preventDefault();
-        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-        setTtc(updatedTtcObj);
-        if (element.required) {
-          if (!(value && value.length > 0)) {
-            alert(t("errors.please_upload_a_file"));
-          }
-        }
-      }}
-      className="fb-w-full">
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <FileUpload
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        value={value ? convertToUploadedFiles(value) : undefined}
+        onChange={handleChange}
+        onFileSelect={handleFileSelect}
+        allowMultiple={element.allowMultipleFiles}
+        allowedFileExtensions={element.allowedFileExtensions}
         required={element.required}
-      />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <FileInput
-        htmlFor={element.id}
-        surveyId={surveyId}
-        onFileUpload={onFileUpload}
-        onUploadCallback={(urls: string[]) => {
-          if (urls) {
-            onChange({ [element.id]: urls });
-          } else {
-            onChange({ [element.id]: "skipped" });
-          }
-        }}
-        fileUrls={value}
-        allowMultipleFiles={element.allowMultipleFiles}
-        {...(element.allowedFileExtensions ? { allowedFileExtensions: element.allowedFileExtensions } : {})}
-        {...(element.maxSizeInMB ? { maxSizeInMB: element.maxSizeInMB } : {})}
+        errorMessage={errorMessage}
+        isUploading={isUploading}
+        imageUrl={element.imageUrl}
+        videoUrl={element.videoUrl}
       />
     </form>
   );
diff --git a/packages/surveys/src/components/elements/matrix-element.tsx b/packages/surveys/src/components/elements/matrix-element.tsx
index dad9e8fc0f..a49315320f 100644
--- a/packages/surveys/src/components/elements/matrix-element.tsx
+++ b/packages/surveys/src/components/elements/matrix-element.tsx
@@ -1,10 +1,7 @@
-import { type JSX } from "preact";
-import { useCallback, useMemo, useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
+import { Matrix, type MatrixOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
-import type { TSurveyMatrixElement, TSurveyMatrixElementChoice } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
+import type { TSurveyMatrixElement } from "@formbricks/types/surveys/elements";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 import { getShuffledRowIndices } from "@/lib/utils";
@@ -29,8 +26,10 @@ export function MatrixElement({
   currentElementId,
 }: Readonly<MatrixElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const isCurrent = element.id === currentElementId;
+
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+
   const rowShuffleIdx = useMemo(() => {
     if (element.shuffleOption !== "none") {
       return getShuffledRowIndices(element.rows.length, element.shuffleOption);
@@ -52,127 +51,90 @@ export function MatrixElement({
     });
   }, [element.shuffleOption, element.rows, rowShuffleIdx]);
 
-  const handleSelect = useCallback(
-    (column: string, row: string) => {
-      let responseValue =
-        Object.entries(value).length !== 0
-          ? { ...value }
-          : element.rows.reduce((obj: Record<string, string>, row: TSurveyMatrixElementChoice) => {
-              obj[getLocalizedValue(row.label, languageCode)] = ""; // Initialize each row key with an empty string
-              return obj;
-            }, {});
+  // Convert rows to MatrixOption format
+  const rows: MatrixOption[] = useMemo(() => {
+    return elementRows.map((row, index) => ({
+      id: `row-${index}`,
+      label: getLocalizedValue(row.label, languageCode),
+    }));
+  }, [elementRows, languageCode]);
 
-      responseValue[row] = responseValue[row] === column ? "" : column;
+  // Convert columns to MatrixOption format
+  const columns: MatrixOption[] = useMemo(() => {
+    return element.columns.map((column, index) => ({
+      id: `col-${index}`,
+      label: getLocalizedValue(column.label, languageCode),
+    }));
+  }, [element.columns, languageCode]);
 
-      // Check if all values in responseValue are empty and if so, make it an empty object
-      if (Object.values(responseValue).every((val) => val === "")) {
-        responseValue = {};
+  // Convert value from row label -> column label mapping to row id -> column id mapping
+  const convertValueToIds = (valueObj: Record<string, string>): Record<string, string> => {
+    const result: Record<string, string> = {};
+
+    Object.entries(valueObj).forEach(([rowLabel, columnLabel]) => {
+      if (columnLabel) {
+        // Find the row ID that corresponds to this row label
+        const rowId = rows.find((row) => row.label === rowLabel)?.id;
+        // Find the column ID that corresponds to this column label
+        const columnId = columns.find((col) => col.label === columnLabel)?.id;
+
+        if (rowId && columnId) {
+          result[rowId] = columnId;
+        }
       }
+    });
 
-      onChange({ [element.id]: responseValue });
-    },
-    [value, element.rows, element.id, onChange, languageCode]
-  );
+    return result;
+  };
 
-  const handleSubmit = useCallback(
-    (e: JSX.TargetedEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      const updatedTtc = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-      setTtc(updatedTtc);
-    },
-    [ttc, element.id, startTime, setTtc]
-  );
+  // Convert value from row id -> column id mapping to row label -> column label mapping
+  const convertValueFromIds = (valueObj: Record<string, string>): Record<string, string> => {
+    const result: Record<string, string> = {};
 
-  const columnsHeaders = useMemo(
-    () =>
-      element.columns.map((column, index) => (
-        <th
-          key={index}
-          scope="col"
-          className="fb-text-heading fb-max-w-40 fb-break-words fb-px-4 fb-py-2 fb-font-normal"
-          dir="auto">
-          {getLocalizedValue(column.label, languageCode)}
-        </th>
-      )),
-    [element.columns, languageCode]
-  );
+    Object.entries(valueObj).forEach(([rowId, columnId]) => {
+      // Find the row label that corresponds to this row ID
+      const rowLabel = rows.find((row) => row.id === rowId)?.label;
+      // Find the column label that corresponds to this column ID
+      const columnLabel = columns.find((col) => col.id === columnId)?.label;
+
+      if (rowLabel && columnLabel) {
+        result[rowLabel] = columnLabel;
+      }
+    });
+
+    return result;
+  };
+
+  const handleChange = (newValue: Record<string, string>) => {
+    const labelValue = convertValueFromIds(newValue);
+
+    // Check if all values are empty and if so, make it an empty object
+    if (Object.values(labelValue).every((val) => val === "")) {
+      onChange({ [element.id]: {} });
+    } else {
+      onChange({ [element.id]: labelValue });
+    }
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const updatedTtc = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtc);
+  };
 
   return (
-    <form key={element.id} onSubmit={handleSubmit} className="fb-w-full">
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
-        headline={getLocalizedValue(element.headline, languageCode)}
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <Matrix
         elementId={element.id}
+        inputId={element.id}
+        headline={getLocalizedValue(element.headline, languageCode)}
+        description={getLocalizedValue(element.subheader, languageCode)}
+        rows={rows}
+        columns={columns}
+        value={convertValueToIds(value)}
+        onChange={handleChange}
         required={element.required}
       />
-      <Subheader subheader={getLocalizedValue(element.subheader, languageCode)} elementId={element.id} />
-      <div className="fb-overflow-x-auto fb-py-4">
-        <table className="fb-no-scrollbar fb-min-w-full fb-table-auto fb-border-collapse fb-text-sm">
-          <thead>
-            <tr>
-              <th className="fb-px-4 fb-py-2" />
-              {columnsHeaders}
-            </tr>
-          </thead>
-          <tbody>
-            {elementRows.map((row, rowIndex) => (
-              <tr key={`row-${rowIndex.toString()}`} className={rowIndex % 2 === 0 ? "fb-bg-input-bg" : ""}>
-                <th
-                  scope="row"
-                  className="fb-text-heading fb-rounded-l-custom fb-max-w-40 fb-break-words fb-pr-4 fb-pl-2 fb-py-2 fb-text-left fb-min-w-[20%] fb-font-semibold"
-                  dir="auto">
-                  {getLocalizedValue(row.label, languageCode)}
-                </th>
-                {element.columns.map((column, columnIndex) => (
-                  <td
-                    key={`column-${columnIndex.toString()}`}
-                    tabIndex={0}
-                    className={`fb-outline-brand fb-px-4 fb-py-2 fb-text-slate-800 ${columnIndex === element.columns.length - 1 ? "fb-rounded-r-custom" : ""}`}
-                    onClick={() => {
-                      handleSelect(
-                        getLocalizedValue(column.label, languageCode),
-                        getLocalizedValue(row.label, languageCode)
-                      );
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === " ") {
-                        e.preventDefault();
-                        handleSelect(
-                          getLocalizedValue(column.label, languageCode),
-                          getLocalizedValue(row.label, languageCode)
-                        );
-                      }
-                    }}
-                    dir="auto">
-                    <div className="fb-flex fb-items-center fb-justify-center fb-p-2">
-                      <input
-                        dir="auto"
-                        type="radio"
-                        tabIndex={-1}
-                        required={element.required}
-                        id={`row${rowIndex.toString()}-column${columnIndex.toString()}`}
-                        name={getLocalizedValue(row.label, languageCode)}
-                        value={getLocalizedValue(column.label, languageCode)}
-                        checked={
-                          typeof value === "object" && !Array.isArray(value)
-                            ? value[getLocalizedValue(row.label, languageCode)] ===
-                              getLocalizedValue(column.label, languageCode)
-                            : false
-                        }
-                        aria-label={`${getLocalizedValue(row.label, languageCode)} – ${getLocalizedValue(
-                          column.label,
-                          languageCode
-                        )}`}
-                        className="fb-border-brand fb-text-brand fb-h-5 fb-w-5 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-                      />
-                    </div>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx b/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
index 47596be8e1..918a327bd5 100644
--- a/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-multi-element.tsx
@@ -1,12 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { useTranslation } from "react-i18next";
+import { MultiSelect, type MultiSelectOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyMultipleChoiceElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn, getShuffledChoicesIds } from "@/lib/utils";
+import { getShuffledChoicesIds } from "@/lib/utils";
 
 interface MultipleChoiceMultiElementProps {
   element: TSurveyMultipleChoiceElement;
@@ -20,29 +19,6 @@ interface MultipleChoiceMultiElementProps {
   dir?: "ltr" | "rtl" | "auto";
 }
 
-const getInitialOtherSelected = (
-  value: string[],
-  element: TSurveyMultipleChoiceElement,
-  languageCode: string
-): boolean => {
-  if (!value) return false;
-  const choicesWithoutOther = element.choices
-    .filter((choice) => choice.id !== "other")
-    .map((item) => getLocalizedValue(item.label, languageCode));
-  const valueArray = Array.isArray(value) ? value : [value];
-  return valueArray.some((item) => !choicesWithoutOther.includes(item));
-};
-
-const getInitialOtherValue = (
-  value: string[],
-  element: TSurveyMultipleChoiceElement,
-  languageCode: string
-): string => {
-  if (!Array.isArray(value)) return "";
-  const filtered = value.filter((v) => !element.choices.find((c) => c.label[languageCode] === v));
-  return filtered[0] || "";
-};
-
 export function MultipleChoiceMultiElement({
   element,
   value,
@@ -50,13 +26,15 @@ export function MultipleChoiceMultiElement({
   languageCode,
   ttc,
   setTtc,
-  autoFocusEnabled,
   currentElementId,
   dir = "auto",
 }: Readonly<MultipleChoiceMultiElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const [otherValue, setOtherValue] = useState("");
+  const isCurrent = element.id === currentElementId;
+  const { t } = useTranslation();
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+
   const shuffledChoicesIds = useMemo(() => {
     if (element.shuffleOption) {
       return getShuffledChoicesIds(element.choices, element.shuffleOption);
@@ -65,19 +43,6 @@ export function MultipleChoiceMultiElement({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to recompute this when the shuffleOption changes
   }, [element.shuffleOption, element.choices.length, element.choices[element.choices.length - 1].id]);
 
-  const getChoicesWithoutOtherLabels = useCallback(
-    () =>
-      element.choices
-        .filter((choice) => choice.id !== "other")
-        .map((item) => getLocalizedValue(item.label, languageCode)),
-    [element, languageCode]
-  );
-
-  const [otherSelected, setOtherSelected] = useState<boolean>(() =>
-    getInitialOtherSelected(value, element, languageCode)
-  );
-  const [otherValue, setOtherValue] = useState(() => getInitialOtherValue(value, element, languageCode));
-
   const elementChoices = useMemo(() => {
     if (!element.choices) {
       return [];
@@ -91,10 +56,6 @@ export function MultipleChoiceMultiElement({
     });
   }, [element.choices, element.shuffleOption, shuffledChoicesIds]);
 
-  const elementChoiceLabels = elementChoices.map((elementChoice) => {
-    return elementChoice?.label[languageCode];
-  });
-
   const otherOption = useMemo(
     () => element.choices.find((choice) => choice.id === "other"),
     [element.choices]
@@ -102,266 +63,202 @@ export function MultipleChoiceMultiElement({
 
   const noneOption = useMemo(() => element.choices.find((choice) => choice.id === "none"), [element.choices]);
 
-  const otherSpecify = useRef<HTMLInputElement | null>(null);
-  const choicesContainerRef = useRef<HTMLDivElement | null>(null);
+  // Convert element choices to MultiSelect options
+  const options: MultiSelectOption[] = useMemo(() => {
+    return elementChoices
+      .filter((choice) => choice && choice.id !== "other" && choice.id !== "none")
+      .map((choice) => ({
+        id: choice!.id,
+        label: getLocalizedValue(choice!.label, languageCode),
+      }));
+  }, [elementChoices, languageCode]);
 
-  // Check if "none" option is selected
-  const isNoneSelected = useMemo(
-    () => Boolean(noneOption && value.includes(getLocalizedValue(noneOption.label, languageCode))),
-    [noneOption, value, languageCode]
-  );
+  // Add "none" option if it exists
+  const allOptions: MultiSelectOption[] = useMemo(() => {
+    if (noneOption) {
+      return [
+        ...options,
+        {
+          id: noneOption.id,
+          label: getLocalizedValue(noneOption.label, languageCode),
+        },
+      ];
+    }
+    return options;
+  }, [options, noneOption, languageCode]);
 
-  // Common label className for all choice types
-  const baseLabelClassName =
-    "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none";
+  // Determine if "other" is selected
+  const isOtherSelected = useMemo(() => {
+    if (!otherOption) return false;
+    if (!Array.isArray(value) || value.length === 0) return false;
 
+    // Current representation: "" sentinel means "other selected"
+    if (value.includes("")) return true;
+
+    // Backwards-compat: "other" option ID might have been stored
+    if (value.includes(otherOption.id)) return true;
+
+    // Backwards-compat: if any entry is neither a known label nor a known option id, treat as custom "other" text
+    const knownLabels = new Set(
+      elementChoices
+        .filter((c) => c && c.id !== "other")
+        .map((c) => getLocalizedValue(c!.label, languageCode))
+    );
+    const knownIds = new Set(elementChoices.filter((c) => c && c.id !== "other").map((c) => c!.id));
+
+    return value.some((v) => v !== "" && !knownLabels.has(v) && !knownIds.has(v));
+  }, [value, otherOption, elementChoices, languageCode]);
+
+  // Extract the other value from the response value array (supports legacy representations)
   useEffect(() => {
-    // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true
-    if (otherSelected && choicesContainerRef.current && otherSpecify.current) {
-      choicesContainerRef.current.scrollTop = choicesContainerRef.current.scrollHeight;
-      otherSpecify.current.focus();
-    }
-  }, [otherSelected]);
+    if (!isOtherSelected || !Array.isArray(value)) return;
 
-  const addItem = (item: string) => {
-    const isOtherValue = !elementChoiceLabels.includes(item);
-    const currentValue = Array.isArray(value) ? value : [];
-
-    if (isOtherValue) {
-      const newValue = currentValue.filter((v) => elementChoiceLabels.includes(v));
-      onChange({ [element.id]: [...newValue, item] });
-    } else {
-      onChange({ [element.id]: [...currentValue, item] });
+    // Current representation: ["", "<custom>"]
+    const sentinelIndex = value.indexOf("");
+    if (sentinelIndex !== -1) {
+      setOtherValue(value[sentinelIndex + 1] ?? "");
+      return;
     }
+
+    // Legacy: ["other", "<custom>"] or ["other"]
+    if (otherOption) {
+      const otherIdIndex = value.indexOf(otherOption.id);
+      if (otherIdIndex !== -1) {
+        setOtherValue(value[otherIdIndex + 1] ?? "");
+        return;
+      }
+    }
+
+    // Legacy: ["<custom>"] (no sentinel) - take the first unknown entry
+    const knownLabels = new Set(
+      elementChoices
+        .filter((c) => c && c.id !== "other")
+        .map((c) => getLocalizedValue(c!.label, languageCode))
+    );
+    const knownIds = new Set(elementChoices.filter((c) => c && c.id !== "other").map((c) => c!.id));
+    const unknown = value.find((v) => v !== "" && !knownLabels.has(v) && !knownIds.has(v));
+    setOtherValue(unknown ?? "");
+  }, [isOtherSelected, value, otherOption, elementChoices, languageCode]);
+
+  const getNormalizedSelectedLabels = useCallback((): string[] => {
+    if (!Array.isArray(value) || value.length === 0) return [];
+
+    const selectedLabels: string[] = [];
+    value.forEach((v) => {
+      if (!v || v === "" || v === otherOption?.id) return;
+
+      // If an ID was stored, map to label
+      const byId = allOptions.find((opt) => opt.id === v);
+      if (byId) {
+        selectedLabels.push(byId.label);
+        return;
+      }
+
+      // If a label was stored, keep it (but ensure it is a known option)
+      const byLabel = allOptions.find((opt) => opt.label === v);
+      if (byLabel) selectedLabels.push(byLabel.label);
+    });
+
+    return selectedLabels;
+  }, [value, otherOption?.id, allOptions]);
+
+  const handleOtherValueChange = (newOtherValue: string) => {
+    setOtherValue(newOtherValue);
+    const baseLabels = getNormalizedSelectedLabels();
+
+    const nextValue = [...baseLabels, ""];
+    if (newOtherValue.trim()) nextValue.push(newOtherValue);
+
+    onChange({ [element.id]: nextValue });
   };
 
-  const removeItem = (item: string) => {
-    const currentValue = Array.isArray(value) ? value : [];
-    onChange({ [element.id]: currentValue.filter((i) => i !== item) });
-  };
-
-  const getIsRequired = () => {
-    const responseValues = [...value];
-    if (otherSelected && otherValue) {
-      responseValues.push(otherValue);
-    }
-    const hasResponse = Array.isArray(responseValues) && responseValues.length > 0;
-    return element.required && hasResponse ? false : element.required;
-  };
-
-  const handleFormSubmit = (e: Event) => {
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
-    const choicesWithoutOther = getChoicesWithoutOtherLabels();
-    const newValue = value.filter((item) => choicesWithoutOther.includes(item) || item === otherValue);
-    if (otherValue && otherSelected && !newValue.includes(otherValue)) {
-      newValue.push(otherValue);
-    }
-    onChange({ [element.id]: newValue });
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
 
-  const handleOtherOptionToggle = () => {
-    if (otherSelected) {
+  // For the survey-ui component, we need to map labels to IDs
+  const selectedValues = useMemo(() => {
+    if (!value || !Array.isArray(value)) return [];
+
+    const selected: string[] = [];
+    value.forEach((val) => {
+      if (val === "") {
+        // Empty string indicates "other" is selected
+        if (otherOption) {
+          selected.push(otherOption.id);
+        }
+      } else {
+        // Backwards-compat: if value is already an option ID
+        const idMatch = allOptions.find((opt) => opt.id === val);
+        if (idMatch) {
+          selected.push(idMatch.id);
+          return;
+        }
+
+        // Normal: value is a label
+        const labelMatch = allOptions.find((opt) => opt.label === val);
+        if (labelMatch) selected.push(labelMatch.id);
+      }
+    });
+
+    // Legacy: custom value without sentinel => "other" should be selected
+    if (isOtherSelected && otherOption && !selected.includes(otherOption.id)) {
+      selected.push(otherOption.id);
+    }
+
+    return selected;
+  }, [value, allOptions, otherOption, isOtherSelected]);
+
+  // Handle selection changes - store labels directly instead of IDs
+  const handleMultiSelectChange = (selectedIds: string[]) => {
+    const nextLabels: string[] = [];
+    const isOtherNowSelected = Boolean(otherOption) && selectedIds.includes(otherOption!.id);
+
+    selectedIds.forEach((id) => {
+      if (id === otherOption?.id) return;
+      const matchingOption = allOptions.find((opt) => opt.id === id);
+      if (matchingOption) nextLabels.push(matchingOption.label);
+    });
+
+    if (isOtherNowSelected) {
+      nextLabels.push("");
+      if (otherValue.trim()) nextLabels.push(otherValue);
+    } else if (otherValue) {
+      // If other was deselected, clear any stale other value
       setOtherValue("");
-      onChange({
-        [element.id]: value.filter((item) => getChoicesWithoutOtherLabels().includes(item)),
-      });
     }
-    setOtherSelected(!otherSelected);
-  };
 
-  const handleOtherValueBlur = () => {
-    const newValue = value.filter((item) => getChoicesWithoutOtherLabels().includes(item));
-    if (otherValue && otherSelected) {
-      newValue.push(otherValue);
-      onChange({ [element.id]: newValue });
-    }
-  };
+    onChange({ [element.id]: nextLabels });
 
-  const handleNoneOptionChange = (checked: boolean) => {
-    if (checked) {
-      setOtherSelected(false);
-      setOtherValue("");
-      onChange({ [element.id]: [getLocalizedValue(noneOption!.label, languageCode)] });
-    } else {
-      removeItem(getLocalizedValue(noneOption!.label, languageCode));
-    }
-  };
-
-  const handleKeyDown = (choiceId: string) => (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      document.getElementById(choiceId)?.click();
-    }
-  };
-
-  const otherOptionInputDir = !otherValue ? dir : "auto";
-
-  const renderChoice = (choice: NonNullable<(typeof elementChoices)[0]>, idx: number) => {
-    if (choice.id === "other" || choice.id === "none") return null;
-    const choiceLabel = getLocalizedValue(choice.label, languageCode);
-    const isChecked = Array.isArray(value) && value.includes(choiceLabel);
-    const labelClassName = cn(
-      isChecked ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border fb-bg-input-bg",
-      isNoneSelected ? "fb-opacity-50" : "",
-      baseLabelClassName
-    );
-
-    return (
-      <label
-        key={choice.id}
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        onKeyDown={handleKeyDown(choice.id)} // NOSONAR - needed for keyboard navigation through options
-        autoFocus={idx === 0 && autoFocusEnabled}>
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            type="checkbox"
-            dir={dir}
-            id={choice.id}
-            name={element.id}
-            tabIndex={-1}
-            value={choiceLabel}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${choice.id}-label`}
-            disabled={isNoneSelected}
-            onChange={(e) => {
-              const checked = (e.target as HTMLInputElement).checked;
-              if (checked) {
-                addItem(choiceLabel);
-              } else {
-                removeItem(choiceLabel);
-              }
-            }}
-            checked={isChecked}
-            required={getIsRequired()}
-          />
-          <span id={`${choice.id}-label`} className="fb-mx-3 fb-grow fb-font-medium" dir="auto">
-            {choiceLabel}
-          </span>
-        </span>
-      </label>
-    );
-  };
-
-  const renderOtherOption = () => {
-    if (!otherOption) return null;
-    const otherLabel = getLocalizedValue(otherOption.label, languageCode);
-    const labelClassName = cn(
-      otherSelected ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border fb-bg-input-bg",
-      isNoneSelected ? "fb-opacity-50" : "",
-      baseLabelClassName
-    );
-    const placeholder =
-      getLocalizedValue(element.otherOptionPlaceholder, languageCode).length > 0
-        ? getLocalizedValue(element.otherOptionPlaceholder, languageCode)
-        : "Please specify";
-
-    return (
-      <label
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        // Disable keyboard navigation when 'other' option is selected to allow space key in input field
-        onKeyDown={otherSelected ? undefined : handleKeyDown(otherOption.id)} // NOSONAR - needed for keyboard navigation through options
-      >
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            type="checkbox"
-            dir={dir}
-            tabIndex={-1}
-            id={otherOption.id}
-            name={element.id}
-            value={otherLabel}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${otherOption.id}-label`}
-            disabled={isNoneSelected}
-            onChange={handleOtherOptionToggle}
-            checked={otherSelected}
-          />
-          <span id={`${otherOption.id}-label`} className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium" dir="auto">
-            {otherLabel}
-          </span>
-        </span>
-        {otherSelected && (
-          <input
-            ref={otherSpecify}
-            dir={otherOptionInputDir}
-            id={`${otherOption.id}-specify`}
-            maxLength={250}
-            name={element.id}
-            tabIndex={0}
-            value={otherValue}
-            pattern=".*\S+.*"
-            onChange={(e) => setOtherValue(e.currentTarget.value)}
-            onBlur={handleOtherValueBlur}
-            className="placeholder:fb-text-placeholder fb-border-border fb-bg-survey-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-mt-3 fb-flex fb-h-10 fb-w-full fb-border fb-px-3 fb-py-2 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50"
-            placeholder={placeholder}
-            required={element.required}
-            aria-labelledby={`${otherOption.id}-label`}
-          />
-        )}
-      </label>
-    );
-  };
-
-  const renderNoneOption = () => {
-    if (!noneOption) return null;
-    const noneLabel = getLocalizedValue(noneOption.label, languageCode);
-    const labelClassName = cn(
-      isNoneSelected ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border fb-bg-input-bg",
-      baseLabelClassName
-    );
-
-    return (
-      <label
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        onKeyDown={handleKeyDown(noneOption.id)} // NOSONAR - needed for keyboard navigation through options
-      >
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            type="checkbox"
-            dir={dir}
-            tabIndex={-1}
-            id={noneOption.id}
-            name={element.id}
-            value={noneLabel}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${noneOption.id}-label`}
-            onChange={(e) => handleNoneOptionChange((e.target as HTMLInputElement).checked)}
-            checked={isNoneSelected}
-          />
-          <span id={`${noneOption.id}-label`} className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium" dir="auto">
-            {noneLabel}
-          </span>
-        </span>
-      </label>
-    );
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
   };
 
   return (
-    <form key={element.id} onSubmit={handleFormSubmit} className="fb-w-full">
-      {isMediaAvailable && <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} />}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <MultiSelect
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        options={allOptions}
+        value={selectedValues}
+        onChange={handleMultiSelectChange}
         required={element.required}
+        dir={dir}
+        otherOptionId={otherOption?.id}
+        otherOptionLabel={otherOption ? getLocalizedValue(otherOption.label, languageCode) : undefined}
+        otherOptionPlaceholder={
+          element.otherOptionPlaceholder && getLocalizedValue(element.otherOptionPlaceholder, languageCode)
+            ? getLocalizedValue(element.otherOptionPlaceholder, languageCode)
+            : t("common.please_specify")
+        }
+        otherValue={otherValue}
+        onOtherValueChange={handleOtherValueChange}
+        exclusiveOptionIds={noneOption ? [noneOption.id] : []}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mt-4">
-        <fieldset>
-          <legend className="fb-sr-only">Options</legend>
-          <div className="fb-bg-survey-bg fb-relative fb-space-y-2" ref={choicesContainerRef}>
-            {elementChoices.map((choice, idx) => choice && renderChoice(choice, idx))}
-            {renderOtherOption()}
-            {renderNoneOption()}
-          </div>
-        </fieldset>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
index d84520272c..2ebfe20af9 100644
--- a/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
+++ b/packages/surveys/src/components/elements/multiple-choice-single-element.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { SingleSelect, type SingleSelectOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyMultipleChoiceElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn, getShuffledChoicesIds } from "@/lib/utils";
+import { getShuffledChoicesIds } from "@/lib/utils";
 
 interface MultipleChoiceSingleElementProps {
   element: TSurveyMultipleChoiceElement;
@@ -27,15 +25,14 @@ export function MultipleChoiceSingleElement({
   languageCode,
   ttc,
   setTtc,
-  autoFocusEnabled,
   currentElementId,
   dir = "auto",
 }: Readonly<MultipleChoiceSingleElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const [otherSelected, setOtherSelected] = useState(false);
-  const otherSpecify = useRef<HTMLInputElement | null>(null);
-  const choicesContainerRef = useRef<HTMLDivElement | null>(null);
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
+  const [otherValue, setOtherValue] = useState("");
+  const isCurrent = element.id === currentElementId;
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+
   const shuffledChoicesIds = useMemo(() => {
     if (element.shuffleOption) {
       return getShuffledChoicesIds(element.choices, element.shuffleOption);
@@ -44,8 +41,6 @@ export function MultipleChoiceSingleElement({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to run this effect when element.choices changes
   }, [element.shuffleOption, element.choices.length, element.choices[element.choices.length - 1].id]);
 
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
-
   const elementChoices = useMemo(() => {
     if (!element.choices.length) {
       return [];
@@ -66,227 +61,121 @@ export function MultipleChoiceSingleElement({
 
   const noneOption = useMemo(() => element.choices.find((choice) => choice.id === "none"), [element.choices]);
 
-  useEffect(() => {
-    // Determine if "other" option is selected based on the value
-    const isOtherSelected =
-      value !== undefined && !elementChoices.some((choice) => choice?.label[languageCode] === value);
-    setOtherSelected(isOtherSelected);
-  }, [languageCode, elementChoices, value]);
+  // Determine if "other" is selected
+  const isOtherSelected = useMemo(() => {
+    if (!otherOption) return false;
+
+    // Special-case: empty string means "other selected but not filled yet"
+    if (value === "") return true;
+    if (!value) return false;
+
+    // Backwards-compat: if an ID was stored previously, treat it as a normal selection (if it matches)
+    const choiceLabels = elementChoices
+      .filter((c) => c && c.id !== "other")
+      .map((c) => getLocalizedValue(c!.label, languageCode));
+    const choiceIds = elementChoices.filter((c) => c && c.id !== "other").map((c) => c!.id);
+
+    if (choiceIds.includes(value)) return false;
+    if (choiceLabels.includes(value)) return false;
+
+    // Otherwise, it's a custom value => "other"
+    return true;
+  }, [value, otherOption, elementChoices, languageCode]);
 
   useEffect(() => {
-    // Scroll to the bottom of choices container and focus on 'otherSpecify' input when 'otherSelected' is true
-    if (otherSelected && choicesContainerRef.current && otherSpecify.current) {
-      choicesContainerRef.current.scrollTop = choicesContainerRef.current.scrollHeight;
-      otherSpecify.current.focus();
+    if (isOtherSelected) setOtherValue(value ?? "");
+  }, [isOtherSelected, value]);
+
+  const handleChange = (selectedValue: string) => {
+    if (selectedValue === otherOption?.id) {
+      setOtherValue("");
+      onChange({ [element.id]: "" });
+    } else {
+      const matchingOption = allOptions.find((opt) => opt.id === selectedValue);
+      onChange({ [element.id]: matchingOption?.label ?? selectedValue });
     }
-  }, [otherSelected]);
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
+  };
 
-  const otherOptionInputDir = !value ? dir : "auto";
+  const handleOtherValueChange = (newOtherValue: string) => {
+    setOtherValue(newOtherValue);
+    onChange({ [element.id]: newOtherValue });
+  };
 
-  const handleFormSubmit = (e: Event) => {
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
 
-  const handleChoiceClick = (choiceValue: string) => {
-    if (!element.required && value === choiceValue) {
-      onChange({ [element.id]: undefined });
-    } else {
-      setOtherSelected(false);
-      onChange({ [element.id]: choiceValue });
+  // Convert element choices to SingleSelect options
+  const options: SingleSelectOption[] = useMemo(() => {
+    return elementChoices
+      .filter((choice) => choice && choice.id !== "other" && choice.id !== "none")
+      .map((choice) => ({
+        id: choice!.id,
+        label: getLocalizedValue(choice!.label, languageCode),
+      }));
+  }, [elementChoices, languageCode]);
+
+  // Add "none" option if it exists
+  const allOptions: SingleSelectOption[] = useMemo(() => {
+    if (noneOption) {
+      return [
+        ...options,
+        {
+          id: noneOption.id,
+          label: getLocalizedValue(noneOption.label, languageCode),
+        },
+      ];
     }
-  };
+    return options;
+  }, [options, noneOption, languageCode]);
 
-  const handleOtherOptionClick = () => {
-    if (otherSelected && !element.required) {
-      onChange({ [element.id]: undefined });
-      setOtherSelected(false);
-    } else if (!otherSelected) {
-      setOtherSelected(true);
-      onChange({ [element.id]: "" });
-    }
-  };
+  // Determine the selected value
+  const selectedValue = useMemo(() => {
+    if (!value && value !== "") return undefined;
 
-  const handleNoneOptionClick = () => {
-    const noneValue = getLocalizedValue(noneOption!.label, languageCode);
-    if (!element.required && value === noneValue) {
-      onChange({ [element.id]: undefined });
-    } else {
-      setOtherSelected(false);
-      onChange({ [element.id]: noneValue });
-    }
-  };
+    // Empty string => other selected (but not filled)
+    if (value === "" && otherOption) return otherOption.id;
 
-  const handleKeyDown = (choiceId: string) => (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      document.getElementById(choiceId)?.click();
-      document.getElementById(choiceId)?.focus();
-    }
-  };
+    // Backwards-compat: if value is already an option ID, use it directly
+    const idMatch = allOptions.find((opt) => opt.id === value);
+    if (idMatch) return idMatch.id;
 
-  const handleOtherKeyDown = (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      if (otherSelected) return;
-      document.getElementById(otherOption!.id)?.click();
-      document.getElementById(otherOption!.id)?.focus();
-    }
-  };
+    // Normal path: stored value is the label, map to option ID
+    const labelMatch = allOptions.find((opt) => opt.label === value);
+    if (labelMatch) return labelMatch.id;
 
-  const renderChoice = (choice: NonNullable<(typeof elementChoices)[0]>, idx: number) => {
-    if (choice.id === "other" || choice.id === "none") return null;
-    const choiceLabel = getLocalizedValue(choice.label, languageCode);
-    const isChecked = value === choiceLabel;
-    const labelClassName = cn(
-      isChecked ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border",
-      "fb-text-heading fb-bg-input-bg focus-within:fb-border-brand focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
-    );
+    // Custom value => other
+    if (otherOption && isOtherSelected) return otherOption.id;
 
-    return (
-      <label
-        key={choice.id}
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        onKeyDown={handleKeyDown(choice.id)} // NOSONAR - needed for keyboard navigation through options
-        autoFocus={idx === 0 && autoFocusEnabled}>
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            tabIndex={-1}
-            type="radio"
-            id={choice.id}
-            name={element.id}
-            value={choiceLabel}
-            dir={dir}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${choice.id}-label`}
-            onClick={() => handleChoiceClick(choiceLabel)}
-            checked={isChecked}
-            required={element.required ? idx === 0 : undefined}
-          />
-          <span id={`${choice.id}-label`} className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium" dir="auto">
-            {choiceLabel}
-          </span>
-        </span>
-      </label>
-    );
-  };
-
-  const renderOtherOption = () => {
-    if (!otherOption) return null;
-    const otherLabel = getLocalizedValue(otherOption.label, languageCode);
-    const labelClassName = cn(
-      otherSelected ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border",
-      "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
-    );
-    const placeholder =
-      getLocalizedValue(element.otherOptionPlaceholder, languageCode).length > 0
-        ? getLocalizedValue(element.otherOptionPlaceholder, languageCode)
-        : "Please specify";
-
-    return (
-      <label
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        onKeyDown={handleOtherKeyDown} // NOSONAR - needed for keyboard navigation through options
-      >
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            tabIndex={-1}
-            dir={dir}
-            type="radio"
-            id={otherOption.id}
-            name={element.id}
-            value={otherLabel}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${otherOption.id}-label`}
-            onClick={handleOtherOptionClick}
-            checked={otherSelected}
-          />
-          <span id={`${otherOption.id}-label`} className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium" dir="auto">
-            {otherLabel}
-          </span>
-        </span>
-        {otherSelected && (
-          <input
-            ref={otherSpecify}
-            id={`${otherOption.id}-input`}
-            dir={otherOptionInputDir}
-            name={element.id}
-            pattern=".*\S+.*"
-            value={value ?? ""}
-            onChange={(e) => onChange({ [element.id]: e.currentTarget.value })}
-            className="placeholder:fb-text-placeholder fb-border-border fb-bg-survey-bg fb-text-heading focus:fb-ring-focus fb-rounded-custom fb-mt-3 fb-flex fb-h-10 fb-w-full fb-border fb-px-3 fb-py-2 fb-text-sm focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50"
-            placeholder={placeholder}
-            required={element.required}
-            aria-labelledby={`${otherOption.id}-label`}
-            maxLength={250}
-          />
-        )}
-      </label>
-    );
-  };
-
-  const renderNoneOption = () => {
-    if (!noneOption) return null;
-    const noneLabel = getLocalizedValue(noneOption.label, languageCode);
-    const isChecked = value === noneLabel;
-    const labelClassName = cn(
-      isChecked ? "fb-border-brand fb-bg-input-bg-selected fb-z-10" : "fb-border-border",
-      "fb-text-heading focus-within:fb-border-brand fb-bg-input-bg focus-within:fb-bg-input-bg-selected hover:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-border fb-p-4 focus:fb-outline-none"
-    );
-
-    return (
-      <label
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={labelClassName}
-        onKeyDown={handleKeyDown(noneOption.id)}>
-        <span className="fb-flex fb-items-center fb-text-sm">
-          <input
-            tabIndex={-1}
-            dir={dir}
-            type="radio"
-            id={noneOption.id}
-            name={element.id}
-            value={noneLabel}
-            className="fb-border-brand fb-text-brand fb-h-4 fb-w-4 fb-flex-shrink-0 fb-border focus:fb-ring-0 focus:fb-ring-offset-0"
-            aria-labelledby={`${noneOption.id}-label`}
-            onClick={handleNoneOptionClick}
-            checked={isChecked}
-          />
-          <span id={`${noneOption.id}-label`} className="fb-ml-3 fb-mr-3 fb-grow fb-font-medium" dir="auto">
-            {noneLabel}
-          </span>
-        </span>
-      </label>
-    );
-  };
+    return undefined;
+  }, [value, otherOption, allOptions, isOtherSelected]);
 
   return (
-    <form key={element.id} onSubmit={handleFormSubmit} className="fb-w-full">
-      {isMediaAvailable && <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} />}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <SingleSelect
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        options={allOptions}
+        value={selectedValue}
+        onChange={handleChange}
         required={element.required}
+        dir={dir}
+        otherOptionId={otherOption?.id}
+        otherOptionLabel={otherOption ? getLocalizedValue(otherOption.label, languageCode) : undefined}
+        otherOptionPlaceholder={
+          element.otherOptionPlaceholder && getLocalizedValue(element.otherOptionPlaceholder, languageCode)
+            ? getLocalizedValue(element.otherOptionPlaceholder, languageCode)
+            : "Please specify"
+        }
+        otherValue={otherValue}
+        onOtherValueChange={handleOtherValueChange}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mt-4">
-        <fieldset>
-          <legend className="fb-sr-only">Options</legend>
-          <div
-            className="fb-bg-survey-bg fb-relative fb-space-y-2"
-            role="radiogroup"
-            ref={choicesContainerRef}>
-            {elementChoices.map((choice, idx) => choice && renderChoice(choice, idx))}
-            {renderOtherOption()}
-            {renderNoneOption()}
-          </div>
-        </fieldset>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/nps-element.tsx b/packages/surveys/src/components/elements/nps-element.tsx
index 5875362df7..fac91cd2bd 100644
--- a/packages/surveys/src/components/elements/nps-element.tsx
+++ b/packages/surveys/src/components/elements/nps-element.tsx
@@ -1,12 +1,10 @@
 import { useState } from "preact/hooks";
+// Import as Nps to fix sonar issue - "Imported JSX component NPS must be in PascalCase"
+import { NPS as Nps } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyNPSElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn } from "@/lib/utils";
 
 interface NPSElementProps {
   element: TSurveyNPSElement;
@@ -31,113 +29,36 @@ export function NPSElement({
   dir = "auto",
 }: Readonly<NPSElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const [hoveredNumber, setHoveredNumber] = useState(-1);
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const isCurrent = element.id === currentElementId;
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  const handleClick = (number: number) => {
-    onChange({ [element.id]: number });
+  const handleChange = (npsValue: number) => {
+    onChange({ [element.id]: npsValue });
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
 
-  const getNPSOptionColor = (idx: number) => {
-    if (idx > 8) return "fb-bg-emerald-100";
-    if (idx > 6) return "fb-bg-orange-100";
-    return "fb-bg-rose-100";
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
   };
 
   return (
-    <form
-      key={element.id}
-      onSubmit={(e) => {
-        e.preventDefault();
-        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-        setTtc(updatedTtcObj);
-      }}>
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <Nps
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        value={value}
+        onChange={handleChange}
+        lowerLabel={getLocalizedValue(element.lowerLabel, languageCode)}
+        upperLabel={getLocalizedValue(element.upperLabel, languageCode)}
+        colorCoding={element.isColorCodingEnabled}
         required={element.required}
+        dir={dir}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-my-4">
-        <fieldset>
-          <legend className="fb-sr-only">Options</legend>
-          <div className="fb-flex">
-            {Array.from({ length: 11 }, (_, i) => i).map((number, idx) => {
-              return (
-                <label
-                  key={number}
-                  tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-                  onMouseOver={() => {
-                    setHoveredNumber(number);
-                  }}
-                  onMouseLeave={() => {
-                    setHoveredNumber(-1);
-                  }}
-                  onFocus={() => {
-                    setHoveredNumber(number);
-                  }}
-                  onBlur={() => {
-                    setHoveredNumber(-1);
-                  }}
-                  onKeyDown={(e) => {
-                    // Accessibility: if spacebar was pressed pass this down to the input
-                    if (e.key === " ") {
-                      e.preventDefault();
-                      document.getElementById(number.toString())?.click();
-                      document.getElementById(number.toString())?.focus();
-                    }
-                  }}
-                  className={cn(
-                    value === number
-                      ? "fb-border-border-highlight fb-bg-accent-selected-bg fb-z-10 fb-border"
-                      : "fb-border-border",
-                    "fb-text-heading focus:fb-border-brand fb-relative fb-h-10 fb-flex-1 fb-cursor-pointer fb-overflow-hidden fb-border-b fb-border-l fb-border-t fb-text-center fb-text-sm focus:fb-border-2 focus:fb-outline-none",
-                    element.isColorCodingEnabled ? "fb-h-[46px] fb-leading-[3.5em]" : "fb-h fb-leading-10",
-                    hoveredNumber === number ? "fb-bg-accent-bg" : "",
-                    dir === "rtl"
-                      ? "first:fb-rounded-r-custom first:fb-border-r last:fb-rounded-l-custom last:fb-border-l"
-                      : "first:fb-rounded-l-custom first:fb-border-l last:fb-rounded-r-custom last:fb-border-r"
-                  )}>
-                  {element.isColorCodingEnabled ? (
-                    <div
-                      className={`fb-absolute fb-left-0 fb-top-0 fb-h-[6px] fb-w-full ${getNPSOptionColor(idx)}`}
-                    />
-                  ) : null}
-                  <input
-                    type="radio"
-                    id={number.toString()}
-                    name="nps"
-                    value={number}
-                    checked={value === number}
-                    className="fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
-                    onClick={() => {
-                      handleClick(number);
-                    }}
-                    required={element.required}
-                    tabIndex={-1}
-                  />
-                  {number}
-                </label>
-              );
-            })}
-          </div>
-          <div className="fb-text-subheading fb-mt-2 fb-flex fb-justify-between fb-px-1.5 fb-text-xs fb-leading-6 fb-gap-8">
-            <p dir="auto" className="fb-max-w-[50%]">
-              {getLocalizedValue(element.lowerLabel, languageCode)}
-            </p>
-            <p dir="auto" className="fb-max-w-[50%]">
-              {getLocalizedValue(element.upperLabel, languageCode)}
-            </p>
-          </div>
-        </fieldset>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/open-text-element.tsx b/packages/surveys/src/components/elements/open-text-element.tsx
index 15f1071ce1..8886116157 100644
--- a/packages/surveys/src/components/elements/open-text-element.tsx
+++ b/packages/surveys/src/components/elements/open-text-element.tsx
@@ -1,12 +1,9 @@
-import { type RefObject } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { OpenText } from "@formbricks/survey-ui";
 import { ZEmail, ZUrl } from "@formbricks/types/common";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyOpenTextElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
 
@@ -30,202 +27,109 @@ export function OpenTextElement({
   languageCode,
   ttc,
   setTtc,
-  autoFocusEnabled,
   currentElementId,
   dir = "auto",
 }: Readonly<OpenTextElementProps>) {
   const [startTime, setStartTime] = useState(performance.now());
-  const [currentLength, setCurrentLength] = useState(value.length || 0);
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const isCurrent = element.id === currentElementId;
   useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
   const { t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
-  useEffect(() => {
-    if (isCurrent && autoFocusEnabled && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isCurrent, autoFocusEnabled]);
-
-  const handleInputChange = (inputValue: string) => {
-    inputRef.current?.setCustomValidity("");
-    setCurrentLength(inputValue.length);
+  const handleChange = (inputValue: string) => {
+    // Clear error when user starts typing
+    setErrorMessage(undefined);
     onChange({ [element.id]: inputValue });
   };
 
-  const validateRequired = (input: HTMLInputElement | HTMLTextAreaElement | null): boolean => {
+  const validateRequired = (): boolean => {
     if (element.required && (!value || value.trim() === "")) {
-      input?.setCustomValidity(t("errors.please_fill_out_this_field"));
-      input?.reportValidity();
+      setErrorMessage(t("errors.please_fill_out_this_field"));
       return false;
     }
     return true;
   };
 
-  const validateEmail = (input: HTMLInputElement | HTMLTextAreaElement | null): boolean => {
+  const validateEmail = (): boolean => {
     if (!ZEmail.safeParse(value).success) {
-      input?.setCustomValidity(t("errors.please_enter_a_valid_email_address"));
-      input?.reportValidity();
+      setErrorMessage(t("errors.please_enter_a_valid_email_address"));
       return false;
     }
     return true;
   };
 
-  const validateUrl = (input: HTMLInputElement | HTMLTextAreaElement | null): boolean => {
+  const validateUrl = (): boolean => {
     if (!ZUrl.safeParse(value).success) {
-      input?.setCustomValidity(t("errors.please_enter_a_valid_url"));
-      input?.reportValidity();
+      setErrorMessage(t("errors.please_enter_a_valid_url"));
       return false;
     }
     return true;
   };
 
-  const validatePhone = (input: HTMLInputElement | HTMLTextAreaElement | null): boolean => {
-    // Match the same pattern as getInputPattern: must start with digit or +, end with digit
+  const validatePhone = (): boolean => {
+    // Match the same pattern: must start with digit or +, end with digit
     // Allows digits, +, -, and spaces in between
     const phoneRegex = /^[0-9+][0-9+\- ]*[0-9]$/;
     if (!phoneRegex.test(value)) {
-      input?.setCustomValidity(t("errors.please_enter_a_valid_phone_number"));
-      input?.reportValidity();
+      setErrorMessage(t("errors.please_enter_a_valid_phone_number"));
       return false;
     }
     return true;
   };
 
-  const validateInput = (input: HTMLInputElement | HTMLTextAreaElement | null): boolean => {
+  const validateInput = (): boolean => {
     if (!value || value.trim() === "") return true;
 
     if (element.inputType === "email") {
-      return validateEmail(input);
+      return validateEmail();
     }
     if (element.inputType === "url") {
-      return validateUrl(input);
+      return validateUrl();
     }
     if (element.inputType === "phone") {
-      return validatePhone(input);
+      return validatePhone();
     }
     return true;
   };
 
   const handleOnSubmit = (e: Event) => {
     e.preventDefault();
-    const input = inputRef.current;
-    input?.setCustomValidity("");
+    setErrorMessage(undefined);
 
-    if (!validateRequired(input)) return;
-    if (!validateInput(input)) return;
+    if (!validateRequired()) return;
+    if (!validateInput()) return;
 
     const updatedTtc = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtc);
   };
 
-  const getInputTitle = (): string | undefined => {
-    if (element.inputType === "phone") return t("errors.please_enter_a_valid_phone_number");
-    if (element.inputType === "email") return t("errors.please_enter_a_valid_email_address");
-    if (element.inputType === "url") return t("errors.please_enter_a_valid_url");
-    return undefined;
-  };
-
-  const getInputPattern = (): string => {
-    return element.inputType === "phone" ? "^[0-9+][0-9+\\- ]*[0-9]$" : ".*";
-  };
-
-  const getInputMinLength = (): number | undefined => {
-    return element.inputType === "text" ? element.charLimit?.min : undefined;
-  };
-
-  const getInputMaxLength = (): number | undefined => {
-    if (element.inputType === "text") return element.charLimit?.max;
-    if (element.inputType === "phone") return 30;
-    return undefined;
-  };
-
-  const handleInputOnInput = (e: Event) => {
-    const input = e.currentTarget as HTMLInputElement;
-    handleInputChange(input.value);
-    input.setCustomValidity("");
-  };
-
-  const handleTextareaOnInput = (e: Event) => {
-    const textarea = e.currentTarget as HTMLTextAreaElement;
-    handleInputChange(textarea.value);
-  };
-
-  const renderCharLimit = () => {
-    if (element.inputType !== "text" || element.charLimit?.max === undefined) return null;
-    const isOverLimit = currentLength >= element.charLimit.max;
-    const className = `fb-text-xs ${isOverLimit ? "fb-text-red-500 fb-font-semibold" : "fb-text-neutral-400"}`;
-    return (
-      <span className={className}>
-        {currentLength}/{element.charLimit.max}
-      </span>
-    );
-  };
-
-  const renderInput = () => {
-    const computedDir = !value ? dir : "auto";
-    return (
-      <input
-        ref={inputRef as RefObject<HTMLInputElement>}
-        autoFocus={isCurrent ? autoFocusEnabled : undefined}
-        tabIndex={0}
-        name={element.id}
-        id={element.id}
-        placeholder={getLocalizedValue(element.placeholder, languageCode)}
-        dir={computedDir}
-        step="any"
-        required={element.required}
-        value={value || ""}
-        type={element.inputType}
-        onInput={handleInputOnInput}
-        className="fb-border-border placeholder:fb-text-placeholder fb-text-subheading focus:fb-border-brand fb-bg-input-bg fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-outline-none focus:fb-ring-0 sm:fb-text-sm"
-        pattern={getInputPattern()}
-        title={getInputTitle()}
-        minLength={getInputMinLength()}
-        maxLength={getInputMaxLength()}
-      />
-    );
-  };
-
-  const renderTextarea = () => {
-    return (
-      <textarea
-        ref={inputRef as RefObject<HTMLTextAreaElement>}
-        rows={3}
-        autoFocus={isCurrent ? autoFocusEnabled : undefined}
-        name={element.id}
-        tabIndex={0}
-        aria-label="textarea"
-        id={element.id}
-        placeholder={getLocalizedValue(element.placeholder, languageCode, true)}
-        dir={dir}
-        required={element.required}
-        value={value}
-        onInput={handleTextareaOnInput}
-        className="fb-border-border placeholder:fb-text-placeholder fb-bg-input-bg fb-text-subheading focus:fb-border-brand fb-rounded-custom fb-block fb-w-full fb-border fb-p-2 fb-shadow-sm focus:fb-ring-0 sm:fb-text-sm"
-        minLength={getInputMinLength()}
-        maxLength={getInputMaxLength()}
-      />
-    );
+  // Map element inputType to OpenText inputType
+  const getInputType = (): "text" | "email" | "url" | "phone" | "number" => {
+    if (element.inputType === "phone") return "phone";
+    if (element.inputType === "email") return "email";
+    if (element.inputType === "url") return "url";
+    if (element.inputType === "number") return "number";
+    return "text";
   };
 
   return (
-    <form key={element.id} onSubmit={handleOnSubmit} className="fb-w-full">
-      {isMediaAvailable && <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} />}
-      <Headline
+    <form key={element.id} onSubmit={handleOnSubmit} className="w-full">
+      <OpenText
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        placeholder={getLocalizedValue(element.placeholder, languageCode)}
+        value={value}
+        onChange={handleChange}
         required={element.required}
+        longAnswer={element.longAnswer !== false}
+        inputType={getInputType()}
+        charLimit={element.inputType === "text" ? element.charLimit : undefined}
+        errorMessage={errorMessage}
+        dir={dir}
+        rows={3}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mt-4">
-        {element.longAnswer === false ? renderInput() : renderTextarea()}
-        {renderCharLimit()}
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/picture-selection-element.tsx b/packages/surveys/src/components/elements/picture-selection-element.tsx
index 9166c52bdf..37b3bd538d 100644
--- a/packages/surveys/src/components/elements/picture-selection-element.tsx
+++ b/packages/surveys/src/components/elements/picture-selection-element.tsx
@@ -1,15 +1,11 @@
-import { useEffect, useState } from "preact/hooks";
-import { useTranslation } from "react-i18next";
+import { useState } from "preact/hooks";
+import { PictureSelect, type PictureSelectOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyPictureSelectionElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
-import { ImageDownIcon } from "@/components/icons/image-down-icon";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getOriginalFileNameFromUrl } from "@/lib/storage";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
 
 interface PictureSelectionProps {
   element: TSurveyPictureSelectionElement;
@@ -33,176 +29,76 @@ export function PictureSelectionElement({
   currentElementId,
   dir = "auto",
 }: Readonly<PictureSelectionProps>) {
-  const { t } = useTranslation();
   const [startTime, setStartTime] = useState(performance.now());
-  const [loadingImages, setLoadingImages] = useState<Record<string, boolean>>(() => {
-    const initialLoadingState: Record<string, boolean> = {};
-    element.choices.forEach((choice) => {
-      initialLoadingState[choice.id] = true;
-    });
-    return initialLoadingState;
-  });
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
   const isCurrent = element.id === currentElementId;
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+  const { t } = useTranslation();
+  // Convert choices to PictureSelectOption format
+  const options: PictureSelectOption[] = element.choices.map((choice) => ({
+    id: choice.id,
+    imageUrl: choice.imageUrl,
+    alt: getOriginalFileNameFromUrl(choice.imageUrl),
+  }));
 
-  const addItem = (item: string) => {
-    const values = element.allowMulti ? [...value, item] : [item];
-    onChange({ [element.id]: values });
-  };
+  // Convert value from string[] to string | string[] based on allowMulti
+  let currentValue: string | string[];
+  if (element.allowMulti) {
+    currentValue = value;
+  } else if (value.length > 0) {
+    currentValue = value[0];
+  } else {
+    currentValue = "";
+  }
 
-  const removeItem = (item: string) => {
-    const values = element.allowMulti ? value.filter((i) => i !== item) : [];
-    onChange({ [element.id]: values });
-  };
-
-  const handleChange = (id: string) => {
-    if (value.includes(id)) {
-      removeItem(id);
+  const handleChange = (newValue: string | string[]) => {
+    setErrorMessage(undefined);
+    let stringArray: string[];
+    if (Array.isArray(newValue)) {
+      stringArray = newValue;
+    } else if (newValue) {
+      stringArray = [newValue];
     } else {
-      addItem(id);
+      stringArray = [];
     }
+    onChange({ [element.id]: stringArray });
   };
 
-  const handleFormSubmit = (e: Event) => {
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
-    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
-    setTtc(updatedTtcObj);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      const target = e.currentTarget as HTMLButtonElement;
-      target.click();
-      target.focus();
+    if (element.required) {
+      if (element.allowMulti) {
+        console.log("currentValue", currentValue);
+        if (!currentValue || !Array.isArray(currentValue) || currentValue.length === 0) {
+          setErrorMessage(t("errors.please_select_an_option"));
+          return;
+        }
+      } else {
+        if (!currentValue) {
+          setErrorMessage(t("errors.please_select_an_option"));
+          return;
+        }
+        const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+        setTtc(updatedTtcObj);
+      }
     }
-  };
-
-  const handleImageLoad = (choiceId: string) => {
-    setLoadingImages((prev) => ({ ...prev, [choiceId]: false }));
-  };
-
-  const handleLinkClick = (e: Event) => {
-    e.stopPropagation();
-  };
-
-  useEffect(() => {
-    if (!element.allowMulti && value.length > 1) {
-      onChange({ [element.id]: [] });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to recompute when the allowMulti changes
-  }, [element.allowMulti]);
-
-  const getButtonClassName = (choiceId: string): string => {
-    const isSelected = Array.isArray(value) && value.includes(choiceId);
-    return cn(
-      "fb-relative fb-w-full fb-cursor-pointer fb-overflow-hidden fb-border fb-rounded-custom focus-visible:fb-outline-none focus-visible:fb-ring-2 focus-visible:fb-ring-brand focus-visible:fb-ring-offset-2 fb-aspect-[4/3] fb-min-h-[7rem] fb-max-h-[50vh] group/image",
-      isSelected ? "fb-border-brand fb-text-brand fb-z-10 fb-border-4 fb-shadow-sm" : ""
-    );
-  };
-
-  const getInputClassName = (isSelected: boolean): string => {
-    const baseClasses = element.allowMulti
-      ? "fb-border-border fb-rounded-custom fb-pointer-events-none fb-absolute fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-border"
-      : "fb-border-border fb-pointer-events-none fb-absolute fb-top-2 fb-z-20 fb-h-5 fb-w-5 fb-rounded-full fb-border";
-    return cn(
-      baseClasses,
-      isSelected ? "fb-border-brand fb-text-brand" : "",
-      dir === "rtl" ? "fb-left-2" : "fb-right-2"
-    );
-  };
-
-  const renderInput = (choiceId: string) => {
-    const isSelected = value.includes(choiceId);
-    if (element.allowMulti) {
-      return (
-        <input
-          id={`${choiceId}-checked`}
-          name={`${choiceId}-checkbox`}
-          type="checkbox"
-          tabIndex={-1}
-          checked={isSelected}
-          className={getInputClassName(isSelected)}
-          required={element.required && value.length === 0}
-        />
-      );
-    }
-    return (
-      <input
-        id={`${choiceId}-radio`}
-        name={element.id}
-        type="radio"
-        tabIndex={-1}
-        checked={isSelected}
-        className={getInputClassName(isSelected)}
-        required={element.required && value.length ? false : element.required}
-      />
-    );
-  };
-
-  const renderChoice = (choice: (typeof element.choices)[0]) => {
-    const isLoading = loadingImages[choice.id];
-
-    return (
-      <div className="fb-relative" key={choice.id}>
-        <button
-          type="button"
-          tabIndex={0}
-          onKeyDown={handleKeyDown}
-          onClick={() => handleChange(choice.id)}
-          className={getButtonClassName(choice.id)}>
-          {isLoading && (
-            <div className="fb-absolute fb-inset-0 fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
-          )}
-          <img
-            src={choice.imageUrl}
-            id={choice.id}
-            alt={getOriginalFileNameFromUrl(choice.imageUrl)}
-            className={cn("fb-h-full fb-w-full fb-object-cover", isLoading ? "fb-opacity-0" : "")}
-            onLoad={() => handleImageLoad(choice.id)}
-            onError={() => handleImageLoad(choice.id)}
-          />
-          {renderInput(choice.id)}
-        </button>
-        <a
-          tabIndex={-1}
-          href={choice.imageUrl}
-          target="_blank"
-          title={t("common.open_in_new_tab")}
-          rel="noreferrer"
-          onClick={handleLinkClick}
-          className={cn(
-            "fb-absolute fb-bottom-4 fb-flex fb-items-center fb-gap-2 fb-whitespace-nowrap fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100 fb-z-20",
-            dir === "rtl" ? "fb-left-2" : "fb-right-2"
-          )}>
-          <span className="fb-sr-only">{t("common.open_in_new_tab")}</span>
-          <ImageDownIcon />
-        </a>
-      </div>
-    );
-  };
+  }
 
   return (
-    <form key={element.id} onSubmit={handleFormSubmit} className="fb-w-full">
-      {isMediaAvailable && <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} />}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <PictureSelect
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        options={options}
+        value={currentValue}
+        onChange={handleChange}
+        allowMulti={element.allowMulti}
         required={element.required}
+        dir={dir}
+        errorMessage={errorMessage}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mt-4">
-        <fieldset>
-          <legend className="fb-sr-only">{t("common.options")}</legend>
-          <div className="fb-bg-survey-bg fb-relative fb-grid fb-grid-cols-1 sm:fb-grid-cols-2 fb-gap-4">
-            {element.choices.map(renderChoice)}
-          </div>
-        </fieldset>
-      </div>
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/ranking-element.tsx b/packages/surveys/src/components/elements/ranking-element.tsx
index a66fcff756..c9a1715c14 100644
--- a/packages/surveys/src/components/elements/ranking-element.tsx
+++ b/packages/surveys/src/components/elements/ranking-element.tsx
@@ -1,14 +1,11 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useCallback, useMemo, useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { Ranking, type RankingOption } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
-import type { TSurveyElementChoice, TSurveyRankingElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
-import { Subheader } from "@/components/general/subheader";
+import type { TSurveyRankingElement } from "@formbricks/types/surveys/elements";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn, getShuffledChoicesIds } from "@/lib/utils";
+import { getShuffledChoicesIds } from "@/lib/utils";
 
 interface RankingElementProps {
   element: TSurveyRankingElement;
@@ -28,12 +25,15 @@ export function RankingElement({
   languageCode,
   ttc,
   setTtc,
-  autoFocusEnabled,
   currentElementId,
 }: Readonly<RankingElementProps>) {
   const { t } = useTranslation();
   const [startTime, setStartTime] = useState(performance.now());
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
   const isCurrent = element.id === currentElementId;
+
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
+
   const shuffledChoicesIds = useMemo(() => {
     if (element.shuffleOption) {
       return getShuffledChoicesIds(element.choices, element.shuffleOption);
@@ -42,225 +42,102 @@ export function RankingElement({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element.shuffleOption, element.choices.length]);
 
-  const [parent] = useAutoAnimate();
-
-  const [error, setError] = useState<string | null>(null);
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
-
-  const [localValue, setLocalValue] = useState<string[]>(value ?? []);
-
-  const sortedItems = useMemo(() => {
-    return localValue
-      .map((id) => element.choices.find((c) => c.id === id))
-      .filter((item): item is TSurveyElementChoice => item !== undefined);
-  }, [localValue, element.choices]);
-
-  const unsortedItems = useMemo(() => {
-    if (element.shuffleOption === "all" && sortedItems.length === 0) {
-      return shuffledChoicesIds.map((id) => element.choices.find((c) => c.id === id));
+  const elementChoices = useMemo(() => {
+    if (!element.choices.length) {
+      return [];
     }
-    return element.choices.filter((c) => !localValue.includes(c.id));
-  }, [element.choices, element.shuffleOption, localValue, sortedItems, shuffledChoicesIds]);
-
-  const handleItemClick = useCallback(
-    (item: TSurveyElementChoice) => {
-      const isAlreadySorted = localValue.includes(item.id);
-      const newLocalValue = isAlreadySorted
-        ? localValue.filter((id) => id !== item.id)
-        : [...localValue, item.id];
-
-      setLocalValue(newLocalValue);
-
-      // Immediately update parent state with the new ranking
-      const sortedLabels = newLocalValue
-        .map((id) => element.choices.find((c) => c.id === id))
-        .filter((item): item is TSurveyElementChoice => item !== undefined)
-        .map((item) => getLocalizedValue(item.label, languageCode));
-      onChange({ [element.id]: sortedLabels });
-
-      setError(null);
-    },
-    [localValue, element.choices, element.id, languageCode, onChange]
-  );
-
-  const handleMove = useCallback(
-    (itemId: string, direction: "up" | "down") => {
-      const index = localValue.findIndex((id) => id === itemId);
-      if (index === -1) return;
-
-      const newLocalValue = [...localValue];
-      const [movedItem] = newLocalValue.splice(index, 1);
-      const newIndex =
-        direction === "up" ? Math.max(0, index - 1) : Math.min(newLocalValue.length, index + 1);
-      newLocalValue.splice(newIndex, 0, movedItem);
-      setLocalValue(newLocalValue);
-
-      // Immediately update parent state with the new ranking
-      const sortedLabels = newLocalValue
-        .map((id) => element.choices.find((c) => c.id === id))
-        .filter((item): item is TSurveyElementChoice => item !== undefined)
-        .map((item) => getLocalizedValue(item.label, languageCode));
-      onChange({ [element.id]: sortedLabels });
-
-      setError(null);
-    },
-    [localValue, element.choices, element.id, languageCode, onChange]
-  );
-
-  const handleSubmit = (e: Event) => {
-    e.preventDefault();
-
-    const hasIncompleteRanking =
-      (element.required && sortedItems.length !== element.choices.length) ||
-      (!element.required && sortedItems.length > 0 && sortedItems.length < element.choices.length);
-
-    if (hasIncompleteRanking) {
-      setError(t("errors.please_rank_all_items_before_submitting"));
-      return;
+    if (element.shuffleOption === "none") {
+      return element.choices;
     }
+    return shuffledChoicesIds
+      .map((shuffledIdx) => {
+        const found = element.choices.find((c) => c.id === shuffledIdx);
+        return found;
+      })
+      .filter(Boolean);
+  }, [element.shuffleOption, element.choices, shuffledChoicesIds]);
+
+  // Convert choices to RankingOption format
+  const options: RankingOption[] = useMemo(() => {
+    return elementChoices
+      .filter((choice): choice is NonNullable<typeof choice> => choice !== undefined)
+      .map((choice) => ({
+        id: choice.id,
+        label: getLocalizedValue(choice.label, languageCode),
+      }));
+  }, [elementChoices, languageCode]);
+
+  // For the survey-ui component, we need to map labels to IDs
+  const selectedValues = useMemo(() => {
+    if (!value || !Array.isArray(value)) return [];
+
+    const selected: string[] = [];
+    value.forEach((val) => {
+      // Backwards-compat: if value is already an option ID
+      const idMatch = options.find((opt) => opt.id === val);
+      if (idMatch) {
+        selected.push(idMatch.id);
+        return;
+      }
+
+      // Normal: value is a label
+      const labelMatch = options.find((opt) => opt.label === val);
+      if (labelMatch) selected.push(labelMatch.id);
+    });
+
+    return selected;
+  }, [value, options]);
+
+  // Handle selection changes - store labels directly instead of IDs
+  const handleChange = (selectedIds: string[]) => {
+    // Clear error when user changes ranking
+    setErrorMessage(undefined);
+
+    const nextLabels: string[] = [];
+    selectedIds.forEach((id) => {
+      const matchingOption = options.find((opt) => opt.id === id);
+      if (matchingOption) nextLabels.push(matchingOption.label);
+    });
+
+    onChange({ [element.id]: nextLabels });
+
+    const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
+    setTtc(updatedTtcObj);
+  };
+
+  const validateRequired = (): boolean => {
+    const isValueArray = Array.isArray(value);
+    const allItemsRanked = isValueArray && value.length === element.choices.length;
+
+    if ((element.required && !allItemsRanked) || (!element.required && value.length > 0 && !allItemsRanked)) {
+      setErrorMessage(t("errors.please_rank_all_items_before_submitting"));
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = (e: Event) => {
+    e.preventDefault();
+    if (!validateRequired()) return;
 
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
-    onChange({
-      [element.id]: sortedItems.map((item) => getLocalizedValue(item.label, languageCode)),
-    });
   };
 
   return (
-    <form onSubmit={handleSubmit} className="fb-w-full">
-      {isMediaAvailable ? <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} /> : null}
-      <Headline
+    <form onSubmit={handleSubmit} className="w-full">
+      <Ranking
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        options={options}
+        value={selectedValues}
+        onChange={handleChange}
         required={element.required}
+        errorMessage={errorMessage}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mt-4">
-        <fieldset>
-          <legend className="fb-sr-only">{t("common.ranking_items")}</legend>
-          <div className="fb-relative" ref={parent}>
-            {[...sortedItems, ...unsortedItems].map((item, idx) => {
-              if (!item) return null;
-              const isSorted = sortedItems.includes(item);
-              const isFirst = isSorted && idx === 0;
-              const isLast = isSorted && idx === sortedItems.length - 1;
-
-              return (
-                <div
-                  key={item.id}
-                  className={cn(
-                    "fb-flex fb-h-12 fb-items-center fb-mb-2 fb-border fb-border-border fb-transition-all fb-text-heading hover:fb-bg-input-bg-selected focus-within:fb-border-brand focus-within:fb-shadow-outline focus-within:fb-bg-input-bg-selected fb-rounded-custom fb-relative fb-cursor-pointer w-full focus:outline-none",
-                    isSorted ? "fb-bg-input-bg-selected" : "fb-bg-input-bg"
-                  )}>
-                  <button
-                    autoFocus={idx === 0 && autoFocusEnabled}
-                    tabIndex={0}
-                    onKeyDown={(e) => {
-                      if (e.key === " ") {
-                        e.preventDefault();
-                        handleItemClick(item);
-                      }
-                    }}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      handleItemClick(item);
-                    }}
-                    type="button"
-                    aria-label={t("common.select_for_ranking", {
-                      item: getLocalizedValue(item.label, languageCode),
-                    })}
-                    className="fb-flex fb-gap-x-4 fb-px-4 fb-items-center fb-grow fb-h-full group text-left focus:outline-none">
-                    <span
-                      className={cn(
-                        "fb-w-6 fb-grow-0 fb-h-6 fb-flex fb-items-center fb-justify-center fb-rounded-full fb-text-xs fb-font-semibold fb-border-brand fb-border",
-                        isSorted
-                          ? "fb-bg-brand fb-text-white fb-border"
-                          : "fb-border-dashed group-hover:fb-bg-white fb-text-transparent group-hover:fb-text-heading"
-                      )}>
-                      {(idx + 1).toString()}
-                    </span>
-                    <div className="fb-grow fb-shrink fb-font-medium fb-text-sm fb-text-start" dir="auto">
-                      {getLocalizedValue(item.label, languageCode)}
-                    </div>
-                  </button>
-                  {isSorted ? (
-                    <div className="fb-flex fb-flex-col fb-h-full fb-grow-0 fb-border-l fb-border-border">
-                      <button
-                        tabIndex={isFirst ? -1 : 0}
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleMove(item.id, "up");
-                        }}
-                        aria-label={t("common.move_up", {
-                          item: getLocalizedValue(item.label, languageCode),
-                        })}
-                        className={cn(
-                          "fb-px-2 fb-flex fb-flex-1 fb-items-center fb-justify-center",
-                          isFirst
-                            ? "fb-opacity-30 fb-cursor-not-allowed"
-                            : "hover:fb-bg-black/5 fb-rounded-tr-custom fb-transition-colors"
-                        )}
-                        disabled={isFirst}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="20"
-                          height="20"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          className="lucide lucide-chevron-up">
-                          <path d="m18 15-6-6-6 6" />
-                        </svg>
-                      </button>
-                      <button
-                        tabIndex={isLast ? -1 : 0}
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          handleMove(item.id, "down");
-                        }}
-                        className={cn(
-                          "fb-px-2 fb-flex-1 fb-border-t fb-border-border fb-flex fb-items-center fb-justify-center",
-                          isLast
-                            ? "fb-opacity-30 fb-cursor-not-allowed"
-                            : "hover:fb-bg-black/5 fb-rounded-br-custom fb-transition-colors"
-                        )}
-                        aria-label={t("common.move_down", {
-                          item: getLocalizedValue(item.label, languageCode),
-                        })}
-                        disabled={isLast}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="20"
-                          height="20"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          className="lucide lucide-chevron-down">
-                          <path d="m6 9 6 6 6-6" />
-                        </svg>
-                      </button>
-                    </div>
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
-        </fieldset>
-      </div>
-      {error ? <div className="fb-text-red-500 fb-mt-2 fb-text-sm">{error}</div> : null}
     </form>
   );
 }
diff --git a/packages/surveys/src/components/elements/rating-element.tsx b/packages/surveys/src/components/elements/rating-element.tsx
index a18de96872..88f565d444 100644
--- a/packages/surveys/src/components/elements/rating-element.tsx
+++ b/packages/surveys/src/components/elements/rating-element.tsx
@@ -1,25 +1,9 @@
-import { useEffect, useState } from "preact/hooks";
-import type { JSX } from "react";
+import { useState } from "preact/hooks";
+import { Rating } from "@formbricks/survey-ui";
 import { type TResponseData, type TResponseTtc } from "@formbricks/types/responses";
 import type { TSurveyRatingElement } from "@formbricks/types/surveys/elements";
-import { ElementMedia } from "@/components/general/element-media";
-import { Headline } from "@/components/general/headline";
 import { getLocalizedValue } from "@/lib/i18n";
 import { getUpdatedTtc, useTtc } from "@/lib/ttc";
-import { cn } from "@/lib/utils";
-import {
-  ConfusedFace,
-  FrowningFace,
-  GrinningFaceWithSmilingEyes,
-  GrinningSquintingFace,
-  NeutralFace,
-  PerseveringFace,
-  SlightlySmilingFace,
-  SmilingFaceWithSmilingEyes,
-  TiredFace,
-  WearyFace,
-} from "../general/smileys";
-import { Subheader } from "../general/subheader";
 
 interface RatingElementProps {
   element: TSurveyRatingElement;
@@ -43,324 +27,39 @@ export function RatingElement({
   currentElementId,
   dir = "auto",
 }: RatingElementProps) {
-  const [hoveredNumber, setHoveredNumber] = useState(0);
   const [startTime, setStartTime] = useState(performance.now());
-  const isMediaAvailable = element.imageUrl || element.videoUrl;
-  useTtc(element.id, ttc, setTtc, startTime, setStartTime, element.id === currentElementId);
+  const isCurrent = element.id === currentElementId;
+  useTtc(element.id, ttc, setTtc, startTime, setStartTime, isCurrent);
 
-  const handleSelect = (number: number) => {
-    onChange({ [element.id]: number });
+  const handleChange = (ratingValue: number) => {
+    onChange({ [element.id]: ratingValue });
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
 
-  useEffect(() => {
-    setHoveredNumber(0);
-  }, [element.id, setHoveredNumber]);
-
-  const getRatingNumberOptionColor = (range: number, idx: number) => {
-    if (range > 5) {
-      if (range - idx < 2) return "fb-bg-emerald-100";
-      if (range - idx < 4) return "fb-bg-orange-100";
-      return "fb-bg-rose-100";
-    } else if (range < 5) {
-      if (range - idx < 1) return "fb-bg-emerald-100";
-      if (range - idx < 2) return "fb-bg-orange-100";
-      return "fb-bg-rose-100";
-    }
-    if (range - idx < 2) return "fb-bg-emerald-100";
-    if (range - idx < 3) return "fb-bg-orange-100";
-    return "fb-bg-rose-100";
-  };
-
-  const handleFormSubmit = (e: Event) => {
+  const handleSubmit = (e: Event) => {
     e.preventDefault();
     const updatedTtcObj = getUpdatedTtc(ttc, element.id, performance.now() - startTime);
     setTtc(updatedTtcObj);
   };
 
-  const handleMouseOver = (number: number) => () => {
-    setHoveredNumber(number);
-  };
-
-  const handleMouseLeave = () => {
-    setHoveredNumber(0);
-  };
-
-  const handleFocus = (number: number) => () => {
-    setHoveredNumber(number);
-  };
-
-  const handleBlur = () => {
-    setHoveredNumber(0);
-  };
-
-  const getNumberLabelClassName = (number: number, totalLength: number): string => {
-    const isSelected = value === number;
-    const isLast = totalLength === number;
-    const isFirst = number === 1;
-    const isHovered = hoveredNumber === number;
-
-    return cn(
-      isSelected
-        ? "fb-bg-accent-selected-bg fb-border-border-highlight fb-z-10 fb-border"
-        : "fb-border-border",
-      isLast ? (dir === "rtl" ? "fb-rounded-l-custom fb-border-l" : "fb-rounded-r-custom fb-border-r") : "",
-      isFirst ? (dir === "rtl" ? "fb-rounded-r-custom fb-border-r" : "fb-rounded-l-custom fb-border-l") : "",
-      isHovered ? "fb-bg-accent-bg" : "",
-      element.isColorCodingEnabled ? "fb-min-h-[47px]" : "fb-min-h-[41px]",
-      "fb-text-heading focus:fb-border-brand fb-relative fb-flex fb-w-full fb-cursor-pointer fb-items-center fb-justify-center fb-overflow-hidden fb-border-b fb-border-l fb-border-t focus:fb-border-2 focus:fb-outline-none"
-    );
-  };
-
-  const getStarLabelClassName = (number: number): string => {
-    const isActive = number <= hoveredNumber || number <= (value ?? 0);
-    const isHovered = hoveredNumber === number;
-
-    return cn(
-      isActive || isHovered ? "fb-text-amber-400" : "fb-text-[#8696AC]",
-      "fb-relative fb-flex fb-max-h-16 fb-min-h-9 fb-cursor-pointer fb-justify-center focus:fb-outline-none"
-    );
-  };
-
-  const getSmileyLabelClassName = (number: number): string => {
-    const isActive = value === number || hoveredNumber === number;
-
-    return cn(
-      "fb-relative fb-flex fb-max-h-16 fb-min-h-9 fb-w-full fb-cursor-pointer fb-justify-center",
-      isActive
-        ? "fb-stroke-rating-selected fb-text-rating-selected"
-        : "fb-stroke-heading fb-text-heading focus:fb-border-accent-bg focus:fb-border-2 focus:fb-outline-none"
-    );
-  };
-
-  const getRatingInputId = (number: number) => `${element.id}-${number}`;
-
-  const handleKeyDown = (number: number) => (e: KeyboardEvent) => {
-    if (e.key === " ") {
-      e.preventDefault();
-      const inputId = getRatingInputId(number);
-      document.getElementById(inputId)?.click();
-      document.getElementById(inputId)?.focus();
-    }
-  };
-
-  const renderNumberScale = (number: number, totalLength: number) => {
-    return (
-      <label
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        onKeyDown={handleKeyDown(number)}
-        className={getNumberLabelClassName(number, totalLength)}>
-        {element.isColorCodingEnabled && (
-          <div
-            className={`fb-absolute fb-left-0 fb-top-0 fb-h-[6px] fb-w-full ${getRatingNumberOptionColor(element.range, number)}`}
-          />
-        )}
-        <input
-          type="radio"
-          id={getRatingInputId(number)}
-          name="rating"
-          value={number}
-          className="fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
-          onClick={() => {
-            handleSelect(number);
-          }}
-          required={element.required}
-          checked={value === number}
-          tabIndex={-1}
-        />
-        {number}
-      </label>
-    );
-  };
-
-  const renderStarScale = (number: number) => {
-    return (
-      <label
-        aria-label={`Rate ${number} out of ${element.range}`}
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        onKeyDown={handleKeyDown(number)}
-        className={getStarLabelClassName(number)}
-        onFocus={handleFocus(number)}
-        onBlur={handleBlur}>
-        <input
-          type="radio"
-          id={getRatingInputId(number)}
-          name="rating"
-          value={number}
-          className="fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
-          onClick={() => {
-            handleSelect(number);
-          }}
-          required={element.required}
-          checked={value === number}
-          tabIndex={-1}
-        />
-        <div className="fb-h-full fb-w-full fb-max-w-[74px] fb-object-contain">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              fillRule="evenodd"
-              d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
-            />
-          </svg>
-        </div>
-      </label>
-    );
-  };
-
-  const renderSmileyScale = (number: number, idx: number) => {
-    return (
-      <label
-        aria-label={`Rate ${number} out of ${element.range}`}
-        tabIndex={0} // NOSONAR - needed for keyboard navigation through options
-        className={getSmileyLabelClassName(number)}
-        onKeyDown={handleKeyDown(number)}
-        onFocus={handleFocus(number)}
-        onBlur={handleBlur}>
-        <input
-          type="radio"
-          id={getRatingInputId(number)}
-          name="rating"
-          value={number}
-          className="fb-absolute fb-left-0 fb-h-full fb-w-full fb-cursor-pointer fb-opacity-0"
-          onClick={() => {
-            handleSelect(number);
-          }}
-          required={element.required}
-          checked={value === number}
-          tabIndex={-1}
-        />
-        <div className="fb-h-full fb-w-full fb-max-w-[74px] fb-object-contain">
-          <RatingSmiley
-            active={value === number || hoveredNumber === number}
-            idx={idx}
-            range={element.range}
-            addColors={element.isColorCodingEnabled}
-          />
-        </div>
-      </label>
-    );
-  };
-
-  const renderRatingOption = (number: number, idx: number, totalLength: number) => {
-    return (
-      <span
-        key={number}
-        onMouseOver={handleMouseOver(number)}
-        onMouseLeave={handleMouseLeave}
-        onFocus={handleFocus(number)}
-        className="fb-bg-survey-bg fb-flex-1 fb-text-center fb-text-sm">
-        {element.scale === "number" && renderNumberScale(number, totalLength)}
-        {element.scale === "star" && renderStarScale(number)}
-        {element.scale !== "number" && element.scale !== "star" && renderSmileyScale(number, idx)}
-      </span>
-    );
-  };
-
   return (
-    <form key={element.id} onSubmit={handleFormSubmit} className="fb-w-full">
-      {isMediaAvailable && <ElementMedia imgUrl={element.imageUrl} videoUrl={element.videoUrl} />}
-      <Headline
+    <form key={element.id} onSubmit={handleSubmit} className="w-full">
+      <Rating
+        elementId={element.id}
+        inputId={element.id}
         headline={getLocalizedValue(element.headline, languageCode)}
-        elementId={element.id}
+        description={element.subheader ? getLocalizedValue(element.subheader, languageCode) : undefined}
+        scale={element.scale}
+        range={element.range}
+        value={value}
+        onChange={handleChange}
+        lowerLabel={getLocalizedValue(element.lowerLabel, languageCode)}
+        upperLabel={getLocalizedValue(element.upperLabel, languageCode)}
+        colorCoding={element.isColorCodingEnabled}
         required={element.required}
+        dir={dir}
       />
-      <Subheader
-        subheader={element.subheader ? getLocalizedValue(element.subheader, languageCode) : ""}
-        elementId={element.id}
-      />
-      <div className="fb-mb-4 fb-mt-6 fb-flex fb-items-center fb-justify-center">
-        <fieldset className="fb-w-full">
-          <legend className="fb-sr-only">Choices</legend>
-          <div className="fb-flex fb-w-full">
-            {Array.from({ length: element.range }, (_, i) => i + 1).map((number, i, a) =>
-              renderRatingOption(number, i, a.length)
-            )}
-          </div>
-          <div className="fb-text-subheading fb-mt-8 fb-flex fb-justify-between fb-px-1.5 fb-text-xs fb-leading-6 fb-gap-8">
-            <p className="fb-max-w-[50%]" dir="auto">
-              {getLocalizedValue(element.lowerLabel, languageCode)}
-            </p>
-            <p className="fb-max-w-[50%]" dir="auto">
-              {getLocalizedValue(element.upperLabel, languageCode)}
-            </p>
-          </div>
-        </fieldset>
-      </div>
     </form>
   );
 }
-
-interface RatingSmileyProps {
-  active: boolean;
-  idx: number;
-  range: number;
-  addColors?: boolean;
-}
-
-const getSmileyColor = (range: number, idx: number) => {
-  if (range > 5) {
-    if (range - idx < 3) return "fb-fill-emerald-100";
-    if (range - idx < 5) return "fb-fill-orange-100";
-    return "fb-fill-rose-100";
-  } else if (range < 5) {
-    if (range - idx < 2) return "fb-fill-emerald-100";
-    if (range - idx < 3) return "fb-fill-orange-100";
-    return "fb-fill-rose-100";
-  }
-  if (range - idx < 3) return "fb-fill-emerald-100";
-  if (range - idx < 4) return "fb-fill-orange-100";
-  return "fb-fill-rose-100";
-};
-
-const getActiveSmileyColor = (range: number, idx: number) => {
-  if (range > 5) {
-    if (range - idx < 3) return "fb-fill-emerald-300";
-    if (range - idx < 5) return "fb-fill-orange-300";
-    return "fb-fill-rose-300";
-  } else if (range < 5) {
-    if (range - idx < 2) return "fb-fill-emerald-300";
-    if (range - idx < 3) return "fb-fill-orange-300";
-    return "fb-fill-rose-300";
-  }
-  if (range - idx < 3) return "fb-fill-emerald-300";
-  if (range - idx < 4) return "fb-fill-orange-300";
-  return "fb-fill-rose-300";
-};
-
-const getSmiley = (iconIdx: number, idx: number, range: number, active: boolean, addColors: boolean) => {
-  const activeColor = addColors ? getActiveSmileyColor(range, idx) : "fb-fill-rating-fill";
-  const inactiveColor = addColors ? getSmileyColor(range, idx) : "fb-fill-none";
-
-  const icons = [
-    <TiredFace key="tired-face" className={active ? activeColor : inactiveColor} />,
-    <WearyFace key="weary-face" className={active ? activeColor : inactiveColor} />,
-    <PerseveringFace key="persevering-face" className={active ? activeColor : inactiveColor} />,
-    <FrowningFace key="frowning-face" className={active ? activeColor : inactiveColor} />,
-    <ConfusedFace key="confused-face" className={active ? activeColor : inactiveColor} />,
-    <NeutralFace key="neutral-face" className={active ? activeColor : inactiveColor} />,
-    <SlightlySmilingFace key="slightly-smiling-face" className={active ? activeColor : inactiveColor} />,
-    <SmilingFaceWithSmilingEyes
-      key="smiling-face-with-smiling-eyes"
-      className={active ? activeColor : inactiveColor}
-    />,
-    <GrinningFaceWithSmilingEyes
-      key="grinning-face-with-smiling-eyes"
-      className={active ? activeColor : inactiveColor}
-    />,
-    <GrinningSquintingFace key="grinning-squinting-face" className={active ? activeColor : inactiveColor} />,
-  ];
-  return icons[iconIdx];
-};
-
-export const RatingSmiley = ({ active, idx, range, addColors = false }: RatingSmileyProps): JSX.Element => {
-  let iconsIdx: number[] = [];
-  if (range === 10) iconsIdx = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-  else if (range === 7) iconsIdx = [1, 3, 4, 5, 6, 8, 9];
-  else if (range === 6) iconsIdx = [0, 2, 4, 5, 7, 9];
-  else if (range === 5) iconsIdx = [3, 4, 5, 6, 7];
-  else if (range === 4) iconsIdx = [4, 5, 6, 7];
-  else if (range === 3) iconsIdx = [4, 5, 7];
-
-  return getSmiley(iconsIdx[idx], idx, range, active, addColors);
-};
diff --git a/packages/surveys/src/components/general/auto-close-progress-bar.tsx b/packages/surveys/src/components/general/auto-close-progress-bar.tsx
index 3c6a2277ff..817628a9ed 100644
--- a/packages/surveys/src/components/general/auto-close-progress-bar.tsx
+++ b/packages/surveys/src/components/general/auto-close-progress-bar.tsx
@@ -4,10 +4,10 @@ interface AutoCloseProgressBarProps {
 
 export function AutoCloseProgressBar({ autoCloseTimeout }: AutoCloseProgressBarProps) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-overflow-hidden">
+    <div className="bg-accent-bg h-2 w-full overflow-hidden">
       <div
         key={autoCloseTimeout}
-        className="fb-bg-brand fb-z-20 fb-h-2"
+        className="bg-brand z-20 h-2"
         style={{
           animation: `shrink-width-to-zero ${autoCloseTimeout.toString()}s linear forwards`,
           width: "100%",
diff --git a/packages/surveys/src/components/general/block-conditional.tsx b/packages/surveys/src/components/general/block-conditional.tsx
index 26f4edb094..da78fbeeba 100644
--- a/packages/surveys/src/components/general/block-conditional.tsx
+++ b/packages/surveys/src/components/general/block-conditional.tsx
@@ -255,11 +255,11 @@ export function BlockConditional({
   };
 
   return (
-    <div className={cn("fb-space-y-6", fullSizeCards ? "fb-h-full" : "")}>
+    <div className={cn("space-y-6", fullSizeCards ? "h-full" : "")}>
       {/* Scrollable container for the entire block */}
       <ScrollableContainer fullSizeCards={fullSizeCards}>
-        <div className="fb-space-y-6">
-          <div className="fb-space-y-6">
+        <div className="space-y-6">
+          <div className="space-y-6">
             {block.elements.map((element, index) => {
               const isFirstElement = index === 0;
 
@@ -294,8 +294,8 @@ export function BlockConditional({
 
           <div
             className={cn(
-              "fb-flex fb-w-full fb-flex-row-reverse fb-justify-between",
-              fullSizeCards ? "fb-sticky fb-bottom-0 fb-bg-white" : ""
+              "flex w-full flex-row-reverse justify-between",
+              fullSizeCards ? "sticky bottom-0 bg-white" : ""
             )}>
             <div>
               <SubmitButton
diff --git a/packages/surveys/src/components/general/cal-embed.tsx b/packages/surveys/src/components/general/cal-embed.tsx
index 2ff1295f28..8b01d52933 100644
--- a/packages/surveys/src/components/general/cal-embed.tsx
+++ b/packages/surveys/src/components/general/cal-embed.tsx
@@ -48,14 +48,14 @@ export function CalEmbed({ element, onSuccessfulBooking }: CalEmbedProps) {
     });
     cal("init", { calOrigin: element.calHost ? `https://${element.calHost}` : "https://cal.com" });
     cal("inline", {
-      elementOrSelector: "#fb-cal-embed",
+      elementOrSelector: "#cal-embed",
       calLink: element.calUserName,
     });
   }, [cal, element.calHost, element.calUserName]);
 
   return (
-    <div className="fb-relative fb-mt-4 fb-overflow-auto">
-      <div id="fb-cal-embed" className={cn("fb-border-border fb-rounded-lg fb-border")} />
+    <div className="relative mt-4 overflow-auto">
+      <div id="cal-embed" className={cn("border-border rounded-lg border")} />
     </div>
   );
 }
diff --git a/packages/surveys/src/components/general/element-media.tsx b/packages/surveys/src/components/general/element-media.tsx
index 01dc0bf045..0187bdd95b 100644
--- a/packages/surveys/src/components/general/element-media.tsx
+++ b/packages/surveys/src/components/general/element-media.tsx
@@ -31,19 +31,16 @@ export function ElementMedia({ imgUrl, videoUrl, altText = "Image" }: ElementMed
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <div className="fb-group/image fb-relative fb-mb-6 fb-block fb-min-h-40 fb-rounded-md">
+    <div className="group/image relative mb-6 block min-h-40 rounded-md">
       {isLoading ? (
-        <div className="fb-absolute fb-inset-auto fb-flex fb-h-full fb-w-full fb-animate-pulse fb-items-center fb-justify-center fb-rounded-md fb-bg-slate-200" />
+        <div className="absolute inset-auto flex h-full w-full animate-pulse items-center justify-center rounded-md bg-slate-200" />
       ) : null}
       {imgUrl ? (
         <img
           key={imgUrl}
           src={imgUrl}
           alt={altText}
-          className={cn(
-            "fb-rounded-custom fb-max-h-[40dvh] fb-mx-auto fb-object-contain",
-            isLoading ? "fb-opacity-0" : ""
-          )}
+          className={cn("rounded-custom mx-auto max-h-[40dvh] object-contain", isLoading ? "opacity-0" : "")}
           onLoad={() => {
             setIsLoading(false);
           }}
@@ -53,13 +50,13 @@ export function ElementMedia({ imgUrl, videoUrl, altText = "Image" }: ElementMed
         />
       ) : null}
       {videoUrlWithParams ? (
-        <div className="fb-relative">
-          <div className="fb-rounded-custom fb-bg-black">
+        <div className="relative">
+          <div className="rounded-custom bg-black">
             <iframe
               src={videoUrlWithParams}
               title={t("common.question_video")}
               frameBorder="0"
-              className={cn("fb-rounded-custom fb-aspect-video fb-w-full", isLoading ? "fb-opacity-0" : "")}
+              className={cn("rounded-custom aspect-video w-full", isLoading ? "opacity-0" : "")}
               onLoad={() => {
                 setIsLoading(false);
               }}
@@ -77,7 +74,7 @@ export function ElementMedia({ imgUrl, videoUrl, altText = "Image" }: ElementMed
         target="_blank"
         rel="noreferrer"
         aria-label={t("common.open_in_new_tab")}
-        className="fb-absolute fb-bottom-2 fb-right-2 fb-flex fb-items-center fb-gap-2 fb-rounded-md fb-bg-slate-800 fb-bg-opacity-40 fb-p-1.5 fb-text-white fb-opacity-0 fb-backdrop-blur-lg fb-transition fb-duration-300 fb-ease-in-out hover:fb-bg-opacity-65 group-hover/image:fb-opacity-100">
+        className="absolute right-2 bottom-2 flex items-center gap-2 rounded-md bg-slate-800/40 p-1.5 text-white opacity-0 backdrop-blur-lg transition duration-300 ease-in-out group-hover/image:opacity-100 hover:bg-slate-800/65">
         {imgUrl ? <ImageDownIcon size={20} /> : <ExpandIcon size={20} />}
       </a>
     </div>
diff --git a/packages/surveys/src/components/general/ending-card.tsx b/packages/surveys/src/components/general/ending-card.tsx
index c19dc76aae..f54e1a674d 100644
--- a/packages/surveys/src/components/general/ending-card.tsx
+++ b/packages/surveys/src/components/general/ending-card.tsx
@@ -48,21 +48,21 @@ export function EndingCard({
     ) : null;
 
   const checkmark = (
-    <div className="fb-text-brand fb-flex fb-flex-col fb-items-center fb-justify-center">
+    <div className="text-brand flex flex-col items-center justify-center">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         strokeWidth="1.5"
         stroke="currentColor"
-        className="fb-h-24 fb-w-24">
+        className="h-24 w-24">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
           d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
         />
       </svg>
-      <span className="fb-bg-brand fb-mb-[10px] fb-inline-block fb-h-1 fb-w-16 fb-rounded-[100%]" />
+      <span className="bg-brand mb-[10px] inline-block h-1 w-16 rounded-[100%]" />
     </div>
   );
 
@@ -115,7 +115,7 @@ export function EndingCard({
 
   return (
     <ScrollableContainer fullSizeCards={fullSizeCards}>
-      <div className="fb-text-center">
+      <div className="text-center">
         {isResponseSendingFinished ? (
           <>
             {endingCard.type === "endScreen" && (
@@ -140,7 +140,7 @@ export function EndingCard({
                     elementId="EndingCard"
                   />
                   {endingCard.buttonLabel ? (
-                    <div className="fb-mt-6 fb-flex fb-w-full fb-flex-col fb-items-center fb-justify-center fb-space-y-4">
+                    <div className="mt-6 flex w-full flex-col items-center justify-center space-y-4">
                       <SubmitButton
                         buttonLabel={replaceRecallInfo(
                           getLocalizedValue(endingCard.buttonLabel, languageCode),
@@ -171,7 +171,7 @@ export function EndingCard({
                     />
                   </div>
                 ) : (
-                  <div className="fb-my-3">
+                  <div className="my-3">
                     <LoadingSpinner />
                   </div>
                 )}
@@ -180,10 +180,10 @@ export function EndingCard({
           </>
         ) : (
           <>
-            <div className="fb-my-3">
+            <div className="my-3">
               <LoadingSpinner />
             </div>
-            <h1 className="fb-text-brand">{t("common.sending_responses")}</h1>
+            <h1 className="text-brand">{t("common.sending_responses")}</h1>
           </>
         )}
       </div>
diff --git a/packages/surveys/src/components/general/error-component.tsx b/packages/surveys/src/components/general/error-component.tsx
index 1254ae0aa1..cb0ca22e2b 100644
--- a/packages/surveys/src/components/general/error-component.tsx
+++ b/packages/surveys/src/components/general/error-component.tsx
@@ -21,14 +21,9 @@ export function ErrorComponent({ errorType }: ErrorComponentProps) {
   const error = errorData[errorType];
 
   return (
-    <div
-      className="fb-flex fb-flex-col fb-bg-white fb-p-8 fb-text-center fb-items-center"
-      role="alert"
-      aria-live="assertive">
-      <span className="fb-mb-1.5 fb-text-base fb-font-bold fb-leading-6 fb-text-slate-900">
-        {error.title}
-      </span>
-      <p className="fb-max-w-lg fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600">{error.message}</p>
+    <div className="flex flex-col items-center bg-white p-8 text-center" role="alert" aria-live="assertive">
+      <span className="mb-1.5 text-base leading-6 font-bold text-slate-900">{error.title}</span>
+      <p className="max-w-lg text-sm leading-6 font-normal text-slate-600">{error.message}</p>
     </div>
   );
 }
diff --git a/packages/surveys/src/components/general/file-input.tsx b/packages/surveys/src/components/general/file-input.tsx
deleted file mode 100644
index 9ffaef5001..0000000000
--- a/packages/surveys/src/components/general/file-input.tsx
+++ /dev/null
@@ -1,443 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
-import { type JSXInternal } from "preact/src/jsx";
-import { useTranslation } from "react-i18next";
-import { type TJsFileUploadParams } from "@formbricks/types/js";
-import { TAllowedFileExtension, type TUploadFileConfig, mimeTypes } from "@formbricks/types/storage";
-import { FILE_PICK_EVENT } from "@/lib/constants";
-import { getOriginalFileNameFromUrl } from "@/lib/storage";
-import { getMimeType, isFulfilled, isRejected } from "@/lib/utils";
-
-interface FileInputProps {
-  allowedFileExtensions?: TAllowedFileExtension[];
-  surveyId: string | undefined;
-  onUploadCallback: (uploadedUrls: string[]) => void;
-  onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
-  fileUrls: string[] | undefined;
-  maxSizeInMB?: number;
-  allowMultipleFiles?: boolean;
-  htmlFor?: string;
-}
-
-const FILE_LIMIT = 25;
-
-export function FileInput({
-  allowedFileExtensions,
-  surveyId,
-  onFileUpload,
-  onUploadCallback,
-  fileUrls,
-  maxSizeInMB,
-  allowMultipleFiles,
-  htmlFor = "",
-}: Readonly<FileInputProps>) {
-  const { t } = useTranslation();
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
-  const [parent] = useAutoAnimate();
-
-  // Helper function to filter duplicate files
-  const filterDuplicateFiles = useCallback(
-    <T extends { name: string }>(
-      files: T[],
-      checkAgainstSelected: boolean = true
-    ): {
-      filteredFiles: T[];
-      duplicateFiles: T[];
-    } => {
-      const existingFileNames = fileUrls ? fileUrls.map(getOriginalFileNameFromUrl) : [];
-
-      const duplicateFiles = files.filter(
-        (file) =>
-          existingFileNames.includes(file.name) ||
-          (checkAgainstSelected && selectedFiles.some((selectedFile) => selectedFile.name === file.name))
-      );
-
-      const filteredFiles = files.filter(
-        (file) =>
-          !existingFileNames.includes(file.name) &&
-          (!checkAgainstSelected || !selectedFiles.some((selectedFile) => selectedFile.name === file.name))
-      );
-
-      if (duplicateFiles.length > 0) {
-        const duplicateNames = duplicateFiles.map((file) => file.name).join(", ");
-        alert(t("errors.file_input.duplicate_files", { duplicateNames }));
-      }
-
-      return { filteredFiles, duplicateFiles };
-    },
-    [fileUrls, selectedFiles, t]
-  );
-
-  // Helper function to filter files by size
-  const filterFilesBySize = useCallback(
-    (files: { name: string; type: string; base64: string }[]) => {
-      if (!maxSizeInMB) return { validFiles: files, rejectedFiles: [] };
-
-      const validFiles: typeof files = [];
-      const rejectedFiles: string[] = [];
-
-      for (const file of files) {
-        const base64SizeInKB = (file.base64.length * 0.75) / 1024;
-        if (base64SizeInKB > maxSizeInMB * 1024) {
-          rejectedFiles.push(file.name);
-        } else {
-          validFiles.push(file);
-        }
-      }
-
-      return { validFiles, rejectedFiles };
-    },
-    [maxSizeInMB]
-  );
-
-  // Helper function to handle upload errors
-  const handleUploadErrors = useCallback((rejected: PromiseRejectedResult[]) => {
-    if (rejected.length === 0) return;
-
-    const reason = rejected[0].reason;
-    if (reason?.name === "FileTooLargeError") {
-      alert(reason.message);
-    } else if (reason?.name === "InvalidFileNameError") {
-      alert("Invalid file name. Please rename your file and try again.");
-    } else {
-      alert("Upload failed! Please try again.");
-    }
-  }, []);
-
-  // Listen for the native file-upload event dispatched via window.formbricksSurveys.onFilePick
-  useEffect(() => {
-    const handleNativeFileUpload = async (
-      event: CustomEvent<{ name: string; type: string; base64: string }[]>
-    ) => {
-      const filesFromNative = event.detail;
-
-      try {
-        setIsUploading(true);
-
-        // Filter files by size
-        const { validFiles, rejectedFiles } = filterFilesBySize(filesFromNative);
-
-        // Check for duplicate files
-        const { filteredFiles: nonDuplicateFiles } = filterDuplicateFiles(validFiles, false);
-
-        // Show size rejection alert
-        if (rejectedFiles.length > 0) {
-          const fileNames = rejectedFiles.join(", ");
-          alert(t("errors.file_input.file_size_exceeded", { fileNames, maxSizeInMB }));
-        }
-
-        // Exit early if no files to upload
-        if (nonDuplicateFiles.length === 0) return;
-
-        // Upload files
-        const results = await Promise.allSettled(
-          nonDuplicateFiles.map((file) => onFileUpload(file, { allowedFileExtensions, surveyId }))
-        );
-
-        const fulfilled = results.filter(isFulfilled).map((r) => r.value);
-        const rejected = results.filter(isRejected);
-
-        // Update file URLs on success
-        if (fulfilled.length) {
-          onUploadCallback(fileUrls ? [...fileUrls, ...fulfilled] : fulfilled);
-        }
-
-        // Handle upload errors
-        handleUploadErrors(rejected);
-      } catch (err) {
-        console.error(`Error uploading native file.`);
-        alert(t("errors.file_input.upload_failed"));
-      } finally {
-        setIsUploading(false);
-      }
-    };
-
-    window.addEventListener(FILE_PICK_EVENT, handleNativeFileUpload as unknown as EventListener);
-    return () => {
-      window.removeEventListener(FILE_PICK_EVENT, handleNativeFileUpload as unknown as EventListener);
-    };
-  }, [
-    allowedFileExtensions,
-    fileUrls,
-    maxSizeInMB,
-    onFileUpload,
-    onUploadCallback,
-    surveyId,
-    filterDuplicateFiles,
-    t,
-    filterFilesBySize,
-    handleUploadErrors,
-  ]);
-
-  const toBase64 = (file: File) =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = reject;
-    });
-
-  const validateFileSize = async (file: File): Promise<boolean> => {
-    if (maxSizeInMB) {
-      const fileBuffer = await file.arrayBuffer();
-      const bufferKB = fileBuffer.byteLength / 1024;
-      if (bufferKB > maxSizeInMB * 1024) {
-        alert(t("errors.file_input.file_size_exceeded_alert", { maxSizeInMB }));
-        return false;
-      }
-    }
-    return true;
-  };
-
-  // Helper function to validate file limits
-  const validateFileLimits = useCallback(
-    (fileArray: File[]) => {
-      if (!allowMultipleFiles && fileArray.length > 1) {
-        alert(t("errors.file_input.only_one_file_can_be_uploaded_at_a_time"));
-        return false;
-      }
-
-      if (allowMultipleFiles && selectedFiles.length + fileArray.length > FILE_LIMIT) {
-        alert(t("errors.file_input.you_can_only_upload_a_maximum_of_files", { FILE_LIMIT }));
-        return false;
-      }
-
-      return true;
-    },
-    [allowMultipleFiles, selectedFiles.length, t]
-  );
-
-  // Helper function to validate file extensions
-  const validateFileExtensions = useCallback(
-    (files: File[]) => {
-      return files.filter((file) => {
-        const fileExtension = file.name.split(".").pop()?.toLowerCase() as TAllowedFileExtension;
-        if (!fileExtension || fileExtension === file.name.toLowerCase()) return false;
-
-        if (allowedFileExtensions) {
-          return allowedFileExtensions.includes(fileExtension);
-        }
-
-        return Object.keys(mimeTypes).includes(fileExtension);
-      });
-    },
-    [allowedFileExtensions]
-  );
-
-  // Helper function to convert files to base64 and upload
-  const processAndUploadFiles = useCallback(
-    async (files: File[]) => {
-      const filePromises = files.map(async (file) => {
-        const base64 = await toBase64(file);
-        return { name: file.name, type: file.type, base64: base64 as string };
-      });
-
-      const filesToUpload = await Promise.all(filePromises);
-      const uploadPromises = filesToUpload.map((file) =>
-        onFileUpload(file, { allowedFileExtensions, surveyId })
-      );
-
-      const uploadedFiles = await Promise.allSettled(uploadPromises);
-      const rejectedFiles = uploadedFiles.filter(isRejected);
-      const uploadedFilesUrl = uploadedFiles.filter(isFulfilled).map((url) => url.value);
-
-      setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
-      onUploadCallback(fileUrls ? [...fileUrls, ...uploadedFilesUrl] : uploadedFilesUrl);
-
-      handleUploadErrors(rejectedFiles);
-    },
-    [onFileUpload, allowedFileExtensions, surveyId, fileUrls, onUploadCallback, handleUploadErrors]
-  );
-
-  const handleFileSelection = async (files: FileList) => {
-    const fileArray = Array.from(files);
-
-    if (!validateFileLimits(fileArray)) return;
-
-    const { filteredFiles: nonDuplicateFiles } = filterDuplicateFiles(fileArray);
-    if (nonDuplicateFiles.length === 0) return;
-
-    const validFiles = validateFileExtensions(nonDuplicateFiles);
-    if (!validFiles.length) {
-      alert(t("errors.file_input.no_valid_file_types_selected"));
-      return;
-    }
-
-    const sizeValidatedFiles: File[] = [];
-    for (const validFile of validFiles) {
-      const isAllowed = await validateFileSize(validFile);
-      if (isAllowed) {
-        sizeValidatedFiles.push(validFile);
-      }
-    }
-
-    if (sizeValidatedFiles.length === 0) return;
-
-    try {
-      setIsUploading(true);
-      await processAndUploadFiles(sizeValidatedFiles);
-    } catch (err: any) {
-      console.error("error in uploading file: ", err);
-      alert(t("errors.file_input.upload_failed"));
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleDragOver = (e: JSXInternal.TargetedDragEvent<HTMLLabelElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // @ts-expect-error -- TS does not recognize dataTransfer
-    e.dataTransfer.dropEffect = "copy";
-  };
-
-  const handleDrop = async (e: JSXInternal.TargetedDragEvent<HTMLLabelElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // @ts-expect-error -- TS does not recognize dataTransfer
-    await handleFileSelection(e.dataTransfer.files);
-  };
-
-  const handleDeleteFile = (index: number, event: JSXInternal.TargetedMouseEvent<SVGSVGElement>) => {
-    event.stopPropagation();
-    setSelectedFiles((prevFiles) => {
-      const newFiles = [...prevFiles];
-      newFiles.splice(index, 1);
-      return newFiles;
-    });
-    if (fileUrls) {
-      const updatedFileUrls = [...fileUrls];
-      updatedFileUrls.splice(index, 1);
-      onUploadCallback(updatedFileUrls);
-    }
-  };
-
-  const showUploader = useMemo(() => {
-    if (isUploading) return false;
-    if (allowMultipleFiles) return true;
-    return !(fileUrls && fileUrls.length > 0);
-  }, [allowMultipleFiles, fileUrls, isUploading]);
-
-  const uniqueHtmlFor = useMemo(() => `selectedFile-${htmlFor}`, [htmlFor]);
-
-  const mimeTypeForAllowedFileExtensions = useMemo(() => {
-    return allowedFileExtensions?.map((ext) => getMimeType(ext)).join(",");
-  }, [allowedFileExtensions]);
-
-  return (
-    <div className="fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-relative fb-mt-3 fb-flex fb-w-full fb-flex-col fb-justify-center fb-items-center fb-rounded-lg fb-border-2 fb-border-dashed dark:fb-border-slate-600 dark:fb-bg-slate-700 dark:hover:fb-border-slate-500 dark:hover:fb-bg-slate-800">
-      <div ref={parent}>
-        {fileUrls?.map((fileUrl, index) => {
-          const fileName = getOriginalFileNameFromUrl(fileUrl);
-          return (
-            <div
-              key={index}
-              aria-label={t("common.you_have_successfully_uploaded_the_file", { fileName })}
-              tabIndex={0}
-              className="fb-bg-input-bg-selected fb-border-border fb-relative fb-m-2 fb-rounded-md fb-border">
-              <div className="fb-absolute fb-right-0 fb-top-0 fb-m-2">
-                <button
-                  type="button"
-                  aria-label={`${t("common.delete_file")} ${fileName}`}
-                  className="fb-bg-survey-bg fb-flex fb-h-5 fb-w-5 fb-cursor-pointer fb-items-center fb-justify-center fb-rounded-md">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 26 26"
-                    strokeWidth={1}
-                    stroke="currentColor"
-                    className="fb-text-heading fb-h-5"
-                    onClick={(e) => {
-                      handleDeleteFile(index, e);
-                    }}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 9l10 10m0-10L9 19" />
-                  </svg>
-                </button>
-              </div>
-              <div className="fb-flex fb-flex-col fb-items-center fb-justify-center fb-p-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="fb-text-heading fb-h-6"
-                  aria-hidden="true">
-                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
-                  <polyline points="14 2 14 8 20 8" />
-                </svg>
-                <p className="fb-text-heading fb-mt-1 fb-w-full fb-overflow-hidden fb-overflow-ellipsis fb-whitespace-nowrap fb-px-2 fb-text-center fb-text-sm">
-                  {fileName}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div>
-        {isUploading ? (
-          <div className="fb-inset-0 fb-flex fb-animate-pulse fb-items-center fb-justify-center fb-rounded-lg fb-py-4">
-            <label htmlFor={uniqueHtmlFor} className="fb-text-subheading fb-text-sm fb-font-medium">
-              {t("common.uploading")}...
-            </label>
-          </div>
-        ) : null}
-
-        <label htmlFor={uniqueHtmlFor} onDragOver={handleDragOver} onDrop={handleDrop}>
-          {showUploader ? (
-            <button
-              type="button"
-              className="focus:fb-outline-brand fb-flex fb-flex-col fb-items-center fb-justify-center fb-py-6 hover:fb-cursor-pointer w-full"
-              aria-label={t("common.upload_files_by_clicking_or_dragging_them_here")}
-              onClick={() => document.getElementById(uniqueHtmlFor)?.click()}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="fb-text-placeholder fb-h-6"
-                aria-hidden="true">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-                />
-              </svg>
-              <span
-                className="fb-text-placeholder fb-mt-2 fb-text-sm dark:fb-text-slate-400"
-                id={`${uniqueHtmlFor}-label`}>
-                {t("common.click_or_drag_to_upload_files")}
-              </span>
-              <input
-                type="file"
-                id={uniqueHtmlFor}
-                name={uniqueHtmlFor}
-                accept={mimeTypeForAllowedFileExtensions}
-                className="fb-hidden"
-                onChange={async (e) => {
-                  const inputElement = e.target as HTMLInputElement;
-                  if (inputElement.files) {
-                    await handleFileSelection(inputElement.files);
-                  }
-                }}
-                multiple={allowMultipleFiles}
-                aria-label={t("common.file_upload")}
-                aria-describedby={`${uniqueHtmlFor}-label`}
-                data-accept-multiple={allowMultipleFiles}
-                data-accept-extensions={mimeTypeForAllowedFileExtensions}
-              />
-            </button>
-          ) : null}
-        </label>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/surveys/src/components/general/formbricks-branding.tsx b/packages/surveys/src/components/general/formbricks-branding.tsx
index f97a199546..423291eaf9 100644
--- a/packages/surveys/src/components/general/formbricks-branding.tsx
+++ b/packages/surveys/src/components/general/formbricks-branding.tsx
@@ -3,16 +3,16 @@ import { useTranslation } from "react-i18next";
 export function FormbricksBranding() {
   const { t } = useTranslation();
   return (
-    <span className="fb-flex fb-justify-center">
+    <span className="flex justify-center">
       <a
         href="https://formbricks.com?utm_source=survey_branding"
         target="_blank"
         tabIndex={-1}
         rel="noopener">
-        <p className="fb-text-signature fb-text-xs">
+        <p className="text-signature text-xs">
           {t("common.powered_by")}{" "}
           <b>
-            <span className="fb-text-branding-text hover:fb-text-signature">Formbricks</span>
+            <span className="text-branding-text hover:text-signature">Formbricks</span>
           </b>
         </p>
       </a>
diff --git a/packages/surveys/src/components/general/headline.tsx b/packages/surveys/src/components/general/headline.tsx
index ba1f00a5a1..89c1e64f81 100644
--- a/packages/surveys/src/components/general/headline.tsx
+++ b/packages/surveys/src/components/general/headline.tsx
@@ -11,6 +11,7 @@ interface HeadlineProps {
 
 export function Headline({ headline, elementId, required = true, alignTextCenter = false }: HeadlineProps) {
   const { t } = useTranslation();
+  const isQuestionCard = elementId !== "EndingCard" && elementId !== "welcomeCard";
   // Strip inline styles BEFORE parsing to avoid CSP violations
   const strippedHeadline = stripInlineStyles(headline);
   const isHeadlineHtml = isValidHTML(strippedHeadline);
@@ -23,26 +24,26 @@ export function Headline({ headline, elementId, required = true, alignTextCenter
       : "";
 
   return (
-    <label htmlFor={elementId} className="fb-text-heading fb-mb-[3px] fb-flex fb-flex-col">
-      {!required && (
+    <label htmlFor={elementId} className="text-heading mb-[3px] flex flex-col">
+      {required && isQuestionCard && (
         <span
-          className="fb-text-xs fb-opacity-60 fb-font-normal fb-leading-6 fb-mb-[3px]"
+          className="mb-[3px] text-xs leading-6 font-normal opacity-60"
           tabIndex={-1}
           data-testid="fb__surveys__headline-optional-text-test">
-          {t("common.optional")}
+          {t("common.required")}
         </span>
       )}
       <div
-        className={`fb-flex fb-items-center ${alignTextCenter ? "fb-justify-center" : "fb-justify-between"}`}
+        className={`flex items-center ${alignTextCenter ? "justify-center" : "justify-between"}`}
         dir="auto">
         {isHeadlineHtml ? (
           <div
             data-testid="fb__surveys__headline-text-test"
-            className="fb-htmlbody fb-text-base"
+            className="htmlbody text-base"
             dangerouslySetInnerHTML={{ __html: safeHtml }}
           />
         ) : (
-          <p data-testid="fb__surveys__headline-text-test" className="fb-text-base fb-font-semibold">
+          <p data-testid="fb__surveys__headline-text-test" className="text-base font-semibold">
             {headline}
           </p>
         )}
diff --git a/packages/surveys/src/components/general/input.tsx b/packages/surveys/src/components/general/input.tsx
index 6458c5a832..1a7ab8b780 100644
--- a/packages/surveys/src/components/general/input.tsx
+++ b/packages/surveys/src/components/general/input.tsx
@@ -9,7 +9,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...p
     <input
       ref={ref} // Forward the ref to the input element
       className={cn(
-        "focus:fb-border-brand fb-bg-input-bg fb-flex fb-w-full fb-border fb-border-border fb-rounded-custom fb-px-3 fb-py-2 fb-text-sm fb-text-subheading placeholder:fb-text-placeholder focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 disabled:fb-cursor-not-allowed disabled:fb-opacity-50 dark:fb-border-slate-500 dark:fb-text-slate-300",
+        "focus:border-brand bg-input-bg border-border rounded-custom text-subheading placeholder:text-placeholder flex w-full border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
         className ?? ""
       )}
       dir="auto"
diff --git a/packages/surveys/src/components/general/label.tsx b/packages/surveys/src/components/general/label.tsx
index beee691d5a..68713ec5f5 100644
--- a/packages/surveys/src/components/general/label.tsx
+++ b/packages/surveys/src/components/general/label.tsx
@@ -5,7 +5,7 @@ interface LabelProps {
 
 export function Label({ text, htmlForId }: Readonly<LabelProps>) {
   return (
-    <label htmlFor={htmlForId} className="fb-text-subheading fb-font-normal fb-text-sm fb-block" dir="auto">
+    <label htmlFor={htmlForId} className="text-subheading block text-sm font-normal" dir="auto">
       {text}
     </label>
   );
diff --git a/packages/surveys/src/components/general/language-switch.tsx b/packages/surveys/src/components/general/language-switch.tsx
index 549118e748..9f1bcd3b12 100644
--- a/packages/surveys/src/components/general/language-switch.tsx
+++ b/packages/surveys/src/components/general/language-switch.tsx
@@ -75,12 +75,12 @@ export function LanguageSwitch({
   });
 
   return (
-    <div className="fb-z-[1001] fb-flex fb-w-fit fb-items-center">
+    <div className="z-1001 flex w-fit items-center">
       <button
         title={t("common.language_switch")}
         type="button"
         className={cn(
-          "fb-text-heading fb-relative fb-h-8 fb-w-8 fb-rounded-md focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-justify-center fb-flex fb-items-center"
+          "text-heading relative flex h-8 w-8 items-center justify-center rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
         )}
         style={{
           backgroundColor: isHovered ? hoverColorWithOpacity : "transparent",
@@ -99,8 +99,8 @@ export function LanguageSwitch({
       {showLanguageDropdown ? (
         <div
           className={cn(
-            "fb-bg-input-bg fb-text-heading fb-absolute fb-top-10 fb-max-h-64 fb-space-y-2 fb-overflow-auto fb-rounded-md fb-p-2 fb-text-xs fb-border-border fb-border",
-            dir === "rtl" ? "fb-left-8" : "fb-right-8"
+            "bg-input-bg text-heading border-border absolute top-10 max-h-64 space-y-2 overflow-auto rounded-md border p-2 text-xs",
+            dir === "rtl" ? "left-8" : "right-8"
           )}
           ref={languageDropdownRef}>
           {surveyLanguages.map((surveyLanguage) => {
@@ -109,7 +109,7 @@ export function LanguageSwitch({
               <button
                 key={surveyLanguage.language.id}
                 type="button"
-                className="fb-block fb-w-full fb-p-1.5 fb-rounded-md fb-text-left hover:fb-bg-brand hover:fb-text-on-brand fb-max-w-48 fb-truncate"
+                className="hover:bg-brand hover:text-on-brand block w-full max-w-48 truncate rounded-md p-1.5 text-left"
                 onClick={() => {
                   changeLanguage(surveyLanguage.language.code);
                 }}>
diff --git a/packages/surveys/src/components/general/loading-spinner.tsx b/packages/surveys/src/components/general/loading-spinner.tsx
index ba0eae0eeb..5b6855b593 100644
--- a/packages/surveys/src/components/general/loading-spinner.tsx
+++ b/packages/surveys/src/components/general/loading-spinner.tsx
@@ -4,15 +4,15 @@ export function LoadingSpinner({ className }: { className?: string }) {
   return (
     <div
       data-testid="loading-spinner"
-      className={cn("fb-flex fb-h-full fb-w-full fb-items-center fb-justify-center", className ?? "")}>
+      className={cn("flex h-full w-full items-center justify-center", className ?? "")}>
       <svg
-        className="fb-m-2 fb-h-6 fb-w-6 fb-animate-spin fb-text-brand"
+        className="text-brand m-2 h-6 w-6 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24">
-        <circle className="fb-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
         <path
-          className="fb-opacity-75"
+          className="opacity-75"
           fill="currentColor"
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         />
diff --git a/packages/surveys/src/components/general/progress.tsx b/packages/surveys/src/components/general/progress.tsx
index 33cbd03f24..271510f8d6 100644
--- a/packages/surveys/src/components/general/progress.tsx
+++ b/packages/surveys/src/components/general/progress.tsx
@@ -1,8 +1,8 @@
 export function Progress({ progress }: { progress: number }) {
   return (
-    <div className="fb-bg-accent-bg fb-h-2 fb-w-full fb-rounded-none">
+    <div className="bg-accent-bg h-2 w-full rounded-none">
       <div
-        className="fb-transition-width fb-bg-brand fb-z-20 fb-h-2 fb-duration-500"
+        className="transition-width bg-brand z-20 h-2 duration-500"
         style={{ width: `${Math.floor(progress * 100).toString()}%` }}
       />
     </div>
diff --git a/packages/surveys/src/components/general/recaptcha-branding.tsx b/packages/surveys/src/components/general/recaptcha-branding.tsx
index 3bbb875994..00ed5ec47c 100644
--- a/packages/surveys/src/components/general/recaptcha-branding.tsx
+++ b/packages/surveys/src/components/general/recaptcha-branding.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 export function RecaptchaBranding() {
   const { t } = useTranslation();
   return (
-    <p className="fb-text-signature fb-text-xs fb-text-center fb-leading-6 fb-text-balance">
+    <p className="text-signature text-center text-xs leading-6 text-balance">
       {t("common.protected_by_reCAPTCHA_and_the_Google")}{" "}
       <b>
         <a target="_blank" rel="noopener" href="https://policies.google.com/privacy">
diff --git a/packages/surveys/src/components/general/response-error-component.tsx b/packages/surveys/src/components/general/response-error-component.tsx
index f38c6521e6..54cb7fc580 100644
--- a/packages/surveys/src/components/general/response-error-component.tsx
+++ b/packages/surveys/src/components/general/response-error-component.tsx
@@ -19,24 +19,24 @@ export function ResponseErrorComponent({
 }: ResponseErrorComponentProps) {
   const { t } = useTranslation();
   return (
-    <div className="fb-flex fb-flex-col fb-bg-white fb-p-4">
-      <span className="fb-mb-1.5 fb-text-base fb-font-bold fb-leading-6 fb-text-slate-900">
+    <div className="flex flex-col bg-white p-4">
+      <span className="mb-1.5 text-base leading-6 font-bold text-slate-900">
         {t("common.your_feedback_is_stuck")}
       </span>
-      <p className="fb-max-w-md fb-text-sm fb-font-normal fb-leading-6 fb-text-slate-600">
+      <p className="max-w-md text-sm leading-6 font-normal text-slate-600">
         {t("common.the_servers_cannot_be_reached_at_the_moment")}
         <br />
         {t("common.please_retry_now_or_try_again_later")}
       </p>
-      <div className="fb-mt-4 fb-rounded-lg fb-border fb-border-slate-200 fb-bg-slate-100 fb-px-4 fb-py-5">
-        <div className="fb-flex fb-max-h-48 fb-flex-1 fb-flex-col fb-space-y-2 fb-overflow-y-scroll">
+      <div className="mt-4 rounded-lg border border-slate-200 bg-slate-100 px-4 py-5">
+        <div className="flex max-h-48 flex-1 flex-col space-y-2 overflow-y-scroll">
           {questions.map((question, index) => {
             const response = responseData[question.id];
             if (!response) return;
             return (
-              <div className="fb-flex fb-flex-col" key={`response-${index.toString()}`}>
-                <span className="fb-text-sm fb-leading-5 fb-text-slate-900">{`${t("common.question")} ${(index + 1).toString()}`}</span>
-                <span className="fb-text-sm fb-font-semibold fb-leading-5 fb-text-slate-900">
+              <div className="flex flex-col" key={`response-${index.toString()}`}>
+                <span className="text-sm leading-5 text-slate-900">{`${t("common.question")} ${(index + 1).toString()}`}</span>
+                <span className="text-sm leading-5 font-semibold text-slate-900">
                   {processResponseData(response)}
                 </span>
               </div>
@@ -44,7 +44,7 @@ export function ResponseErrorComponent({
           })}
         </div>
       </div>
-      <div className="fb-mt-4 fb-flex fb-flex-1 fb-flex-row fb-items-center fb-justify-end fb-space-x-2">
+      <div className="mt-4 flex flex-1 flex-row items-center justify-end space-x-2">
         <SubmitButton
           buttonLabel={isRetrying ? t("common.retrying") : t("common.retry")}
           isLastQuestion={false}
diff --git a/packages/surveys/src/components/general/subheader.tsx b/packages/surveys/src/components/general/subheader.tsx
index fd9860a285..24569ea83b 100644
--- a/packages/surveys/src/components/general/subheader.tsx
+++ b/packages/surveys/src/components/general/subheader.tsx
@@ -23,11 +23,11 @@ export function Subheader({ subheader, elementId }: SubheaderProps) {
   return (
     <label
       htmlFor={elementId}
-      className="fb-text-subheading fb-block fb-break-words fb-text-sm fb-font-normal fb-leading-6"
+      className="text-subheading block text-sm leading-6 font-normal wrap-break-word"
       data-testid="subheader"
       dir="auto">
       {isHtml ? (
-        <span className="fb-htmlbody" dangerouslySetInnerHTML={{ __html: safeHtml }} />
+        <span className="htmlbody" dangerouslySetInnerHTML={{ __html: safeHtml }} />
       ) : (
         <span>{subheader}</span>
       )}
diff --git a/packages/surveys/src/components/general/survey-close-button.tsx b/packages/surveys/src/components/general/survey-close-button.tsx
index ed4179419d..f93d2031b8 100644
--- a/packages/surveys/src/components/general/survey-close-button.tsx
+++ b/packages/surveys/src/components/general/survey-close-button.tsx
@@ -16,7 +16,7 @@ export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonl
   const hoverColorWithOpacity = hoverColor ?? mixColor("#000000", "#ffffff", 0.8);
 
   return (
-    <div className="fb-z-[1001] fb-flex fb-w-fit fb-items-center">
+    <div className="z-1001 flex w-fit items-center">
       <button
         type="button"
         onClick={onClose}
@@ -28,7 +28,7 @@ export function SurveyCloseButton({ onClose, hoverColor, borderRadius }: Readonl
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         className={cn(
-          "fb-text-heading fb-relative focus:fb-outline-none focus:fb-ring-2 focus:fb-ring-offset-2 fb-p-2 fb-h-8 fb-w-8 flex items-center justify-center"
+          "text-heading relative flex h-8 w-8 items-center justify-center p-2 focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
         )}
         aria-label={t("common.close_survey")}>
         <CloseIcon />
diff --git a/packages/surveys/src/components/general/survey.tsx b/packages/surveys/src/components/general/survey.tsx
index 1b00813d3b..4f940a3d92 100644
--- a/packages/surveys/src/components/general/survey.tsx
+++ b/packages/surveys/src/components/general/survey.tsx
@@ -743,7 +743,7 @@ export function Survey({
           return (
             <>
               {localSurvey.type !== "link" ? (
-                <div className="fb-flex fb-h-6 fb-justify-end fb-pr-2 fb-pt-2 fb-bg-white">
+                <div className="flex h-6 justify-end bg-white pt-2 pr-2">
                   <SurveyCloseButton onClose={onClose} />
                 </div>
               ) : null}
@@ -844,19 +844,19 @@ export function Survey({
         setHasInteracted={setHasInteracted}>
         <div
           className={cn(
-            "fb-no-scrollbar fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",
-            offset === 0 || cardArrangement === "simple" ? "fb-opacity-100" : "fb-opacity-0"
+            "no-scrollbar bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-all duration-1000 ease-in-out",
+            offset === 0 || cardArrangement === "simple" ? "opacity-100" : "opacity-0"
           )}>
-          <div className={cn("fb-relative")}>
-            <div className="fb-flex fb-flex-col fb-w-full fb-items-end">
+          <div className={cn("relative")}>
+            <div className="flex w-full flex-col items-end">
               {showProgressBar ? <ProgressBar survey={localSurvey} blockId={blockId} /> : null}
 
               <div
                 className={cn(
-                  "fb-relative fb-w-full",
-                  isCloseButtonVisible || isLanguageSwitchVisible ? "fb-h-8" : "fb-h-5"
+                  "relative w-full",
+                  isCloseButtonVisible || isLanguageSwitchVisible ? "h-8" : "h-5"
                 )}>
-                <div className={cn("fb-flex fb-items-center fb-justify-end fb-w-full")}>
+                <div className={cn("flex w-full items-center justify-end")}>
                   {isLanguageSwitchVisible && (
                     <LanguageSwitch
                       survey={localSurvey}
@@ -869,7 +869,7 @@ export function Survey({
                     />
                   )}
                   {isLanguageSwitchVisible && isCloseButtonVisible && (
-                    <div aria-hidden="true" className="fb-h-5 fb-w-px fb-bg-slate-200 fb-z-[1001]" />
+                    <div aria-hidden="true" className="z-1001 h-5 w-px bg-slate-200" />
                   )}
 
                   {isCloseButtonVisible && (
@@ -885,16 +885,16 @@ export function Survey({
             <div
               ref={contentRef}
               className={cn(
-                loadingElement ? "fb-animate-pulse fb-opacity-60" : "",
-                fullSizeCards ? "" : "fb-my-auto"
+                loadingElement ? "animate-pulse opacity-60" : "",
+                fullSizeCards ? "" : "my-auto"
               )}>
               {content()}
             </div>
 
             <div
               className={cn(
-                "fb-flex fb-flex-col fb-justify-center fb-gap-2",
-                isCloseButtonVisible || isLanguageSwitchVisible ? "fb-p-2" : "fb-p-3"
+                "flex flex-col justify-center gap-2",
+                isCloseButtonVisible || isLanguageSwitchVisible ? "p-2" : "p-3"
               )}>
               {isBrandingEnabled ? <FormbricksBranding /> : null}
               {isSpamProtectionEnabled ? <RecaptchaBranding /> : null}
diff --git a/packages/surveys/src/components/general/welcome-card.tsx b/packages/surveys/src/components/general/welcome-card.tsx
index 7a5719e036..03df5b2ca0 100644
--- a/packages/surveys/src/components/general/welcome-card.tsx
+++ b/packages/surveys/src/components/general/welcome-card.tsx
@@ -30,7 +30,7 @@ interface WelcomeCardProps {
 
 function TimerIcon() {
   return (
-    <div className="fb-mr-1">
+    <div className="mr-1">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -47,14 +47,14 @@ function TimerIcon() {
 
 function UsersIcon() {
   return (
-    <div className="fb-mr-1">
+    <div className="mr-1">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
         strokeWidth="1.5"
         stroke="currentColor"
-        className="fb-h-4 fb-w-4">
+        className="h-4 w-4">
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -145,11 +145,7 @@ export function WelcomeCard({
     <ScrollableContainer fullSizeCards={fullSizeCards}>
       <div>
         {fileUrl ? (
-          <img
-            src={fileUrl}
-            className="fb-mb-8 fb-max-h-96 fb-w-1/4 fb-object-contain"
-            alt={t("common.company_logo")}
-          />
+          <img src={fileUrl} className="mb-8 max-h-96 w-1/4 object-contain" alt={t("common.company_logo")} />
         ) : null}
 
         <Headline
@@ -164,7 +160,7 @@ export function WelcomeCard({
           )}
           elementId="welcomeCard"
         />
-        <div className="fb-mt-4 fb-flex fb-gap-4 fb-pt-4">
+        <div className="mt-4 flex gap-4 pt-4">
           <SubmitButton
             buttonLabel={getLocalizedValue(buttonLabel, languageCode)}
             isLastQuestion={false}
@@ -181,10 +177,10 @@ export function WelcomeCard({
         </div>
         {timeToFinish && !showResponseCount ? (
           <div
-            className="fb-items-center fb-text-subheading fb-my-4 fb-flex"
+            className="text-subheading my-4 flex items-center"
             data-testid="fb__surveys__welcome-card__time-display">
             <TimerIcon />
-            <p className="fb-pt-1 fb-text-xs">
+            <p className="pt-1 text-xs">
               <span>
                 {t("common.takes")} {calculateTimeToComplete()}{" "}
               </span>
@@ -192,9 +188,9 @@ export function WelcomeCard({
           </div>
         ) : null}
         {showResponseCount && !timeToFinish && responseCount && responseCount > 3 ? (
-          <div className="fb-items-center fb-text-subheading fb-my-4 fb-flex">
+          <div className="text-subheading my-4 flex items-center">
             <UsersIcon />
-            <p className="fb-pt-1 fb-text-xs">
+            <p className="pt-1 text-xs">
               <span data-testid="fb__surveys__welcome-card__response-count">
                 {t("common.people_responded", { count: responseCount })}
               </span>
@@ -202,9 +198,9 @@ export function WelcomeCard({
           </div>
         ) : null}
         {timeToFinish && showResponseCount ? (
-          <div className="fb-items-center fb-text-subheading fb-my-4 fb-flex">
+          <div className="text-subheading my-4 flex items-center">
             <TimerIcon />
-            <p className="fb-pt-1 fb-text-xs" data-testid="fb__surveys__welcome-card__info-text-test">
+            <p className="pt-1 text-xs" data-testid="fb__surveys__welcome-card__info-text-test">
               <span>
                 {t("common.takes")} {calculateTimeToComplete()}{" "}
               </span>
diff --git a/packages/surveys/src/components/wrappers/auto-close-wrapper.tsx b/packages/surveys/src/components/wrappers/auto-close-wrapper.tsx
index 975cb434a7..de9f025ddd 100644
--- a/packages/surveys/src/components/wrappers/auto-close-wrapper.tsx
+++ b/packages/surveys/src/components/wrappers/auto-close-wrapper.tsx
@@ -63,11 +63,11 @@ export function AutoCloseWrapper({
   }, [survey.autoClose]);
 
   return (
-    <div className="fb-h-full fb-w-full fb-flex fb-flex-col">
+    <div className="flex h-full w-full flex-col">
       <div // NOSONAR // We can't have a role="button" here as sonarqube registers more issues with this. This is indeed an interactive element.
         onClick={stopCountdown}
         onMouseOver={stopCountdown} // NOSONAR // We can't check for onFocus because the survey is auto focused after the first question and we don't want to stop the countdown
-        className="fb-h-full fb-w-full"
+        className="h-full w-full"
         data-testid="fb__surveys__auto-close-wrapper-test"
         onKeyDown={stopCountdown}
         aria-label={t("common.auto_close_wrapper")}
@@ -75,7 +75,7 @@ export function AutoCloseWrapper({
         {children}
       </div>
       {survey.type === "app" && survey.autoClose && (
-        <div className="fb-h-2 fb-w-full" aria-hidden={!showAutoCloseProgressBar}>
+        <div className="h-2 w-full" aria-hidden={!showAutoCloseProgressBar}>
           {showAutoCloseProgressBar && <AutoCloseProgressBar autoCloseTimeout={survey.autoClose} />}
         </div>
       )}
diff --git a/packages/surveys/src/components/wrappers/scrollable-container.tsx b/packages/surveys/src/components/wrappers/scrollable-container.tsx
index 599c74c43c..8a73fc3946 100644
--- a/packages/surveys/src/components/wrappers/scrollable-container.tsx
+++ b/packages/surveys/src/components/wrappers/scrollable-container.tsx
@@ -73,28 +73,28 @@ export const ScrollableContainer = forwardRef<ScrollableContainerHandle, Scrolla
     }
 
     return (
-      <div className="fb-relative">
+      <div className="relative">
         {!isAtTop && (
-          <div className="fb-from-survey-bg fb-absolute fb-left-0 fb-right-2 fb-top-0 fb-z-10 fb-h-4 fb-bg-gradient-to-b fb-to-transparent" />
+          <div className="from-survey-bg absolute top-0 right-2 left-0 z-10 h-4 bg-linear-to-b to-transparent" />
         )}
         <div
           ref={containerRef}
           style={{
             maxHeight,
           }}
-          className={cn("fb-overflow-auto fb-px-4 fb-bg-survey-bg")}>
+          className={cn("bg-survey-bg overflow-auto px-4")}>
           {children}
         </div>
         {!isAtBottom && (
           <>
-            <div className="fb-from-survey-bg fb-absolute fb-bottom-0 fb-left-4 fb-right-4 fb-h-4 fb-bg-gradient-to-t fb-to-transparent" />
+            <div className="from-survey-bg absolute right-4 bottom-0 left-4 h-4 bg-linear-to-t to-transparent" />
             <button
               type="button"
               onClick={scrollToBottom}
               style={{ transform: "translateX(-50%)" }}
-              className="fb-absolute fb-bottom-2 fb-left-1/2 fb-z-20 fb-flex fb-h-8 fb-w-8 fb-items-center fb-justify-center fb-rounded-full fb-bg-survey-bg fb-border fb-border-transparent hover:fb-border-border fb-shadow-lg fb-transition-colors focus:fb-ring-2 focus:fb-outline-none focus:fb-ring-brand focus:fb-ring-offset-2"
+              className="bg-survey-bg hover:border-border focus:ring-brand absolute bottom-2 left-1/2 z-20 flex h-8 w-8 items-center justify-center rounded-full border border-transparent shadow-lg transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden"
               aria-label="Scroll to bottom">
-              <ChevronDownIcon className="fb-text-heading fb-w-5 fb-h-5" />
+              <ChevronDownIcon className="text-heading h-5 w-5" />
             </button>
           </>
         )}
diff --git a/packages/surveys/src/components/wrappers/stacked-card.tsx b/packages/surveys/src/components/wrappers/stacked-card.tsx
index ec2b291db8..98a577c433 100644
--- a/packages/surveys/src/components/wrappers/stacked-card.tsx
+++ b/packages/surveys/src/components/wrappers/stacked-card.tsx
@@ -45,7 +45,7 @@ export const StackedCard = ({
   };
 
   const getDummyCardContent = () => {
-    return <div style={{ height: cardHeight }} className="fb-w-full fb-p-6"></div>;
+    return <div style={{ height: cardHeight }} className="w-full p-6"></div>;
   };
 
   const calculateCardTransform = useMemo(() => {
@@ -105,13 +105,13 @@ export const StackedCard = ({
         transform: calculateCardTransform(offset),
         opacity: isHidden ? 0 : (100 - 20 * offset) / 100,
         height: fullSizeCards ? "100%" : currentCardHeight,
-        transitionDuration: "600ms",
+        transition: "all 600ms ease-in-out",
         pointerEvents: offset === 0 ? "auto" : "none",
         ...borderStyles,
         ...straightCardArrangementStyles,
         ...getBottomStyles(),
       }}
-      className="fb-pointer fb-rounded-custom fb-bg-survey-bg fb-absolute fb-inset-x-0 fb-transition-all fb-ease-in-out fb-overflow-hidden">
+      className="pointer rounded-custom bg-survey-bg absolute inset-x-0 overflow-hidden">
       <div
         style={{
           opacity: contentOpacity,
diff --git a/packages/surveys/src/components/wrappers/stacked-cards-container.tsx b/packages/surveys/src/components/wrappers/stacked-cards-container.tsx
index edaa439fea..b523fea6c5 100644
--- a/packages/surveys/src/components/wrappers/stacked-cards-container.tsx
+++ b/packages/surveys/src/components/wrappers/stacked-cards-container.tsx
@@ -142,7 +142,7 @@ export function StackedCardsContainer({
   return (
     <div
       data-testid="stacked-cards-container"
-      className="fb-relative fb-flex fb-h-full fb-items-end fb-justify-center md:fb-items-center"
+      className="relative flex h-full items-end justify-center md:items-center"
       onMouseEnter={() => {
         setHovered(true);
       }}
@@ -154,7 +154,7 @@ export function StackedCardsContainer({
         <div
           id={`questionCard-${blockIdxTemp.toString()}`}
           data-testid={`questionCard-${blockIdxTemp.toString()}`}
-          className={cn("fb-w-full fb-bg-survey-bg fb-overflow-hidden", fullSizeCards ? "fb-h-full" : "")}
+          className={cn("bg-survey-bg w-full overflow-hidden", fullSizeCards ? "h-full" : "")}
           style={borderStyles}>
           {getCardContent(blockIdxTemp, 0)}
         </div>
diff --git a/packages/surveys/src/components/wrappers/survey-container.tsx b/packages/surveys/src/components/wrappers/survey-container.tsx
index 557bfed417..1c5606a327 100644
--- a/packages/surveys/src/components/wrappers/survey-container.tsx
+++ b/packages/surveys/src/components/wrappers/survey-container.tsx
@@ -51,17 +51,17 @@ export function SurveyContainer({
   const getPlacementStyle = (placement: TPlacement): string => {
     switch (placement) {
       case "bottomRight":
-        return "sm:fb-bottom-3 sm:fb-right-3";
+        return "sm:bottom-3 sm:right-3";
       case "topRight":
-        return "sm:fb-top-3 sm:fb-right-3 sm:fb-bottom-3";
+        return "sm:top-3 sm:right-3 sm:bottom-3";
       case "topLeft":
-        return "sm:fb-top-3 sm:fb-left-3 sm:fb-bottom-3";
+        return "sm:top-3 sm:left-3 sm:bottom-3";
       case "bottomLeft":
-        return "sm:fb-bottom-3 sm:fb-left-3";
+        return "sm:bottom-3 sm:left-3";
       case "center":
-        return "sm:fb-top-1/2 sm:fb-left-1/2 sm:fb-transform sm:-fb-translate-x-1/2 sm:-fb-translate-y-1/2";
+        return "sm:top-1/2 sm:left-1/2 sm:transform sm:-translate-x-1/2 sm:-translate-y-1/2";
       default:
-        return "sm:fb-bottom-3 sm:fb-right-3";
+        return "sm:bottom-3 sm:right-3";
     }
   };
 
@@ -69,33 +69,33 @@ export function SurveyContainer({
 
   if (!isModal) {
     return (
-      <div id="fbjs" className="fb-formbricks-form" style={{ height: "100%", width: "100%" }} dir={dir}>
+      <div id="fbjs" className="formbricks-form" style={{ height: "100%", width: "100%" }} dir={dir}>
         {children}
       </div>
     );
   }
 
   return (
-    <div id="fbjs" className="fb-formbricks-form" dir={dir}>
+    <div id="fbjs" className="formbricks-form" dir={dir}>
       <div
         aria-live="assertive"
         className={cn(
-          isCenter ? "fb-pointer-events-auto" : "fb-pointer-events-none",
-          isModal && "fb-z-999999 fb-fixed fb-inset-0 fb-flex fb-items-end"
+          isCenter ? "pointer-events-auto" : "pointer-events-none",
+          isModal && "fixed inset-0 z-999999 flex items-end"
         )}>
         <div
           className={cn(
-            "fb-relative fb-h-full fb-w-full",
-            !isCenter ? "fb-bg-none fb-transition-all fb-duration-500 fb-ease-in-out" : "",
-            isModal && isCenter && darkOverlay ? "fb-bg-slate-700/80" : "",
-            isModal && isCenter && !darkOverlay ? "fb-bg-white/50" : ""
+            "relative h-full w-full",
+            !isCenter ? "bg-none transition-all duration-500 ease-in-out" : "",
+            isModal && isCenter && darkOverlay ? "bg-slate-700/80" : "",
+            isModal && isCenter && !darkOverlay ? "bg-white/50" : ""
           )}>
           <div
             ref={modalRef}
             className={cn(
               getPlacementStyle(placement),
-              isOpen ? "fb-opacity-100" : "fb-opacity-0",
-              "fb-rounded-custom fb-pointer-events-auto fb-absolute fb-bottom-0 fb-h-fit fb-w-full fb-overflow-visible fb-bg-white fb-shadow-lg fb-transition-all fb-duration-500 fb-ease-in-out sm:fb-m-4 sm:fb-max-w-sm"
+              isOpen ? "opacity-100" : "opacity-0",
+              "rounded-custom pointer-events-auto absolute bottom-0 h-fit w-full overflow-visible bg-white shadow-lg transition-all duration-500 ease-in-out sm:m-4 sm:max-w-sm"
             )}>
             <div>{children}</div>
           </div>
diff --git a/packages/surveys/src/lib/html-utils.ts b/packages/surveys/src/lib/html-utils.ts
index e79ff1abd2..c887ae12e1 100644
--- a/packages/surveys/src/lib/html-utils.ts
+++ b/packages/surveys/src/lib/html-utils.ts
@@ -1,14 +1,22 @@
+import DOMPurify from "isomorphic-dompurify";
+
 /**
  * Strip inline style attributes from HTML string to avoid CSP violations
+ * Uses DOMPurify for secure, proper HTML parsing instead of regex
  * @param html - The HTML string to process
  * @returns HTML string with all style attributes removed
  * @note This is a security measure to prevent CSP violations during HTML parsing
  */
 export const stripInlineStyles = (html: string): string => {
-  // Remove style="..." or style='...' attributes
-  // Use separate patterns for each quote type to avoid ReDoS vulnerability
-  // The pattern [^"]* and [^']* are safe as they don't cause backtracking
-  return html.replace(/\s+style\s*=\s*["'][^"']*["']/gi, ""); //NOSONAR
+  if (!html) return html;
+
+  // Use DOMPurify to safely remove style attributes
+  // This is more secure than regex-based approaches and handles edge cases properly
+  return DOMPurify.sanitize(html, {
+    FORBID_ATTR: ["style"],
+    // Keep other attributes and tags as-is, only remove style attributes
+    KEEP_CONTENT: true,
+  });
 };
 
 /**
diff --git a/packages/surveys/src/lib/styles.test.ts b/packages/surveys/src/lib/styles.test.ts
index eac800f457..887d5848dc 100644
--- a/packages/surveys/src/lib/styles.test.ts
+++ b/packages/surveys/src/lib/styles.test.ts
@@ -6,12 +6,9 @@ import { addCustomThemeToDom, addStylesToDom, getStyleNonce, setStyleNonce } fro
 // Mock CSS module imports
 vi.mock("@/styles/global.css?inline", () => ({ default: ".global {}" }));
 vi.mock("@/styles/preflight.css?inline", () => ({ default: ".preflight {}" }));
-vi.mock("react-calendar/dist/Calendar.css?inline", () => ({ default: ".calendar {}" }));
-vi.mock("react-date-picker/dist/DatePicker.css?inline", () => ({ default: ".datePicker {}" }));
 vi.mock("../../../../apps/web/modules/ui/components/editor/styles-editor-frontend.css?inline", () => ({
   default: ".editor {}",
 }));
-vi.mock("../styles/date-picker.css?inline", () => ({ default: ".datePickerCustom {}" }));
 
 // Mock color utility functions if they have complex dependencies or for controlled testing
 // For now, we assume they work as expected or are simple enough not to need mocking here.
@@ -136,7 +133,7 @@ describe("addStylesToDom", () => {
     expect(styleElement.tagName).toBe("STYLE");
     expect(document.head.contains(styleElement)).toBe(true);
 
-    const expectedCss = ".preflight {}.global {}.editor {}.datePicker {}.calendar {}.datePickerCustom {}";
+    const expectedCss = ".preflight {}.global {}.editor {}";
     expect(styleElement.innerHTML).toBe(expectedCss);
   });
 
diff --git a/packages/surveys/src/lib/styles.ts b/packages/surveys/src/lib/styles.ts
index 85be3710eb..e1cc48086a 100644
--- a/packages/surveys/src/lib/styles.ts
+++ b/packages/surveys/src/lib/styles.ts
@@ -1,12 +1,11 @@
-import calendarCss from "react-calendar/dist/Calendar.css?inline";
-import datePickerCss from "react-date-picker/dist/DatePicker.css?inline";
+// Add this import for survey-ui CSS variables
+import surveyUiCss from "@formbricks/survey-ui/styles?inline";
 import { type TProjectStyling } from "@formbricks/types/project";
 import { type TSurveyStyling } from "@formbricks/types/surveys/types";
 import { isLight, mixColor } from "@/lib/color";
 import global from "@/styles/global.css?inline";
 import preflight from "@/styles/preflight.css?inline";
 import editorCss from "../../../../apps/web/modules/ui/components/editor/styles-editor-frontend.css?inline";
-import datePickerCustomCss from "../styles/date-picker.css?inline";
 
 // Store the nonce globally for style elements
 let styleNonce: string | undefined;
@@ -44,8 +43,8 @@ export const addStylesToDom = () => {
       styleElement.setAttribute("nonce", styleNonce);
     }
 
-    styleElement.innerHTML =
-      preflight + global + editorCss + datePickerCss + calendarCss + datePickerCustomCss;
+    // Include survey-ui CSS variables before other styles
+    styleElement.innerHTML = preflight + global + editorCss + surveyUiCss;
     document.head.appendChild(styleElement);
   } else {
     // If style element already exists, update its nonce if needed
@@ -88,12 +87,12 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
       cssVariables += `--fb-${variableName}: ${value};\n`;
     }
   };
-
   // if roundness is defined, even if it's 0, set the border-radius
   const roundness = styling.roundness ?? 8;
 
   // Use the helper function to append CSS variables
   appendCssVariable("brand-color", styling.brandColor?.light);
+  appendCssVariable("survey-brand-color", styling.brandColor?.light);
   appendCssVariable("focus-color", styling.brandColor?.light);
   if (styling.brandColor?.light) {
     // If the brand color is defined, set the text color based on the lightness of the brand color
@@ -103,7 +102,13 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     appendCssVariable("brand-text-color", "#ffffff");
   }
 
+  // Backwards-compat: legacy variables still used by some consumers/tests
   appendCssVariable("heading-color", styling.questionColor?.light);
+  appendCssVariable("element-headline-color", styling.questionColor?.light);
+  appendCssVariable("element-description-color", styling.questionColor?.light);
+  appendCssVariable("input-color", styling.questionColor?.light);
+  appendCssVariable("label-color", styling.questionColor?.light);
+  // Backwards-compat: legacy variables still used by some consumers/tests
   appendCssVariable("subheading-color", styling.questionColor?.light);
 
   if (styling.questionColor?.light) {
@@ -114,12 +119,16 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
 
   if (styling.inputBorderColor?.light) {
     appendCssVariable("border-color-highlight", mixColor(styling.inputBorderColor.light, "#000000", 0.1));
+    appendCssVariable("input-border-color", styling.inputBorderColor?.light);
   }
 
   appendCssVariable("survey-background-color", styling.cardBackgroundColor?.light);
   appendCssVariable("survey-border-color", styling.cardBorderColor?.light);
   appendCssVariable("border-radius", `${Number(roundness).toString()}px`);
   appendCssVariable("input-background-color", styling.inputColor?.light);
+  appendCssVariable("input-bg-color", styling.inputColor?.light);
+  appendCssVariable("option-bg-color", styling.inputColor?.light);
+  appendCssVariable("input-color", styling.questionColor?.light);
 
   if (styling.questionColor?.light) {
     const isLightQuestionColor = isLight(styling.questionColor.light);
diff --git a/packages/surveys/src/styles/date-picker.css b/packages/surveys/src/styles/date-picker.css
deleted file mode 100644
index 588c8ed956..0000000000
--- a/packages/surveys/src/styles/date-picker.css
+++ /dev/null
@@ -1,115 +0,0 @@
-.dp-input-root {
-  width: 100%;
-}
-
-.dp-input-root [class$="wrapper"] {
-  height: 160px;
-  display: flex;
-  background: rgb(248 250 252);
-  background: var(--fb-survey-background-color);
-  flex-direction: row-reverse;
-  gap: 8px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  border: 1px solid rgb(203 213 225) !important;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-bottom: 8px;
-}
-
-.dp-input-root [class$="inputGroup"] {
-  flex: none;
-  font-size: 16px;
-}
-
-.wrapper-hide .react-date-picker__inputGroup {
-  display: none;
-}
-
-.dp-input-root .react-date-picker__inputGroup__input {
-  background: #f1f5f9 !important;
-  border-radius: 2px;
-}
-
-.dp-input-root .react-date-picker__inputGroup__input:invalid {
-  background: #fecaca !important;
-  border-radius: 2px;
-}
-
-.hide-invalid .react-date-picker__inputGroup__input:invalid {
-  background: #f1f5f9 !important;
-}
-
-.wrapper-hide .react-date-picker__wrapper {
-  display: none;
-}
-
-.react-date-picker__calendar--open {
-  position: absolute !important;
-  top: 0 !important;
-  width: 100% !important;
-}
-
-.calendar-root {
-  position: absolute !important;
-  top: 0 !important;
-  background: var(--fb-survey-background-color) !important;
-  width: 100% !important;
-}
-
-.calendar-root [class$="navigation"] {
-  height: 36px;
-  margin-bottom: 0px;
-}
-
-.calendar-root [class$="navigation"] button {
-  border-radius: 8px;
-}
-
-.calendar-root [class$="navigation"] button:hover {
-  background: rgb(226 232 240) !important;
-}
-
-.calendar-root [class$="navigation"] button:focus {
-  background: #e2e8f0 !important;
-  box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-}
-
-.calendar-root [class$="navigation"] [class$="navigation__label"] {
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.react-calendar__month-view__weekdays__weekday {
-  color: var(--fb-heading-color);
-  font-weight: 400;
-  text-transform: capitalize;
-}
-
-.react-calendar__month-view__weekdays__weekday > abbr {
-  text-decoration: none;
-}
-
-.react-calendar {
-  width: 100%;
-  line-height: 2rem;
-}
-
-.react-calendar__tile--active {
-  background: var(--fb-brand-color) !important;
-  border-radius: 6px;
-}
-
-.react-calendar button:hover {
-  background: rgb(226 232 240) !important;
-  border-radius: 10%;
-}
-
-.react-calendar button:focus {
-  outline: 2px solid rgb(226 232 240) !important;
-  border-radius: 6px;
-}
diff --git a/packages/surveys/src/styles/global.css b/packages/surveys/src/styles/global.css
index ab098f38df..b4116b5fce 100644
--- a/packages/surveys/src/styles/global.css
+++ b/packages/surveys/src/styles/global.css
@@ -1,6 +1,31 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities) important;
+
+/* NOSONAR: Tailwind CSS v4 directives - @config and @source are valid at-rules */
+@config "../../tailwind.config.cjs";
+/* NOSONAR */
+@source "../../src/**/*.{ts,tsx,js,jsx}";
+/* NOSONAR */
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 /* @import "./survey.css"; */
 
@@ -31,14 +56,14 @@
 }
 
 /* this is for styling the HtmlBody component */
-.fb-htmlbody {
-  @apply fb-block fb-text-sm fb-font-normal fb-leading-6;
-  /* need to use !important because in packages/ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
+.htmlbody {
+  @apply block text-sm font-normal leading-6;
+  /* need to use !important because in packages/survey-ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
   color: var(--fb-subheading-color) !important;
 }
 
 /* without this, it wont override the color */
-p.fb-editor-paragraph {
+p.editor-paragraph {
   overflow-wrap: break-word;
 }
 
@@ -101,7 +126,7 @@ p.fb-editor-paragraph {
   }
 }
 
-.fb-no-scrollbar {
+.no-scrollbar {
   -ms-overflow-style: none !important;
   /* Internet Explorer 10+ */
   scrollbar-width: thin !important;
@@ -122,4 +147,4 @@ p.fb-editor-paragraph {
 
 .grecaptcha-badge {
   visibility: hidden;
-}
+}
\ No newline at end of file
diff --git a/packages/surveys/src/styles/preflight.css b/packages/surveys/src/styles/preflight.css
index 742e7acb66..04c1b41e49 100644
--- a/packages/surveys/src/styles/preflight.css
+++ b/packages/surveys/src/styles/preflight.css
@@ -13,10 +13,12 @@
   font-family: Inter, Helvetica, Arial, sans-serif;
   font-size: 1em;
 }
+
 #fbjs ::before,
 #fbjs ::after {
   --tw-content: "";
 }
+
 #fbjs html {
   line-height: 1.5;
   /* 1 */
@@ -27,12 +29,14 @@
   tab-size: 4;
   /* 3 */
 }
+
 #fbjs body {
   margin: 0;
   /* 1 */
   line-height: inherit;
   /* 2 */
 }
+
 #fbjs hr {
   height: 0;
   /* 1 */
@@ -41,9 +45,11 @@
   border-top-width: 1px;
   /* 3 */
 }
+
 #fbjs abbr:where([title]) {
   text-decoration: underline dotted;
 }
+
 #fbjs h1,
 #fbjs h2,
 #fbjs h3,
@@ -53,36 +59,39 @@
   font-size: inherit;
   font-weight: inherit;
 }
+
 #fbjs a {
   color: inherit;
   text-decoration: inherit;
 }
+
 #fbjs b,
 #fbjs strong {
   font-weight: bolder;
 }
+
 #fbjs code,
 #fbjs kbd,
 #fbjs samp,
 #fbjs pre {
-  font-family: theme(
-    "fontFamily.mono",
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace
-  );
+  font-family: theme("fontFamily.mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace);
   /* 1 */
   font-size: 1em;
   /* 2 */
 }
+
 #fbjs small {
   font-size: 80%;
 }
+
 #fbjs sub,
 #fbjs sup {
   font-size: 75%;
@@ -90,12 +99,15 @@
   position: relative;
   vertical-align: baseline;
 }
+
 #fbjs sub {
   bottom: -0.25em;
 }
+
 #fbjs sup {
   top: -0.5em;
 }
+
 #fbjs table {
   text-indent: 0;
   /* 1 */
@@ -104,6 +116,7 @@
   border-collapse: collapse;
   /* 3 */
 }
+
 #fbjs button,
 #fbjs input,
 #fbjs optgroup,
@@ -124,10 +137,12 @@
   padding: 0;
   /* 3 */
 }
+
 #fbjs button,
 #fbjs select {
   text-transform: none;
 }
+
 #fbjs button,
 #fbjs [type="button"],
 #fbjs [type="reset"],
@@ -139,37 +154,46 @@
   background-image: none;
   /* 2 */
 }
+
 #fbjs :-moz-focusring {
   outline: auto;
 }
+
 #fbjs :-moz-ui-invalid {
   box-shadow: none;
 }
+
 #fbjs progress {
   vertical-align: baseline;
 }
+
 #fbjs ::-webkit-inner-spin-button,
 #fbjs ::-webkit-outer-spin-button {
   height: auto;
 }
+
 #fbjs [type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
   /* 2 */
 }
+
 #fbjs ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
 #fbjs ::-webkit-file-upload-button {
   -webkit-appearance: button;
   /* 1 */
   font: inherit;
   /* 2 */
 }
+
 #fbjs summary {
   display: list-item;
 }
+
 #fbjs blockquote,
 #fbjs dl,
 #fbjs dd,
@@ -185,13 +209,16 @@
 #fbjs pre {
   margin: 0;
 }
+
 #fbjs fieldset {
   margin: 0;
   padding: 0;
 }
+
 #fbjs legend {
   padding: 0;
 }
+
 #fbjs ol,
 #fbjs ul,
 #fbjs menu {
@@ -199,9 +226,11 @@
   margin: 0;
   padding: 0;
 }
+
 #fbjs textarea {
   resize: vertical;
 }
+
 #fbjs input::placeholder,
 #fbjs textarea::placeholder {
   opacity: 1;
@@ -209,13 +238,16 @@
   color: theme("colors.gray.400", #9ca3af);
   /* 2 */
 }
+
 #fbjs button,
 #fbjs [role="button"] {
   cursor: pointer;
 }
+
 #fbjs :disabled {
   cursor: default;
 }
+
 #fbjs img,
 #fbjs svg,
 #fbjs video,
@@ -229,11 +261,13 @@
   vertical-align: middle;
   /* 2 */
 }
+
 #fbjs img,
 #fbjs video {
   max-width: 100%;
   height: auto;
 }
+
 #fbjs [hidden] {
   display: none;
-}
+}
\ No newline at end of file
diff --git a/packages/surveys/tailwind.config.cjs b/packages/surveys/tailwind.config.cjs
index 5ede99da0d..3f240282cc 100644
--- a/packages/surveys/tailwind.config.cjs
+++ b/packages/surveys/tailwind.config.cjs
@@ -1,11 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   important: "#fbjs",
-  prefix: "fb-",
   darkMode: "class",
-  corePlugins: {
-    preflight: false,
-  },
   content: ["./src/**/*.{tsx,ts,jsx,js}"],
   theme: {
     extend: {
diff --git a/packages/surveys/vite.config.mts b/packages/surveys/vite.config.mts
index 8cae984c4e..cef8f7cdbb 100644
--- a/packages/surveys/vite.config.mts
+++ b/packages/surveys/vite.config.mts
@@ -14,13 +14,23 @@ const config = ({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
 
   return defineConfig({
+    resolve: {
+      alias: {
+        // Alias React to Preact for survey-ui components
+        react: "preact/compat",
+        "react-dom": "preact/compat",
+        "react/jsx-runtime": "preact/jsx-runtime",
+      },
+    },
     test: {
+      name: "surveys",
       environment: "node",
       environmentMatchGlobs: [
         ["**/*.test.tsx", "jsdom"],
         ["**/lib/**/*.test.ts", "jsdom"],
       ],
       setupFiles: ["./vitestSetup.ts"],
+      include: ["**/*.test.ts", "**/*.test.tsx"],
       exclude: ["dist/**", "node_modules/**"],
       env: env,
       coverage: {
@@ -41,16 +51,23 @@ const config = ({ mode }) => {
         // Externalize node-html-parser to keep bundle size small (~53KB)
         // It's pulled in via @formbricks/types but not used in browser runtime
         external: ["node-html-parser"],
-        output: {
-          inlineDynamicImports: true,
-        },
-      },
-      lib: {
-        entry: resolve(__dirname, "src/index.ts"),
-        name: "formbricksSurveys",
-        formats: ["es", "umd"],
-        fileName: "index",
+        input: resolve(__dirname, "src/index.ts"),
+        output: [
+          {
+            format: "es",
+            entryFileNames: "index.js",
+            chunkFileNames: "assets/[name]-[hash].js",
+            inlineDynamicImports: false,
+          },
+          {
+            format: "umd",
+            name: "formbricksSurveys",
+            entryFileNames: "index.umd.cjs",
+            inlineDynamicImports: true,
+          },
+        ],
       },
+      outDir: "dist"
     },
     plugins: [
       preact(),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40d664c1b5..8c7fff94b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,11 +20,11 @@ importers:
   .:
     dependencies:
       react:
-        specifier: 19.1.2
-        version: 19.1.2
+        specifier: 19.2.1
+        version: 19.2.1
       react-dom:
-        specifier: 19.1.2
-        version: 19.1.2(react@19.1.2)
+        specifier: 19.2.1
+        version: 19.2.1(react@19.2.1)
     devDependencies:
       '@azure/identity':
         specifier: 4.13.0
@@ -62,52 +62,58 @@ importers:
 
   apps/storybook:
     dependencies:
+      '@formbricks/survey-ui':
+        specifier: workspace:*
+        version: link:../../packages/survey-ui
       eslint-plugin-react-refresh:
-        specifier: 0.4.20
-        version: 0.4.20(eslint@8.57.0)
+        specifier: 0.4.24
+        version: 0.4.24(eslint@8.57.0)
     devDependencies:
       '@chromatic-com/storybook':
-        specifier: ^4.0.1
-        version: 4.1.3(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
+        specifier: ^4.1.3
+        version: 4.1.3(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
       '@storybook/addon-a11y':
-        specifier: 9.0.15
-        version: 9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
+        specifier: 10.0.8
+        version: 10.0.8(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
       '@storybook/addon-docs':
-        specifier: 9.0.15
-        version: 9.0.15(@types/react@19.1.4)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
+        specifier: 10.0.8
+        version: 10.0.8(@types/react@19.2.7)(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))
       '@storybook/addon-links':
-        specifier: 9.0.15
-        version: 9.0.15(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
+        specifier: 10.0.8
+        version: 10.0.8(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
       '@storybook/addon-onboarding':
-        specifier: 9.0.15
-        version: 9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
+        specifier: 10.0.8
+        version: 10.0.8(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
       '@storybook/react-vite':
-        specifier: 9.0.15
-        version: 9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(rollup@4.53.3)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        specifier: 10.0.8
+        version: 10.0.8(esbuild@0.27.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))
+      '@tailwindcss/vite':
+        specifier: 4.1.17
+        version: 4.1.17(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       '@typescript-eslint/eslint-plugin':
-        specifier: 8.32.0
-        version: 8.32.0(@typescript-eslint/parser@8.32.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
+        specifier: 8.48.0
+        version: 8.48.0(@typescript-eslint/parser@8.48.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
       '@typescript-eslint/parser':
-        specifier: 8.32.0
-        version: 8.32.0(eslint@8.57.0)(typescript@5.8.3)
+        specifier: 8.48.0
+        version: 8.48.0(eslint@8.57.0)(typescript@5.8.3)
       '@vitejs/plugin-react':
-        specifier: 4.4.1
-        version: 4.4.1(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        specifier: 5.1.1
+        version: 5.1.1(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       esbuild:
-        specifier: 0.25.4
-        version: 0.25.4
+        specifier: 0.27.0
+        version: 0.27.0
       eslint-plugin-storybook:
-        specifier: 9.0.15
-        version: 9.0.15(eslint@8.57.0)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3)
+        specifier: 10.0.8
+        version: 10.0.8(eslint@8.57.0)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)
       prop-types:
         specifier: 15.8.1
         version: 15.8.1
       storybook:
-        specifier: 9.0.15
-        version: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+        specifier: 10.0.8
+        version: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vite:
-        specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        specifier: 7.2.4
+        version: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   apps/web:
     dependencies:
@@ -125,16 +131,16 @@ importers:
         version: 1.52.2(socks@2.8.7)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
       '@dnd-kit/core':
         specifier: 6.3.1
-        version: 6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@dnd-kit/modifiers':
         specifier: 9.0.0
-        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       '@dnd-kit/sortable':
         specifier: 10.0.0
-        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       '@dnd-kit/utilities':
         specifier: 3.2.2
-        version: 3.2.2(react@19.1.2)
+        version: 3.2.2(react@19.2.1)
       '@formbricks/cache':
         specifier: workspace:*
         version: link:../../packages/cache
@@ -161,7 +167,7 @@ importers:
         version: link:../../packages/types
       '@hookform/resolvers':
         specifier: 5.0.1
-        version: 5.0.1(react-hook-form@7.56.2(react@19.1.2))
+        version: 5.0.1(react-hook-form@7.56.2(react@19.2.1))
       '@json2csv/node':
         specifier: 7.0.6
         version: 7.0.6
@@ -179,7 +185,7 @@ importers:
         version: 0.36.2
       '@lexical/react':
         specifier: 0.36.2
-        version: 0.36.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(yjs@13.6.27)
+        version: 0.36.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(yjs@13.6.27)
       '@lexical/rich-text':
         specifier: 0.36.2
         version: 0.36.2
@@ -215,64 +221,64 @@ importers:
         version: 6.14.0(prisma@6.14.0(magicast@0.3.5)(typescript@5.8.3))(typescript@5.8.3)
       '@radix-ui/react-accordion':
         specifier: 1.2.10
-        version: 1.2.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.2.10(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-checkbox':
         specifier: 1.3.1
-        version: 1.3.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.3.1(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-collapsible':
         specifier: 1.1.10
-        version: 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.10(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-dialog':
         specifier: 1.1.13
-        version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.13(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-dropdown-menu':
         specifier: 2.1.14
-        version: 2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 2.1.14(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-label':
         specifier: 2.1.6
-        version: 2.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 2.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-popover':
         specifier: 1.1.13
-        version: 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.13(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-radio-group':
         specifier: 1.3.6
-        version: 1.3.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.3.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-select':
         specifier: 2.2.4
-        version: 2.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 2.2.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-separator':
         specifier: 1.1.6
-        version: 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-slider':
         specifier: 1.3.4
-        version: 1.3.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.3.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-slot':
         specifier: 1.2.2
-        version: 1.2.2(@types/react@19.1.4)(react@19.1.2)
+        version: 1.2.2(@types/react@19.2.7)(react@19.2.1)
       '@radix-ui/react-switch':
         specifier: 1.2.4
-        version: 1.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.2.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-tabs':
         specifier: 1.1.11
-        version: 1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.11(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-toggle':
         specifier: 1.1.8
-        version: 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-toggle-group':
         specifier: 1.1.9
-        version: 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@radix-ui/react-tooltip':
         specifier: 1.2.6
-        version: 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@react-email/components':
         specifier: 0.0.38
-        version: 0.0.38(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 0.0.38(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@sentry/nextjs':
         specifier: 10.5.0
-        version: 10.5.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)(webpack@5.99.8(esbuild@0.25.10))
+        version: 10.5.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.99.8(esbuild@0.25.10))
       '@t3-oss/env-nextjs':
         specifier: 0.13.4
-        version: 0.13.4(arktype@2.1.29)(typescript@5.8.3)(zod@3.24.4)
+        version: 0.13.4(arktype@2.1.25)(typescript@5.8.3)(zod@3.24.4)
       '@tailwindcss/forms':
         specifier: 0.5.10
         version: 0.5.10(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)))
@@ -281,13 +287,13 @@ importers:
         version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)))
       '@tanstack/react-table':
         specifier: 8.21.3
-        version: 8.21.3(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 8.21.3(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@ungap/structured-clone':
         specifier: 1.3.0
         version: 1.3.0
       '@vercel/functions':
         specifier: 2.2.8
-        version: 2.2.8(@aws-sdk/credential-provider-web-identity@3.948.0)
+        version: 2.2.8(@aws-sdk/credential-provider-web-identity@3.920.0)
       '@vercel/og':
         specifier: 0.8.5
         version: 0.8.5
@@ -296,7 +302,7 @@ importers:
         version: 3.0.2
       boring-avatars:
         specifier: 2.0.1
-        version: 2.0.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 2.0.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       class-variance-authority:
         specifier: 0.7.1
         version: 0.7.1
@@ -305,7 +311,7 @@ importers:
         version: 2.1.1
       cmdk:
         specifier: 1.1.1
-        version: 1.1.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.1(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       csv-parse:
         specifier: 5.6.0
         version: 5.6.0
@@ -317,7 +323,7 @@ importers:
         version: 6.2.0(webpack@5.99.8(esbuild@0.25.10))
       framer-motion:
         specifier: 12.10.0
-        version: 12.10.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 12.10.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       googleapis:
         specifier: 148.0.0
         version: 148.0.0(encoding@0.1.13)
@@ -350,7 +356,7 @@ importers:
         version: 4.17.21
       lucide-react:
         specifier: 0.507.0
-        version: 0.507.0(react@19.1.2)
+        version: 0.507.0(react@19.2.1)
       markdown-it:
         specifier: 14.1.0
         version: 14.1.0
@@ -359,13 +365,13 @@ importers:
         version: 3.0.1
       next:
         specifier: 15.5.9
-        version: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       next-auth:
         specifier: 4.24.12
-        version: 4.24.12(patch_hash=bdy3m55bopfzpysceipfxj5eei)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(nodemailer@7.0.11)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 4.24.12(patch_hash=bdy3m55bopfzpysceipfxj5eei)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(nodemailer@7.0.11)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       next-safe-action:
         specifier: 7.10.8
-        version: 7.10.8(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(zod@3.24.4)
+        version: 7.10.8(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(zod@3.24.4)
       node-fetch:
         specifier: 3.3.2
         version: 3.3.2
@@ -387,30 +393,33 @@ importers:
       qrcode:
         specifier: 1.5.4
         version: 1.5.4
+      react-calendar:
+        specifier: 5.1.0
+        version: 5.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react-colorful:
         specifier: 5.6.1
-        version: 5.6.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 5.6.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react-confetti:
         specifier: 6.4.0
-        version: 6.4.0(react@19.1.2)
+        version: 6.4.0(react@19.2.1)
       react-day-picker:
         specifier: 9.6.7
-        version: 9.6.7(react@19.1.2)
+        version: 9.6.7(react@19.2.1)
       react-hook-form:
         specifier: 7.56.2
-        version: 7.56.2(react@19.1.2)
+        version: 7.56.2(react@19.2.1)
       react-hot-toast:
         specifier: 2.5.2
-        version: 2.5.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 2.5.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react-i18next:
         specifier: 15.7.3
-        version: 15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(typescript@5.8.3)
+        version: 15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.8.3)
       react-turnstile:
         specifier: 1.1.4
-        version: 1.1.4(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 1.1.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react-use:
         specifier: 17.6.0
-        version: 17.6.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 17.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       redis:
         specifier: 4.7.0
         version: 4.7.0
@@ -462,7 +471,7 @@ importers:
         version: 6.6.3
       '@testing-library/react':
         specifier: 16.3.0
-        version: 16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@types/bcryptjs':
         specifier: 2.4.6
         version: 2.4.6
@@ -492,13 +501,13 @@ importers:
         version: 1.5.5
       '@types/testing-library__react':
         specifier: 10.2.0
-        version: 10.2.0(@testing-library/dom@8.20.1)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+        version: 10.2.0(@testing-library/dom@8.20.1)(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@types/ungap__structured-clone':
         specifier: 1.2.0
         version: 1.2.0
       '@vitest/coverage-v8':
         specifier: 3.1.3
-        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.3)
@@ -522,16 +531,16 @@ importers:
         version: 10.9.2(@types/node@22.15.18)(typescript@5.8.3)
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-tsconfig-paths:
         specifier: 5.1.4
-        version: 5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vitest-mock-extended:
         specifier: 3.1.0
-        version: 3.1.0(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 3.1.0(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
 
   packages/cache:
     dependencies:
@@ -553,13 +562,13 @@ importers:
         version: link:../config-eslint
       '@vitest/coverage-v8':
         specifier: 3.1.3
-        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   packages/config-eslint:
     devDependencies:
@@ -574,10 +583,10 @@ importers:
         version: 8.32.1(eslint@8.57.0)(typescript@5.8.3)
       '@vercel/style-guide':
         specifier: 6.0.0
-        version: 6.0.0(@next/eslint-plugin-next@15.3.2)(eslint@8.57.0)(prettier@3.5.3)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 6.0.0(@next/eslint-plugin-next@15.3.2)(eslint@8.57.0)(prettier@3.5.3)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       '@vitest/eslint-plugin':
         specifier: 1.1.44
-        version: 1.1.44(@typescript-eslint/utils@8.49.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 1.1.44(@typescript-eslint/utils@8.48.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       eslint-config-next:
         specifier: 15.3.2
         version: 15.3.2(eslint@8.57.0)(typescript@5.8.3)
@@ -671,10 +680,10 @@ importers:
         version: 10.9.2(@types/node@22.15.18)(typescript@5.8.3)
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
 
   packages/i18n-utils:
     dependencies:
@@ -696,13 +705,13 @@ importers:
         version: 4.19.4
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   packages/js-core:
     devDependencies:
@@ -717,19 +726,19 @@ importers:
         version: 5.2.2(prettier@3.5.3)
       '@vitest/coverage-v8':
         specifier: 3.1.3
-        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
       terser:
         specifier: 5.39.1
         version: 5.39.1
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
 
   packages/logger:
     dependencies:
@@ -751,13 +760,13 @@ importers:
         version: link:../config-eslint
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   packages/storage:
     dependencies:
@@ -782,25 +791,125 @@ importers:
         version: link:../config-eslint
       '@vitest/coverage-v8':
         specifier: 3.1.3
-        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       vitest:
         specifier: 3.1.3
-        version: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  packages/survey-ui:
+    dependencies:
+      '@formkit/auto-animate':
+        specifier: 0.8.2
+        version: 0.8.2
+      '@radix-ui/react-checkbox':
+        specifier: 1.3.1
+        version: 1.3.1(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.1.14
+        version: 2.1.14(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-popover':
+        specifier: 1.1.13
+        version: 1.1.13(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-progress':
+        specifier: 1.1.8
+        version: 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-radio-group':
+        specifier: 1.3.6
+        version: 1.3.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      class-variance-authority:
+        specifier: 0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
+      date-fns:
+        specifier: 4.1.0
+        version: 4.1.0
+      isomorphic-dompurify:
+        specifier: 2.33.0
+        version: 2.33.0
+      lucide-react:
+        specifier: 0.507.0
+        version: 0.507.0(react@19.2.1)
+      react-day-picker:
+        specifier: 9.6.7
+        version: 9.6.7(react@19.2.1)
+      tailwind-merge:
+        specifier: 3.2.0
+        version: 3.2.0
+    devDependencies:
+      '@formbricks/config-typescript':
+        specifier: workspace:*
+        version: link:../config-typescript
+      '@formbricks/eslint-config':
+        specifier: workspace:*
+        version: link:../config-eslint
+      '@storybook/react':
+        specifier: 8.5.4
+        version: 8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)
+      '@storybook/react-vite':
+        specifier: 8.5.4
+        version: 8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@tailwindcss/postcss':
+        specifier: 4.0.0
+        version: 4.0.0
+      '@tailwindcss/vite':
+        specifier: 4.1.17
+        version: 4.1.17(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@types/react':
+        specifier: 19.2.1
+        version: 19.2.1
+      '@types/react-dom':
+        specifier: 19.2.1
+        version: 19.2.1(@types/react@19.2.1)
+      '@vitejs/plugin-react':
+        specifier: 4.3.4
+        version: 4.3.4(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@vitest/coverage-v8':
+        specifier: 3.1.3
+        version: 3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      react:
+        specifier: 19.2.1
+        version: 19.2.1
+      react-dom:
+        specifier: 19.2.1
+        version: 19.2.1(react@19.2.1)
+      rimraf:
+        specifier: 6.0.1
+        version: 6.0.1
+      tailwindcss:
+        specifier: 4.1.1
+        version: 4.1.1
+      vite:
+        specifier: 6.4.1
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+      vite-plugin-dts:
+        specifier: 4.5.3
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      vite-tsconfig-paths:
+        specifier: 5.1.4
+        version: 5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      vitest:
+        specifier: 3.1.3
+        version: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   packages/surveys:
     dependencies:
       '@calcom/embed-snippet':
         specifier: 1.3.3
         version: 1.3.3
-      '@formkit/auto-animate':
-        specifier: 0.8.2
-        version: 0.8.2
+      '@formbricks/survey-ui':
+        specifier: workspace:*
+        version: link:../survey-ui
       i18next:
         specifier: 25.5.2
         version: 25.5.2(typescript@5.8.3)
@@ -808,20 +917,14 @@ importers:
         specifier: 2.4.0
         version: 2.4.0(intl-messageformat@10.7.18)
       isomorphic-dompurify:
-        specifier: 2.24.0
-        version: 2.24.0
+        specifier: 2.33.0
+        version: 2.33.0
       preact:
         specifier: 10.26.6
         version: 10.26.6
-      react-calendar:
-        specifier: 5.1.0
-        version: 5.1.0(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react-date-picker:
-        specifier: 11.0.0
-        version: 11.0.0(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
       react-i18next:
         specifier: 15.7.3
-        version: 15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(typescript@5.8.3)
+        version: 15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.8.3)
     devDependencies:
       '@formbricks/config-typescript':
         specifier: workspace:*
@@ -837,7 +940,10 @@ importers:
         version: link:../types
       '@preact/preset-vite':
         specifier: 2.10.1
-        version: 2.10.1(@babel/core@7.28.5)(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 2.10.1(@babel/core@7.28.5)(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
       '@testing-library/preact':
         specifier: 3.2.4
         version: 3.2.4(preact@10.26.6)
@@ -854,20 +960,20 @@ importers:
         specifier: 8.5.3
         version: 8.5.3
       tailwindcss:
-        specifier: 3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
+        specifier: 4.1.17
+        version: 4.1.17
       terser:
         specifier: 5.39.1
         version: 5.39.1
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
       vite-plugin-dts:
         specifier: 4.5.3
-        version: 4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
       vite-tsconfig-paths:
         specifier: 5.1.4
-        version: 5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+        version: 5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
 
   packages/types:
     dependencies:
@@ -898,10 +1004,13 @@ importers:
         version: link:../config-eslint
       vite:
         specifier: 6.4.1
-        version: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+        version: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
 packages:
 
+  '@acemir/cssom@0.9.28':
+    resolution: {integrity: sha512-LuS6IVEivI75vKN8S04qRD+YySP0RmU/cV8UNukhQZvprxF+76Z43TNo/a08eCodaGhT1Us8etqS1ZRY9/Or0A==}
+
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
@@ -913,14 +1022,20 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@ark/schema@0.56.0':
-    resolution: {integrity: sha512-ECg3hox/6Z/nLajxXqNhgPtNdHWC9zNsDyskwO28WinoFEnWow4IsERNz9AnXRhTZJnYIlAJ4uGn3nlLk65vZA==}
+  '@ark/schema@0.53.0':
+    resolution: {integrity: sha512-1PB7RThUiTlmIu8jbSurPrhHpVixPd4C+xNBUF/HrjIENCeDcAMg36n5mpMzED7OQGDVIzpfXXiMnaTiutjHJw==}
 
-  '@ark/util@0.56.0':
-    resolution: {integrity: sha512-BghfRC8b9pNs3vBoDJhcta0/c1J1rsoS1+HgVUreMFPdhz/CRAKReAu57YEllNaSy98rWAdY1gE+gFup7OXpgA==}
+  '@ark/util@0.53.0':
+    resolution: {integrity: sha512-TGn4gLlA6dJcQiqrtCtd88JhGb2XBHo6qIejsDre+nxpGuUVW4G3YZGVrwjNBTO0EyR+ykzIo4joHJzOj+/cpA==}
 
-  '@asamuzakjp/css-color@3.2.0':
-    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+  '@asamuzakjp/css-color@4.1.0':
+    resolution: {integrity: sha512-9xiBAtLn4aNsa4mDnpovJvBn72tNEIACyvlqaNJ+ADemR+yeMJWnBudOi2qGDviJa7SwcDOU/TRh5dnET7qk0w==}
+
+  '@asamuzakjp/dom-selector@6.7.6':
+    resolution: {integrity: sha512-hBaJER6A9MpdG3WgdlOolHmbOYvSk46y7IQN/1+iqiCuUu6iWdQrs9DGKF8ocqsEqWujWf/V7b7vaDgiUmIvUg==}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
 
   '@aws-crypto/crc32@5.2.0':
     resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
@@ -957,8 +1072,8 @@ packages:
     resolution: {integrity: sha512-1bD2Do/OdCIzl72ncHKYamDhPijUErLYpuLvciyYD4Ywt4cVLHjWtVIqb22XOOHYYHE3NqHMd4uRhvXMlsBRoQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/client-sesv2@3.950.0':
-    resolution: {integrity: sha512-GiiaGTtHP+CCCKWZ8Zl5hZvKcgvhAffVtwR/rV9dwWgHIy1Su39xU3tNDeCW160hhKPyDDcCiH1GMDykuzdBAg==}
+  '@aws-sdk/client-sesv2@3.920.0':
+    resolution: {integrity: sha512-MDt2nQh14WFzlQcEcAxsw1QQzfaIDjwiqUA0AZAP5In/MZuDZnb54RIW/Af3R5IWywV9fGg9UFJpmbnmbm1dmA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/client-sso@3.817.0':
@@ -969,8 +1084,8 @@ packages:
     resolution: {integrity: sha512-+Pc3OYFpRYpKLKRreovPM63FPPud1/SF9vemwIJfz6KwsBCJdvg7vYD1xLSIp5DVZLeetgf4reCyAA5ImBfZuw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/client-sso@3.948.0':
-    resolution: {integrity: sha512-iWjchXy8bIAVBUsKnbfKYXRwhLgRg3EqCQ5FTr3JbR+QR75rZm4ZOYXlvHGztVTmtAZ+PQVA1Y4zO7v7N87C0A==}
+  '@aws-sdk/client-sso@3.920.0':
+    resolution: {integrity: sha512-m/Gb/ojGX4uqJAcvFWCbutVBnRXAKnlU+rrHUy3ugmg4lmMl1RjP4mwqlj+p+thCq2OmoEJtqZIuO2a/5N/NPA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/core@3.816.0':
@@ -981,8 +1096,8 @@ packages:
     resolution: {integrity: sha512-AhNmLCrx980LsK+SfPXGh7YqTyZxsK0Qmy18mWmkfY0TSq7WLaSDB5zdQbgbnQCACCHy8DUYXbi4KsjlIhv3PA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/core@3.947.0':
-    resolution: {integrity: sha512-Khq4zHhuAkvCFuFbgcy3GrZTzfSX7ZIjIcW1zRDxXRLZKRtuhnZdonqTUfaWi5K42/4OmxkYNpsO7X7trQOeHw==}
+  '@aws-sdk/core@3.920.0':
+    resolution: {integrity: sha512-vETnyaBJgIK6dh0hXzxw8e6v9SEFs/NgP6fJOn87QC+0M8U/omaB298kJ+i7P3KJafW6Pv/CWTsciMP/NNrg6A==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-cognito-identity@3.817.0':
@@ -997,8 +1112,8 @@ packages:
     resolution: {integrity: sha512-JgG7A8SSbr5IiCYL8kk39Y9chdSB5GPwBorDW8V8mr19G9L+qd6ohED4fAocoNFaDnYJ5wGAHhCfSJjzcsPBVQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-env@3.947.0':
-    resolution: {integrity: sha512-VR2V6dRELmzwAsCpK4GqxUi6UW5WNhAXS9F9AzWi5jvijwJo3nH92YNJUP4quMpgFZxJHEWyXLWgPjh9u0zYOA==}
+  '@aws-sdk/credential-provider-env@3.920.0':
+    resolution: {integrity: sha512-f8AcW9swaoJnJIj43TNyUVCR7ToEbUftD9y5Ht6IwNhRq2iPwZ7uTvgrkjfdxOayj1uD7Gw5MkeC3Ki5lcsasA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-http@3.816.0':
@@ -1009,8 +1124,8 @@ packages:
     resolution: {integrity: sha512-2hM5ByLpyK+qORUexjtYyDZsgxVCCUiJQZRMGkNXFEGz6zTpbjfTIWoh3zRgWHEBiqyPIyfEy50eIF69WshcuA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-http@3.947.0':
-    resolution: {integrity: sha512-inF09lh9SlHj63Vmr5d+LmwPXZc2IbK8lAruhOr3KLsZAIHEgHgGPXWDC2ukTEMzg0pkexQ6FOhXXad6klK4RA==}
+  '@aws-sdk/credential-provider-http@3.920.0':
+    resolution: {integrity: sha512-C75OGAnyHuILiIFfwbSUyV1YIJvcQt2U63IqlZ25eufV1NA+vP3Y60nvaxrzSxvditxXL95+YU3iLa4n2M0Omw==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-ini@3.817.0':
@@ -1021,12 +1136,8 @@ packages:
     resolution: {integrity: sha512-07M8zfb73KmMBqVO5/V3Ea9kqDspMX0fO0kaI1bsjWI6ngnMye8jCE0/sIhmkVAI0aU709VA0g+Bzlopnw9EoQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-ini@3.948.0':
-    resolution: {integrity: sha512-Cl//Qh88e8HBL7yYkJNpF5eq76IO6rq8GsatKcfVBm7RFVxCqYEPSSBtkHdbtNwQdRQqAMXc6E/lEB/CZUDxnA==}
-    engines: {node: '>=18.0.0'}
-
-  '@aws-sdk/credential-provider-login@3.948.0':
-    resolution: {integrity: sha512-gcKO2b6eeTuZGp3Vvgr/9OxajMrD3W+FZ2FCyJox363ZgMoYJsyNid1vuZrEuAGkx0jvveLXfwiVS0UXyPkgtw==}
+  '@aws-sdk/credential-provider-ini@3.920.0':
+    resolution: {integrity: sha512-rwTWfPhE2cs1kQ5dBpOEedhlzNcXf9LRzd9K4rn577pLJiWUc/n/Ibh4Hvw8Px1cp9krIk1q6wo+iK+kLQD8YA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-node@3.817.0':
@@ -1037,8 +1148,8 @@ packages:
     resolution: {integrity: sha512-FYaAqJbnSTrVL2iZkNDj2hj5087yMv2RN2GA8DJhe7iOJjzhzRojrtlfpWeJg6IhK0sBKDH+YXbdeexCzUJvtA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-node@3.948.0':
-    resolution: {integrity: sha512-ep5vRLnrRdcsP17Ef31sNN4g8Nqk/4JBydcUJuFRbGuyQtrZZrVT81UeH2xhz6d0BK6ejafDB9+ZpBjXuWT5/Q==}
+  '@aws-sdk/credential-provider-node@3.920.0':
+    resolution: {integrity: sha512-PGlmTe22KOLzk79urV7ILRF2ka3RXkiS6B5dgJC+OUjf209plcI+fs/p/sGdKCGCrPCYWgTHgqpyY2c8nO9B2A==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-process@3.816.0':
@@ -1049,8 +1160,8 @@ packages:
     resolution: {integrity: sha512-7r360x1VyEt35Sm1JFOzww2WpnfJNBbvvnzoyLt7WRfK0S/AfsuWhu5ltJ80QvJ0R3AiSNbG+q/btG2IHhDYPQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-process@3.947.0':
-    resolution: {integrity: sha512-WpanFbHe08SP1hAJNeDdBDVz9SGgMu/gc0XJ9u3uNpW99nKZjDpvPRAdW7WLA4K6essMjxWkguIGNOpij6Do2Q==}
+  '@aws-sdk/credential-provider-process@3.920.0':
+    resolution: {integrity: sha512-7dc0L0BCme4P17BgK/RtWLmwnM/R+si4Xd1cZe1oBLWRV+s++AXU/nDwfy1ErOLVpE9+lGG3Iw5zEPA/pJc7gQ==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-sso@3.817.0':
@@ -1061,8 +1172,8 @@ packages:
     resolution: {integrity: sha512-gd27B0NsgtKlaPNARj4IX7F7US5NuU691rGm0EUSkDsM7TctvJULighKoHzPxDQlrDbVI11PW4WtKS/Zg5zPlQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-sso@3.948.0':
-    resolution: {integrity: sha512-gqLhX1L+zb/ZDnnYbILQqJ46j735StfWV5PbDjxRzBKS7GzsiYoaf6MyHseEopmWrez5zl5l6aWzig7UpzSeQQ==}
+  '@aws-sdk/credential-provider-sso@3.920.0':
+    resolution: {integrity: sha512-+g1ajAa7nZGyLjKvQTzbasFvBwVWqMYSJl/3GbM61rpgjyHjeTPDZy2WXpQcpVGeCp6fWJG3J36Qjj7f9pfNeQ==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-provider-web-identity@3.817.0':
@@ -1073,8 +1184,8 @@ packages:
     resolution: {integrity: sha512-Jy4uPFfGzHk1Mxy+/Wr43vuw9yXsE2yiF4e4598vc3aJfO0YtA2nSfbKD3PNKRORwXbeKqWPfph9SCKQpWoxEg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/credential-provider-web-identity@3.948.0':
-    resolution: {integrity: sha512-MvYQlXVoJyfF3/SmnNzOVEtANRAiJIObEUYYyjTqKZTmcRIVVky0tPuG26XnB8LmTYgtESwJIZJj/Eyyc9WURQ==}
+  '@aws-sdk/credential-provider-web-identity@3.920.0':
+    resolution: {integrity: sha512-B/YX/5A9LcYBLMjb9Fjn88KEJXdl22dSGwLfW/iHr/ET7XrZgc2Vh+f0KtsH+0GOa/uq7m1G6rIuvQ6FojpJ1A==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/credential-providers@3.817.0':
@@ -1109,8 +1220,8 @@ packages:
     resolution: {integrity: sha512-KZ/W1uruWtMOs7D5j3KquOxzCnV79KQW9MjJFZM/M0l6KI8J6V3718MXxFHsTjUE4fpdV6SeCNLV1lwGygsjJA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-host-header@3.936.0':
-    resolution: {integrity: sha512-tAaObaAnsP1XnLGndfkGWFuzrJYuk9W0b/nLvol66t8FZExIAf/WdkT2NNAWOYxljVs++oHnyHBCxIlaHrzSiw==}
+  '@aws-sdk/middleware-host-header@3.920.0':
+    resolution: {integrity: sha512-XQv9GRKGhXuWv797l/GnE9pt4UhlbzY39f2G3prcsLJCLyeIMeZ00QACIyshlArQ3ZhJp5FCRGGBcoSPQ2nk0Q==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/middleware-location-constraint@3.873.0':
@@ -1125,8 +1236,8 @@ packages:
     resolution: {integrity: sha512-cpWJhOuMSyz9oV25Z/CMHCBTgafDCbv7fHR80nlRrPdPZ8ETNsahwRgltXP1QJJ8r3X/c1kwpOR7tc+RabVzNA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-logger@3.936.0':
-    resolution: {integrity: sha512-aPSJ12d3a3Ea5nyEnLbijCaaYJT2QjQ9iW+zGh5QcZYXmOGWbKVyPSxmVOboZQG+c1M8t6d2O7tqrwzIq8L8qw==}
+  '@aws-sdk/middleware-logger@3.920.0':
+    resolution: {integrity: sha512-96v4hvJ9Cg/+XTYtM2aVTwZPzDOwyUiBh+FLioMng32mR64ofO1lvet4Zi1Uer9j7s086th3DJWkvqpi3K83dQ==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/middleware-recursion-detection@3.804.0':
@@ -1137,16 +1248,16 @@ packages:
     resolution: {integrity: sha512-OtgY8EXOzRdEWR//WfPkA/fXl0+WwE8hq0y9iw2caNyKPtca85dzrrZWnPqyBK/cpImosrpR1iKMYr41XshsCg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-recursion-detection@3.948.0':
-    resolution: {integrity: sha512-Qa8Zj+EAqA0VlAVvxpRnpBpIWJI9KUwaioY1vkeNVwXPlNaz9y9zCKVM9iU9OZ5HXpoUg6TnhATAHXHAE8+QsQ==}
+  '@aws-sdk/middleware-recursion-detection@3.920.0':
+    resolution: {integrity: sha512-5OfZ4RDYAW08kxMaGxIebJoUhzH7/MpGOoPzVMfxxfGbf+e4p0DNHJ9EL6msUAsbGBhGccDl1b4aytnYW+IkgA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/middleware-sdk-s3@3.879.0':
     resolution: {integrity: sha512-ZTpLr2AbZcCsEzu18YCtB8Tp8tjAWHT0ccfwy3HiL6g9ncuSMW+7BVi1hDYmBidFwpPbnnIMtM0db3pDMR6/WA==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-sdk-s3@3.947.0':
-    resolution: {integrity: sha512-DS2tm5YBKhPW2PthrRBDr6eufChbwXe0NjtTZcYDfUCXf0OR+W6cIqyKguwHMJ+IyYdey30AfVw9/Lb5KB8U8A==}
+  '@aws-sdk/middleware-sdk-s3@3.920.0':
+    resolution: {integrity: sha512-VmqcDyuZweqplI9XtDSg5JJfNs6BMuf6x0W3MxFeiTQu89b6RP0ATNsHYGLIp8dx7xuNNnHcRKZW0xAXqj1yDQ==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/middleware-ssec@3.873.0':
@@ -1161,8 +1272,8 @@ packages:
     resolution: {integrity: sha512-DDSV8228lQxeMAFKnigkd0fHzzn5aauZMYC3CSj6e5/qE7+9OwpkUcjHfb7HZ9KWG6L2/70aKZXHqiJ4xKhOZw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/middleware-user-agent@3.947.0':
-    resolution: {integrity: sha512-7rpKV8YNgCP2R4F9RjWZFcD2R+SO/0R4VHIbY9iZJdH2MzzJ8ZG7h8dZ2m8QkQd1fjx4wrFJGGPJUTYXPV3baA==}
+  '@aws-sdk/middleware-user-agent@3.920.0':
+    resolution: {integrity: sha512-7kvJyz7a1v0C243DJUZTu4C++4U5gyFYKN35Ng7rBR03kQC8oE10qHfWNNc39Lj3urabjRvQ80e06pA/vCZ8xA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/nested-clients@3.817.0':
@@ -1173,8 +1284,8 @@ packages:
     resolution: {integrity: sha512-7+n9NpIz9QtKYnxmw1fHi9C8o0GrX8LbBR4D50c7bH6Iq5+XdSuL5AFOWWQ5cMD0JhqYYJhK/fJsVau3nUtC4g==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/nested-clients@3.948.0':
-    resolution: {integrity: sha512-zcbJfBsB6h254o3NuoEkf0+UY1GpE9ioiQdENWv7odo69s8iaGBEQ4BDpsIMqcuiiUXw1uKIVNxCB1gUGYz8lw==}
+  '@aws-sdk/nested-clients@3.920.0':
+    resolution: {integrity: sha512-1JlzZJ0qp68zr6wPoLFwZ0+EH6HQvKMJjF8e2y9yO82LC3CsetaMxLUC2em7uY+3Gp0TMSA/Yxy4rTShf0vmng==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/region-config-resolver@3.808.0':
@@ -1185,8 +1296,8 @@ packages:
     resolution: {integrity: sha512-q9sPoef+BBG6PJnc4x60vK/bfVwvRWsPgcoQyIra057S/QGjq5VkjvNk6H8xedf6vnKlXNBwq9BaANBXnldUJg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/region-config-resolver@3.936.0':
-    resolution: {integrity: sha512-wOKhzzWsshXGduxO4pqSiNyL9oUtk4BEvjWm9aaq6Hmfdoydq6v6t0rAGHWPjFwy9z2haovGRi3C8IxdMB4muw==}
+  '@aws-sdk/region-config-resolver@3.920.0':
+    resolution: {integrity: sha512-4g88FyRN+O4iFe8azt/9IEGeyktQcJPgjwpCCFwGL9QmOIOJja+F+Og05ydjnMBcUxH4CrWXJm0a54MXS2C9Fg==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/s3-presigned-post@3.879.0':
@@ -1201,8 +1312,8 @@ packages:
     resolution: {integrity: sha512-MDsw0EWOHyKac75X3gD8tLWtmPuRliS/s4IhWRhsdDCU13wewHIs5IlA5B65kT6ISf49yEIalEH3FHUSVqdmIQ==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/signature-v4-multi-region@3.947.0':
-    resolution: {integrity: sha512-UaYmzoxf9q3mabIA2hc4T6x5YSFUG2BpNjAZ207EA1bnQMiK+d6vZvb83t7dIWL/U1de1sGV19c1C81Jf14rrA==}
+  '@aws-sdk/signature-v4-multi-region@3.920.0':
+    resolution: {integrity: sha512-qrCYhUHtjsV6TpcuRiG0Wlu0jphAE752x18lKtkLZ0ZX33jPWbUkW7stmM/ahwDMrCK4eI7X2b7F3RrI/HnmMw==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/token-providers@3.817.0':
@@ -1213,8 +1324,8 @@ packages:
     resolution: {integrity: sha512-47J7sCwXdnw9plRZNAGVkNEOlSiLb/kR2slnDIHRK9NB/ECKsoqgz5OZQJ9E2f0yqOs8zSNJjn3T01KxpgW8Qw==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/token-providers@3.948.0':
-    resolution: {integrity: sha512-V487/kM4Teq5dcr1t5K6eoUKuqlGr9FRWL3MIMukMERJXHZvio6kox60FZ/YtciRHRI75u14YUqm2Dzddcu3+A==}
+  '@aws-sdk/token-providers@3.920.0':
+    resolution: {integrity: sha512-ESDgN6oTq9ypqxK2qVAs5+LJMJCjky41B52k38LDfgyjgrZwqHcRgCQhH2L9/gC4MVOaE4fI24TgZsJlfyJ5dA==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/types@3.804.0':
@@ -1225,8 +1336,8 @@ packages:
     resolution: {integrity: sha512-Bei+RL0cDxxV+lW2UezLbCYYNeJm6Nzee0TpW0FfyTRBhH9C1XQh4+x+IClriXvgBnRquTMMYsmJfvx8iyLKrg==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/types@3.936.0':
-    resolution: {integrity: sha512-uz0/VlMd2pP5MepdrHizd+T+OKfyK4r3OA9JI+L/lPKg0YFQosdJNCKisr6o70E3dh8iMpFYxF1UN/4uZsyARg==}
+  '@aws-sdk/types@3.920.0':
+    resolution: {integrity: sha512-W8FI6HteaMwACb49IQzNABjbaGM/fP0t4lLBHeL6KXBmXung2S9FMIBHGxoZvBCRt5omFF31yDCbFaDN/1BPYQ==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/util-arn-parser@3.873.0':
@@ -1251,8 +1362,8 @@ packages:
     resolution: {integrity: sha512-aVAJwGecYoEmbEFju3127TyJDF9qJsKDUUTRMDuS8tGn+QiWQFnfInmbt+el9GU1gEJupNTXV+E3e74y51fb7A==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/util-endpoints@3.936.0':
-    resolution: {integrity: sha512-0Zx3Ntdpu+z9Wlm7JKUBOzS9EunwKAb4KdGUQQxDqh5Lc3ta5uBoub+FgmVuzwnmBu9U1Os8UuwVTH0Lgu+P5w==}
+  '@aws-sdk/util-endpoints@3.920.0':
+    resolution: {integrity: sha512-PuoK3xl27LPLkm6VaeajBBTEtIF24aY+EfBWRKr/zqUJ6lTqicBLbxY0MqhsQ9KXALg/Ju0Aq7O4G0jpLu5S8w==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/util-format-url@3.873.0':
@@ -1269,8 +1380,8 @@ packages:
   '@aws-sdk/util-user-agent-browser@3.873.0':
     resolution: {integrity: sha512-AcRdbK6o19yehEcywI43blIBhOCSo6UgyWcuOJX5CFF8k39xm1ILCjQlRRjchLAxWrm0lU0Q7XV90RiMMFMZtA==}
 
-  '@aws-sdk/util-user-agent-browser@3.936.0':
-    resolution: {integrity: sha512-eZ/XF6NxMtu+iCma58GRNRxSq4lHo6zHQLOZRIeL/ghqYJirqHdenMOwrzPettj60KWlv827RVebP9oNVrwZbw==}
+  '@aws-sdk/util-user-agent-browser@3.920.0':
+    resolution: {integrity: sha512-7nMoQjTa1SwULoUXBHm1hx24cb969e98AwPbrSmGwEZl2ZYXULOX3EZuDaX9QTzHutw8AMOgoI6JxCXhRQfmAg==}
 
   '@aws-sdk/util-user-agent-node@3.816.0':
     resolution: {integrity: sha512-Q6dxmuj4hL7pudhrneWEQ7yVHIQRBFr0wqKLF1opwOi1cIePuoEbPyJ2jkel6PDEv1YMfvsAKaRshp6eNA8VHg==}
@@ -1290,8 +1401,8 @@ packages:
       aws-crt:
         optional: true
 
-  '@aws-sdk/util-user-agent-node@3.947.0':
-    resolution: {integrity: sha512-+vhHoDrdbb+zerV4noQk1DHaUMNzWFWPpPYjVTwW2186k5BEJIecAMChYkghRrBVJ3KPWP1+JnZwOd72F3d4rQ==}
+  '@aws-sdk/util-user-agent-node@3.920.0':
+    resolution: {integrity: sha512-JJykxGXilkeUeU5x3g8bXvkyedtmZ/gXZVwCnWfe/DHxoUDHgYhF0VAz+QJoh2lSN/lRnUV08K0ILmEzGQzY4A==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       aws-crt: '>=1.0.0'
@@ -1303,12 +1414,12 @@ packages:
     resolution: {integrity: sha512-kLO7k7cGJ6KaHiExSJWojZurF7SnGMDHXRuQunFnEoD0n1yB6Lqy/S/zHiQ7oJnBhPr9q0TW9qFkrsZb1Uc54w==}
     engines: {node: '>=18.0.0'}
 
-  '@aws-sdk/xml-builder@3.930.0':
-    resolution: {integrity: sha512-YIfkD17GocxdmlUVc3ia52QhcWuRIUJonbF8A2CYfcWNV3HzvAqpcPeC0bYUhkK+8e8YO1ARnLKZQE0TlwzorA==}
+  '@aws-sdk/xml-builder@3.914.0':
+    resolution: {integrity: sha512-k75evsBD5TcIjedycYS7QXQ98AmOtbnxRJOPtCo0IwYRmy7UvqgS/gBL5SmrIqeV6FDSYRQMgdBxSMp6MLmdew==}
     engines: {node: '>=18.0.0'}
 
-  '@aws/lambda-invoke-store@0.2.2':
-    resolution: {integrity: sha512-C0NBLsIqzDIae8HFw9YIrIBsbc0xTiOtt7fAukGPnqQ/+zZNaq+4jhuccltK0QuWHBnNm/a6kLIRA6GFiM10eg==}
+  '@aws/lambda-invoke-store@0.1.1':
+    resolution: {integrity: sha512-RcLam17LdlbSOSp9VxmUu1eI6Mwxp+OwhD2QhiSNmNCzoDb0EeUXTD2n/WbcnrAYMGlmf05th6QYq23VqvJqpA==}
     engines: {node: '>=18.0.0'}
 
   '@azure-rest/core-client@2.5.1':
@@ -1339,8 +1450,8 @@ packages:
     resolution: {integrity: sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==}
     engines: {node: '>=18.0.0'}
 
-  '@azure/core-rest-pipeline@1.22.2':
-    resolution: {integrity: sha512-MzHym+wOi8CLUlKCQu12de0nwcq9k9Kuv43j4Wa++CsCpJwps2eeBQwD2Bu8snkxTtDKDx4GwjuR9E8yC8LNrg==}
+  '@azure/core-rest-pipeline@1.22.1':
+    resolution: {integrity: sha512-UVZlVLfLyz6g3Hy7GNDpooMQonUygH7ghdiSASOOHy97fKj/mPLqgDX7aidOijn+sCMU+WU8NjlPlNTgnvbcGA==}
     engines: {node: '>=20.0.0'}
 
   '@azure/core-tracing@1.3.1':
@@ -1367,16 +1478,16 @@ packages:
     resolution: {integrity: sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==}
     engines: {node: '>=20.0.0'}
 
-  '@azure/msal-browser@4.27.0':
-    resolution: {integrity: sha512-bZ8Pta6YAbdd0o0PEaL1/geBsPrLEnyY/RDWqvF1PP9RUH8EMLvUMGoZFYS6jSlUan6KZ9IMTLCnwpWWpQRK/w==}
+  '@azure/msal-browser@4.26.0':
+    resolution: {integrity: sha512-Ie3SZ4IMrf9lSwWVzzJrhTPE+g9+QDUfeor1LKMBQzcblp+3J/U1G8hMpNSfLL7eA5F/DjjPXkATJ5JRUdDJLA==}
     engines: {node: '>=0.8.0'}
 
-  '@azure/msal-common@15.13.3':
-    resolution: {integrity: sha512-shSDU7Ioecya+Aob5xliW9IGq1Ui8y4EVSdWGyI1Gbm4Vg61WpP95LuzcY214/wEjSn6w4PZYD4/iVldErHayQ==}
+  '@azure/msal-common@15.13.1':
+    resolution: {integrity: sha512-vQYQcG4J43UWgo1lj7LcmdsGUKWYo28RfEvDQAEMmQIMjSFufvb+pS0FJ3KXmrPmnWlt1vHDl3oip6mIDUQ4uA==}
     engines: {node: '>=0.8.0'}
 
-  '@azure/msal-node@3.8.4':
-    resolution: {integrity: sha512-lvuAwsDpPDE/jSuVQOBMpLbXuVuLsPNRwWCyK3/6bPlBk0fGWegqoZ0qjZclMWyQ2JNvIY3vHY7hoFmFmFQcOw==}
+  '@azure/msal-node@3.8.1':
+    resolution: {integrity: sha512-HszfqoC+i2C9+BRDQfuNUGp15Re7menIhCEbFCQ49D3KaqEDrgZIgQ8zSct4T59jWeUIL9N/Dwiv4o2VueTdqQ==}
     engines: {node: '>=16'}
 
   '@azure/playwright@1.0.0':
@@ -1558,6 +1669,10 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^3.0.4
 
+  '@csstools/css-syntax-patches-for-csstree@1.0.20':
+    resolution: {integrity: sha512-8BHsjXfSciZxjmHQOuVdW2b8WLUPts9a+mfL13/PzEviufUEW2xnvQuOlKs9dRBHgRqJ53SF/DUoK9+MZk72oQ==}
+    engines: {node: '>=18'}
+
   '@csstools/css-tokenizer@3.0.4':
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
@@ -1593,11 +1708,11 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
-  '@emnapi/core@1.7.1':
-    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
+  '@emnapi/core@1.6.0':
+    resolution: {integrity: sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==}
 
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+  '@emnapi/runtime@1.6.0':
+    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
@@ -1611,8 +1726,8 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/aix-ppc64@0.25.4':
-    resolution: {integrity: sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==}
+  '@esbuild/aix-ppc64@0.27.0':
+    resolution: {integrity: sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
@@ -1623,8 +1738,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.25.4':
-    resolution: {integrity: sha512-bBy69pgfhMGtCnwpC/x5QhfxAz/cBgQ9enbtwjf6V9lnPI/hMyT9iWpR1arm0l3kttTr4L0KSLpKmLp/ilKS9A==}
+  '@esbuild/android-arm64@0.27.0':
+    resolution: {integrity: sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
@@ -1635,8 +1750,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.25.4':
-    resolution: {integrity: sha512-QNdQEps7DfFwE3hXiU4BZeOV68HHzYwGd0Nthhd3uCkkEKK7/R6MTgM0P7H7FAs5pU/DIWsviMmEGxEoxIZ+ZQ==}
+  '@esbuild/android-arm@0.27.0':
+    resolution: {integrity: sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
@@ -1647,8 +1762,8 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.25.4':
-    resolution: {integrity: sha512-TVhdVtQIFuVpIIR282btcGC2oGQoSfZfmBdTip2anCaVYcqWlZXGcdcKIUklfX2wj0JklNYgz39OBqh2cqXvcQ==}
+  '@esbuild/android-x64@0.27.0':
+    resolution: {integrity: sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
@@ -1659,8 +1774,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.25.4':
-    resolution: {integrity: sha512-Y1giCfM4nlHDWEfSckMzeWNdQS31BQGs9/rouw6Ub91tkK79aIMTH3q9xHvzH8d0wDru5Ci0kWB8b3up/nl16g==}
+  '@esbuild/darwin-arm64@0.27.0':
+    resolution: {integrity: sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
@@ -1671,8 +1786,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.25.4':
-    resolution: {integrity: sha512-CJsry8ZGM5VFVeyUYB3cdKpd/H69PYez4eJh1W/t38vzutdjEjtP7hB6eLKBoOdxcAlCtEYHzQ/PJ/oU9I4u0A==}
+  '@esbuild/darwin-x64@0.27.0':
+    resolution: {integrity: sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
@@ -1683,8 +1798,8 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.25.4':
-    resolution: {integrity: sha512-yYq+39NlTRzU2XmoPW4l5Ifpl9fqSk0nAJYM/V/WUGPEFfek1epLHJIkTQM6bBs1swApjO5nWgvr843g6TjxuQ==}
+  '@esbuild/freebsd-arm64@0.27.0':
+    resolution: {integrity: sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
@@ -1695,8 +1810,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.25.4':
-    resolution: {integrity: sha512-0FgvOJ6UUMflsHSPLzdfDnnBBVoCDtBTVyn/MrWloUNvq/5SFmh13l3dvgRPkDihRxb77Y17MbqbCAa2strMQQ==}
+  '@esbuild/freebsd-x64@0.27.0':
+    resolution: {integrity: sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
@@ -1707,8 +1822,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.25.4':
-    resolution: {integrity: sha512-+89UsQTfXdmjIvZS6nUnOOLoXnkUTB9hR5QAeLrQdzOSWZvNSAXAtcRDHWtqAUtAmv7ZM1WPOOeSxDzzzMogiQ==}
+  '@esbuild/linux-arm64@0.27.0':
+    resolution: {integrity: sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
@@ -1719,8 +1834,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.25.4':
-    resolution: {integrity: sha512-kro4c0P85GMfFYqW4TWOpvmF8rFShbWGnrLqlzp4X1TNWjRY3JMYUfDCtOxPKOIY8B0WC8HN51hGP4I4hz4AaQ==}
+  '@esbuild/linux-arm@0.27.0':
+    resolution: {integrity: sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
@@ -1731,8 +1846,8 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.25.4':
-    resolution: {integrity: sha512-yTEjoapy8UP3rv8dB0ip3AfMpRbyhSN3+hY8mo/i4QXFeDxmiYbEKp3ZRjBKcOP862Ua4b1PDfwlvbuwY7hIGQ==}
+  '@esbuild/linux-ia32@0.27.0':
+    resolution: {integrity: sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
@@ -1743,8 +1858,8 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.25.4':
-    resolution: {integrity: sha512-NeqqYkrcGzFwi6CGRGNMOjWGGSYOpqwCjS9fvaUlX5s3zwOtn1qwg1s2iE2svBe4Q/YOG1q6875lcAoQK/F4VA==}
+  '@esbuild/linux-loong64@0.27.0':
+    resolution: {integrity: sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
@@ -1755,8 +1870,8 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.25.4':
-    resolution: {integrity: sha512-IcvTlF9dtLrfL/M8WgNI/qJYBENP3ekgsHbYUIzEzq5XJzzVEV/fXY9WFPfEEXmu3ck2qJP8LG/p3Q8f7Zc2Xg==}
+  '@esbuild/linux-mips64el@0.27.0':
+    resolution: {integrity: sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
@@ -1767,8 +1882,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.25.4':
-    resolution: {integrity: sha512-HOy0aLTJTVtoTeGZh4HSXaO6M95qu4k5lJcH4gxv56iaycfz1S8GO/5Jh6X4Y1YiI0h7cRyLi+HixMR+88swag==}
+  '@esbuild/linux-ppc64@0.27.0':
+    resolution: {integrity: sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
@@ -1779,8 +1894,8 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.25.4':
-    resolution: {integrity: sha512-i8JUDAufpz9jOzo4yIShCTcXzS07vEgWzyX3NH2G7LEFVgrLEhjwL3ajFE4fZI3I4ZgiM7JH3GQ7ReObROvSUA==}
+  '@esbuild/linux-riscv64@0.27.0':
+    resolution: {integrity: sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
@@ -1791,8 +1906,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.25.4':
-    resolution: {integrity: sha512-jFnu+6UbLlzIjPQpWCNh5QtrcNfMLjgIavnwPQAfoGx4q17ocOU9MsQ2QVvFxwQoWpZT8DvTLooTvmOQXkO51g==}
+  '@esbuild/linux-s390x@0.27.0':
+    resolution: {integrity: sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
@@ -1803,8 +1918,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.25.4':
-    resolution: {integrity: sha512-6e0cvXwzOnVWJHq+mskP8DNSrKBr1bULBvnFLpc1KY+d+irZSgZ02TGse5FsafKS5jg2e4pbvK6TPXaF/A6+CA==}
+  '@esbuild/linux-x64@0.27.0':
+    resolution: {integrity: sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
@@ -1815,8 +1930,8 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-arm64@0.25.4':
-    resolution: {integrity: sha512-vUnkBYxZW4hL/ie91hSqaSNjulOnYXE1VSLusnvHg2u3jewJBz3YzB9+oCw8DABeVqZGg94t9tyZFoHma8gWZQ==}
+  '@esbuild/netbsd-arm64@0.27.0':
+    resolution: {integrity: sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
@@ -1827,8 +1942,8 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.25.4':
-    resolution: {integrity: sha512-XAg8pIQn5CzhOB8odIcAm42QsOfa98SBeKUdo4xa8OvX8LbMZqEtgeWE9P/Wxt7MlG2QqvjGths+nq48TrUiKw==}
+  '@esbuild/netbsd-x64@0.27.0':
+    resolution: {integrity: sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
@@ -1839,8 +1954,8 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-arm64@0.25.4':
-    resolution: {integrity: sha512-Ct2WcFEANlFDtp1nVAXSNBPDxyU+j7+tId//iHXU2f/lN5AmO4zLyhDcpR5Cz1r08mVxzt3Jpyt4PmXQ1O6+7A==}
+  '@esbuild/openbsd-arm64@0.27.0':
+    resolution: {integrity: sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
@@ -1851,8 +1966,8 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.25.4':
-    resolution: {integrity: sha512-xAGGhyOQ9Otm1Xu8NT1ifGLnA6M3sJxZ6ixylb+vIUVzvvd6GOALpwQrYrtlPouMqd/vSbgehz6HaVk4+7Afhw==}
+  '@esbuild/openbsd-x64@0.27.0':
+    resolution: {integrity: sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
@@ -1863,14 +1978,20 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/openharmony-arm64@0.27.0':
+    resolution: {integrity: sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/sunos-x64@0.25.10':
     resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.25.4':
-    resolution: {integrity: sha512-Mw+tzy4pp6wZEK0+Lwr76pWLjrtjmJyUB23tHKqEDP74R3q95luY/bXqXZeYl4NYlvwOqoRKlInQialgCKy67Q==}
+  '@esbuild/sunos-x64@0.27.0':
+    resolution: {integrity: sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
@@ -1881,8 +2002,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.25.4':
-    resolution: {integrity: sha512-AVUP428VQTSddguz9dO9ngb+E5aScyg7nOeJDrF1HPYu555gmza3bDGMPhmVXL8svDSoqPCsCPjb265yG/kLKQ==}
+  '@esbuild/win32-arm64@0.27.0':
+    resolution: {integrity: sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
@@ -1893,8 +2014,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.25.4':
-    resolution: {integrity: sha512-i1sW+1i+oWvQzSgfRcxxG2k4I9n3O9NRqy8U+uugaT2Dy7kLO9Y7wI72haOahxceMX8hZAzgGou1FhndRldxRg==}
+  '@esbuild/win32-ia32@0.27.0':
+    resolution: {integrity: sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
@@ -1905,8 +2026,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.25.4':
-    resolution: {integrity: sha512-nOT2vZNw6hJ+z43oP1SPea/G/6AbN6X+bGNhNuq8NtRHy4wsMhw765IKLNmnjek7GvjWBYQ8Q5VBoYTFg9y1UQ==}
+  '@esbuild/win32-x64@0.27.0':
+    resolution: {integrity: sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -2012,8 +2133,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-arm64@0.34.5':
-    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+  '@img/sharp-darwin-arm64@0.34.4':
+    resolution: {integrity: sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [darwin]
@@ -2024,8 +2145,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.34.5':
-    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+  '@img/sharp-darwin-x64@0.34.4':
+    resolution: {integrity: sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
@@ -2035,8 +2156,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
-    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+  '@img/sharp-libvips-darwin-arm64@1.2.3':
+    resolution: {integrity: sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==}
     cpu: [arm64]
     os: [darwin]
 
@@ -2045,8 +2166,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
-    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+  '@img/sharp-libvips-darwin-x64@1.2.3':
+    resolution: {integrity: sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==}
     cpu: [x64]
     os: [darwin]
 
@@ -2055,8 +2176,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
-    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+  '@img/sharp-libvips-linux-arm64@1.2.3':
+    resolution: {integrity: sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==}
     cpu: [arm64]
     os: [linux]
 
@@ -2065,8 +2186,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
-    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+  '@img/sharp-libvips-linux-arm@1.2.3':
+    resolution: {integrity: sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==}
     cpu: [arm]
     os: [linux]
 
@@ -2075,23 +2196,18 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+  '@img/sharp-libvips-linux-ppc64@1.2.3':
+    resolution: {integrity: sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==}
     cpu: [ppc64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
-    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
-    cpu: [riscv64]
-    os: [linux]
-
   '@img/sharp-libvips-linux-s390x@1.1.0':
     resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
-    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+  '@img/sharp-libvips-linux-s390x@1.2.3':
+    resolution: {integrity: sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==}
     cpu: [s390x]
     os: [linux]
 
@@ -2100,8 +2216,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
-    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+  '@img/sharp-libvips-linux-x64@1.2.3':
+    resolution: {integrity: sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==}
     cpu: [x64]
     os: [linux]
 
@@ -2110,8 +2226,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
-    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
+    resolution: {integrity: sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==}
     cpu: [arm64]
     os: [linux]
 
@@ -2120,8 +2236,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
-    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
+    resolution: {integrity: sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==}
     cpu: [x64]
     os: [linux]
 
@@ -2131,8 +2247,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linux-arm64@0.34.5':
-    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+  '@img/sharp-linux-arm64@0.34.4':
+    resolution: {integrity: sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
@@ -2143,32 +2259,26 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-linux-arm@0.34.5':
-    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+  '@img/sharp-linux-arm@0.34.4':
+    resolution: {integrity: sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
 
-  '@img/sharp-linux-ppc64@0.34.5':
-    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+  '@img/sharp-linux-ppc64@0.34.4':
+    resolution: {integrity: sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
 
-  '@img/sharp-linux-riscv64@0.34.5':
-    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [riscv64]
-    os: [linux]
-
   '@img/sharp-linux-s390x@0.34.1':
     resolution: {integrity: sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
 
-  '@img/sharp-linux-s390x@0.34.5':
-    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+  '@img/sharp-linux-s390x@0.34.4':
+    resolution: {integrity: sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
@@ -2179,8 +2289,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linux-x64@0.34.5':
-    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+  '@img/sharp-linux-x64@0.34.4':
+    resolution: {integrity: sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
@@ -2191,8 +2301,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
-    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+  '@img/sharp-linuxmusl-arm64@0.34.4':
+    resolution: {integrity: sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
@@ -2203,8 +2313,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
-    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+  '@img/sharp-linuxmusl-x64@0.34.4':
+    resolution: {integrity: sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
@@ -2214,13 +2324,13 @@ packages:
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
-  '@img/sharp-wasm32@0.34.5':
-    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+  '@img/sharp-wasm32@0.34.4':
+    resolution: {integrity: sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
-  '@img/sharp-win32-arm64@0.34.5':
-    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+  '@img/sharp-win32-arm64@0.34.4':
+    resolution: {integrity: sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [win32]
@@ -2231,8 +2341,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-ia32@0.34.5':
-    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+  '@img/sharp-win32-ia32@0.34.4':
+    resolution: {integrity: sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
@@ -2243,8 +2353,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.34.5':
-    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+  '@img/sharp-win32-x64@0.34.4':
+    resolution: {integrity: sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
@@ -2265,6 +2375,15 @@ packages:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0':
+    resolution: {integrity: sha512-qYDdL7fPwLRI+bJNurVcis+tNgJmvWjH4YTBGXTA8xMuxFrnAz6E5o35iyzyKbq5J5Lr8mJGfrR5GXl+WGwhgQ==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1':
     resolution: {integrity: sha512-J4BaTocTOYFkMHIra1JDWrMWpNmBl4EkplIwHEsV8aeUOtdWjwSnln9U7twjMFTAEB7mptNtSKyVi1Y2W9sDJw==}
     peerDependencies:
@@ -2403,27 +2522,27 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@microsoft/api-extractor-model@7.32.2':
-    resolution: {integrity: sha512-Ussc25rAalc+4JJs9HNQE7TuO9y6jpYQX9nWD1DhqUzYPBr3Lr7O9intf+ZY8kD5HnIqeIRJX7ccCT0QyBy2Ww==}
+  '@microsoft/api-extractor-model@7.31.3':
+    resolution: {integrity: sha512-dv4quQI46p0U03TCEpasUf6JrJL3qjMN7JUAobsPElxBv4xayYYvWW9aPpfYV+Jx6hqUcVaLVOeV7+5hxsyoFQ==}
 
-  '@microsoft/api-extractor@7.55.2':
-    resolution: {integrity: sha512-1jlWO4qmgqYoVUcyh+oXYRztZde/pAi7cSVzBz/rc+S7CoVzDasy8QE13dx6sLG4VRo8SfkkLbFORR6tBw4uGQ==}
+  '@microsoft/api-extractor@7.53.3':
+    resolution: {integrity: sha512-p2HmQaMSVqMBj3bH3643f8xApKAqrF1jNpPsMCTQOYCYgfwLnvzsve8c+bgBWzCOBBgLK54PB6ZLIWMGLg8CZA==}
     hasBin: true
 
   '@microsoft/tsdoc-config@0.16.2':
     resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
 
-  '@microsoft/tsdoc-config@0.18.0':
-    resolution: {integrity: sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw==}
+  '@microsoft/tsdoc-config@0.17.1':
+    resolution: {integrity: sha512-UtjIFe0C6oYgTnad4q1QP4qXwLhe6tIpNTRStJ2RZEPIkqQPREAwE5spzVxsdn9UaEMUqhh0AqSx3X4nWAKXWw==}
 
   '@microsoft/tsdoc@0.14.2':
     resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
 
-  '@microsoft/tsdoc@0.16.0':
-    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+  '@microsoft/tsdoc@0.15.1':
+    resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
 
-  '@mongodb-js/saslprep@1.4.0':
-    resolution: {integrity: sha512-ZHzx7Z3rdlWL1mECydvpryWN/ETXJiCxdgQKTAH+djzIPe77HdnSizKBDi1TVDXZjXyOj2IqEG/vPw71ULF06w==}
+  '@mongodb-js/saslprep@1.3.2':
+    resolution: {integrity: sha512-QgA5AySqB27cGTXBFmnpifAi7HxoGUeezwo6p9dI03MuDB6Pp33zgclqVb6oVK3j6I9Vesg0+oojW2XxB59SGg==}
 
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
@@ -2832,8 +2951,8 @@ packages:
     resolution: {integrity: sha512-KZ1JsXcP2pqunfsJBNk+py6AJ5R6ZJ3yvM5Lhhf93rHPHvdDzgfMYPS4F7GNO3j/MVDCtfbttrkcpu7sl0Wu/Q==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/semantic-conventions@1.38.0':
-    resolution: {integrity: sha512-kocjix+/sSggfJhwXqClZ3i9Y/MI0fp7b+g7kCRm6psy2dsf8uApTRclwG18h8Avm7C9+fnt+O36PspJ/OzoWg==}
+  '@opentelemetry/semantic-conventions@1.37.0':
+    resolution: {integrity: sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA==}
     engines: {node: '>=14'}
 
   '@opentelemetry/sql-common@0.41.2':
@@ -2888,8 +3007,8 @@ packages:
   '@prefresh/babel-plugin@0.5.2':
     resolution: {integrity: sha512-AOl4HG6dAxWkJ5ndPHBgBa49oo/9bOiJuRDKHLSTyH+Fd9x00shTXpdiTj1W41l6oQIwUOAgJeHMn4QwIDpHkA==}
 
-  '@prefresh/core@1.5.9':
-    resolution: {integrity: sha512-IKBKCPaz34OFVC+adiQ2qaTF5qdztO2/4ZPf4KsRTgjKosWqxVXmEbxCiUydYZRY8GVie+DQlKzQr9gt6HQ+EQ==}
+  '@prefresh/core@1.5.8':
+    resolution: {integrity: sha512-T7HMpakS1iPVCFZvfDLMGyrWAcO3toUN9/RkJUqqoRr/vNhQrZgHjidfhq3awDzAQtw1emDWH8dsOeu0DWqtgA==}
     peerDependencies:
       preact: ^10.0.0 || ^11.0.0-0
 
@@ -2920,11 +3039,11 @@ packages:
   '@prisma/debug@6.14.0':
     resolution: {integrity: sha512-j4Lf+y+5QIJgQD4sJWSbkOD7geKx9CakaLp/TyTy/UDu9Wo0awvWCBH/BAxTHUaCpIl9USA5VS/KJhDqKJSwug==}
 
-  '@prisma/debug@6.19.1':
-    resolution: {integrity: sha512-h1JImhlAd/s5nhY/e9qkAzausWldbeT+e4nZF7A4zjDYBF4BZmKDt4y0jK7EZapqOm1kW7V0e9agV/iFDy3fWw==}
+  '@prisma/debug@6.18.0':
+    resolution: {integrity: sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==}
 
-  '@prisma/dmmf@6.19.1':
-    resolution: {integrity: sha512-QY6z6GBt1ySavs2I6VxXJFhPV2wabkookKjLsK/GFygZ0tmDmki0iutS8Mv0fQs3O8vk1t+1x3rZjJHqy/6OSw==}
+  '@prisma/dmmf@6.18.0':
+    resolution: {integrity: sha512-x0ItbLDxAnciEMFnGUm90Bkpzx2ja5Lp8Lz+9UkepIClZOMC4WvtMUHaMMfCFqfoBb+KUbxa/xV+FJ6EAaw4wQ==}
 
   '@prisma/engines-version@6.14.0-25.717184b7b35ea05dfa71a3236b7af656013e1e49':
     resolution: {integrity: sha512-EgN9ODJpiX45yvwcngoStp3uQPJ3l+AEVoQ6dMMO2QvmwIlnxfApzKmJQExzdo7/hqQANrz5txHJdGYHzOnGHA==}
@@ -2935,11 +3054,11 @@ packages:
   '@prisma/fetch-engine@6.14.0':
     resolution: {integrity: sha512-MPzYPOKMENYOaY3AcAbaKrfvXVlvTc6iHmTXsp9RiwCX+bPyfDMqMFVUSVXPYrXnrvEzhGHfyiFy0PRLHPysNg==}
 
-  '@prisma/generator-helper@6.19.1':
-    resolution: {integrity: sha512-/q5JlaWIthJ5wpx7Y7e9pstAeUpGt7vXMKK/yQhZ000fOKnLySNqlt/5bHXT4TO4P2Apjwb/bM0GwTGMV6D+eA==}
+  '@prisma/generator-helper@6.18.0':
+    resolution: {integrity: sha512-kmlCDRRewLwBkHpkAjzyuNHD5ISlDLzUTcTsZbwmjDilQVt/S72xvvCAa+hxY16APTkqbtDYn3p7zL/XFO+C0A==}
 
-  '@prisma/generator@6.19.1':
-    resolution: {integrity: sha512-q/JOCDQg8S0l5dM9HXWszTKHVZzwvYB/8aFNln2FDcTGB2YeO9Q7nKTMnYfezip6RE/lCcxz5rZ+YXWr62XUwQ==}
+  '@prisma/generator@6.18.0':
+    resolution: {integrity: sha512-8Sz9z8d/X/42uL07qYF4no2hnSSMPk8g6+w0zpINCN7lvnILby5b56xA0uPKRFfR3Wfn3NtFLnyEpMQE9fXeeg==}
 
   '@prisma/get-platform@6.14.0':
     resolution: {integrity: sha512-7VjuxKNwjnBhKfqPpMeWiHEa2sVjYzmHdl1slW6STuUCe9QnOY0OY1ljGSvz6wpG4U8DfbDqkG1yofd/1GINww==}
@@ -3068,6 +3187,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.3':
+    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dialog@1.1.13':
     resolution: {integrity: sha512-ARFmqUyhIVS3+riWzwGTe7JLjqwqgnODBUZdqpWar/z1WFs9z76fuOs/2BOWCR+YboRn4/WN9aoaGVwqNRr8VA==}
     peerDependencies:
@@ -3238,6 +3366,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.4':
     resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
     peerDependencies:
@@ -3251,6 +3392,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.8':
+    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-radio-group@1.3.6':
     resolution: {integrity: sha512-1tfTAqnYZNVwSpFhCT273nzK8qGBReeYnNTPspCggqk1fvIrfVxJekIuBFidNivzpdiMqDwVGnQvHqXrRPM4Og==}
     peerDependencies:
@@ -3325,6 +3479,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.2.4':
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
@@ -3673,6 +3836,9 @@ packages:
     resolution: {integrity: sha512-C7c51Nn4yTxXFKvgh2txJFNweaVcfUPQxwEUFw4aWsCmfiBDJsTSwviIF8EcwjQ6k8bPyMWCl1vw4BdxE569Cg==}
     engines: {node: '>= 10'}
 
+  '@rolldown/pluginutils@1.0.0-beta.47':
+    resolution: {integrity: sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==}
+
   '@rollup/plugin-commonjs@28.0.1':
     resolution: {integrity: sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
@@ -3695,124 +3861,124 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.53.3':
-    resolution: {integrity: sha512-mRSi+4cBjrRLoaal2PnqH82Wqyb+d3HsPUN/W+WslCXsZsyHa9ZeQQX/pQsZaVIWDkPcpV6jJ+3KLbTbgnwv8w==}
+  '@rollup/rollup-android-arm-eabi@4.52.5':
+    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.53.3':
-    resolution: {integrity: sha512-CbDGaMpdE9sh7sCmTrTUyllhrg65t6SwhjlMJsLr+J8YjFuPmCEjbBSx4Z/e4SmDyH3aB5hGaJUP2ltV/vcs4w==}
+  '@rollup/rollup-android-arm64@4.52.5':
+    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.53.3':
-    resolution: {integrity: sha512-Nr7SlQeqIBpOV6BHHGZgYBuSdanCXuw09hon14MGOLGmXAFYjx1wNvquVPmpZnl0tLjg25dEdr4IQ6GgyToCUA==}
+  '@rollup/rollup-darwin-arm64@4.52.5':
+    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.53.3':
-    resolution: {integrity: sha512-DZ8N4CSNfl965CmPktJ8oBnfYr3F8dTTNBQkRlffnUarJ2ohudQD17sZBa097J8xhQ26AwhHJ5mvUyQW8ddTsQ==}
+  '@rollup/rollup-darwin-x64@4.52.5':
+    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.53.3':
-    resolution: {integrity: sha512-yMTrCrK92aGyi7GuDNtGn2sNW+Gdb4vErx4t3Gv/Tr+1zRb8ax4z8GWVRfr3Jw8zJWvpGHNpss3vVlbF58DZ4w==}
+  '@rollup/rollup-freebsd-arm64@4.52.5':
+    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.53.3':
-    resolution: {integrity: sha512-lMfF8X7QhdQzseM6XaX0vbno2m3hlyZFhwcndRMw8fbAGUGL3WFMBdK0hbUBIUYcEcMhVLr1SIamDeuLBnXS+Q==}
+  '@rollup/rollup-freebsd-x64@4.52.5':
+    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
-    resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
-    resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.53.3':
-    resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.53.3':
-    resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
+    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-gnu@4.53.3':
-    resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
-    resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
-    resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.53.3':
-    resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.53.3':
-    resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.53.3':
-    resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.53.3':
-    resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
+  '@rollup/rollup-linux-x64-musl@4.52.5':
+    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-openharmony-arm64@4.53.3':
-    resolution: {integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==}
+  '@rollup/rollup-openharmony-arm64@4.52.5':
+    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.53.3':
-    resolution: {integrity: sha512-GOFuKpsxR/whszbF/bzydebLiXIHSgsEUp6M0JI8dWvi+fFa1TD6YQa4aSZHtpmh2/uAlj/Dy+nmby3TJ3pkTw==}
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.53.3':
-    resolution: {integrity: sha512-iah+THLcBJdpfZ1TstDFbKNznlzoxa8fmnFYK4V67HvmuNYkVdAywJSoteUszvBQ9/HqN2+9AZghbajMsFT+oA==}
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.53.3':
-    resolution: {integrity: sha512-J9QDiOIZlZLdcot5NXEepDkstocktoVjkaKUtqzgzpt2yWjGlbYiKyp05rWwk4nypbYUNoFAztEgixoLaSETkg==}
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
+    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.53.3':
-    resolution: {integrity: sha512-UhTd8u31dXadv0MopwGgNOBpUVROFKWVQgAg5N1ESyCz8AuBcMqm4AuTjrwgQKGDfoFuz02EuMRHQIw/frmYKQ==}
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
+    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
     cpu: [x64]
     os: [win32]
 
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@rushstack/eslint-patch@1.15.0':
-    resolution: {integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==}
+  '@rushstack/eslint-patch@1.14.1':
+    resolution: {integrity: sha512-jGTk8UD/RdjsNZW8qq10r0RBvxL8OWtoT+kImlzPDFilmozzM+9QmIJsmze9UiSBrFU45ZxhTYBypn9q9z/VfQ==}
 
-  '@rushstack/node-core-library@5.19.1':
-    resolution: {integrity: sha512-ESpb2Tajlatgbmzzukg6zyAhH+sICqJR2CNXNhXcEbz6UGCQfrKCtkxOpJTftWc8RGouroHG0Nud1SJAszvpmA==}
+  '@rushstack/node-core-library@5.18.0':
+    resolution: {integrity: sha512-XDebtBdw5S3SuZIt+Ra2NieT8kQ3D2Ow1HxhDQ/2soinswnOu9e7S69VSwTOLlQnx5mpWbONu+5JJjDxMAb6Fw==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
@@ -3830,16 +3996,16 @@ packages:
   '@rushstack/rig-package@0.6.0':
     resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
 
-  '@rushstack/terminal@0.19.5':
-    resolution: {integrity: sha512-6k5tpdB88G0K7QrH/3yfKO84HK9ggftfUZ51p7fePyCE7+RLLHkWZbID9OFWbXuna+eeCFE7AkKnRMHMxNbz7Q==}
+  '@rushstack/terminal@0.19.3':
+    resolution: {integrity: sha512-0P8G18gK9STyO+CNBvkKPnWGMxESxecTYqOcikHOVIHXa9uAuTK+Fw8TJq2Gng1w7W6wTC9uPX6hGNvrMll2wA==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.1.5':
-    resolution: {integrity: sha512-YmrFTFUdHXblYSa+Xc9OO9FsL/XFcckZy0ycQ6q7VSBsVs5P0uD9vcges5Q9vctGlVdu27w+Ct6IuJ458V0cTQ==}
+  '@rushstack/ts-command-line@5.1.3':
+    resolution: {integrity: sha512-Kdv0k/BnnxIYFlMVC1IxrIS0oGQd4T4b7vKfx52Y2+wk2WZSDFIvedr7JrhenzSlm3ou5KwtoTGTGd5nbODRug==}
 
   '@selderee/plugin-htmlparser2@0.11.0':
     resolution: {integrity: sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==}
@@ -3860,67 +4026,67 @@ packages:
     resolution: {integrity: sha512-Dp4coE/nPzhFrYH3iVrpVKmhNJ1m/jGXMEDBCNg3wJZRszI41Hrj0jCAM0Y2S3Q4IxYOmFYaFbGtVpAznRyOHg==}
     engines: {node: '>=18'}
 
-  '@sentry/babel-plugin-component-annotate@4.6.1':
-    resolution: {integrity: sha512-aSIk0vgBqv7PhX6/Eov+vlI4puCE0bRXzUG5HdCsHBpAfeMkI8Hva6kSOusnzKqs8bf04hU7s3Sf0XxGTj/1AA==}
+  '@sentry/babel-plugin-component-annotate@4.6.0':
+    resolution: {integrity: sha512-3soTX50JPQQ51FSbb4qvNBf4z/yP7jTdn43vMTp9E4IxvJ9HKJR7OEuKkCMszrZmWsVABXl02msqO7QisePdiQ==}
     engines: {node: '>= 14'}
 
   '@sentry/browser@10.5.0':
     resolution: {integrity: sha512-o5pEJeZ/iZ7Fmaz2sIirThfnmSVNiP5ZYhacvcDi0qc288TmBbikCX3fXxq3xiSkhXfe1o5QIbNyovzfutyuVw==}
     engines: {node: '>=18'}
 
-  '@sentry/bundler-plugin-core@4.6.1':
-    resolution: {integrity: sha512-WPeRbnMXm927m4Kr69NTArPfI+p5/34FHftdCRI3LFPMyhZDzz6J3wLy4hzaVUgmMf10eLzmq2HGEMvpQmdynA==}
+  '@sentry/bundler-plugin-core@4.6.0':
+    resolution: {integrity: sha512-Fub2XQqrS258jjS8qAxLLU1k1h5UCNJ76i8m4qZJJdogWWaF8t00KnnTyp9TEDJzrVD64tRXS8+HHENxmeUo3g==}
     engines: {node: '>= 14'}
 
-  '@sentry/cli-darwin@2.58.4':
-    resolution: {integrity: sha512-kbTD+P4X8O+nsNwPxCywtj3q22ecyRHWff98rdcmtRrvwz8CKi/T4Jxn/fnn2i4VEchy08OWBuZAqaA5Kh2hRQ==}
+  '@sentry/cli-darwin@2.57.0':
+    resolution: {integrity: sha512-v1wYQU3BcCO+Z3OVxxO+EnaW4oQhuOza6CXeYZ0z5ftza9r0QQBLz3bcZKTVta86xraNm0z8GDlREwinyddOxQ==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.58.4':
-    resolution: {integrity: sha512-0g0KwsOozkLtzN8/0+oMZoOuQ0o7W6O+hx+ydVU1bktaMGKEJLMAWxOQNjsh1TcBbNIXVOKM/I8l0ROhaAb8Ig==}
+  '@sentry/cli-linux-arm64@2.57.0':
+    resolution: {integrity: sha512-Kh1jTsMV5Fy/RvB381N/woXe1qclRMqsG6kM3Gq6m6afEF/+k3PyQdNW3HXAola6d63EptokLtxPG2xjWQ+w9Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-arm@2.58.4':
-    resolution: {integrity: sha512-rdQ8beTwnN48hv7iV7e7ZKucPec5NJkRdrrycMJMZlzGBPi56LqnclgsHySJ6Kfq506A2MNuQnKGaf/sBC9REA==}
+  '@sentry/cli-linux-arm@2.57.0':
+    resolution: {integrity: sha512-uNHB8xyygqfMd1/6tFzl9NUkuVefg7jdZtM/vVCQVaF/rJLWZ++Wms+LLhYyKXKN8yd7J9wy7kTEl4Qu4jWbGQ==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-i686@2.58.4':
-    resolution: {integrity: sha512-NseoIQAFtkziHyjZNPTu1Gm1opeQHt7Wm1LbLrGWVIRvUOzlslO9/8i6wETUZ6TjlQxBVRgd3Q0lRBG2A8rFYA==}
+  '@sentry/cli-linux-i686@2.57.0':
+    resolution: {integrity: sha512-EYXghoK/tKd0zqz+KD/ewXXE3u1HLCwG89krweveytBy/qw7M5z58eFvw+iGb1Vnbl1f/fRD0G4E0AbEsPfmpg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-x64@2.58.4':
-    resolution: {integrity: sha512-d3Arz+OO/wJYTqCYlSN3Ktm+W8rynQ/IMtSZLK8nu0ryh5mJOh+9XlXY6oDXw4YlsM8qCRrNquR8iEI1Y/IH+Q==}
+  '@sentry/cli-linux-x64@2.57.0':
+    resolution: {integrity: sha512-CyZrP/ssHmAPLSzfd4ydy7icDnwmDD6o3QjhkWwVFmCd+9slSBMQxpIqpamZmrWE6X4R+xBRbSUjmdoJoZ5yMw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-win32-arm64@2.58.4':
-    resolution: {integrity: sha512-bqYrF43+jXdDBh0f8HIJU3tbvlOFtGyRjHB8AoRuMQv9TEDUfENZyCelhdjA+KwDKYl48R1Yasb4EHNzsoO83w==}
+  '@sentry/cli-win32-arm64@2.57.0':
+    resolution: {integrity: sha512-wji/GGE4Lh5I/dNCsuVbg6fRvttvZRG6db1yPW1BSvQRh8DdnVy1CVp+HMqSq0SRy/S4z60j2u+m4yXMoCL+5g==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@sentry/cli-win32-i686@2.58.4':
-    resolution: {integrity: sha512-3triFD6jyvhVcXOmGyttf+deKZcC1tURdhnmDUIBkiDPJKGT/N5xa4qAtHJlAB/h8L9jgYih9bvJnvvFVM7yug==}
+  '@sentry/cli-win32-i686@2.57.0':
+    resolution: {integrity: sha512-hWvzyD7bTPh3b55qvJ1Okg3Wbl0Km8xcL6KvS7gfBl6uss+I6RldmQTP0gJKdHSdf/QlJN1FK0b7bLnCB3wHsg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.58.4':
-    resolution: {integrity: sha512-cSzN4PjM1RsCZ4pxMjI0VI7yNCkxiJ5jmWncyiwHXGiXrV1eXYdQ3n1LhUYLZ91CafyprR0OhDcE+RVZ26Qb5w==}
+  '@sentry/cli-win32-x64@2.57.0':
+    resolution: {integrity: sha512-QWYV/Y0sbpDSTyA4XQBOTaid4a6H2Iwa1Z8UI+qNxFlk0ADSEgIqo2NrRHDU8iRnghTkecQNX1NTt/7mXN3f/A==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.58.4':
-    resolution: {integrity: sha512-ArDrpuS8JtDYEvwGleVE+FgR+qHaOp77IgdGSacz6SZy6Lv90uX0Nu4UrHCQJz8/xwIcNxSqnN22lq0dH4IqTg==}
+  '@sentry/cli@2.57.0':
+    resolution: {integrity: sha512-oC4HPrVIX06GvUTgK0i+WbNgIA9Zl5YEcwf9N4eWFJJmjonr2j4SML9Hn2yNENbUWDgwepy4MLod3P8rM4bk/w==}
     engines: {node: '>= 10'}
     hasBin: true
 
@@ -3970,8 +4136,8 @@ packages:
     resolution: {integrity: sha512-DoH+BrKyI9uVUHyEh6raSba2OUgQ0CLtFeitG0geU90VPgAlINNnjhNeKJPLp0rR3v1KesdHebnRNGUUlvXalA==}
     engines: {node: '>=18'}
 
-  '@sentry/webpack-plugin@4.6.1':
-    resolution: {integrity: sha512-CJgT/t2pQWsPsMx9VJ86goU/orCQhL2HhDj5ZYBol6fPPoEGeTqKOPCnv/xsbCAfGSp1uHpyRLTA/Gx96u7VVA==}
+  '@sentry/webpack-plugin@4.6.0':
+    resolution: {integrity: sha512-i9Yy2kXCbFKlRST09fV1HsI0naJAfeXxoiUPyh5iCgSo2w7ZwEUlk0tJhupnHZzfSa3OSg01+vVNeeyLYM4tdA==}
     engines: {node: '>= 14'}
     peerDependencies:
       webpack: '>=4.40.0'
@@ -3981,8 +4147,8 @@ packages:
     engines: {node: '>= 8.0.0'}
     hasBin: true
 
-  '@smithy/abort-controller@4.2.5':
-    resolution: {integrity: sha512-j7HwVkBw68YW8UmFRcjZOmssE77Rvk0GWAIN1oFBhsaovQmZWYCIcGa9/pwRB0ExI8Sk9MWNALTjftjHZea7VA==}
+  '@smithy/abort-controller@4.2.3':
+    resolution: {integrity: sha512-xWL9Mf8b7tIFuAlpjKtRPnHrR8XVrwTj5NPYO/QwZPtc0SDLsPxb56V5tzi5yspSMytISHybifez+4jlrx0vkQ==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/chunked-blob-reader-native@4.2.1':
@@ -3993,56 +4159,56 @@ packages:
     resolution: {integrity: sha512-WmU0TnhEAJLWvfSeMxBNe5xtbselEO8+4wG0NtZeL8oR21WgH1xiO37El+/Y+H/Ie4SCwBy3MxYWmOYaGgZueA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/config-resolver@4.4.3':
-    resolution: {integrity: sha512-ezHLe1tKLUxDJo2LHtDuEDyWXolw8WGOR92qb4bQdWq/zKenO5BvctZGrVJBK08zjezSk7bmbKFOXIVyChvDLw==}
+  '@smithy/config-resolver@4.4.0':
+    resolution: {integrity: sha512-Kkmz3Mup2PGp/HNJxhCWkLNdlajJORLSjwkcfrj0E7nu6STAEdcMR1ir5P9/xOmncx8xXfru0fbUYLlZog/cFg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/core@3.18.7':
-    resolution: {integrity: sha512-axG9MvKhMWOhFbvf5y2DuyTxQueO0dkedY9QC3mAfndLosRI/9LJv8WaL0mw7ubNhsO4IuXX9/9dYGPFvHrqlw==}
+  '@smithy/core@3.17.1':
+    resolution: {integrity: sha512-V4Qc2CIb5McABYfaGiIYLTmo/vwNIK7WXI5aGveBd9UcdhbOMwcvIMxIw/DJj1S9QgOMa/7FBkarMdIC0EOTEQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/credential-provider-imds@4.2.5':
-    resolution: {integrity: sha512-BZwotjoZWn9+36nimwm/OLIcVe+KYRwzMjfhd4QT7QxPm9WY0HiOV8t/Wlh+HVUif0SBVV7ksq8//hPaBC/okQ==}
+  '@smithy/credential-provider-imds@4.2.3':
+    resolution: {integrity: sha512-hA1MQ/WAHly4SYltJKitEsIDVsNmXcQfYBRv2e+q04fnqtAX5qXaybxy/fhUeAMCnQIdAjaGDb04fMHQefWRhw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-codec@4.2.5':
-    resolution: {integrity: sha512-Ogt4Zi9hEbIP17oQMd68qYOHUzmH47UkK7q7Gl55iIm9oKt27MUGrC5JfpMroeHjdkOliOA4Qt3NQ1xMq/nrlA==}
+  '@smithy/eventstream-codec@4.2.3':
+    resolution: {integrity: sha512-rcr0VH0uNoMrtgKuY7sMfyKqbHc4GQaQ6Yp4vwgm+Z6psPuOgL+i/Eo/QWdXRmMinL3EgFM0Z1vkfyPyfzLmjw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-browser@4.2.5':
-    resolution: {integrity: sha512-HohfmCQZjppVnKX2PnXlf47CW3j92Ki6T/vkAT2DhBR47e89pen3s4fIa7otGTtrVxmj7q+IhH0RnC5kpR8wtw==}
+  '@smithy/eventstream-serde-browser@4.2.3':
+    resolution: {integrity: sha512-EcS0kydOr2qJ3vV45y7nWnTlrPmVIMbUFOZbMG80+e2+xePQISX9DrcbRpVRFTS5Nqz3FiEbDcTCAV0or7bqdw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-config-resolver@4.3.5':
-    resolution: {integrity: sha512-ibjQjM7wEXtECiT6my1xfiMH9IcEczMOS6xiCQXoUIYSj5b1CpBbJ3VYbdwDy8Vcg5JHN7eFpOCGk8nyZAltNQ==}
+  '@smithy/eventstream-serde-config-resolver@4.3.3':
+    resolution: {integrity: sha512-GewKGZ6lIJ9APjHFqR2cUW+Efp98xLu1KmN0jOWxQ1TN/gx3HTUPVbLciFD8CfScBj2IiKifqh9vYFRRXrYqXA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-node@4.2.5':
-    resolution: {integrity: sha512-+elOuaYx6F2H6x1/5BQP5ugv12nfJl66GhxON8+dWVUEDJ9jah/A0tayVdkLRP0AeSac0inYkDz5qBFKfVp2Gg==}
+  '@smithy/eventstream-serde-node@4.2.3':
+    resolution: {integrity: sha512-uQobOTQq2FapuSOlmGLUeGTpvcBLE5Fc7XjERUSk4dxEi4AhTwuyHYZNAvL4EMUp7lzxxkKDFaJ1GY0ovrj0Kg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/eventstream-serde-universal@4.2.5':
-    resolution: {integrity: sha512-G9WSqbST45bmIFaeNuP/EnC19Rhp54CcVdX9PDL1zyEB514WsDVXhlyihKlGXnRycmHNmVv88Bvvt4EYxWef/Q==}
+  '@smithy/eventstream-serde-universal@4.2.3':
+    resolution: {integrity: sha512-QIvH/CKOk1BZPz/iwfgbh1SQD5Y0lpaw2kLA8zpLRRtYMPXeYUEWh+moTaJyqDaKlbrB174kB7FSRFiZ735tWw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/fetch-http-handler@5.3.6':
-    resolution: {integrity: sha512-3+RG3EA6BBJ/ofZUeTFJA7mHfSYrZtQIrDP9dI8Lf7X6Jbos2jptuLrAAteDiFVrmbEmLSuRG/bUKzfAXk7dhg==}
+  '@smithy/fetch-http-handler@5.3.4':
+    resolution: {integrity: sha512-bwigPylvivpRLCm+YK9I5wRIYjFESSVwl8JQ1vVx/XhCw0PtCi558NwTnT2DaVCl5pYlImGuQTSwMsZ+pIavRw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-blob-browser@4.2.6':
-    resolution: {integrity: sha512-8P//tA8DVPk+3XURk2rwcKgYwFvwGwmJH/wJqQiSKwXZtf/LiZK+hbUZmPj/9KzM+OVSwe4o85KTp5x9DUZTjw==}
+  '@smithy/hash-blob-browser@4.2.4':
+    resolution: {integrity: sha512-W7eIxD+rTNsLB/2ynjmbdeP7TgxRXprfvqQxKFEfy9HW2HeD7t+g+KCIrY0pIn/GFjA6/fIpH+JQnfg5TTk76Q==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-node@4.2.5':
-    resolution: {integrity: sha512-DpYX914YOfA3UDT9CN1BM787PcHfWRBB43fFGCYrZFUH0Jv+5t8yYl+Pd5PW4+QzoGEDvn5d5QIO4j2HyYZQSA==}
+  '@smithy/hash-node@4.2.3':
+    resolution: {integrity: sha512-6+NOdZDbfuU6s1ISp3UOk5Rg953RJ2aBLNLLBEcamLjHAg1Po9Ha7QIB5ZWhdRUVuOUrT8BVFR+O2KIPmw027g==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/hash-stream-node@4.2.5':
-    resolution: {integrity: sha512-6+do24VnEyvWcGdHXomlpd0m8bfZePpUKBy7m311n+JuRwug8J4dCanJdTymx//8mi0nlkflZBvJe+dEO/O12Q==}
+  '@smithy/hash-stream-node@4.2.3':
+    resolution: {integrity: sha512-EXMSa2yiStVII3x/+BIynyOAZlS7dGvI7RFrzXa/XssBgck/7TXJIvnjnCu328GY/VwHDC4VeDyP1S4rqwpYag==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/invalid-dependency@4.2.5':
-    resolution: {integrity: sha512-2L2erASEro1WC5nV+plwIMxrTXpvpfzl4e+Nre6vBVRR2HKeGGcvpJyyL3/PpiSg+cJG2KpTmZmq934Olb6e5A==}
+  '@smithy/invalid-dependency@4.2.3':
+    resolution: {integrity: sha512-Cc9W5DwDuebXEDMpOpl4iERo8I0KFjTnomK2RMdhhR87GwrSmUmwMxS4P5JdRf+LsjOdIqumcerwRgYMr/tZ9Q==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/is-array-buffer@2.2.0':
@@ -4053,76 +4219,76 @@ packages:
     resolution: {integrity: sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/md5-js@4.2.5':
-    resolution: {integrity: sha512-Bt6jpSTMWfjCtC0s79gZ/WZ1w90grfmopVOWqkI2ovhjpD5Q2XRXuecIPB9689L2+cCySMbaXDhBPU56FKNDNg==}
+  '@smithy/md5-js@4.2.3':
+    resolution: {integrity: sha512-5+4bUEJQi/NRgzdA5SVXvAwyvEnD0ZAiKzV3yLO6dN5BG8ScKBweZ8mxXXUtdxq+Dx5k6EshKk0XJ7vgvIPSnA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-content-length@4.2.5':
-    resolution: {integrity: sha512-Y/RabVa5vbl5FuHYV2vUCwvh/dqzrEY/K2yWPSqvhFUwIY0atLqO4TienjBXakoy4zrKAMCZwg+YEqmH7jaN7A==}
+  '@smithy/middleware-content-length@4.2.3':
+    resolution: {integrity: sha512-/atXLsT88GwKtfp5Jr0Ks1CSa4+lB+IgRnkNrrYP0h1wL4swHNb0YONEvTceNKNdZGJsye+W2HH8W7olbcPUeA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-endpoint@4.3.14':
-    resolution: {integrity: sha512-v0q4uTKgBM8dsqGjqsabZQyH85nFaTnFcgpWU1uydKFsdyyMzfvOkNum9G7VK+dOP01vUnoZxIeRiJ6uD0kjIg==}
+  '@smithy/middleware-endpoint@4.3.5':
+    resolution: {integrity: sha512-SIzKVTvEudFWJbxAaq7f2GvP3jh2FHDpIFI6/VAf4FOWGFZy0vnYMPSRj8PGYI8Hjt29mvmwSRgKuO3bK4ixDw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-retry@4.4.14':
-    resolution: {integrity: sha512-Z2DG8Ej7FyWG1UA+7HceINtSLzswUgs2np3sZX0YBBxCt+CXG4QUxv88ZDS3+2/1ldW7LqtSY1UO/6VQ1pND8Q==}
+  '@smithy/middleware-retry@4.4.5':
+    resolution: {integrity: sha512-DCaXbQqcZ4tONMvvdz+zccDE21sLcbwWoNqzPLFlZaxt1lDtOE2tlVpRSwcTOJrjJSUThdgEYn7HrX5oLGlK9A==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-serde@4.2.6':
-    resolution: {integrity: sha512-VkLoE/z7e2g8pirwisLz8XJWedUSY8my/qrp81VmAdyrhi94T+riBfwP+AOEEFR9rFTSonC/5D2eWNmFabHyGQ==}
+  '@smithy/middleware-serde@4.2.3':
+    resolution: {integrity: sha512-8g4NuUINpYccxiCXM5s1/V+uLtts8NcX4+sPEbvYQDZk4XoJfDpq5y2FQxfmUL89syoldpzNzA0R9nhzdtdKnQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/middleware-stack@4.2.5':
-    resolution: {integrity: sha512-bYrutc+neOyWxtZdbB2USbQttZN0mXaOyYLIsaTbJhFsfpXyGWUxJpEuO1rJ8IIJm2qH4+xJT0mxUSsEDTYwdQ==}
+  '@smithy/middleware-stack@4.2.3':
+    resolution: {integrity: sha512-iGuOJkH71faPNgOj/gWuEGS6xvQashpLwWB1HjHq1lNNiVfbiJLpZVbhddPuDbx9l4Cgl0vPLq5ltRfSaHfspA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/node-config-provider@4.3.5':
-    resolution: {integrity: sha512-UTurh1C4qkVCtqggI36DGbLB2Kv8UlcFdMXDcWMbqVY2uRg0XmT9Pb4Vj6oSQ34eizO1fvR0RnFV4Axw4IrrAg==}
+  '@smithy/node-config-provider@4.3.3':
+    resolution: {integrity: sha512-NzI1eBpBSViOav8NVy1fqOlSfkLgkUjUTlohUSgAEhHaFWA3XJiLditvavIP7OpvTjDp5u2LhtlBhkBlEisMwA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/node-http-handler@4.4.5':
-    resolution: {integrity: sha512-CMnzM9R2WqlqXQGtIlsHMEZfXKJVTIrqCNoSd/QpAyp+Dw0a1Vps13l6ma1fH8g7zSPNsA59B/kWgeylFuA/lw==}
+  '@smithy/node-http-handler@4.4.3':
+    resolution: {integrity: sha512-MAwltrDB0lZB/H6/2M5PIsISSwdI5yIh6DaBB9r0Flo9nx3y0dzl/qTMJPd7tJvPdsx6Ks/cwVzheGNYzXyNbQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/property-provider@4.2.5':
-    resolution: {integrity: sha512-8iLN1XSE1rl4MuxvQ+5OSk/Zb5El7NJZ1td6Tn+8dQQHIjp59Lwl6bd0+nzw6SKm2wSSriH2v/I9LPzUic7EOg==}
+  '@smithy/property-provider@4.2.3':
+    resolution: {integrity: sha512-+1EZ+Y+njiefCohjlhyOcy1UNYjT+1PwGFHCxA/gYctjg3DQWAU19WigOXAco/Ql8hZokNehpzLd0/+3uCreqQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/protocol-http@5.3.5':
-    resolution: {integrity: sha512-RlaL+sA0LNMp03bf7XPbFmT5gN+w3besXSWMkA8rcmxLSVfiEXElQi4O2IWwPfxzcHkxqrwBFMbngB8yx/RvaQ==}
+  '@smithy/protocol-http@5.3.3':
+    resolution: {integrity: sha512-Mn7f/1aN2/jecywDcRDvWWWJF4uwg/A0XjFMJtj72DsgHTByfjRltSqcT9NyE9RTdBSN6X1RSXrhn/YWQl8xlw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/querystring-builder@4.2.5':
-    resolution: {integrity: sha512-y98otMI1saoajeik2kLfGyRp11e5U/iJYH/wLCh3aTV/XutbGT9nziKGkgCaMD1ghK7p6htHMm6b6scl9JRUWg==}
+  '@smithy/querystring-builder@4.2.3':
+    resolution: {integrity: sha512-LOVCGCmwMahYUM/P0YnU/AlDQFjcu+gWbFJooC417QRB/lDJlWSn8qmPSDp+s4YVAHOgtgbNG4sR+SxF/VOcJQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/querystring-parser@4.2.5':
-    resolution: {integrity: sha512-031WCTdPYgiQRYNPXznHXof2YM0GwL6SeaSyTH/P72M1Vz73TvCNH2Nq8Iu2IEPq9QP2yx0/nrw5YmSeAi/AjQ==}
+  '@smithy/querystring-parser@4.2.3':
+    resolution: {integrity: sha512-cYlSNHcTAX/wc1rpblli3aUlLMGgKZ/Oqn8hhjFASXMCXjIqeuQBei0cnq2JR8t4RtU9FpG6uyl6PxyArTiwKA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/service-error-classification@4.2.5':
-    resolution: {integrity: sha512-8fEvK+WPE3wUAcDvqDQG1Vk3ANLR8Px979te96m84CbKAjBVf25rPYSzb4xU4hlTyho7VhOGnh5i62D/JVF0JQ==}
+  '@smithy/service-error-classification@4.2.3':
+    resolution: {integrity: sha512-NkxsAxFWwsPsQiwFG2MzJ/T7uIR6AQNh1SzcxSUnmmIqIQMlLRQDKhc17M7IYjiuBXhrQRjQTo3CxX+DobS93g==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/shared-ini-file-loader@4.4.0':
-    resolution: {integrity: sha512-5WmZ5+kJgJDjwXXIzr1vDTG+RhF9wzSODQBfkrQ2VVkYALKGvZX1lgVSxEkgicSAFnFhPj5rudJV0zoinqS0bA==}
+  '@smithy/shared-ini-file-loader@4.3.3':
+    resolution: {integrity: sha512-9f9Ixej0hFhroOK2TxZfUUDR13WVa8tQzhSzPDgXe5jGL3KmaM9s8XN7RQwqtEypI82q9KHnKS71CJ+q/1xLtQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/signature-v4@5.3.5':
-    resolution: {integrity: sha512-xSUfMu1FT7ccfSXkoLl/QRQBi2rOvi3tiBZU2Tdy3I6cgvZ6SEi9QNey+lqps/sJRnogIS+lq+B1gxxbra2a/w==}
+  '@smithy/signature-v4@5.3.3':
+    resolution: {integrity: sha512-CmSlUy+eEYbIEYN5N3vvQTRfqt0lJlQkaQUIf+oizu7BbDut0pozfDjBGecfcfWf7c62Yis4JIEgqQ/TCfodaA==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/smithy-client@4.9.10':
-    resolution: {integrity: sha512-Jaoz4Jw1QYHc1EFww/E6gVtNjhoDU+gwRKqXP6C3LKYqqH2UQhP8tMP3+t/ePrhaze7fhLE8vS2q6vVxBANFTQ==}
+  '@smithy/smithy-client@4.9.1':
+    resolution: {integrity: sha512-Ngb95ryR5A9xqvQFT5mAmYkCwbXvoLavLFwmi7zVg/IowFPCfiqRfkOKnbc/ZRL8ZKJ4f+Tp6kSu6wjDQb8L/g==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/types@4.9.0':
-    resolution: {integrity: sha512-MvUbdnXDTwykR8cB1WZvNNwqoWVaTRA0RLlLmf/cIFNMM2cKWz01X4Ly6SMC4Kks30r8tT3Cty0jmeWfiuyHTA==}
+  '@smithy/types@4.8.0':
+    resolution: {integrity: sha512-QpELEHLO8SsQVtqP+MkEgCYTFW0pleGozfs3cZ183ZBj9z3VC1CX1/wtFMK64p+5bhtZo41SeLK1rBRtd25nHQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/url-parser@4.2.5':
-    resolution: {integrity: sha512-VaxMGsilqFnK1CeBX+LXnSuaMx4sTL/6znSZh2829txWieazdVxr54HmiyTsIbpOTLcf5nYpq9lpzmwRdxj6rQ==}
+  '@smithy/url-parser@4.2.3':
+    resolution: {integrity: sha512-I066AigYvY3d9VlU3zG9XzZg1yT10aNqvCaBTw9EPgu5GrsEl1aUkcMvhkIXascYH1A8W0LQo3B1Kr1cJNcQEw==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-base64@4.3.0':
@@ -4149,32 +4315,32 @@ packages:
     resolution: {integrity: sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-defaults-mode-browser@4.3.13':
-    resolution: {integrity: sha512-hlVLdAGrVfyNei+pKIgqDTxfu/ZI2NSyqj4IDxKd5bIsIqwR/dSlkxlPaYxFiIaDVrBy0he8orsFy+Cz119XvA==}
+  '@smithy/util-defaults-mode-browser@4.3.4':
+    resolution: {integrity: sha512-qI5PJSW52rnutos8Bln8nwQZRpyoSRN6k2ajyoUHNMUzmWqHnOJCnDELJuV6m5PML0VkHI+XcXzdB+6awiqYUw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-defaults-mode-node@4.2.16':
-    resolution: {integrity: sha512-F1t22IUiJLHrxW9W1CQ6B9PN+skZ9cqSuzB18Eh06HrJPbjsyZ7ZHecAKw80DQtyGTRcVfeukKaCRYebFwclbg==}
+  '@smithy/util-defaults-mode-node@4.2.6':
+    resolution: {integrity: sha512-c6M/ceBTm31YdcFpgfgQAJaw3KbaLuRKnAz91iMWFLSrgxRpYm03c3bu5cpYojNMfkV9arCUelelKA7XQT36SQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-endpoints@3.2.5':
-    resolution: {integrity: sha512-3O63AAWu2cSNQZp+ayl9I3NapW1p1rR5mlVHcF6hAB1dPZUQFfRPYtplWX/3xrzWthPGj5FqB12taJJCfH6s8A==}
+  '@smithy/util-endpoints@3.2.3':
+    resolution: {integrity: sha512-aCfxUOVv0CzBIkU10TubdgKSx5uRvzH064kaiPEWfNIvKOtNpu642P4FP1hgOFkjQIkDObrfIDnKMKkeyrejvQ==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-hex-encoding@4.2.0':
     resolution: {integrity: sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-middleware@4.2.5':
-    resolution: {integrity: sha512-6Y3+rvBF7+PZOc40ybeZMcGln6xJGVeY60E7jy9Mv5iKpMJpHgRE6dKy9ScsVxvfAYuEX4Q9a65DQX90KaQ3bA==}
+  '@smithy/util-middleware@4.2.3':
+    resolution: {integrity: sha512-v5ObKlSe8PWUHCqEiX2fy1gNv6goiw6E5I/PN2aXg3Fb/hse0xeaAnSpXDiWl7x6LamVKq7senB+m5LOYHUAHw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-retry@4.2.5':
-    resolution: {integrity: sha512-GBj3+EZBbN4NAqJ/7pAhsXdfzdlznOh8PydUijy6FpNIMnHPSMO2/rP4HKu+UFeikJxShERk528oy7GT79YiJg==}
+  '@smithy/util-retry@4.2.3':
+    resolution: {integrity: sha512-lLPWnakjC0q9z+OtiXk+9RPQiYPNAovt2IXD3CP4LkOnd9NpUsxOjMx1SnoUVB7Orb7fZp67cQMtTBKMFDvOGg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-stream@4.5.6':
-    resolution: {integrity: sha512-qWw/UM59TiaFrPevefOZ8CNBKbYEP6wBAIlLqxn3VAIo9rgnTNc4ASbVrqDmhuwI87usnjhdQrxodzAGFFzbRQ==}
+  '@smithy/util-stream@4.5.4':
+    resolution: {integrity: sha512-+qDxSkiErejw1BAIXUFBSfM5xh3arbz1MmxlbMCKanDDZtVEQ7PSKW9FQS0Vud1eI/kYn0oCTVKyNzRlq+9MUw==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/util-uri-escape@4.2.0':
@@ -4189,8 +4355,8 @@ packages:
     resolution: {integrity: sha512-zBPfuzoI8xyBtR2P6WQj63Rz8i3AmfAaJLuNG8dWsfvPe8lO4aCPYLn879mEgHndZH1zQ2oXmG8O1GGzzaoZiw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-waiter@4.2.5':
-    resolution: {integrity: sha512-Dbun99A3InifQdIrsXZ+QLcC0PGBPAdrl4cj1mTgJvyc9N2zf7QSxg8TBkzsCmGJdE3TLbO9ycwpY0EkWahQ/g==}
+  '@smithy/util-waiter@4.2.3':
+    resolution: {integrity: sha512-5+nU///E5sAdD7t3hs4uwvCTWQtTR8JwKwOCSJtBRx0bY1isDo1QwH87vRK86vlFLBTISqoDA2V6xvP6nF1isQ==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/uuid@1.1.0':
@@ -4206,40 +4372,69 @@ packages:
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
-  '@storybook/addon-a11y@9.0.15':
-    resolution: {integrity: sha512-/oborGUeN7KT6jyTMhGRET9tXvZ080OCB/Hw6txSfsVxgZ4Z1QTJcOreejHGeYyxHN1ugEJ26K95agk4M13WZg==}
+  '@storybook/addon-a11y@10.0.8':
+    resolution: {integrity: sha512-rXJuSfujuRqkz1v26wLttVRkXzZur3LtMTH1/K+rb1epXq305vRm/bYql0FYGvrq0idJWYo4WbU65YRig9sfuA==}
     peerDependencies:
-      storybook: ^9.0.15
+      storybook: ^10.0.8
 
-  '@storybook/addon-docs@9.0.15':
-    resolution: {integrity: sha512-HOb45DkF23T1tRzakb9q33qnBRso15S/GM28ippPZWi5ZXR9RAyKVgOSMA/ViEpK4ezASxN+Tee+H7m4ksEFZw==}
+  '@storybook/addon-docs@10.0.8':
+    resolution: {integrity: sha512-PYuaGXGycsamK/7OrFoE4syHGy22mdqqArl67cfosRwmRxZEI9ManQK0jTjNQM9ZX14NpThMOSWNGoWLckkxog==}
     peerDependencies:
-      storybook: ^9.0.15
+      storybook: ^10.0.8
 
-  '@storybook/addon-links@9.0.15':
-    resolution: {integrity: sha512-DedEsoPOiRUupN9yuFaw9vwZe1QqK4QfC0Z9/0TxRNFdKffaakNJnPjnlrQn+R0eojYCRm9U9kdzOthM7/BgvQ==}
+  '@storybook/addon-links@10.0.8':
+    resolution: {integrity: sha512-LnakruogdN5ND0cF0SOKyhzbEeIGDe1njkufX2aR9LOXQ0mMj5S2P86TdP87dR5R9bJjYYPPg/F7sjsAiI1Lqg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.0.15
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.0.8
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/addon-onboarding@9.0.15':
-    resolution: {integrity: sha512-g2FqO0aS6vvjMZdY+0xjV1C7YGcDE0GkuPAv1JqejNYGyX2Z8nuLHy2zqhLIBpfoap4S9PZO+obqEKVeo70Q0Q==}
+  '@storybook/addon-onboarding@10.0.8':
+    resolution: {integrity: sha512-VHZT4yoNvE9CGtO/C5NgJyZdAeeKkXJN2IOg21YLEUuqY/tVUY4Ljt6iI0OxTh3EEkXzMVrO/CrC2HFqWMVu0Q==}
     peerDependencies:
-      storybook: ^9.0.15
+      storybook: ^10.0.8
 
-  '@storybook/builder-vite@9.0.15':
-    resolution: {integrity: sha512-ogPec1V+e3MgTY5DBlq/6hBBui0Y4TmolYQh0eL3cATHrwZlwkTTDWQfsOnMALd5w+4Jq8n0gk0cQgR5rh1FHw==}
+  '@storybook/builder-vite@10.0.8':
+    resolution: {integrity: sha512-kaf/pUENzXxYgQMHGGPNiIk1ieb+SOMuSeLKx8wAUOlQOrzhtSH+ItACW/l43t+O6YZ8jYHoNBMF1kdQ1+Y5+w==}
     peerDependencies:
-      storybook: ^9.0.15
+      storybook: ^10.0.8
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@storybook/csf-plugin@9.0.15':
-    resolution: {integrity: sha512-KszyGjrocMiNbkmpBGARF1ugLYMVaw1J8Z31kmwTHsMgMZwAKcOsofJ0fPgFno0yV59DUVkWxVBdPs9V0hhvxA==}
+  '@storybook/builder-vite@8.5.4':
+    resolution: {integrity: sha512-cuzl+S/4wfhOZTZ2nIiUkAyJ3tUPFgr6ghTx3aPWjlXrB7fQfO008HQl8p2aa1ZJB1E0IAxpfsb09/Kf+0nO2w==}
     peerDependencies:
-      storybook: ^9.0.15
+      storybook: ^8.5.4
+      vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+
+  '@storybook/components@8.5.4':
+    resolution: {integrity: sha512-z4lWN4W1cUqlhOFQ3Kg33Yu4uuoOvECQtxJqNHUPFsHNOtIbYIdUMCLwiJFUxrzdJXUnOqn5QTcsFerWX6Roag==}
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+
+  '@storybook/csf-plugin@10.0.8':
+    resolution: {integrity: sha512-OtLUWHIm3SDGtclQn6Mdd/YsWizLBgdEBRAdekGtwI/TvICfT7gpWYIycP53v2t9ufu2MIXjsxtV2maZKs8sZg==}
+    peerDependencies:
+      esbuild: '*'
+      rollup: '*'
+      storybook: ^10.0.8
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/csf-plugin@8.5.4':
+    resolution: {integrity: sha512-W368wMblH861QlW5gfZEwF/LYrWQ2NheXgikBfYv73se1WxvQCo8IMLXCNpgmYhse81GsvXRddKULGsqDSH37A==}
+    peerDependencies:
+      storybook: ^8.5.4
 
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
@@ -4251,34 +4446,82 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
 
-  '@storybook/react-dom-shim@9.0.15':
-    resolution: {integrity: sha512-X5VlYKoZSIMU9HEshIwtNzp41nPt4kiJtJ2c5HzFa5F6M8rEHM5n059CGcCZQqff3FnZtK/y6v/kCVZO+8oETA==}
+  '@storybook/manager-api@8.5.4':
+    resolution: {integrity: sha512-kFK5DM+4YPob0qdiXN5DJh33fDyQvNJb7IAobDS/rPo2L+t6M+DAgqEsXLQXT9nUbnUD9IcCjwEnjKa+EHU2RA==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.0.15
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/react-vite@9.0.15':
-    resolution: {integrity: sha512-OOAywn5x2Ged3LD84+TMwpjZUelFg7Wb8eHkgHE2SzM20XiZrhoKvreqxlzbfey3weBl+bKNhsiWF9BluT8YHg==}
-    engines: {node: '>=20.0.0'}
+  '@storybook/preview-api@8.5.4':
+    resolution: {integrity: sha512-V9cTl5uWRmWAA4hCmz97PxgP0QYq2DpJUpeSxt/+Hhhm1OYTxAYJWt6Y3pIfqEFhOFjQzZwTprzGYzVjk4S3DA==}
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+
+  '@storybook/react-dom-shim@10.0.8':
+    resolution: {integrity: sha512-ojuH22MB9Sz6rWbhTmC5IErZr0ZADbZijtPteUdydezY7scORT00UtbNoBcG0V6iVjdChgDtSKw2KHUUfchKqg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.0.8
+
+  '@storybook/react-dom-shim@8.5.4':
+    resolution: {integrity: sha512-m6soTAZFlOH5L2CW3V3g1eJ9Z06Gzgv8urOrnqeBmyCTcpuzxs4GRf9whvu5x/ULZAuvAL77H53d9W1/UYI4sQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.0.15
+      storybook: ^8.5.4
+
+  '@storybook/react-vite@10.0.8':
+    resolution: {integrity: sha512-HS2X4qlitrZr3/sN2+ollxAaNE813IasZRE8lOez1Ey1ISGBtYIb9rmJs82MK35+yDM0pHdiDjkFMD4SkNYh2g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.0.8
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@storybook/react@9.0.15':
-    resolution: {integrity: sha512-hewpSH8Ij4Bg7S9Tfw7ecfGPv7YDycRxsfpsDX7Mw3JhLuCdqjpmmTL2RgoNojg7TAW3FPdixcgQi/b4PH50ag==}
-    engines: {node: '>=20.0.0'}
+  '@storybook/react-vite@8.5.4':
+    resolution: {integrity: sha512-FPk8k7EkNkVP7A3oCHgnNPoOn9Ebj8WswOpkAlClmKXbyWFgdVYvz6X34pbmqqfba+o3+icQhPPEIAAvmVe2ow==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
+      '@storybook/test': 8.5.4
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^9.0.15
+      storybook: ^8.5.4
+      vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      '@storybook/test':
+        optional: true
+
+  '@storybook/react@10.0.8':
+    resolution: {integrity: sha512-PkuPb8sAqmjjkowSzm3rutiSuETvZI2F8SnjbHE6FRqZWWK4iFoaUrQbrg5kpPAtX//xIrqkdFwlbmQ3skhiPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.0.8
       typescript: '>= 4.9.x'
     peerDependenciesMeta:
       typescript:
         optional: true
 
+  '@storybook/react@8.5.4':
+    resolution: {integrity: sha512-4OipHaxH+IYqrYrX25kjrXTC3gj0NhpksYG/cfZ38MgLY+odFHGI7hNMgx9YMoaL/pnQRtnVjWaz2nIahsUXSA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@storybook/test': 8.5.4
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+      storybook: ^8.5.4
+      typescript: '>= 4.2.x'
+    peerDependenciesMeta:
+      '@storybook/test':
+        optional: true
+      typescript:
+        optional: true
+
+  '@storybook/theming@8.5.4':
+    resolution: {integrity: sha512-mgMQDe6rF0fS3cDGx55KSzv0URA9Eefo89uoh2oKUmv5+M30067axNK62A9Ys03fSVcB11Iccen0cyu3SHeiyw==}
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+
   '@streamparser/json@0.0.20':
     resolution: {integrity: sha512-VqAAkydywPpkw63WQhPVKCD3SdwXuihCUVZbbiY3SfSTGQyHmwRoq27y4dmJdZuJwd5JIlQoMPyGvMbUPY0RKQ==}
 
@@ -4319,11 +4562,107 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
 
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.0':
+    resolution: {integrity: sha512-lI2bPk4TvwavHdehjr5WiC6HnZ59hacM6ySEo4RM/H7tsjWd8JpqiNW9ThH7rO/yKtrn4mGBoXshpvn8clXjPg==}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tailwindcss/vite@4.1.17':
+    resolution: {integrity: sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -4393,8 +4732,8 @@ packages:
       svelte:
         optional: true
 
-  '@tsconfig/node10@1.0.12':
-    resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==}
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
   '@tsconfig/node12@1.0.11':
     resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
@@ -4518,11 +4857,22 @@ packages:
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react-dom@19.2.1':
+    resolution: {integrity: sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
   '@types/react@19.1.4':
     resolution: {integrity: sha512-EB1yiiYdvySuIITtD5lhW4yPyJ31RkJkkDw794LaQYrxCSaQV/47y5o1FMC4zF9ZyjUjzJMZwbovEnT5yHTW6g==}
 
-  '@types/readable-stream@4.0.23':
-    resolution: {integrity: sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==}
+  '@types/react@19.2.1':
+    resolution: {integrity: sha512-1U5NQWh/GylZQ50ZMnnPjkYHEaGhg6t5i/KI0LDDh3t4E3h3T3vzm+GLY2BRzMfIjSBwzm6tginoZl5z0O/qsA==}
+
+  '@types/react@19.2.7':
+    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
+
+  '@types/readable-stream@4.0.22':
+    resolution: {integrity: sha512-/FFhJpfCLAPwAcN3mFycNUa77ddnr8jTgF5VmSNetaemWB2cIlfCA9t0YTM3JAT0wOcv8D4tjPo7pkDhK3EJIg==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -4569,14 +4919,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/eslint-plugin@8.32.0':
-    resolution: {integrity: sha512-/jU9ettcntkBFmWUzzGgsClEi2ZFiikMX5eEQsmxIAWMOn4H3D4rvHssstmAHGVvrYnaMqdWWWg0b5M6IN/MTQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^8.0.0 || ^8.0.0-alpha.0
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/eslint-plugin@8.32.1':
     resolution: {integrity: sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4585,6 +4927,14 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
+  '@typescript-eslint/eslint-plugin@8.48.0':
+    resolution: {integrity: sha512-XxXP5tL1txl13YFtrECECQYeZjBZad4fyd3cFV4a19LkAY/bIp9fev3US4S5fDVV2JaYFiKAZ/GRTOLer+mbyQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.48.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/parser@7.18.0':
     resolution: {integrity: sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==}
     engines: {node: ^18.18.0 || >=20.0.0}
@@ -4595,13 +4945,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@8.32.0':
-    resolution: {integrity: sha512-B2MdzyWxCE2+SqiZHAjPphft+/2x2FlO9YBx7eKE1BCb+rqBlQdhtAEhzIEdozHd55DXPmxBdpMygFJjfjjA9A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/parser@8.32.1':
     resolution: {integrity: sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4609,8 +4952,21 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/project-service@8.49.0':
-    resolution: {integrity: sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==}
+  '@typescript-eslint/parser@8.48.0':
+    resolution: {integrity: sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.46.2':
+    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.48.0':
+    resolution: {integrity: sha512-Ne4CTZyRh1BecBf84siv42wv5vQvVmgtk8AuiEffKTUo3DrBaGYZueJSxxBZ8fjk/N3DrgChH4TOdIOwOwiqqw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -4623,20 +4979,26 @@ packages:
     resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.32.0':
-    resolution: {integrity: sha512-jc/4IxGNedXkmG4mx4nJTILb6TMjL66D41vyeaPWvDUmeYQzF3lKtN15WsAeTr65ce4mPxwopPSo1yUUAWw0hQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/scope-manager@8.32.1':
     resolution: {integrity: sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/scope-manager@8.49.0':
-    resolution: {integrity: sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==}
+  '@typescript-eslint/scope-manager@8.46.2':
+    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.49.0':
-    resolution: {integrity: sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==}
+  '@typescript-eslint/scope-manager@8.48.0':
+    resolution: {integrity: sha512-uGSSsbrtJrLduti0Q1Q9+BF1/iFKaxGoQwjWOIVNJv0o6omrdyR8ct37m4xIl5Zzpkp69Kkmvom7QFTtue89YQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.46.2':
+    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/tsconfig-utils@8.48.0':
+    resolution: {integrity: sha512-WNebjBdFdyu10sR1M4OXTt2OkMd5KWIL+LLfeH9KhgP+jzfDV/LI3eXzwJ1s9+Yc0Kzo2fQCdY/OpdusCMmh6w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -4651,13 +5013,6 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/type-utils@8.32.0':
-    resolution: {integrity: sha512-t2vouuYQKEKSLtJaa5bB4jHeha2HJczQ6E5IXPDPgIty9EqcJxpr1QHQ86YyIPwDwxvUmLfP2YADQ5ZY4qddZg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/type-utils@8.32.1':
     resolution: {integrity: sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4665,6 +5020,13 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
+  '@typescript-eslint/type-utils@8.48.0':
+    resolution: {integrity: sha512-zbeVaVqeXhhab6QNEKfK96Xyc7UQuoFWERhEnj3mLVnUWrQnv15cJNseUni7f3g557gm0e46LZ6IJ4NJVOgOpw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
   '@typescript-eslint/types@5.62.0':
     resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4673,16 +5035,16 @@ packages:
     resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.32.0':
-    resolution: {integrity: sha512-O5Id6tGadAZEMThM6L9HmVf5hQUXNSxLVKeGJYWNhhVseps/0LddMkp7//VDkzwJ69lPL0UmZdcZwggj9akJaA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.32.1':
     resolution: {integrity: sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.49.0':
-    resolution: {integrity: sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==}
+  '@typescript-eslint/types@8.46.2':
+    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/types@8.48.0':
+    resolution: {integrity: sha512-cQMcGQQH7kwKoVswD1xdOytxQR60MWKM1di26xSUtxehaDs/32Zpqsu5WJlXTtTTqyAVK8R7hvsUnIXRS+bjvA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@5.62.0':
@@ -4703,20 +5065,20 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.32.0':
-    resolution: {integrity: sha512-pU9VD7anSCOIoBFnhTGfOzlVFQIA1XXiQpH/CezqOBaDppRwTglJzCC6fUQGpfwey4T183NKhF1/mfatYmjRqQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/typescript-estree@8.32.1':
     resolution: {integrity: sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/typescript-estree@8.49.0':
-    resolution: {integrity: sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==}
+  '@typescript-eslint/typescript-estree@8.46.2':
+    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/typescript-estree@8.48.0':
+    resolution: {integrity: sha512-ljHab1CSO4rGrQIAyizUS6UGHHCiAYhbfcIZ1zVJr5nMryxlXMVWS3duFPSKvSUbFPwkXMFk1k0EMIjub4sRRQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -4733,13 +5095,6 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.32.0':
-    resolution: {integrity: sha512-8S9hXau6nQ/sYVtC3D6ISIDoJzS1NsCK+gluVhLN2YkBPX+/1wkwyUiDKnxRh15579WoOIyVWnoyIf3yGI9REw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <5.9.0'
-
   '@typescript-eslint/utils@8.32.1':
     resolution: {integrity: sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4747,8 +5102,15 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.49.0':
-    resolution: {integrity: sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==}
+  '@typescript-eslint/utils@8.46.2':
+    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.48.0':
+    resolution: {integrity: sha512-yTJO1XuGxCsSfIVt1+1UrLHtue8xz16V8apzPYI06W0HbEbEWHxHXgZaAgavIkoh+GeV6hKKd5jm0sS6OYxWXQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -4762,20 +5124,20 @@ packages:
     resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/visitor-keys@8.32.0':
-    resolution: {integrity: sha512-1rYQTCLFFzOI5Nl0c8LUpJT8HxpwVRn9E4CkMsYfuN6ctmQqExjSTzzSk0Tz2apmXy7WU6/6fyaZVVA/thPN+w==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/visitor-keys@8.32.1':
     resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/visitor-keys@8.49.0':
-    resolution: {integrity: sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==}
+  '@typescript-eslint/visitor-keys@8.46.2':
+    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typespec/ts-http-runtime@0.3.2':
-    resolution: {integrity: sha512-IlqQ/Gv22xUC1r/WQm4StLkYQmaaTsXAhUVsNE0+xiyf0yRFiH5++q78U3bw6bLKDCTmh0uqKB9eG9+Bt75Dkg==}
+  '@typescript-eslint/visitor-keys@8.48.0':
+    resolution: {integrity: sha512-T0XJMaRPOH3+LBbAfzR2jalckP1MSG/L9eUtY0DEzUyVaXJ/t6zN0nR7co5kz0Jko/nkSYCBRkz1djvjajVTTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typespec/ts-http-runtime@0.3.1':
+    resolution: {integrity: sha512-SnbaqayTVFEA6/tYumdF0UmybY0KHyKwGPBXnyckFlrrKdhWFrL3a2HIPXHjht5ZOElKGcXfD2D63P36btb+ww==}
     engines: {node: '>=20.0.0'}
 
   '@ungap/structured-clone@1.3.0':
@@ -4911,12 +5273,18 @@ packages:
       typescript:
         optional: true
 
-  '@vitejs/plugin-react@4.4.1':
-    resolution: {integrity: sha512-IpEm5ZmeXAP/osiBXVVP5KjFMzbWOonMs0NaQQl+xYnUAcq4oHUBsF2+p4MgKWG4YMmFYJU8A6sxRPuowllm6w==}
+  '@vitejs/plugin-react@4.3.4':
+    resolution: {integrity: sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0
 
+  '@vitejs/plugin-react@5.1.1':
+    resolution: {integrity: sha512-WQfkSw0QbQ5aJ2CHYw23ZGkqnRwqKHD/KYsMeTkZzPT4Jcf0DcBxBtwMJxnu6E7oxw5+JC6ZAiePgh28uJ1HBA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
   '@vitest/coverage-v8@3.1.3':
     resolution: {integrity: sha512-cj76U5gXCl3g88KSnf80kof6+6w+K4BjOflCl7t6yRJPDuCrHtVu0SgNYOUARJOL5TI8RScDbm5x4s1/P9bvpw==}
     peerDependencies:
@@ -4956,6 +5324,17 @@ packages:
       vite:
         optional: true
 
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
   '@vitest/pretty-format@3.1.3':
     resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==}
 
@@ -4980,20 +5359,20 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@volar/language-core@2.4.27':
-    resolution: {integrity: sha512-DjmjBWZ4tJKxfNC1F6HyYERNHPYS7L7OPFyCrestykNdUZMFYzI9WTyvwPcaNaHlrEUwESHYsfEw3isInncZxQ==}
+  '@volar/language-core@2.4.23':
+    resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
 
-  '@volar/source-map@2.4.27':
-    resolution: {integrity: sha512-ynlcBReMgOZj2i6po+qVswtDUeeBRCTgDurjMGShbm8WYZgJ0PA4RmtebBJ0BCYol1qPv3GQF6jK7C9qoVc7lg==}
+  '@volar/source-map@2.4.23':
+    resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==}
 
-  '@volar/typescript@2.4.27':
-    resolution: {integrity: sha512-eWaYCcl/uAPInSK2Lze6IqVWaBu/itVqR5InXcHXFyles4zO++Mglt3oxdgj75BDcv1Knr9Y93nowS8U3wqhxg==}
+  '@volar/typescript@2.4.23':
+    resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
 
-  '@vue/compiler-core@3.5.25':
-    resolution: {integrity: sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==}
+  '@vue/compiler-core@3.5.22':
+    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
-  '@vue/compiler-dom@3.5.25':
-    resolution: {integrity: sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==}
+  '@vue/compiler-dom@3.5.22':
+    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -5006,8 +5385,8 @@ packages:
       typescript:
         optional: true
 
-  '@vue/shared@3.5.25':
-    resolution: {integrity: sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==}
+  '@vue/shared@3.5.22':
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
@@ -5169,8 +5548,8 @@ packages:
   alien-signals@0.4.14:
     resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
-  ansi-escapes@7.2.0:
-    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+  ansi-escapes@7.1.1:
+    resolution: {integrity: sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==}
     engines: {node: '>=18'}
 
   ansi-regex@3.0.1:
@@ -5201,8 +5580,8 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
-  ansis@4.2.0:
-    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+  ansis@3.17.0:
+    resolution: {integrity: sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg==}
     engines: {node: '>=14'}
 
   any-promise@1.3.0:
@@ -5247,11 +5626,11 @@ packages:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  arkregex@0.0.5:
-    resolution: {integrity: sha512-ncYjBdLlh5/QnVsAA8De16Tc9EqmYM7y/WU9j+236KcyYNUXogpz3sC4ATIZYzzLxwI+0sEOaQLEmLmRleaEXw==}
+  arkregex@0.0.2:
+    resolution: {integrity: sha512-ttjDUICBVoXD/m8bf7eOjx8XMR6yIT2FmmW9vsN0FCcFOygEZvvIX8zK98tTdXkzi0LkRi5CmadB44jFEIyDNA==}
 
-  arktype@2.1.29:
-    resolution: {integrity: sha512-jyfKk4xIOzvYNayqnD8ZJQqOwcrTOUbIU4293yrzAjA3O1dWh61j71ArMQ6tS/u4pD7vabSPe7nG3RCyoXW6RQ==}
+  arktype@2.1.25:
+    resolution: {integrity: sha512-fdj10sNlUPeDRg1QUqMbzJ4Q7gutTOWOpLUNdcC4vxeVrN0G+cbDOvLbuxQOFj/NDAode1G7kwFv4yKwQvupJg==}
 
   array-buffer-byte-length@1.0.2:
     resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
@@ -5330,8 +5709,8 @@ packages:
     resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
     engines: {node: '>=4'}
 
-  axios@1.13.2:
-    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+  axios@1.13.1:
+    resolution: {integrity: sha512-hU4EGxxt+j7TQijx1oYdAjw4xuIp1wRQSsbMFwSthCWeBQur1eF+qJ5iQ5sN3Tw8YRzQNKb8jszgBdMDVqwJcw==}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -5352,17 +5731,16 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.9.7:
-    resolution: {integrity: sha512-k9xFKplee6KIio3IDbwj+uaCLpqzOwakOgmqzPezM0sFJlFKcg30vk2wOiAJtkTSfx0SSQDSe8q+mWA/fSH5Zg==}
+  baseline-browser-mapping@2.8.21:
+    resolution: {integrity: sha512-JU0h5APyQNsHOlAM7HnQnPToSDQoEBZqzu/YBlqDnEeymPnZDREeXJA3KBMQee+dKteAxZ2AtvQEvVYdZf241Q==}
     hasBin: true
 
   bcryptjs@3.0.2:
     resolution: {integrity: sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==}
     hasBin: true
 
-  better-opn@3.0.2:
-    resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
-    engines: {node: '>=12.0.0'}
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
@@ -5380,8 +5758,8 @@ packages:
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
-  bl@6.1.6:
-    resolution: {integrity: sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==}
+  bl@6.1.4:
+    resolution: {integrity: sha512-ZV/9asSuknOExbM/zPPA8z00lc1ihPKWaStHkkQrxHNeYx+yY+TmF+v80dpv2G0mv3HVXBu7ryoAsxbFFhf4eg==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -5392,8 +5770,8 @@ packages:
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
 
-  bowser@2.13.1:
-    resolution: {integrity: sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw==}
+  bowser@2.12.1:
+    resolution: {integrity: sha512-z4rE2Gxh7tvshQ4hluIT7XcFrgLIQaw9X3A+kTTRdovCz5PMukm/0QC/BKSYPj3omF5Qfypn9O/c5kgpmvYUCw==}
 
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
@@ -5405,8 +5783,11 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+  browser-assert@1.2.1:
+    resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
+
+  browserslist@4.27.0:
+    resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -5477,8 +5858,8 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001760:
-    resolution: {integrity: sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==}
+  caniuse-lite@1.0.30001751:
+    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
@@ -5675,8 +6056,8 @@ packages:
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
-  core-js-compat@3.47.0:
-    resolution: {integrity: sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==}
+  core-js-compat@3.46.0:
+    resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -5720,6 +6101,10 @@ packages:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
 
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
   css-what@6.2.2:
     resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
     engines: {node: '>= 6'}
@@ -5732,9 +6117,12 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssstyle@4.6.0:
-    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
-    engines: {node: '>=18'}
+  cssstyle@5.3.3:
+    resolution: {integrity: sha512-OytmFH+13/QXONJcC75QNdMtKpceNk3u8ThBjyyYjkEcy/ekBwR1mMAuNvi3gdBPW3N5TlCzQ0WZw8H0lN/bDw==}
+    engines: {node: '>=20'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
@@ -5749,9 +6137,9 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
-  data-urls@5.0.0:
-    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
-    engines: {node: '>=18'}
+  data-urls@6.0.0:
+    resolution: {integrity: sha512-BnBS08aLUM+DKamupXs3w2tJJoqU+AkaE/+6vQxi/G/DPmIZFJJp9Dkb1kM03AZx8ADehDUZgsNxju3mPXZYIA==}
+    engines: {node: '>=20'}
 
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
@@ -5774,8 +6162,8 @@ packages:
   dateformat@4.6.3:
     resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
 
-  dayjs@1.11.19:
-    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
 
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
@@ -5839,22 +6227,18 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  default-browser-id@5.0.1:
-    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
     engines: {node: '>=18'}
 
-  default-browser@5.4.0:
-    resolution: {integrity: sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==}
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
     engines: {node: '>=18'}
 
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
-  define-lazy-prop@2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
-    engines: {node: '>=8'}
-
   define-lazy-prop@3.0.0:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
@@ -5880,9 +6264,6 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
-  detect-element-overflow@1.4.2:
-    resolution: {integrity: sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==}
-
   detect-europe-js@0.1.2:
     resolution: {integrity: sha512-lgdERlL3u0aUdHocoouzT10d9I89VVhk0qNRmll7mXdGfJT1/wqZ2ZLA4oJAjeACPY5fT1wsbq2AT+GkuInsow==}
 
@@ -5912,10 +6293,6 @@ packages:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
-  diff@8.0.2:
-    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
-    engines: {node: '>=0.3.1'}
-
   dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
@@ -5950,8 +6327,8 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.3.1:
-    resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==}
+  dompurify@3.3.0:
+    resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
@@ -5989,8 +6366,8 @@ packages:
   effect@3.16.12:
     resolution: {integrity: sha512-N39iBk0K71F9nb442TLbTkjl24FLUzuvx2i1I2RsEAQsdAdUTuUoW0vlfUXgkMTUOnYqKnWcFfqw4hK4Pw27hg==}
 
-  electron-to-chromium@1.5.267:
-    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+  electron-to-chromium@1.5.243:
+    resolution: {integrity: sha512-ZCphxFW3Q1TVhcgS9blfut1PX8lusVi2SvXQgmEEnK4TCmE1JhH2JkjJN+DNt0pJJwfBri5AROBnz2b/C+YU9g==}
 
   emoji-regex-xs@2.0.1:
     resolution: {integrity: sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==}
@@ -6019,8 +6396,8 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
-  enhanced-resolve@5.18.4:
-    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
@@ -6048,8 +6425,8 @@ packages:
   error-stack-parser@2.1.4:
     resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
 
-  es-abstract@1.24.1:
-    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
     engines: {node: '>= 0.4'}
 
   es-define-property@1.0.1:
@@ -6063,8 +6440,8 @@ packages:
   es-get-iterator@1.1.3:
     resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
 
-  es-iterator-helpers@1.2.2:
-    resolution: {integrity: sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==}
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
     engines: {node: '>= 0.4'}
 
   es-module-lexer@1.7.0:
@@ -6086,18 +6463,13 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  esbuild-register@3.6.0:
-    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
-    peerDependencies:
-      esbuild: '>=0.12 <1'
-
   esbuild@0.25.10:
     resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  esbuild@0.25.4:
-    resolution: {integrity: sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==}
+  esbuild@0.27.0:
+    resolution: {integrity: sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -6254,18 +6626,22 @@ packages:
     peerDependencies:
       eslint: '>=8.40'
 
+  eslint-plugin-react-refresh@0.4.24:
+    resolution: {integrity: sha512-nLHIW7TEq3aLrEYWpVaJ1dRgFR+wLDPN8e8FpYAql/bMV2oBEfC37K0gLEGgv9fy66juNShSMV8OkTqzltcG/w==}
+    peerDependencies:
+      eslint: '>=8.40'
+
   eslint-plugin-react@7.37.5:
     resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
     engines: {node: '>=4'}
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-storybook@9.0.15:
-    resolution: {integrity: sha512-HKQtF90khC45uLJhsrMasgaH1Ou+TLzwnuFHDoHDVLryg6yIXRgSTXqRUwge9x6iitEYwUz5Y2YMqg92yzmyQQ==}
-    engines: {node: '>=20.0.0'}
+  eslint-plugin-storybook@10.0.8:
+    resolution: {integrity: sha512-ZKEMFhF/z/HRVvIgnEIYG2uAqmuLbkebUdHH3DpGHE64GPgk+KozcpqnD6zNk5vJ407bFmcWsGinBc2zi74f0g==}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^9.0.15
+      storybook: ^10.0.8
 
   eslint-plugin-testing-library@6.5.0:
     resolution: {integrity: sha512-Ls5TUfLm5/snocMAOlofSOJxNN0aKqwTlco7CrNtMjkTdQlkpSMaeTCDHCuXfzrI97xcx2rSCNeKeJjtpkNC1w==}
@@ -6377,12 +6753,12 @@ packages:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
-  expect-type@1.3.0:
-    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+  expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
     engines: {node: '>=12.0.0'}
 
-  exsolve@1.0.8:
-    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+  exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -6482,10 +6858,6 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-up@7.0.0:
-    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
-    engines: {node: '>=18'}
-
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -6510,8 +6882,8 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data@4.0.5:
-    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+  form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
   formdata-polyfill@4.0.10:
@@ -6664,6 +7036,10 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  glob@9.3.5:
+    resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -6905,8 +7281,8 @@ packages:
   intl-messageformat@10.7.18:
     resolution: {integrity: sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==}
 
-  ip-address@10.1.0:
-    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+  ip-address@10.0.1:
+    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
     engines: {node: '>= 12'}
 
   ipaddr.js@2.2.0:
@@ -6970,11 +7346,6 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
-  is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
-    hasBin: true
-
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7096,10 +7467,6 @@ packages:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
 
-  is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
-
   is-wsl@3.1.0:
     resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
     engines: {node: '>=16'}
@@ -7113,9 +7480,9 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isomorphic-dompurify@2.24.0:
-    resolution: {integrity: sha512-SgKoDBCQveodymGMBPpzs9MOTCk4Luq0bTfwoPrUKa7q0FnCLZMtqR25Rnq228zJfMTsX1ZItiJbDtjb2lyv4A==}
-    engines: {node: '>=18'}
+  isomorphic-dompurify@2.33.0:
+    resolution: {integrity: sha512-pXGR3rAHAXb5Bvr56pc5aV0Lh8laubLo7/60F+soOzDFmwks6MtgDhL7p46VoxLnwgIsjgmVhQpUt4mUlL/XEw==}
+    engines: {node: '>=20.19.5'}
 
   isomorphic.js@0.2.5:
     resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
@@ -7168,6 +7535,10 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
@@ -7196,13 +7567,13 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  jsdom@26.1.0:
-    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
-    engines: {node: '>=18'}
+  jsdom@27.2.0:
+    resolution: {integrity: sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
     peerDependencies:
       canvas: ^3.0.0
     peerDependenciesMeta:
@@ -7262,11 +7633,11 @@ packages:
   jwa@2.0.1:
     resolution: {integrity: sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==}
 
-  jws@3.2.3:
-    resolution: {integrity: sha512-byiJ0FLRdLdSVSReO/U4E7RoEyOCKnEnEPMjq3HxWtvzLsV08/i5RQKsFVNkCldrCaPr2vDNAOMsfs8T/Hze7g==}
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
 
-  jws@4.0.1:
-    resolution: {integrity: sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==}
+  jws@4.0.0:
+    resolution: {integrity: sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==}
 
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -7300,6 +7671,76 @@ packages:
     resolution: {integrity: sha512-vQJWusIxO7wavpON1dusciL8Go9jsIQ+EUrckauFYAiSTjcmLAsuJh3SszLpvkwPci3JcL41ek2n+LUZGFpPIQ==}
     engines: {node: '>=8.0.0'}
 
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -7342,10 +7783,6 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
-  locate-path@7.2.0:
-    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
@@ -7400,6 +7837,10 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@11.2.2:
+    resolution: {integrity: sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==}
+    engines: {node: 20 || >=22}
+
   lru-cache@11.2.4:
     resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
     engines: {node: 20 || >=22}
@@ -7411,8 +7852,12 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
-  lru.min@1.1.3:
-    resolution: {integrity: sha512-Lkk/vx6ak3rYkRR0Nhu4lFUT2VDnQSxBe8Hbl7f36358p6ow8Bnvr8lrLt98H8J1aGxfhbX4Fs5tYg2+FTwr5Q==}
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
+  lru.min@1.1.2:
+    resolution: {integrity: sha512-Nv9KddBcQSlQopmBHXSsZVY5xsdlZkdH/Iey0BlcBYggMd4two7cZnKOK9vmy3nY0O5RGH99z1PCeTpPqszUYg==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
   lucide-react@0.507.0:
@@ -7424,6 +7869,10 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  magic-string@0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -7441,9 +7890,6 @@ packages:
   make-error@1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
 
-  make-event-props@1.6.2:
-    resolution: {integrity: sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==}
-
   make-fetch-happen@9.1.0:
     resolution: {integrity: sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==}
     engines: {node: '>= 10'}
@@ -7473,6 +7919,9 @@ packages:
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
@@ -7541,6 +7990,10 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
+  minimatch@8.0.4:
+    resolution: {integrity: sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -7572,6 +8025,10 @@ packages:
     resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
     engines: {node: '>=8'}
 
+  minipass@4.2.8:
+    resolution: {integrity: sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==}
+    engines: {node: '>=8'}
+
   minipass@5.0.0:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
@@ -7659,9 +8116,9 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  named-placeholders@1.1.4:
-    resolution: {integrity: sha512-/qfG0Kk/bLJIvej4FcPQ2KYUJP8iQdU1CTxysNb/U2wUNb+/4K485yeio8iNoiwfqJnsTInXoRPTza0dZWHVJQ==}
-    engines: {node: '>=8.0.0'}
+  named-placeholders@1.1.3:
+    resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
+    engines: {node: '>=12.0.0'}
 
   nano-css@5.6.2:
     resolution: {integrity: sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==}
@@ -7755,8 +8212,8 @@ packages:
       sass:
         optional: true
 
-  node-abi@3.85.0:
-    resolution: {integrity: sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==}
+  node-abi@3.79.0:
+    resolution: {integrity: sha512-Pr/5KdBQGG8TirdkS0qN3B+f3eo8zTOfZQWAxHoJqopMz2/uvRnG+S4fWu/6AZxKei2CP2p/psdQ5HFC2Ap5BA==}
     engines: {node: '>=10'}
 
   node-addon-api@7.1.1:
@@ -7829,16 +8286,13 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  nwsapi@2.2.23:
-    resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
-
   nypm@0.6.2:
     resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
-  oauth4webapi@3.8.3:
-    resolution: {integrity: sha512-pQ5BsX3QRTgnt5HxgHwgunIRaDXBdkT23tf8dfzmtTIL2LTpdmxgbpbBm0VgFWAIDlezQvQCTgnVIUmHupXHxw==}
+  oauth4webapi@3.8.2:
+    resolution: {integrity: sha512-FzZZ+bht5X0FKe7Mwz3DAVAmlH1BV5blSak/lHMBKz0/EBMhX6B10GlQYI51+oRp8ObJaX0g6pXrAxZh5s8rjw==}
 
   oauth@0.9.15:
     resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
@@ -7893,8 +8347,8 @@ packages:
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
-  oidc-token-hash@5.2.0:
-    resolution: {integrity: sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==}
+  oidc-token-hash@5.1.1:
+    resolution: {integrity: sha512-D7EmwxJV6DsEB6vOFLrBM2OzsVgQzgPWyHlV2OOAVj772n+WTXpudC9e9u5BVKQnYwaD30Ivhi9b+4UeBcGu9g==}
     engines: {node: ^10.13.0 || >=12.0.0}
 
   on-exit-leak-free@2.1.2:
@@ -7912,10 +8366,6 @@ packages:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
 
-  open@8.4.2:
-    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
-    engines: {node: '>=12'}
-
   openid-client@5.7.1:
     resolution: {integrity: sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==}
 
@@ -7945,10 +8395,6 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@4.0.0:
-    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -7957,10 +8403,6 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-locate@6.0.0:
-    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   p-map@4.0.0:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
     engines: {node: '>=10'}
@@ -7989,8 +8431,8 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
-  parse5@7.3.0:
-    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+  parse5@8.0.0:
+    resolution: {integrity: sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==}
 
   parseley@0.12.1:
     resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
@@ -8002,10 +8444,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-exists@5.0.0:
-    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -8199,6 +8637,10 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
@@ -8232,8 +8674,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-packagejson@2.5.20:
-    resolution: {integrity: sha512-G8cowPh+QmJJECTZlrPDKWkVVcwrFjF2rGcw546w3N8blLoc4szSs8UUPfFVxHUNLUjiru71Ah83g1lZkeK9Bw==}
+  prettier-plugin-packagejson@2.5.19:
+    resolution: {integrity: sha512-Qsqp4+jsZbKMpEGZB1UP1pxeAT8sCzne2IwnKkr+QhUe665EXUo3BAvTf1kAPCqyMv9kg3ZmO0+7eOni/C6Uag==}
     peerDependencies:
       prettier: '>= 1.16.0'
     peerDependenciesMeta:
@@ -8446,16 +8888,6 @@ packages:
     peerDependencies:
       react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
 
-  react-date-picker@11.0.0:
-    resolution: {integrity: sha512-l+siu5HSZ/ciGL1293KCAHl4o9aD5rw16V4tB0C43h7QbMv2dWGgj7Dxgt8iztLaPVtEfOt/+sxNiTYw4WVq6A==}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-day-picker@9.6.7:
     resolution: {integrity: sha512-rCSt6X8FXQWpjykns/azRXjJk3cMSzkzGbDEXuEveFGNZgOjZULdJQ5wsu8Zfyo8ZgPBoYCBKQ5wRrgJfhJGbg==}
     engines: {node: '>=18'}
@@ -8467,33 +8899,24 @@ packages:
     peerDependencies:
       typescript: '>= 4.3.x'
 
+  react-docgen@7.1.1:
+    resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
+    engines: {node: '>=16.14.0'}
+
   react-docgen@8.0.2:
     resolution: {integrity: sha512-+NRMYs2DyTP4/tqWz371Oo50JqmWltR1h2gcdgUMAWZJIAvrd0/SqlCfx7tpzpl/s36rzw6qH2MjoNrxtRNYhA==}
     engines: {node: ^20.9.0 || >=22}
 
-  react-dom@19.1.2:
-    resolution: {integrity: sha512-dEoydsCp50i7kS1xHOmPXq4zQYoGWedUsvqv9H6zdif2r7yLHygyfP9qou71TulRN0d6ng9EbRVsQhSqfUc19g==}
+  react-dom@19.2.1:
+    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
     peerDependencies:
-      react: ^19.1.2
+      react: ^19.2.1
 
   react-error-boundary@6.0.0:
     resolution: {integrity: sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==}
     peerDependencies:
       react: '>=16.13.1'
 
-  react-fit@2.0.1:
-    resolution: {integrity: sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      '@types/react-dom': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   react-hook-form@7.56.2:
     resolution: {integrity: sha512-vpfuHuQMF/L6GpuQ4c3ZDo+pRYxIi40gQqsCmmfUBwm+oqvBhKhwghCuj2o00YCgSfU6bR9KC/xnQGWm3Gr08A==}
     engines: {node: '>=18.0.0'}
@@ -8532,8 +8955,12 @@ packages:
   react-promise-suspense@0.3.4:
     resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
 
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
+  react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+    engines: {node: '>=0.10.0'}
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
     engines: {node: '>=0.10.0'}
 
   react-remove-scroll-bar@2.3.8:
@@ -8546,8 +8973,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.7.2:
-    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': '*'
@@ -8584,8 +9011,8 @@ packages:
       react: '*'
       react-dom: '*'
 
-  react@19.1.2:
-    resolution: {integrity: sha512-MdWVitvLbQULD+4DP8GYjZUrepGW7d+GQkNVqJEzNxE+e9WIa4egVFE/RDfVb1u9u/Jw7dNMmPB4IqxzbFYJ0w==}
+  react@19.2.1:
+    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
     engines: {node: '>=0.10.0'}
 
   read-cache@1.0.0:
@@ -8725,14 +9152,11 @@ packages:
   ripemd160@2.0.2:
     resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
 
-  rollup@4.53.3:
-    resolution: {integrity: sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==}
+  rollup@4.52.5:
+    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  rrweb-cssom@0.8.0:
-    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
-
   rtl-css-js@1.16.1:
     resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
 
@@ -8775,15 +9199,15 @@ packages:
     resolution: {integrity: sha512-ZvHN3ygzZ8FuxjSNB+mKBiF/NIoqHzlBGbD0MJiT+MvSsFOvotnWOhdTjxKzhHRT2wPC1QbhLzx2q/Y83VhfYQ==}
     engines: {node: '>=16'}
 
-  sax@1.4.3:
-    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
+  sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
 
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
@@ -8858,8 +9282,8 @@ packages:
     resolution: {integrity: sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  sharp@0.34.5:
-    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+  sharp@0.34.4:
+    resolution: {integrity: sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
   shebang-command@2.0.0:
@@ -8945,11 +9369,11 @@ packages:
   sonic-boom@4.2.0:
     resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
 
-  sort-object-keys@2.0.1:
-    resolution: {integrity: sha512-R89fO+z3x7hiKPXX5P0qim+ge6Y60AjtlW+QQpRozrrNcR1lw9Pkpm5MLB56HoNvdcLHL4wbpq16OcvGpEDJIg==}
+  sort-object-keys@1.1.3:
+    resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
 
-  sort-package-json@3.5.0:
-    resolution: {integrity: sha512-moY4UtptUuP5sPuu9H9dp8xHNel7eP5/Kz/7+90jTvC0IOiPH2LigtRM/aSFSxreaWoToHUVUpEV4a2tAs2oKQ==}
+  sort-package-json@3.4.0:
+    resolution: {integrity: sha512-97oFRRMM2/Js4oEA9LJhjyMlde+2ewpZQf53pgue27UkbEXfHJnDzHlUxQ/DWUkzqmp7DFwJp8D+wi/TYeQhpA==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -9045,8 +9469,8 @@ packages:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
-  storybook@9.0.15:
-    resolution: {integrity: sha512-r9hwcSMM3dq7dkMveaWFTosrmyHCL2FRrV3JOwVnVWraF6GtCgp2k+r4hsYtyp1bY3zdmK9e4KYzXsGs5q1h/Q==}
+  storybook@10.0.8:
+    resolution: {integrity: sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -9141,8 +9565,8 @@ packages:
   strnum@1.1.2:
     resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
 
-  strnum@2.1.2:
-    resolution: {integrity: sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==}
+  strnum@2.1.1:
+    resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
 
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
@@ -9160,8 +9584,8 @@ packages:
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
-  sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
@@ -9209,6 +9633,15 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.0.0:
+    resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
+
+  tailwindcss@4.1.1:
+    resolution: {integrity: sha512-QNbdmeS979Efzim2g/bEvfuh+fTcIdp1y7gA+sb6OYSW74rt7Cr7M78AKdf6HqWT3d5AiTb7SwTT3sLQxr4/qw==}
+
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -9228,12 +9661,12 @@ packages:
     resolution: {integrity: sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==}
     engines: {node: '>=8.0.0'}
 
-  tedious@18.6.2:
-    resolution: {integrity: sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==}
+  tedious@18.6.1:
+    resolution: {integrity: sha512-9AvErXXQTd6l7TDd5EmM+nxbOGyhnmdbp/8c3pw+tjaiSXW9usME90ET/CRG1LN1Y9tPMtz/p83z4Q97B4DDpw==}
     engines: {node: '>=18'}
 
-  terser-webpack-plugin@5.3.16:
-    resolution: {integrity: sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==}
+  terser-webpack-plugin@5.3.14:
+    resolution: {integrity: sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
       '@swc/core': '*'
@@ -9253,6 +9686,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   test-exclude@7.0.1:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
@@ -9290,9 +9728,8 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyexec@1.0.2:
-    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
-    engines: {node: '>=18'}
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
@@ -9314,11 +9751,11 @@ packages:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
 
-  tldts-core@6.1.86:
-    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+  tldts-core@7.0.19:
+    resolution: {integrity: sha512-lJX2dEWx0SGH4O6p+7FPwYmJ/bu1JbcGJ8RLaG9b7liIgZ85itUVEPbMtWRVrde/0fnDPEPHW10ZsKW3kVsE9A==}
 
-  tldts@6.1.86:
-    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+  tldts@7.0.19:
+    resolution: {integrity: sha512-8PWx8tvC4jDB39BQw1m4x8y5MH1BcQ5xHeL2n7UVFulMPH/3Q0uiamahFJ3lXA0zO2SUyRXuVVbWSDmstlt9YA==}
     hasBin: true
 
   to-buffer@1.2.2:
@@ -9332,8 +9769,8 @@ packages:
   toggle-selection@1.0.6:
     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
 
-  tough-cookie@5.1.2:
-    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+  tough-cookie@6.0.0:
+    resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
     engines: {node: '>=16'}
 
   tr46@0.0.3:
@@ -9343,6 +9780,10 @@ packages:
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -9501,23 +9942,24 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typeorm@0.3.28:
-    resolution: {integrity: sha512-6GH7wXhtfq2D33ZuRXYwIsl/qM5685WZcODZb7noOOcRMteM9KF2x2ap3H0EBjnSV0VO4gNAfJT5Ukp0PkOlvg==}
+  typeorm@0.3.27:
+    resolution: {integrity: sha512-pNV1bn+1n8qEe8tUNsNdD8ejuPcMAg47u2lUGnbsajiNUr3p2Js1XLKQjBMH0yMRMDfdX8T+fIRejFmIwy9x4A==}
     engines: {node: '>=16.13.0'}
     hasBin: true
     peerDependencies:
-      '@google-cloud/spanner': ^5.18.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      '@google-cloud/spanner': ^5.18.0 || ^6.0.0 || ^7.0.0
       '@sap/hana-client': ^2.14.22
       better-sqlite3: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0
       ioredis: ^5.0.4
       mongodb: ^5.8.0 || ^6.0.0
-      mssql: ^9.1.1 || ^10.0.0 || ^11.0.0 || ^12.0.0
+      mssql: ^9.1.1 || ^10.0.1 || ^11.0.1
       mysql2: ^2.2.5 || ^3.0.1
       oracledb: ^6.3.0
       pg: ^8.5.1
       pg-native: ^3.0.0
       pg-query-stream: ^4.0.0
       redis: ^3.1.1 || ^4.0.0 || ^5.0.14
+      reflect-metadata: ^0.1.14 || ^0.2.0
       sql.js: ^1.4.0
       sqlite3: ^5.0.3
       ts-node: ^10.7.0
@@ -9589,10 +10031,6 @@ packages:
   unicode-trie@2.0.0:
     resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
 
-  unicorn-magic@0.1.0:
-    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
-    engines: {node: '>=18'}
-
   unique-filename@1.1.1:
     resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==}
 
@@ -9610,18 +10048,19 @@ packages:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
-  update-browserslist-db@1.2.2:
-    resolution: {integrity: sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==}
+  update-browserslist-db@1.1.4:
+    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
-  update-input-width@1.4.2:
-    resolution: {integrity: sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==}
-
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -9736,6 +10175,46 @@ packages:
       yaml:
         optional: true
 
+  vite@7.2.4:
+    resolution: {integrity: sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vitest-mock-extended@3.1.0:
     resolution: {integrity: sha512-vCM0VkuocOUBwwqwV7JB7YStw07pqeKvEIrZnR8l3PtwYi6rAAJAyJACeC1UYNfbQWi85nz7EdiXWBFI5hll2g==}
     peerDependencies:
@@ -9799,6 +10278,10 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
+  webidl-conversions@8.0.0:
+    resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==}
+    engines: {node: '>=20'}
+
   webpack-sources@3.3.3:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
@@ -9831,6 +10314,10 @@ packages:
     resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
     engines: {node: '>=18'}
 
+  whatwg-url@15.1.0:
+    resolution: {integrity: sha512-2ytDk0kiEj/yu90JOAp44PVPUkO9+jVhyf+SybKlRHSDlvOOZhdPIrr7xTH64l4WixO2cP+wQIcgujkGBPPz6g==}
+    engines: {node: '>=20'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -9962,8 +10449,8 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yaml@2.8.2:
-    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+  yaml@2.8.1:
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
@@ -9995,10 +10482,6 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.2.2:
-    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
-    engines: {node: '>=12.20'}
-
   yoga-layout@3.2.1:
     resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
 
@@ -10013,6 +10496,8 @@ packages:
 
 snapshots:
 
+  '@acemir/cssom@0.9.28': {}
+
   '@adobe/css-tools@4.4.4': {}
 
   '@alloc/quick-lru@5.2.0': {}
@@ -10022,19 +10507,29 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
 
-  '@ark/schema@0.56.0':
+  '@ark/schema@0.53.0':
     dependencies:
-      '@ark/util': 0.56.0
+      '@ark/util': 0.53.0
 
-  '@ark/util@0.56.0': {}
+  '@ark/util@0.53.0': {}
 
-  '@asamuzakjp/css-color@3.2.0':
+  '@asamuzakjp/css-color@4.1.0':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      lru-cache: 10.4.3
+      lru-cache: 11.2.4
+
+  '@asamuzakjp/dom-selector@6.7.6':
+    dependencies:
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.1.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.2.4
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
 
   '@aws-crypto/crc32@5.2.0':
     dependencies:
@@ -10098,30 +10593,30 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.808.0
       '@aws-sdk/util-user-agent-browser': 3.804.0
       '@aws-sdk/util-user-agent-node': 3.816.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -10143,32 +10638,32 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.808.0
       '@aws-sdk/util-user-agent-browser': 3.804.0
       '@aws-sdk/util-user-agent-node': 3.816.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.5
+      '@smithy/util-waiter': 4.2.3
       '@types/uuid': 9.0.8
       tslib: 2.8.1
       uuid: 9.0.1
@@ -10199,85 +10694,85 @@ snapshots:
       '@aws-sdk/util-user-agent-browser': 3.873.0
       '@aws-sdk/util-user-agent-node': 3.879.0
       '@aws-sdk/xml-builder': 3.873.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/eventstream-serde-browser': 4.2.5
-      '@smithy/eventstream-serde-config-resolver': 4.3.5
-      '@smithy/eventstream-serde-node': 4.2.5
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-blob-browser': 4.2.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/hash-stream-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/md5-js': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/eventstream-serde-browser': 4.2.3
+      '@smithy/eventstream-serde-config-resolver': 4.3.3
+      '@smithy/eventstream-serde-node': 4.2.3
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-blob-browser': 4.2.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/hash-stream-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/md5-js': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
-      '@smithy/util-stream': 4.5.6
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
+      '@smithy/util-stream': 4.5.4
       '@smithy/util-utf8': 4.2.0
-      '@smithy/util-waiter': 4.2.5
+      '@smithy/util-waiter': 4.2.3
       '@types/uuid': 9.0.8
       tslib: 2.8.1
       uuid: 9.0.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sesv2@3.950.0':
+  '@aws-sdk/client-sesv2@3.920.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/credential-provider-node': 3.948.0
-      '@aws-sdk/middleware-host-header': 3.936.0
-      '@aws-sdk/middleware-logger': 3.936.0
-      '@aws-sdk/middleware-recursion-detection': 3.948.0
-      '@aws-sdk/middleware-user-agent': 3.947.0
-      '@aws-sdk/region-config-resolver': 3.936.0
-      '@aws-sdk/signature-v4-multi-region': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@aws-sdk/util-endpoints': 3.936.0
-      '@aws-sdk/util-user-agent-browser': 3.936.0
-      '@aws-sdk/util-user-agent-node': 3.947.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/credential-provider-node': 3.920.0
+      '@aws-sdk/middleware-host-header': 3.920.0
+      '@aws-sdk/middleware-logger': 3.920.0
+      '@aws-sdk/middleware-recursion-detection': 3.920.0
+      '@aws-sdk/middleware-user-agent': 3.920.0
+      '@aws-sdk/region-config-resolver': 3.920.0
+      '@aws-sdk/signature-v4-multi-region': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@aws-sdk/util-endpoints': 3.920.0
+      '@aws-sdk/util-user-agent-browser': 3.920.0
+      '@aws-sdk/util-user-agent-node': 3.920.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -10297,30 +10792,30 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.808.0
       '@aws-sdk/util-user-agent-browser': 3.804.0
       '@aws-sdk/util-user-agent-node': 3.816.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -10340,73 +10835,73 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.879.0
       '@aws-sdk/util-user-agent-browser': 3.873.0
       '@aws-sdk/util-user-agent-node': 3.879.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso@3.948.0':
+  '@aws-sdk/client-sso@3.920.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/middleware-host-header': 3.936.0
-      '@aws-sdk/middleware-logger': 3.936.0
-      '@aws-sdk/middleware-recursion-detection': 3.948.0
-      '@aws-sdk/middleware-user-agent': 3.947.0
-      '@aws-sdk/region-config-resolver': 3.936.0
-      '@aws-sdk/types': 3.936.0
-      '@aws-sdk/util-endpoints': 3.936.0
-      '@aws-sdk/util-user-agent-browser': 3.936.0
-      '@aws-sdk/util-user-agent-node': 3.947.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/middleware-host-header': 3.920.0
+      '@aws-sdk/middleware-logger': 3.920.0
+      '@aws-sdk/middleware-recursion-detection': 3.920.0
+      '@aws-sdk/middleware-user-agent': 3.920.0
+      '@aws-sdk/region-config-resolver': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@aws-sdk/util-endpoints': 3.920.0
+      '@aws-sdk/util-user-agent-browser': 3.920.0
+      '@aws-sdk/util-user-agent-node': 3.920.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -10415,14 +10910,14 @@ snapshots:
   '@aws-sdk/core@3.816.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/core': 3.18.7
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/core': 3.17.1
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/util-middleware': 4.2.3
       fast-xml-parser: 4.4.1
       tslib: 2.8.1
 
@@ -10430,33 +10925,33 @@ snapshots:
     dependencies:
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/xml-builder': 3.873.0
-      '@smithy/core': 3.18.7
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/core': 3.17.1
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-middleware': 4.2.3
       '@smithy/util-utf8': 4.2.0
       fast-xml-parser: 5.2.5
       tslib: 2.8.1
 
-  '@aws-sdk/core@3.947.0':
+  '@aws-sdk/core@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@aws-sdk/xml-builder': 3.930.0
-      '@smithy/core': 3.18.7
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@aws-sdk/types': 3.920.0
+      '@aws-sdk/xml-builder': 3.914.0
+      '@smithy/core': 3.17.1
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       '@smithy/util-base64': 4.3.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-middleware': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
@@ -10464,8 +10959,8 @@ snapshots:
     dependencies:
       '@aws-sdk/client-cognito-identity': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10474,63 +10969,63 @@ snapshots:
     dependencies:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-env@3.879.0':
     dependencies:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-env@3.947.0':
+  '@aws-sdk/credential-provider-env@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-http@3.816.0':
     dependencies:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/util-stream': 4.5.6
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/util-stream': 4.5.4
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-http@3.879.0':
     dependencies:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/util-stream': 4.5.6
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/util-stream': 4.5.4
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-http@3.947.0':
+  '@aws-sdk/credential-provider-http@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/util-stream': 4.5.6
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/util-stream': 4.5.4
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-ini@3.817.0':
@@ -10543,10 +11038,10 @@ snapshots:
       '@aws-sdk/credential-provider-web-identity': 3.817.0
       '@aws-sdk/nested-clients': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10561,42 +11056,28 @@ snapshots:
       '@aws-sdk/credential-provider-web-identity': 3.879.0
       '@aws-sdk/nested-clients': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-ini@3.948.0':
+  '@aws-sdk/credential-provider-ini@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/credential-provider-env': 3.947.0
-      '@aws-sdk/credential-provider-http': 3.947.0
-      '@aws-sdk/credential-provider-login': 3.948.0
-      '@aws-sdk/credential-provider-process': 3.947.0
-      '@aws-sdk/credential-provider-sso': 3.948.0
-      '@aws-sdk/credential-provider-web-identity': 3.948.0
-      '@aws-sdk/nested-clients': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
-      tslib: 2.8.1
-    transitivePeerDependencies:
-      - aws-crt
-
-  '@aws-sdk/credential-provider-login@3.948.0':
-    dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/nested-clients': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/credential-provider-env': 3.920.0
+      '@aws-sdk/credential-provider-http': 3.920.0
+      '@aws-sdk/credential-provider-process': 3.920.0
+      '@aws-sdk/credential-provider-sso': 3.920.0
+      '@aws-sdk/credential-provider-web-identity': 3.920.0
+      '@aws-sdk/nested-clients': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10610,10 +11091,10 @@ snapshots:
       '@aws-sdk/credential-provider-sso': 3.817.0
       '@aws-sdk/credential-provider-web-identity': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10627,27 +11108,27 @@ snapshots:
       '@aws-sdk/credential-provider-sso': 3.879.0
       '@aws-sdk/credential-provider-web-identity': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-node@3.948.0':
+  '@aws-sdk/credential-provider-node@3.920.0':
     dependencies:
-      '@aws-sdk/credential-provider-env': 3.947.0
-      '@aws-sdk/credential-provider-http': 3.947.0
-      '@aws-sdk/credential-provider-ini': 3.948.0
-      '@aws-sdk/credential-provider-process': 3.947.0
-      '@aws-sdk/credential-provider-sso': 3.948.0
-      '@aws-sdk/credential-provider-web-identity': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/credential-provider-env': 3.920.0
+      '@aws-sdk/credential-provider-http': 3.920.0
+      '@aws-sdk/credential-provider-ini': 3.920.0
+      '@aws-sdk/credential-provider-process': 3.920.0
+      '@aws-sdk/credential-provider-sso': 3.920.0
+      '@aws-sdk/credential-provider-web-identity': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10656,27 +11137,27 @@ snapshots:
     dependencies:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-process@3.879.0':
     dependencies:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/credential-provider-process@3.947.0':
+  '@aws-sdk/credential-provider-process@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/credential-provider-sso@3.817.0':
@@ -10685,9 +11166,9 @@ snapshots:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/token-providers': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10698,22 +11179,22 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/token-providers': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-sso@3.948.0':
+  '@aws-sdk/credential-provider-sso@3.920.0':
     dependencies:
-      '@aws-sdk/client-sso': 3.948.0
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/token-providers': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/client-sso': 3.920.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/token-providers': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10723,8 +11204,8 @@ snapshots:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/nested-clients': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10734,20 +11215,20 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/nested-clients': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/credential-provider-web-identity@3.948.0':
+  '@aws-sdk/credential-provider-web-identity@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/nested-clients': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/nested-clients': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10766,12 +11247,12 @@ snapshots:
       '@aws-sdk/credential-provider-web-identity': 3.817.0
       '@aws-sdk/nested-clients': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -10785,9 +11266,9 @@ snapshots:
     dependencies:
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/util-arn-parser': 3.873.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
       tslib: 2.8.1
 
@@ -10795,16 +11276,16 @@ snapshots:
     dependencies:
       '@aws-sdk/endpoint-cache': 3.804.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-expect-continue@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-flexible-checksums@3.879.0':
@@ -10815,79 +11296,79 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
       '@smithy/is-array-buffer': 4.2.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-stream': 4.5.6
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-stream': 4.5.4
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-host-header@3.804.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-host-header@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-host-header@3.936.0':
+  '@aws-sdk/middleware-host-header@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-location-constraint@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-logger@3.804.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-logger@3.876.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-logger@3.936.0':
+  '@aws-sdk/middleware-logger@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-recursion-detection@3.804.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-recursion-detection@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-recursion-detection@3.948.0':
+  '@aws-sdk/middleware-recursion-detection@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@aws/lambda-invoke-store': 0.2.2
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/types': 3.920.0
+      '@aws/lambda-invoke-store': 0.1.1
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-sdk-s3@3.879.0':
@@ -10895,39 +11376,39 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/util-arn-parser': 3.873.0
-      '@smithy/core': 3.18.7
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/core': 3.17.1
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-stream': 4.5.6
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-stream': 4.5.4
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-sdk-s3@3.947.0':
+  '@aws-sdk/middleware-sdk-s3@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/types': 3.936.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/types': 3.920.0
       '@aws-sdk/util-arn-parser': 3.893.0
-      '@smithy/core': 3.18.7
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/core': 3.17.1
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-stream': 4.5.6
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-stream': 4.5.4
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-ssec@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-user-agent@3.816.0':
@@ -10935,9 +11416,9 @@ snapshots:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/types': 3.804.0
       '@aws-sdk/util-endpoints': 3.808.0
-      '@smithy/core': 3.18.7
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/core': 3.17.1
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/middleware-user-agent@3.879.0':
@@ -10945,19 +11426,19 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/util-endpoints': 3.879.0
-      '@smithy/core': 3.18.7
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/core': 3.17.1
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/middleware-user-agent@3.947.0':
+  '@aws-sdk/middleware-user-agent@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@aws-sdk/util-endpoints': 3.936.0
-      '@smithy/core': 3.18.7
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@aws-sdk/util-endpoints': 3.920.0
+      '@smithy/core': 3.17.1
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/nested-clients@3.817.0':
@@ -10974,30 +11455,30 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.808.0
       '@aws-sdk/util-user-agent-browser': 3.804.0
       '@aws-sdk/util-user-agent-node': 3.816.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -11017,73 +11498,73 @@ snapshots:
       '@aws-sdk/util-endpoints': 3.879.0
       '@aws-sdk/util-user-agent-browser': 3.873.0
       '@aws-sdk/util-user-agent-node': 3.879.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/nested-clients@3.948.0':
+  '@aws-sdk/nested-clients@3.920.0':
     dependencies:
       '@aws-crypto/sha256-browser': 5.2.0
       '@aws-crypto/sha256-js': 5.2.0
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/middleware-host-header': 3.936.0
-      '@aws-sdk/middleware-logger': 3.936.0
-      '@aws-sdk/middleware-recursion-detection': 3.948.0
-      '@aws-sdk/middleware-user-agent': 3.947.0
-      '@aws-sdk/region-config-resolver': 3.936.0
-      '@aws-sdk/types': 3.936.0
-      '@aws-sdk/util-endpoints': 3.936.0
-      '@aws-sdk/util-user-agent-browser': 3.936.0
-      '@aws-sdk/util-user-agent-node': 3.947.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/core': 3.18.7
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/hash-node': 4.2.5
-      '@smithy/invalid-dependency': 4.2.5
-      '@smithy/middleware-content-length': 4.2.5
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-retry': 4.4.14
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/middleware-host-header': 3.920.0
+      '@aws-sdk/middleware-logger': 3.920.0
+      '@aws-sdk/middleware-recursion-detection': 3.920.0
+      '@aws-sdk/middleware-user-agent': 3.920.0
+      '@aws-sdk/region-config-resolver': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@aws-sdk/util-endpoints': 3.920.0
+      '@aws-sdk/util-user-agent-browser': 3.920.0
+      '@aws-sdk/util-user-agent-node': 3.920.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/core': 3.17.1
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/hash-node': 4.2.3
+      '@smithy/invalid-dependency': 4.2.3
+      '@smithy/middleware-content-length': 4.2.3
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-retry': 4.4.5
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
       '@smithy/util-body-length-node': 4.2.1
-      '@smithy/util-defaults-mode-browser': 4.3.13
-      '@smithy/util-defaults-mode-node': 4.2.16
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/util-defaults-mode-browser': 4.3.4
+      '@smithy/util-defaults-mode-node': 4.2.6
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -11092,27 +11573,27 @@ snapshots:
   '@aws-sdk/region-config-resolver@3.808.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-middleware': 4.2.3
       tslib: 2.8.1
 
   '@aws-sdk/region-config-resolver@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-middleware': 4.2.3
       tslib: 2.8.1
 
-  '@aws-sdk/region-config-resolver@3.936.0':
+  '@aws-sdk/region-config-resolver@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/s3-presigned-post@3.879.0':
@@ -11120,9 +11601,9 @@ snapshots:
       '@aws-sdk/client-s3': 3.879.0
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/util-format-url': 3.873.0
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-hex-encoding': 4.2.0
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
@@ -11134,28 +11615,28 @@ snapshots:
       '@aws-sdk/signature-v4-multi-region': 3.879.0
       '@aws-sdk/types': 3.862.0
       '@aws-sdk/util-format-url': 3.873.0
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/signature-v4-multi-region@3.879.0':
     dependencies:
       '@aws-sdk/middleware-sdk-s3': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/signature-v4-multi-region@3.947.0':
+  '@aws-sdk/signature-v4-multi-region@3.920.0':
     dependencies:
-      '@aws-sdk/middleware-sdk-s3': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/signature-v4': 5.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/middleware-sdk-s3': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/signature-v4': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/token-providers@3.817.0':
@@ -11163,9 +11644,9 @@ snapshots:
       '@aws-sdk/core': 3.816.0
       '@aws-sdk/nested-clients': 3.817.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
@@ -11175,38 +11656,38 @@ snapshots:
       '@aws-sdk/core': 3.879.0
       '@aws-sdk/nested-clients': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/token-providers@3.948.0':
+  '@aws-sdk/token-providers@3.920.0':
     dependencies:
-      '@aws-sdk/core': 3.947.0
-      '@aws-sdk/nested-clients': 3.948.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@aws-sdk/core': 3.920.0
+      '@aws-sdk/nested-clients': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
     transitivePeerDependencies:
       - aws-crt
 
   '@aws-sdk/types@3.804.0':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/types@3.862.0':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/types@3.936.0':
+  '@aws-sdk/types@3.920.0':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/util-arn-parser@3.873.0':
@@ -11225,31 +11706,31 @@ snapshots:
   '@aws-sdk/util-endpoints@3.808.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/types': 4.9.0
-      '@smithy/util-endpoints': 3.2.5
+      '@smithy/types': 4.8.0
+      '@smithy/util-endpoints': 3.2.3
       tslib: 2.8.1
 
   '@aws-sdk/util-endpoints@3.879.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
-      '@smithy/util-endpoints': 3.2.5
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
+      '@smithy/util-endpoints': 3.2.3
       tslib: 2.8.1
 
-  '@aws-sdk/util-endpoints@3.936.0':
+  '@aws-sdk/util-endpoints@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
-      '@smithy/util-endpoints': 3.2.5
+      '@aws-sdk/types': 3.920.0
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
+      '@smithy/util-endpoints': 3.2.3
       tslib: 2.8.1
 
   '@aws-sdk/util-format-url@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/querystring-builder': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/querystring-builder': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/util-locate-window@3.893.0':
@@ -11259,68 +11740,68 @@ snapshots:
   '@aws-sdk/util-user-agent-browser@3.804.0':
     dependencies:
       '@aws-sdk/types': 3.804.0
-      '@smithy/types': 4.9.0
-      bowser: 2.13.1
+      '@smithy/types': 4.8.0
+      bowser: 2.12.1
       tslib: 2.8.1
 
   '@aws-sdk/util-user-agent-browser@3.873.0':
     dependencies:
       '@aws-sdk/types': 3.862.0
-      '@smithy/types': 4.9.0
-      bowser: 2.13.1
+      '@smithy/types': 4.8.0
+      bowser: 2.12.1
       tslib: 2.8.1
 
-  '@aws-sdk/util-user-agent-browser@3.936.0':
+  '@aws-sdk/util-user-agent-browser@3.920.0':
     dependencies:
-      '@aws-sdk/types': 3.936.0
-      '@smithy/types': 4.9.0
-      bowser: 2.13.1
+      '@aws-sdk/types': 3.920.0
+      '@smithy/types': 4.8.0
+      bowser: 2.12.1
       tslib: 2.8.1
 
   '@aws-sdk/util-user-agent-node@3.816.0':
     dependencies:
       '@aws-sdk/middleware-user-agent': 3.816.0
       '@aws-sdk/types': 3.804.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/util-user-agent-node@3.879.0':
     dependencies:
       '@aws-sdk/middleware-user-agent': 3.879.0
       '@aws-sdk/types': 3.862.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/util-user-agent-node@3.947.0':
+  '@aws-sdk/util-user-agent-node@3.920.0':
     dependencies:
-      '@aws-sdk/middleware-user-agent': 3.947.0
-      '@aws-sdk/types': 3.936.0
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@aws-sdk/middleware-user-agent': 3.920.0
+      '@aws-sdk/types': 3.920.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@aws-sdk/xml-builder@3.873.0':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@aws-sdk/xml-builder@3.930.0':
+  '@aws-sdk/xml-builder@3.914.0':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       fast-xml-parser: 5.2.5
       tslib: 2.8.1
 
-  '@aws/lambda-invoke-store@0.2.2': {}
+  '@aws/lambda-invoke-store@0.1.1': {}
 
   '@azure-rest/core-client@2.5.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/core-tracing': 1.3.1
-      '@typespec/ts-http-runtime': 0.3.2
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
@@ -11341,7 +11822,7 @@ snapshots:
     dependencies:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/core-tracing': 1.3.1
       '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
@@ -11353,7 +11834,7 @@ snapshots:
     dependencies:
       '@azure/abort-controller': 2.1.2
       '@azure/core-client': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
     transitivePeerDependencies:
       - supports-color
 
@@ -11370,14 +11851,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@azure/core-rest-pipeline@1.22.2':
+  '@azure/core-rest-pipeline@1.22.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.10.1
       '@azure/core-tracing': 1.3.1
       '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
-      '@typespec/ts-http-runtime': 0.3.2
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
@@ -11389,7 +11870,7 @@ snapshots:
   '@azure/core-util@1.13.1':
     dependencies:
       '@azure/abort-controller': 2.1.2
-      '@typespec/ts-http-runtime': 0.3.2
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
@@ -11399,12 +11880,12 @@ snapshots:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.10.1
       '@azure/core-client': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/core-tracing': 1.3.1
       '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
-      '@azure/msal-browser': 4.27.0
-      '@azure/msal-node': 3.8.4
+      '@azure/msal-browser': 4.26.0
+      '@azure/msal-node': 3.8.1
       open: 10.2.0
       tslib: 2.8.1
     transitivePeerDependencies:
@@ -11415,7 +11896,7 @@ snapshots:
       '@azure/abort-controller': 2.1.2
       '@azure/core-auth': 1.10.1
       '@azure/core-client': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/core-tracing': 1.3.1
       '@azure/core-util': 1.13.1
       '@azure/logger': 1.3.0
@@ -11431,7 +11912,7 @@ snapshots:
       '@azure/core-http-compat': 2.3.1
       '@azure/core-lro': 2.7.2
       '@azure/core-paging': 1.6.2
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/core-tracing': 1.3.1
       '@azure/core-util': 1.13.1
       '@azure/keyvault-common': 2.0.0
@@ -11442,27 +11923,27 @@ snapshots:
 
   '@azure/logger@1.3.0':
     dependencies:
-      '@typespec/ts-http-runtime': 0.3.2
+      '@typespec/ts-http-runtime': 0.3.1
       tslib: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
-  '@azure/msal-browser@4.27.0':
+  '@azure/msal-browser@4.26.0':
     dependencies:
-      '@azure/msal-common': 15.13.3
+      '@azure/msal-common': 15.13.1
 
-  '@azure/msal-common@15.13.3': {}
+  '@azure/msal-common@15.13.1': {}
 
-  '@azure/msal-node@3.8.4':
+  '@azure/msal-node@3.8.1':
     dependencies:
-      '@azure/msal-common': 15.13.3
+      '@azure/msal-common': 15.13.1
       jsonwebtoken: 9.0.2
       uuid: 8.3.2
 
   '@azure/playwright@1.0.0(@playwright/test@1.56.1)':
     dependencies:
       '@azure/core-auth': 1.10.1
-      '@azure/core-rest-pipeline': 1.22.2
+      '@azure/core-rest-pipeline': 1.22.1
       '@azure/logger': 1.3.0
       '@playwright/test': 1.56.1
       tslib: 2.8.1
@@ -11521,7 +12002,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.28.5
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
+      browserslist: 4.27.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -11642,7 +12123,7 @@ snapshots:
       '@boxyhq/saml20': 1.12.1
       '@googleapis/admin': 23.5.0(encoding@0.1.13)
       '@libsql/sqlite3': 0.3.1(encoding@0.1.13)
-      axios: 1.13.2
+      axios: 1.13.1
       encoding: 0.1.13
       ipaddr.js: 2.2.0
       jose: 6.0.11
@@ -11658,7 +12139,7 @@ snapshots:
       reflect-metadata: 0.2.2
       ripemd160: 2.0.2
       sqlite3: 5.1.7
-      typeorm: 0.3.28(mongodb@6.16.0(@aws-sdk/credential-providers@3.817.0)(socks@2.8.7))(mssql@11.0.1)(mysql2@3.14.1)(pg@8.16.0)(redis@4.7.0)(sqlite3@5.1.7)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
+      typeorm: 0.3.27(mongodb@6.16.0(@aws-sdk/credential-providers@3.817.0)(socks@2.8.7))(mssql@11.0.1)(mysql2@3.14.1)(pg@8.16.0)(redis@4.7.0)(reflect-metadata@0.2.2)(sqlite3@5.1.7)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
     transitivePeerDependencies:
       - '@google-cloud/spanner'
       - '@mongodb-js/zstd'
@@ -11698,13 +12179,13 @@ snapshots:
     dependencies:
       '@calcom/embed-core': 1.5.3
 
-  '@chromatic-com/storybook@4.1.3(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@chromatic-com/storybook@4.1.3(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
       '@neoconfetti/react': 1.0.0
       chromatic: 13.3.4
       filesize: 10.1.6
       jsonfile: 6.2.0
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       strip-ansi: 7.1.2
     transitivePeerDependencies:
       - '@chromatic-com/cypress'
@@ -11732,49 +12213,51 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
 
+  '@csstools/css-syntax-patches-for-csstree@1.0.20': {}
+
   '@csstools/css-tokenizer@3.0.4': {}
 
   '@date-fns/tz@1.2.0': {}
 
-  '@dnd-kit/accessibility@3.1.1(react@19.1.2)':
+  '@dnd-kit/accessibility@3.1.1(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
       tslib: 2.8.1
 
-  '@dnd-kit/core@6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@dnd-kit/core@6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@dnd-kit/accessibility': 3.1.1(react@19.1.2)
-      '@dnd-kit/utilities': 3.2.2(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       tslib: 2.8.1
 
-  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)':
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@dnd-kit/utilities': 3.2.2(react@19.1.2)
-      react: 19.1.2
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.1)
+      react: 19.2.1
       tslib: 2.8.1
 
-  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)':
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@dnd-kit/core': 6.3.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@dnd-kit/utilities': 3.2.2(react@19.1.2)
-      react: 19.1.2
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.1)
+      react: 19.2.1
       tslib: 2.8.1
 
-  '@dnd-kit/utilities@3.2.2(react@19.1.2)':
+  '@dnd-kit/utilities@3.2.2(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
       tslib: 2.8.1
 
-  '@emnapi/core@1.7.1':
+  '@emnapi/core@1.6.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.7.1':
+  '@emnapi/runtime@1.6.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -11789,154 +12272,157 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.10':
     optional: true
 
-  '@esbuild/aix-ppc64@0.25.4':
+  '@esbuild/aix-ppc64@0.27.0':
     optional: true
 
   '@esbuild/android-arm64@0.25.10':
     optional: true
 
-  '@esbuild/android-arm64@0.25.4':
+  '@esbuild/android-arm64@0.27.0':
     optional: true
 
   '@esbuild/android-arm@0.25.10':
     optional: true
 
-  '@esbuild/android-arm@0.25.4':
+  '@esbuild/android-arm@0.27.0':
     optional: true
 
   '@esbuild/android-x64@0.25.10':
     optional: true
 
-  '@esbuild/android-x64@0.25.4':
+  '@esbuild/android-x64@0.27.0':
     optional: true
 
   '@esbuild/darwin-arm64@0.25.10':
     optional: true
 
-  '@esbuild/darwin-arm64@0.25.4':
+  '@esbuild/darwin-arm64@0.27.0':
     optional: true
 
   '@esbuild/darwin-x64@0.25.10':
     optional: true
 
-  '@esbuild/darwin-x64@0.25.4':
+  '@esbuild/darwin-x64@0.27.0':
     optional: true
 
   '@esbuild/freebsd-arm64@0.25.10':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.25.4':
+  '@esbuild/freebsd-arm64@0.27.0':
     optional: true
 
   '@esbuild/freebsd-x64@0.25.10':
     optional: true
 
-  '@esbuild/freebsd-x64@0.25.4':
+  '@esbuild/freebsd-x64@0.27.0':
     optional: true
 
   '@esbuild/linux-arm64@0.25.10':
     optional: true
 
-  '@esbuild/linux-arm64@0.25.4':
+  '@esbuild/linux-arm64@0.27.0':
     optional: true
 
   '@esbuild/linux-arm@0.25.10':
     optional: true
 
-  '@esbuild/linux-arm@0.25.4':
+  '@esbuild/linux-arm@0.27.0':
     optional: true
 
   '@esbuild/linux-ia32@0.25.10':
     optional: true
 
-  '@esbuild/linux-ia32@0.25.4':
+  '@esbuild/linux-ia32@0.27.0':
     optional: true
 
   '@esbuild/linux-loong64@0.25.10':
     optional: true
 
-  '@esbuild/linux-loong64@0.25.4':
+  '@esbuild/linux-loong64@0.27.0':
     optional: true
 
   '@esbuild/linux-mips64el@0.25.10':
     optional: true
 
-  '@esbuild/linux-mips64el@0.25.4':
+  '@esbuild/linux-mips64el@0.27.0':
     optional: true
 
   '@esbuild/linux-ppc64@0.25.10':
     optional: true
 
-  '@esbuild/linux-ppc64@0.25.4':
+  '@esbuild/linux-ppc64@0.27.0':
     optional: true
 
   '@esbuild/linux-riscv64@0.25.10':
     optional: true
 
-  '@esbuild/linux-riscv64@0.25.4':
+  '@esbuild/linux-riscv64@0.27.0':
     optional: true
 
   '@esbuild/linux-s390x@0.25.10':
     optional: true
 
-  '@esbuild/linux-s390x@0.25.4':
+  '@esbuild/linux-s390x@0.27.0':
     optional: true
 
   '@esbuild/linux-x64@0.25.10':
     optional: true
 
-  '@esbuild/linux-x64@0.25.4':
+  '@esbuild/linux-x64@0.27.0':
     optional: true
 
   '@esbuild/netbsd-arm64@0.25.10':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.25.4':
+  '@esbuild/netbsd-arm64@0.27.0':
     optional: true
 
   '@esbuild/netbsd-x64@0.25.10':
     optional: true
 
-  '@esbuild/netbsd-x64@0.25.4':
+  '@esbuild/netbsd-x64@0.27.0':
     optional: true
 
   '@esbuild/openbsd-arm64@0.25.10':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.25.4':
+  '@esbuild/openbsd-arm64@0.27.0':
     optional: true
 
   '@esbuild/openbsd-x64@0.25.10':
     optional: true
 
-  '@esbuild/openbsd-x64@0.25.4':
+  '@esbuild/openbsd-x64@0.27.0':
     optional: true
 
   '@esbuild/openharmony-arm64@0.25.10':
     optional: true
 
+  '@esbuild/openharmony-arm64@0.27.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.25.10':
     optional: true
 
-  '@esbuild/sunos-x64@0.25.4':
+  '@esbuild/sunos-x64@0.27.0':
     optional: true
 
   '@esbuild/win32-arm64@0.25.10':
     optional: true
 
-  '@esbuild/win32-arm64@0.25.4':
+  '@esbuild/win32-arm64@0.27.0':
     optional: true
 
   '@esbuild/win32-ia32@0.25.10':
     optional: true
 
-  '@esbuild/win32-ia32@0.25.4':
+  '@esbuild/win32-ia32@0.27.0':
     optional: true
 
   '@esbuild/win32-x64@0.25.10':
     optional: true
 
-  '@esbuild/win32-x64@0.25.4':
+  '@esbuild/win32-x64@0.27.0':
     optional: true
 
   '@eslint-community/eslint-utils@4.9.0(eslint@8.57.0)':
@@ -11954,7 +12440,7 @@ snapshots:
       globals: 13.24.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.1.0
       minimatch: 3.1.2
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -11971,18 +12457,18 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.6(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
-  '@floating-ui/react@0.27.16(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@floating-ui/react@0.27.16(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@floating-ui/utils': 0.2.10
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       tabbable: 6.3.0
 
   '@floating-ui/utils@0.2.10': {}
@@ -12037,10 +12523,10 @@ snapshots:
       protobufjs: 7.5.4
       yargs: 17.7.2
 
-  '@hookform/resolvers@5.0.1(react-hook-form@7.56.2(react@19.1.2))':
+  '@hookform/resolvers@5.0.1(react-hook-form@7.56.2(react@19.2.1))':
     dependencies:
       '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.56.2(react@19.1.2)
+      react-hook-form: 7.56.2(react@19.2.1)
 
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
@@ -12062,9 +12548,9 @@ snapshots:
       '@img/sharp-libvips-darwin-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-darwin-arm64@0.34.5':
+  '@img/sharp-darwin-arm64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-arm64': 1.2.3
     optional: true
 
   '@img/sharp-darwin-x64@0.34.1':
@@ -12072,66 +12558,63 @@ snapshots:
       '@img/sharp-libvips-darwin-x64': 1.1.0
     optional: true
 
-  '@img/sharp-darwin-x64@0.34.5':
+  '@img/sharp-darwin-x64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.3
     optional: true
 
   '@img/sharp-libvips-darwin-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.2.4':
+  '@img/sharp-libvips-darwin-arm64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-darwin-x64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.2.4':
+  '@img/sharp-libvips-darwin-x64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linux-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.2.4':
+  '@img/sharp-libvips-linux-arm64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linux-arm@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.2.4':
+  '@img/sharp-libvips-linux-arm@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linux-ppc64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.2.4':
-    optional: true
-
-  '@img/sharp-libvips-linux-riscv64@1.2.4':
+  '@img/sharp-libvips-linux-ppc64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linux-s390x@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.2.4':
+  '@img/sharp-libvips-linux-s390x@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linux-x64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.2.4':
+  '@img/sharp-libvips-linux-x64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.3':
     optional: true
 
   '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+  '@img/sharp-libvips-linuxmusl-x64@1.2.3':
     optional: true
 
   '@img/sharp-linux-arm64@0.34.1':
@@ -12139,9 +12622,9 @@ snapshots:
       '@img/sharp-libvips-linux-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-linux-arm64@0.34.5':
+  '@img/sharp-linux-arm64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.3
     optional: true
 
   '@img/sharp-linux-arm@0.34.1':
@@ -12149,19 +12632,14 @@ snapshots:
       '@img/sharp-libvips-linux-arm': 1.1.0
     optional: true
 
-  '@img/sharp-linux-arm@0.34.5':
+  '@img/sharp-linux-arm@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.3
     optional: true
 
-  '@img/sharp-linux-ppc64@0.34.5':
+  '@img/sharp-linux-ppc64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-    optional: true
-
-  '@img/sharp-linux-riscv64@0.34.5':
-    optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.3
     optional: true
 
   '@img/sharp-linux-s390x@0.34.1':
@@ -12169,9 +12647,9 @@ snapshots:
       '@img/sharp-libvips-linux-s390x': 1.1.0
     optional: true
 
-  '@img/sharp-linux-s390x@0.34.5':
+  '@img/sharp-linux-s390x@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.3
     optional: true
 
   '@img/sharp-linux-x64@0.34.1':
@@ -12179,9 +12657,9 @@ snapshots:
       '@img/sharp-libvips-linux-x64': 1.1.0
     optional: true
 
-  '@img/sharp-linux-x64@0.34.5':
+  '@img/sharp-linux-x64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.3
     optional: true
 
   '@img/sharp-linuxmusl-arm64@0.34.1':
@@ -12189,9 +12667,9 @@ snapshots:
       '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.34.5':
+  '@img/sharp-linuxmusl-arm64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
     optional: true
 
   '@img/sharp-linuxmusl-x64@0.34.1':
@@ -12199,34 +12677,34 @@ snapshots:
       '@img/sharp-libvips-linuxmusl-x64': 1.1.0
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.34.5':
+  '@img/sharp-linuxmusl-x64@0.34.4':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
     optional: true
 
   '@img/sharp-wasm32@0.34.1':
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/runtime': 1.6.0
     optional: true
 
-  '@img/sharp-wasm32@0.34.5':
+  '@img/sharp-wasm32@0.34.4':
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/runtime': 1.6.0
     optional: true
 
-  '@img/sharp-win32-arm64@0.34.5':
+  '@img/sharp-win32-arm64@0.34.4':
     optional: true
 
   '@img/sharp-win32-ia32@0.34.1':
     optional: true
 
-  '@img/sharp-win32-ia32@0.34.5':
+  '@img/sharp-win32-ia32@0.34.4':
     optional: true
 
   '@img/sharp-win32-x64@0.34.1':
     optional: true
 
-  '@img/sharp-win32-x64@0.34.5':
+  '@img/sharp-win32-x64@0.34.4':
     optional: true
 
   '@isaacs/balanced-match@4.0.1': {}
@@ -12246,12 +12724,21 @@ snapshots:
 
   '@istanbuljs/schema@0.1.3': {}
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.5.0(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      glob: 10.5.0
+      magic-string: 0.27.0
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       glob: 10.5.0
       magic-string: 0.30.21
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     optionalDependencies:
       typescript: 5.8.3
 
@@ -12313,7 +12800,7 @@ snapshots:
       lexical: 0.36.2
       prismjs: 1.30.0
 
-  '@lexical/devtools-core@0.36.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@lexical/devtools-core@0.36.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@lexical/html': 0.36.2
       '@lexical/link': 0.36.2
@@ -12321,8 +12808,8 @@ snapshots:
       '@lexical/table': 0.36.2
       '@lexical/utils': 0.36.2
       lexical: 0.36.2
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
   '@lexical/dragon@0.36.2':
     dependencies:
@@ -12397,10 +12884,10 @@ snapshots:
       '@lexical/utils': 0.36.2
       lexical: 0.36.2
 
-  '@lexical/react@0.36.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(yjs@13.6.27)':
+  '@lexical/react@0.36.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(yjs@13.6.27)':
     dependencies:
-      '@floating-ui/react': 0.27.16(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@lexical/devtools-core': 0.36.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      '@floating-ui/react': 0.27.16(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@lexical/devtools-core': 0.36.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@lexical/dragon': 0.36.2
       '@lexical/extension': 0.36.2
       '@lexical/hashtag': 0.36.2
@@ -12417,9 +12904,9 @@ snapshots:
       '@lexical/utils': 0.36.2
       '@lexical/yjs': 0.36.2(yjs@13.6.27)
       lexical: 0.36.2
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-error-boundary: 6.0.0(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-error-boundary: 6.0.0(react@19.2.1)
     transitivePeerDependencies:
       - yjs
 
@@ -12493,30 +12980,29 @@ snapshots:
       - encoding
       - utf-8-validate
 
-  '@mdx-js/react@3.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
       '@types/mdx': 2.0.13
-      '@types/react': 19.1.4
-      react: 19.1.2
+      '@types/react': 19.2.7
+      react: 19.2.1
 
-  '@microsoft/api-extractor-model@7.32.2(@types/node@22.15.18)':
+  '@microsoft/api-extractor-model@7.31.3(@types/node@22.15.18)':
     dependencies:
-      '@microsoft/tsdoc': 0.16.0
-      '@microsoft/tsdoc-config': 0.18.0
-      '@rushstack/node-core-library': 5.19.1(@types/node@22.15.18)
+      '@microsoft/tsdoc': 0.15.1
+      '@microsoft/tsdoc-config': 0.17.1
+      '@rushstack/node-core-library': 5.18.0(@types/node@22.15.18)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.55.2(@types/node@22.15.18)':
+  '@microsoft/api-extractor@7.53.3(@types/node@22.15.18)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.32.2(@types/node@22.15.18)
-      '@microsoft/tsdoc': 0.16.0
-      '@microsoft/tsdoc-config': 0.18.0
-      '@rushstack/node-core-library': 5.19.1(@types/node@22.15.18)
+      '@microsoft/api-extractor-model': 7.31.3(@types/node@22.15.18)
+      '@microsoft/tsdoc': 0.15.1
+      '@microsoft/tsdoc-config': 0.17.1
+      '@rushstack/node-core-library': 5.18.0(@types/node@22.15.18)
       '@rushstack/rig-package': 0.6.0
-      '@rushstack/terminal': 0.19.5(@types/node@22.15.18)
-      '@rushstack/ts-command-line': 5.1.5(@types/node@22.15.18)
-      diff: 8.0.2
+      '@rushstack/terminal': 0.19.3(@types/node@22.15.18)
+      '@rushstack/ts-command-line': 5.1.3(@types/node@22.15.18)
       lodash: 4.17.21
       minimatch: 10.0.3
       resolve: 1.22.11
@@ -12533,25 +13019,25 @@ snapshots:
       jju: 1.4.0
       resolve: 1.19.0
 
-  '@microsoft/tsdoc-config@0.18.0':
+  '@microsoft/tsdoc-config@0.17.1':
     dependencies:
-      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc': 0.15.1
       ajv: 8.12.0
       jju: 1.4.0
       resolve: 1.22.11
 
   '@microsoft/tsdoc@0.14.2': {}
 
-  '@microsoft/tsdoc@0.16.0': {}
+  '@microsoft/tsdoc@0.15.1': {}
 
-  '@mongodb-js/saslprep@1.4.0':
+  '@mongodb-js/saslprep@1.3.2':
     dependencies:
       sparse-bitfield: 3.0.3
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.7.1
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/core': 1.6.0
+      '@emnapi/runtime': 1.6.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -12645,17 +13131,17 @@ snapshots:
   '@opentelemetry/core@2.0.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/core@2.0.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/exporter-metrics-otlp-grpc@0.57.1(@opentelemetry/api@1.9.0)':
     dependencies:
@@ -12695,7 +13181,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12704,7 +13190,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@types/connect': 3.4.38
     transitivePeerDependencies:
       - supports-color
@@ -12721,7 +13207,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12752,7 +13238,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12761,7 +13247,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       forwarded-parse: 2.1.2
     transitivePeerDependencies:
       - supports-color
@@ -12771,7 +13257,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12779,7 +13265,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12787,7 +13273,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12796,7 +13282,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12811,7 +13297,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12820,7 +13306,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12828,7 +13314,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
@@ -12837,7 +13323,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@types/mysql': 2.15.27
     transitivePeerDependencies:
       - supports-color
@@ -12847,7 +13333,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.0)
       '@types/pg': 8.15.4
       '@types/pg-pool': 2.0.6
@@ -12859,7 +13345,7 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/redis-common': 0.38.2
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
@@ -12874,7 +13360,7 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@types/tedious': 4.0.14
     transitivePeerDependencies:
       - supports-color
@@ -12945,19 +13431,19 @@ snapshots:
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.0.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/resources@2.0.1(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/sdk-logs@0.203.0(@opentelemetry/api@1.9.0)':
     dependencies:
@@ -13003,13 +13489,13 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
   '@opentelemetry/semantic-conventions@1.28.0': {}
 
   '@opentelemetry/semantic-conventions@1.29.0': {}
 
-  '@opentelemetry/semantic-conventions@1.38.0': {}
+  '@opentelemetry/semantic-conventions@1.37.0': {}
 
   '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.0)':
     dependencies:
@@ -13054,18 +13540,18 @@ snapshots:
     dependencies:
       playwright: 1.56.1
 
-  '@preact/preset-vite@2.10.1(@babel/core@7.28.5)(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@preact/preset-vite@2.10.1(@babel/core@7.28.5)(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
       '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.5)
-      '@prefresh/vite': 2.4.11(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+      '@prefresh/vite': 2.4.11(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
       '@rollup/pluginutils': 4.2.1
       babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.28.5)
       debug: 4.4.3
       kolorist: 1.8.0
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
-      vite-prerender-plugin: 0.5.12(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+      vite-prerender-plugin: 0.5.12(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
     transitivePeerDependencies:
       - preact
       - supports-color
@@ -13074,21 +13560,21 @@ snapshots:
 
   '@prefresh/babel-plugin@0.5.2': {}
 
-  '@prefresh/core@1.5.9(preact@10.26.6)':
+  '@prefresh/core@1.5.8(preact@10.26.6)':
     dependencies:
       preact: 10.26.6
 
   '@prefresh/utils@1.2.1': {}
 
-  '@prefresh/vite@2.4.11(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@prefresh/vite@2.4.11(preact@10.26.6)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@prefresh/babel-plugin': 0.5.2
-      '@prefresh/core': 1.5.9(preact@10.26.6)
+      '@prefresh/core': 1.5.8(preact@10.26.6)
       '@prefresh/utils': 1.2.1
       '@rollup/pluginutils': 4.2.1
       preact: 10.26.6
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -13108,9 +13594,9 @@ snapshots:
 
   '@prisma/debug@6.14.0': {}
 
-  '@prisma/debug@6.19.1': {}
+  '@prisma/debug@6.18.0': {}
 
-  '@prisma/dmmf@6.19.1': {}
+  '@prisma/dmmf@6.18.0': {}
 
   '@prisma/engines-version@6.14.0-25.717184b7b35ea05dfa71a3236b7af656013e1e49': {}
 
@@ -13127,13 +13613,13 @@ snapshots:
       '@prisma/engines-version': 6.14.0-25.717184b7b35ea05dfa71a3236b7af656013e1e49
       '@prisma/get-platform': 6.14.0
 
-  '@prisma/generator-helper@6.19.1':
+  '@prisma/generator-helper@6.18.0':
     dependencies:
-      '@prisma/debug': 6.19.1
-      '@prisma/dmmf': 6.19.1
-      '@prisma/generator': 6.19.1
+      '@prisma/debug': 6.18.0
+      '@prisma/dmmf': 6.18.0
+      '@prisma/generator': 6.18.0
 
-  '@prisma/generator@6.19.1': {}
+  '@prisma/generator@6.18.0': {}
 
   '@prisma/get-platform@6.14.0':
     dependencies:
@@ -13173,641 +13659,972 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
-  '@radix-ui/react-accordion@1.2.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-accordion@1.2.10(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collapsible': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-collapsible': 1.1.10(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-arrow@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-arrow@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-checkbox@1.3.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-arrow@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-checkbox@1.3.1(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-collapsible@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-checkbox@1.3.1(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-collection@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.4)(react@19.1.2)':
-    dependencies:
-      react: 19.1.2
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-context@1.1.2(@types/react@19.1.4)(react@19.1.2)':
-    dependencies:
-      react: 19.1.2
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-dialog@1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-collapsible@1.1.10(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-collection@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-collection@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-dialog@1.1.13(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
       aria-hidden: 1.2.6
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-remove-scroll: 2.7.2(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-dropdown-menu@2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-dismissable-layer@1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-menu': 2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.4)(react@19.1.2)':
-    dependencies:
-      react: 19.1.2
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-focus-scope@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-id@1.1.1(@types/react@19.1.4)(react@19.1.2)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-    optionalDependencies:
-      '@types/react': 19.1.4
-
-  '@radix-ui/react-label@2.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-    optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
-
-  '@radix-ui/react-menu@2.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-dropdown-menu@2.1.14(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-menu': 2.1.14(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-dropdown-menu@2.1.14(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-menu': 2.1.14(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-focus-scope@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-focus-scope@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-label@2.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-menu@2.1.14(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
       aria-hidden: 1.2.6
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-remove-scroll: 2.7.2(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.1)(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-popover@1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-menu@2.1.14(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
       aria-hidden: 1.2.6
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-remove-scroll: 2.7.2(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-popper@1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-popover@1.1.13(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-arrow': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.2)
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      aria-hidden: 1.2.6
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.1)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-popover@1.1.13(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      aria-hidden: 1.2.6
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-popper@1.2.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-arrow': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.1)(react@19.2.1)
       '@radix-ui/rect': 1.1.1
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-portal@1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-popper@1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-arrow': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-portal@1.1.8(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-primitive@2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-portal@1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-radio-group@1.3.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-primitive@2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-radio-group@1.3.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
 
-  '@radix-ui/react-roving-focus@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-radio-group@1.3.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-select@2.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-roving-focus@1.1.9(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.1))(@types/react@19.2.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+      '@types/react-dom': 19.2.1(@types/react@19.2.1)
+
+  '@radix-ui/react-roving-focus@1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
+
+  '@radix-ui/react-select@2.2.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       aria-hidden: 1.2.6
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-remove-scroll: 2.7.2(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-separator@1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-separator@1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-slider@1.3.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-slider@1.3.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-collection': 1.1.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-slot@1.2.2(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-slot@1.2.2(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-slot@1.2.2(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-switch@1.2.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-switch@1.2.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-tabs@1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-tabs@1.1.11(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-toggle-group@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-toggle-group@1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-toggle': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-roving-focus': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-toggle': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-toggle@1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-toggle@1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-tooltip@1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-tooltip@1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-slot': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.9(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.6(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.8(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-visually-hidden': 1.2.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.1)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.1)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 19.1.2
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.4)(react@19.1.2)':
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      react: 19.1.2
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  '@radix-ui/react-visually-hidden@1.2.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.1)(react@19.2.1)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.1)(react@19.2.1)
+      react: 19.2.1
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.1
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      react: 19.2.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  '@radix-ui/react-visually-hidden@1.2.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.2(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@react-email/body@0.0.11(react@19.1.2)':
+  '@react-email/body@0.0.11(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/button@0.0.19(react@19.1.2)':
+  '@react-email/button@0.0.19(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/code-block@0.0.13(react@19.1.2)':
+  '@react-email/code-block@0.0.13(react@19.2.1)':
     dependencies:
       prismjs: 1.30.0
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/code-inline@0.0.5(react@19.1.2)':
+  '@react-email/code-inline@0.0.5(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/column@0.0.13(react@19.1.2)':
+  '@react-email/column@0.0.13(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/components@0.0.38(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@react-email/components@0.0.38(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@react-email/body': 0.0.11(react@19.1.2)
-      '@react-email/button': 0.0.19(react@19.1.2)
-      '@react-email/code-block': 0.0.13(react@19.1.2)
-      '@react-email/code-inline': 0.0.5(react@19.1.2)
-      '@react-email/column': 0.0.13(react@19.1.2)
-      '@react-email/container': 0.0.15(react@19.1.2)
-      '@react-email/font': 0.0.9(react@19.1.2)
-      '@react-email/head': 0.0.12(react@19.1.2)
-      '@react-email/heading': 0.0.15(react@19.1.2)
-      '@react-email/hr': 0.0.11(react@19.1.2)
-      '@react-email/html': 0.0.11(react@19.1.2)
-      '@react-email/img': 0.0.11(react@19.1.2)
-      '@react-email/link': 0.0.12(react@19.1.2)
-      '@react-email/markdown': 0.0.15(react@19.1.2)
-      '@react-email/preview': 0.0.12(react@19.1.2)
-      '@react-email/render': 1.1.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@react-email/row': 0.0.12(react@19.1.2)
-      '@react-email/section': 0.0.16(react@19.1.2)
-      '@react-email/tailwind': 1.0.5(react@19.1.2)
-      '@react-email/text': 0.1.3(react@19.1.2)
-      react: 19.1.2
+      '@react-email/body': 0.0.11(react@19.2.1)
+      '@react-email/button': 0.0.19(react@19.2.1)
+      '@react-email/code-block': 0.0.13(react@19.2.1)
+      '@react-email/code-inline': 0.0.5(react@19.2.1)
+      '@react-email/column': 0.0.13(react@19.2.1)
+      '@react-email/container': 0.0.15(react@19.2.1)
+      '@react-email/font': 0.0.9(react@19.2.1)
+      '@react-email/head': 0.0.12(react@19.2.1)
+      '@react-email/heading': 0.0.15(react@19.2.1)
+      '@react-email/hr': 0.0.11(react@19.2.1)
+      '@react-email/html': 0.0.11(react@19.2.1)
+      '@react-email/img': 0.0.11(react@19.2.1)
+      '@react-email/link': 0.0.12(react@19.2.1)
+      '@react-email/markdown': 0.0.15(react@19.2.1)
+      '@react-email/preview': 0.0.12(react@19.2.1)
+      '@react-email/render': 1.1.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@react-email/row': 0.0.12(react@19.2.1)
+      '@react-email/section': 0.0.16(react@19.2.1)
+      '@react-email/tailwind': 1.0.5(react@19.2.1)
+      '@react-email/text': 0.1.3(react@19.2.1)
+      react: 19.2.1
     transitivePeerDependencies:
       - react-dom
 
-  '@react-email/container@0.0.15(react@19.1.2)':
+  '@react-email/container@0.0.15(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/font@0.0.9(react@19.1.2)':
+  '@react-email/font@0.0.9(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/head@0.0.12(react@19.1.2)':
+  '@react-email/head@0.0.12(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/heading@0.0.15(react@19.1.2)':
+  '@react-email/heading@0.0.15(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/hr@0.0.11(react@19.1.2)':
+  '@react-email/hr@0.0.11(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/html@0.0.11(react@19.1.2)':
+  '@react-email/html@0.0.11(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/img@0.0.11(react@19.1.2)':
+  '@react-email/img@0.0.11(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/link@0.0.12(react@19.1.2)':
+  '@react-email/link@0.0.12(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/markdown@0.0.15(react@19.1.2)':
+  '@react-email/markdown@0.0.15(react@19.2.1)':
     dependencies:
-      md-to-react-email: 5.0.5(react@19.1.2)
-      react: 19.1.2
+      md-to-react-email: 5.0.5(react@19.2.1)
+      react: 19.2.1
 
-  '@react-email/preview@0.0.12(react@19.1.2)':
+  '@react-email/preview@0.0.12(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/render@1.1.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@react-email/render@1.1.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       html-to-text: 9.0.5
       prettier: 3.5.3
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       react-promise-suspense: 0.3.4
 
-  '@react-email/row@0.0.12(react@19.1.2)':
+  '@react-email/row@0.0.12(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/section@0.0.16(react@19.1.2)':
+  '@react-email/section@0.0.16(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/tailwind@1.0.5(react@19.1.2)':
+  '@react-email/tailwind@1.0.5(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@react-email/text@0.1.3(react@19.1.2)':
+  '@react-email/text@0.1.3(react@19.2.1)':
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
   '@redis/bloom@1.2.0(@redis/client@1.6.0)':
     dependencies:
@@ -13857,9 +14674,11 @@ snapshots:
 
   '@resvg/resvg-wasm@2.4.0': {}
 
-  '@rollup/plugin-commonjs@28.0.1(rollup@4.53.3)':
+  '@rolldown/pluginutils@1.0.0-beta.47': {}
+
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.52.5)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -13867,92 +14686,92 @@ snapshots:
       magic-string: 0.30.21
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.53.3
+      rollup: 4.52.5
 
   '@rollup/pluginutils@4.2.1':
     dependencies:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  '@rollup/pluginutils@5.3.0(rollup@4.53.3)':
+  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.53.3
+      rollup: 4.52.5
 
-  '@rollup/rollup-android-arm-eabi@4.53.3':
+  '@rollup/rollup-android-arm-eabi@4.52.5':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.53.3':
+  '@rollup/rollup-android-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.53.3':
+  '@rollup/rollup-darwin-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.53.3':
+  '@rollup/rollup-darwin-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.53.3':
+  '@rollup/rollup-freebsd-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.53.3':
+  '@rollup/rollup-freebsd-x64@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.53.3':
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.53.3':
+  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.53.3':
+  '@rollup/rollup-linux-arm64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.53.3':
+  '@rollup/rollup-linux-arm64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.53.3':
+  '@rollup/rollup-linux-loong64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.53.3':
+  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.53.3':
+  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.53.3':
+  '@rollup/rollup-linux-riscv64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.53.3':
+  '@rollup/rollup-linux-s390x-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.53.3':
+  '@rollup/rollup-linux-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.53.3':
+  '@rollup/rollup-linux-x64-musl@4.52.5':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.53.3':
+  '@rollup/rollup-openharmony-arm64@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.53.3':
+  '@rollup/rollup-win32-arm64-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.53.3':
+  '@rollup/rollup-win32-ia32-msvc@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.53.3':
+  '@rollup/rollup-win32-x64-gnu@4.52.5':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.53.3':
+  '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/eslint-patch@1.15.0': {}
+  '@rushstack/eslint-patch@1.14.1': {}
 
-  '@rushstack/node-core-library@5.19.1(@types/node@22.15.18)':
+  '@rushstack/node-core-library@5.18.0(@types/node@22.15.18)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -13974,17 +14793,17 @@ snapshots:
       resolve: 1.22.11
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.19.5(@types/node@22.15.18)':
+  '@rushstack/terminal@0.19.3(@types/node@22.15.18)':
     dependencies:
-      '@rushstack/node-core-library': 5.19.1(@types/node@22.15.18)
+      '@rushstack/node-core-library': 5.18.0(@types/node@22.15.18)
       '@rushstack/problem-matcher': 0.1.1(@types/node@22.15.18)
       supports-color: 8.1.1
     optionalDependencies:
       '@types/node': 22.15.18
 
-  '@rushstack/ts-command-line@5.1.5(@types/node@22.15.18)':
+  '@rushstack/ts-command-line@5.1.3(@types/node@22.15.18)':
     dependencies:
-      '@rushstack/terminal': 0.19.5(@types/node@22.15.18)
+      '@rushstack/terminal': 0.19.3(@types/node@22.15.18)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -14014,7 +14833,7 @@ snapshots:
       '@sentry-internal/browser-utils': 10.5.0
       '@sentry/core': 10.5.0
 
-  '@sentry/babel-plugin-component-annotate@4.6.1': {}
+  '@sentry/babel-plugin-component-annotate@4.6.0': {}
 
   '@sentry/browser@10.5.0':
     dependencies:
@@ -14024,45 +14843,45 @@ snapshots:
       '@sentry-internal/replay-canvas': 10.5.0
       '@sentry/core': 10.5.0
 
-  '@sentry/bundler-plugin-core@4.6.1(encoding@0.1.13)':
+  '@sentry/bundler-plugin-core@4.6.0(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.28.5
-      '@sentry/babel-plugin-component-annotate': 4.6.1
-      '@sentry/cli': 2.58.4(encoding@0.1.13)
+      '@sentry/babel-plugin-component-annotate': 4.6.0
+      '@sentry/cli': 2.57.0(encoding@0.1.13)
       dotenv: 16.5.0
       find-up: 5.0.0
-      glob: 10.5.0
+      glob: 9.3.5
       magic-string: 0.30.8
       unplugin: 1.0.1
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.58.4':
+  '@sentry/cli-darwin@2.57.0':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.58.4':
+  '@sentry/cli-linux-arm64@2.57.0':
     optional: true
 
-  '@sentry/cli-linux-arm@2.58.4':
+  '@sentry/cli-linux-arm@2.57.0':
     optional: true
 
-  '@sentry/cli-linux-i686@2.58.4':
+  '@sentry/cli-linux-i686@2.57.0':
     optional: true
 
-  '@sentry/cli-linux-x64@2.58.4':
+  '@sentry/cli-linux-x64@2.57.0':
     optional: true
 
-  '@sentry/cli-win32-arm64@2.58.4':
+  '@sentry/cli-win32-arm64@2.57.0':
     optional: true
 
-  '@sentry/cli-win32-i686@2.58.4':
+  '@sentry/cli-win32-i686@2.57.0':
     optional: true
 
-  '@sentry/cli-win32-x64@2.58.4':
+  '@sentry/cli-win32-x64@2.57.0':
     optional: true
 
-  '@sentry/cli@2.58.4(encoding@0.1.13)':
+  '@sentry/cli@2.57.0(encoding@0.1.13)':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0(encoding@0.1.13)
@@ -14070,36 +14889,36 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.58.4
-      '@sentry/cli-linux-arm': 2.58.4
-      '@sentry/cli-linux-arm64': 2.58.4
-      '@sentry/cli-linux-i686': 2.58.4
-      '@sentry/cli-linux-x64': 2.58.4
-      '@sentry/cli-win32-arm64': 2.58.4
-      '@sentry/cli-win32-i686': 2.58.4
-      '@sentry/cli-win32-x64': 2.58.4
+      '@sentry/cli-darwin': 2.57.0
+      '@sentry/cli-linux-arm': 2.57.0
+      '@sentry/cli-linux-arm64': 2.57.0
+      '@sentry/cli-linux-i686': 2.57.0
+      '@sentry/cli-linux-x64': 2.57.0
+      '@sentry/cli-win32-arm64': 2.57.0
+      '@sentry/cli-win32-i686': 2.57.0
+      '@sentry/cli-win32-x64': 2.57.0
     transitivePeerDependencies:
       - encoding
       - supports-color
 
   '@sentry/core@10.5.0': {}
 
-  '@sentry/nextjs@10.5.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react@19.1.2)(webpack@5.99.8(esbuild@0.25.10))':
+  '@sentry/nextjs@10.5.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)(webpack@5.99.8(esbuild@0.25.10))':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@rollup/plugin-commonjs': 28.0.1(rollup@4.53.3)
+      '@opentelemetry/semantic-conventions': 1.37.0
+      '@rollup/plugin-commonjs': 28.0.1(rollup@4.52.5)
       '@sentry-internal/browser-utils': 10.5.0
       '@sentry/core': 10.5.0
       '@sentry/node': 10.5.0
-      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      '@sentry/react': 10.5.0(react@19.1.2)
+      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
+      '@sentry/react': 10.5.0(react@19.2.1)
       '@sentry/vercel-edge': 10.5.0
-      '@sentry/webpack-plugin': 4.6.1(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.10))
+      '@sentry/webpack-plugin': 4.6.0(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.10))
       chalk: 3.0.0
-      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       resolve: 1.22.8
-      rollup: 4.53.3
+      rollup: 4.52.5
       stacktrace-parser: 0.1.11
     transitivePeerDependencies:
       - '@opentelemetry/context-async-hooks'
@@ -14110,7 +14929,7 @@ snapshots:
       - supports-color
       - webpack
 
-  '@sentry/node-core@10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
+  '@sentry/node-core@10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/context-async-hooks': 2.2.0(@opentelemetry/api@1.9.0)
@@ -14118,9 +14937,9 @@ snapshots:
       '@opentelemetry/instrumentation': 0.203.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@sentry/core': 10.5.0
-      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
+      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
       import-in-the-middle: 1.15.0
 
   '@sentry/node@10.5.0':
@@ -14153,31 +14972,31 @@ snapshots:
       '@opentelemetry/instrumentation-undici': 0.14.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@prisma/instrumentation': 6.13.0(@opentelemetry/api@1.9.0)
       '@sentry/core': 10.5.0
-      '@sentry/node-core': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
+      '@sentry/node-core': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
+      '@sentry/opentelemetry': 10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)
       import-in-the-middle: 1.15.0
       minimatch: 9.0.5
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/opentelemetry@10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)':
+  '@sentry/opentelemetry@10.5.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.37.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/context-async-hooks': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
       '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
       '@sentry/core': 10.5.0
 
-  '@sentry/react@10.5.0(react@19.1.2)':
+  '@sentry/react@10.5.0(react@19.2.1)':
     dependencies:
       '@sentry/browser': 10.5.0
       '@sentry/core': 10.5.0
       hoist-non-react-statics: 3.3.2
-      react: 19.1.2
+      react: 19.2.1
 
   '@sentry/vercel-edge@10.5.0':
     dependencies:
@@ -14185,9 +15004,9 @@ snapshots:
       '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.0)
       '@sentry/core': 10.5.0
 
-  '@sentry/webpack-plugin@4.6.1(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.10))':
+  '@sentry/webpack-plugin@4.6.0(encoding@0.1.13)(webpack@5.99.8(esbuild@0.25.10))':
     dependencies:
-      '@sentry/bundler-plugin-core': 4.6.1(encoding@0.1.13)
+      '@sentry/bundler-plugin-core': 4.6.0(encoding@0.1.13)
       unplugin: 1.0.1
       uuid: 9.0.1
       webpack: 5.99.8(esbuild@0.25.10)
@@ -14200,9 +15019,9 @@ snapshots:
       fflate: 0.7.4
       string.prototype.codepointat: 0.2.1
 
-  '@smithy/abort-controller@4.2.5':
+  '@smithy/abort-controller@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@smithy/chunked-blob-reader-native@4.2.1':
@@ -14214,97 +15033,97 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/config-resolver@4.4.3':
+  '@smithy/config-resolver@4.4.0':
     dependencies:
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-config-provider': 4.2.0
-      '@smithy/util-endpoints': 3.2.5
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-endpoints': 3.2.3
+      '@smithy/util-middleware': 4.2.3
       tslib: 2.8.1
 
-  '@smithy/core@3.18.7':
+  '@smithy/core@3.17.1':
     dependencies:
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-base64': 4.3.0
       '@smithy/util-body-length-browser': 4.2.0
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-stream': 4.5.6
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-stream': 4.5.4
       '@smithy/util-utf8': 4.2.0
       '@smithy/uuid': 1.1.0
       tslib: 2.8.1
 
-  '@smithy/credential-provider-imds@4.2.5':
+  '@smithy/credential-provider-imds@4.2.3':
     dependencies:
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
       tslib: 2.8.1
 
-  '@smithy/eventstream-codec@4.2.5':
+  '@smithy/eventstream-codec@4.2.3':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       '@smithy/util-hex-encoding': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-browser@4.2.5':
+  '@smithy/eventstream-serde-browser@4.2.3':
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/eventstream-serde-universal': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-config-resolver@4.3.5':
+  '@smithy/eventstream-serde-config-resolver@4.3.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-node@4.2.5':
+  '@smithy/eventstream-serde-node@4.2.3':
     dependencies:
-      '@smithy/eventstream-serde-universal': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/eventstream-serde-universal': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/eventstream-serde-universal@4.2.5':
+  '@smithy/eventstream-serde-universal@4.2.3':
     dependencies:
-      '@smithy/eventstream-codec': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/eventstream-codec': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/fetch-http-handler@5.3.6':
+  '@smithy/fetch-http-handler@5.3.4':
     dependencies:
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/querystring-builder': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/querystring-builder': 4.2.3
+      '@smithy/types': 4.8.0
       '@smithy/util-base64': 4.3.0
       tslib: 2.8.1
 
-  '@smithy/hash-blob-browser@4.2.6':
+  '@smithy/hash-blob-browser@4.2.4':
     dependencies:
       '@smithy/chunked-blob-reader': 5.2.0
       '@smithy/chunked-blob-reader-native': 4.2.1
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/hash-node@4.2.5':
+  '@smithy/hash-node@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       '@smithy/util-buffer-from': 4.2.0
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/hash-stream-node@4.2.5':
+  '@smithy/hash-stream-node@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/invalid-dependency@4.2.5':
+  '@smithy/invalid-dependency@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@smithy/is-array-buffer@2.2.0':
@@ -14315,126 +15134,126 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/md5-js@4.2.5':
+  '@smithy/md5-js@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/middleware-content-length@4.2.5':
+  '@smithy/middleware-content-length@4.2.3':
     dependencies:
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/middleware-endpoint@4.3.14':
+  '@smithy/middleware-endpoint@4.3.5':
     dependencies:
-      '@smithy/core': 3.18.7
-      '@smithy/middleware-serde': 4.2.6
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
-      '@smithy/url-parser': 4.2.5
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/core': 3.17.1
+      '@smithy/middleware-serde': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
+      '@smithy/url-parser': 4.2.3
+      '@smithy/util-middleware': 4.2.3
       tslib: 2.8.1
 
-  '@smithy/middleware-retry@4.4.14':
+  '@smithy/middleware-retry@4.4.5':
     dependencies:
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/service-error-classification': 4.2.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
-      '@smithy/util-middleware': 4.2.5
-      '@smithy/util-retry': 4.2.5
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/service-error-classification': 4.2.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
+      '@smithy/util-middleware': 4.2.3
+      '@smithy/util-retry': 4.2.3
       '@smithy/uuid': 1.1.0
       tslib: 2.8.1
 
-  '@smithy/middleware-serde@4.2.6':
+  '@smithy/middleware-serde@4.2.3':
     dependencies:
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/middleware-stack@4.2.5':
+  '@smithy/middleware-stack@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/node-config-provider@4.3.5':
+  '@smithy/node-config-provider@4.3.3':
     dependencies:
-      '@smithy/property-provider': 4.2.5
-      '@smithy/shared-ini-file-loader': 4.4.0
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/shared-ini-file-loader': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/node-http-handler@4.4.5':
+  '@smithy/node-http-handler@4.4.3':
     dependencies:
-      '@smithy/abort-controller': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/querystring-builder': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/abort-controller': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/querystring-builder': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/property-provider@4.2.5':
+  '@smithy/property-provider@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/protocol-http@5.3.5':
+  '@smithy/protocol-http@5.3.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/querystring-builder@4.2.5':
+  '@smithy/querystring-builder@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       '@smithy/util-uri-escape': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/querystring-parser@4.2.5':
+  '@smithy/querystring-parser@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/service-error-classification@4.2.5':
+  '@smithy/service-error-classification@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
 
-  '@smithy/shared-ini-file-loader@4.4.0':
+  '@smithy/shared-ini-file-loader@4.3.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/signature-v4@5.3.5':
+  '@smithy/signature-v4@5.3.3':
     dependencies:
       '@smithy/is-array-buffer': 4.2.0
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
       '@smithy/util-hex-encoding': 4.2.0
-      '@smithy/util-middleware': 4.2.5
+      '@smithy/util-middleware': 4.2.3
       '@smithy/util-uri-escape': 4.2.0
       '@smithy/util-utf8': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/smithy-client@4.9.10':
+  '@smithy/smithy-client@4.9.1':
     dependencies:
-      '@smithy/core': 3.18.7
-      '@smithy/middleware-endpoint': 4.3.14
-      '@smithy/middleware-stack': 4.2.5
-      '@smithy/protocol-http': 5.3.5
-      '@smithy/types': 4.9.0
-      '@smithy/util-stream': 4.5.6
+      '@smithy/core': 3.17.1
+      '@smithy/middleware-endpoint': 4.3.5
+      '@smithy/middleware-stack': 4.2.3
+      '@smithy/protocol-http': 5.3.3
+      '@smithy/types': 4.8.0
+      '@smithy/util-stream': 4.5.4
       tslib: 2.8.1
 
-  '@smithy/types@4.9.0':
+  '@smithy/types@4.8.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/url-parser@4.2.5':
+  '@smithy/url-parser@4.2.3':
     dependencies:
-      '@smithy/querystring-parser': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/querystring-parser': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@smithy/util-base64@4.3.0':
@@ -14465,49 +15284,49 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-defaults-mode-browser@4.3.13':
+  '@smithy/util-defaults-mode-browser@4.3.4':
     dependencies:
-      '@smithy/property-provider': 4.2.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/property-provider': 4.2.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/util-defaults-mode-node@4.2.16':
+  '@smithy/util-defaults-mode-node@4.2.6':
     dependencies:
-      '@smithy/config-resolver': 4.4.3
-      '@smithy/credential-provider-imds': 4.2.5
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/property-provider': 4.2.5
-      '@smithy/smithy-client': 4.9.10
-      '@smithy/types': 4.9.0
+      '@smithy/config-resolver': 4.4.0
+      '@smithy/credential-provider-imds': 4.2.3
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/property-provider': 4.2.3
+      '@smithy/smithy-client': 4.9.1
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/util-endpoints@3.2.5':
+  '@smithy/util-endpoints@3.2.3':
     dependencies:
-      '@smithy/node-config-provider': 4.3.5
-      '@smithy/types': 4.9.0
+      '@smithy/node-config-provider': 4.3.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@smithy/util-hex-encoding@4.2.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-middleware@4.2.5':
+  '@smithy/util-middleware@4.2.3':
     dependencies:
-      '@smithy/types': 4.9.0
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/util-retry@4.2.5':
+  '@smithy/util-retry@4.2.3':
     dependencies:
-      '@smithy/service-error-classification': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/service-error-classification': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
-  '@smithy/util-stream@4.5.6':
+  '@smithy/util-stream@4.5.4':
     dependencies:
-      '@smithy/fetch-http-handler': 5.3.6
-      '@smithy/node-http-handler': 4.4.5
-      '@smithy/types': 4.9.0
+      '@smithy/fetch-http-handler': 5.3.4
+      '@smithy/node-http-handler': 4.4.3
+      '@smithy/types': 4.8.0
       '@smithy/util-base64': 4.3.0
       '@smithy/util-buffer-from': 4.2.0
       '@smithy/util-hex-encoding': 4.2.0
@@ -14528,10 +15347,10 @@ snapshots:
       '@smithy/util-buffer-from': 4.2.0
       tslib: 2.8.1
 
-  '@smithy/util-waiter@4.2.5':
+  '@smithy/util-waiter@4.2.3':
     dependencies:
-      '@smithy/abort-controller': 4.2.5
-      '@smithy/types': 4.9.0
+      '@smithy/abort-controller': 4.2.3
+      '@smithy/types': 4.8.0
       tslib: 2.8.1
 
   '@smithy/uuid@1.1.0':
@@ -14544,107 +15363,191 @@ snapshots:
 
   '@standard-schema/utils@0.3.0': {}
 
-  '@storybook/addon-a11y@9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/addon-a11y@10.0.8(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
       axe-core: 4.11.0
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
 
-  '@storybook/addon-docs@9.0.15(@types/react@19.1.4)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/addon-docs@10.0.8(@types/react@19.2.7)(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))':
     dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@storybook/csf-plugin': 9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
-      '@storybook/icons': 1.6.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@storybook/react-dom-shim': 9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@storybook/csf-plugin': 10.0.8(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))
+      '@storybook/icons': 1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@storybook/react-dom-shim': 10.0.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
 
-  '@storybook/addon-links@9.0.15(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/addon-links@10.0.8(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
     optionalDependencies:
-      react: 19.1.2
+      react: 19.2.1
 
-  '@storybook/addon-onboarding@9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/addon-onboarding@10.0.8(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
 
-  '@storybook/builder-vite@9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@storybook/builder-vite@10.0.8(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))':
     dependencies:
-      '@storybook/csf-plugin': 9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      '@storybook/csf-plugin': 10.0.8(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       ts-dedent: 2.2.0
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
 
-  '@storybook/csf-plugin@9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/builder-vite@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      '@storybook/csf-plugin': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      browser-assert: 1.2.1
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      ts-dedent: 2.2.0
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@storybook/components@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
+    dependencies:
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+
+  '@storybook/csf-plugin@10.0.8(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))':
+    dependencies:
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.27.0
+      rollup: 4.52.5
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+      webpack: 5.99.8(esbuild@0.27.0)
+
+  '@storybook/csf-plugin@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
+    dependencies:
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@1.6.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@storybook/icons@1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
-  '@storybook/react-dom-shim@9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))':
+  '@storybook/manager-api@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
 
-  '@storybook/react-vite@9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(rollup@4.53.3)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@storybook/preview-api@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
-      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
-      '@storybook/builder-vite': 9.0.15(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
-      '@storybook/react': 9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3)
-      find-up: 7.0.0
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+
+  '@storybook/react-dom-shim@10.0.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
+    dependencies:
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+
+  '@storybook/react-dom-shim@8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
+    dependencies:
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+
+  '@storybook/react-vite@10.0.8(esbuild@0.27.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@storybook/builder-vite': 10.0.8(esbuild@0.27.0)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))(webpack@5.99.8(esbuild@0.27.0))
+      '@storybook/react': 10.0.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)
+      empathic: 2.0.0
       magic-string: 0.30.21
-      react: 19.1.2
+      react: 19.2.1
       react-docgen: 8.0.2
-      react-dom: 19.1.2(react@19.1.2)
+      react-dom: 19.2.1(react@19.2.1)
       resolve: 1.22.11
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       tsconfig-paths: 4.2.0
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - supports-color
+      - typescript
+      - webpack
+
+  '@storybook/react-vite@8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(rollup@4.52.5)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.5.0(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@storybook/builder-vite': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@storybook/react': 8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)
+      find-up: 5.0.0
+      magic-string: 0.30.21
+      react: 19.2.1
+      react-docgen: 7.1.1
+      react-dom: 19.2.1(react@19.2.1)
+      resolve: 1.22.11
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      tsconfig-paths: 4.2.0
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react@9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3)':
+  '@storybook/react@10.0.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.0.15(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      '@storybook/react-dom-shim': 10.0.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
     optionalDependencies:
       typescript: 5.8.3
 
+  '@storybook/react@8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3)':
+    dependencies:
+      '@storybook/components': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      '@storybook/global': 5.0.0
+      '@storybook/manager-api': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      '@storybook/preview-api': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      '@storybook/react-dom-shim': 8.5.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      '@storybook/theming': 8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@storybook/theming@8.5.4(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))':
+    dependencies:
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+
   '@streamparser/json@0.0.20': {}
 
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
 
-  '@t3-oss/env-core@0.13.4(arktype@2.1.29)(typescript@5.8.3)(zod@3.24.4)':
+  '@t3-oss/env-core@0.13.4(arktype@2.1.25)(typescript@5.8.3)(zod@3.24.4)':
     dependencies:
-      arktype: 2.1.29
+      arktype: 2.1.25
     optionalDependencies:
       typescript: 5.8.3
       zod: 3.24.4
 
-  '@t3-oss/env-nextjs@0.13.4(arktype@2.1.29)(typescript@5.8.3)(zod@3.24.4)':
+  '@t3-oss/env-nextjs@0.13.4(arktype@2.1.25)(typescript@5.8.3)(zod@3.24.4)':
     dependencies:
-      '@t3-oss/env-core': 0.13.4(arktype@2.1.29)(typescript@5.8.3)(zod@3.24.4)
+      '@t3-oss/env-core': 0.13.4(arktype@2.1.25)(typescript@5.8.3)(zod@3.24.4)
     optionalDependencies:
       typescript: 5.8.3
       zod: 3.24.4
@@ -14656,6 +15559,84 @@ snapshots:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
 
+  '@tailwindcss/node@4.1.17':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.0.0':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      lightningcss: 1.30.2
+      postcss: 8.5.3
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.3
+      tailwindcss: 4.1.17
+
   '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)))':
     dependencies:
       lodash.castarray: 4.4.0
@@ -14664,11 +15645,25 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3))
 
-  '@tanstack/react-table@8.21.3(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@tailwindcss/vite@4.1.17(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      tailwindcss: 4.1.17
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@tailwindcss/vite@4.1.17(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      tailwindcss: 4.1.17
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@tanstack/react-table@8.21.3(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@tanstack/table-core': 8.21.3
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
   '@tanstack/table-core@8.21.3': {}
 
@@ -14700,15 +15695,15 @@ snapshots:
       '@testing-library/dom': 8.20.1
       preact: 10.26.6
 
-  '@testing-library/react@16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@testing-library/react@16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@testing-library/dom': 8.20.1
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
-      '@types/react': 19.1.4
-      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.1(@types/react@19.2.7)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@8.20.1)':
     dependencies:
@@ -14729,7 +15724,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tsconfig/node10@1.0.12': {}
+  '@tsconfig/node10@1.0.11': {}
 
   '@tsconfig/node12@1.0.11': {}
 
@@ -14831,7 +15826,7 @@ snapshots:
   '@types/node-fetch@2.6.13':
     dependencies:
       '@types/node': 22.15.18
-      form-data: 4.0.5
+      form-data: 4.0.4
 
   '@types/node@22.15.18':
     dependencies:
@@ -14839,7 +15834,7 @@ snapshots:
 
   '@types/nodemailer@7.0.2':
     dependencies:
-      '@aws-sdk/client-sesv2': 3.950.0
+      '@aws-sdk/client-sesv2': 3.920.0
       '@types/node': 22.15.18
     transitivePeerDependencies:
       - aws-crt
@@ -14868,11 +15863,28 @@ snapshots:
     dependencies:
       '@types/react': 19.1.4
 
+  '@types/react-dom@19.2.1(@types/react@19.2.1)':
+    dependencies:
+      '@types/react': 19.2.1
+
+  '@types/react-dom@19.2.1(@types/react@19.2.7)':
+    dependencies:
+      '@types/react': 19.2.7
+    optional: true
+
   '@types/react@19.1.4':
     dependencies:
       csstype: 3.2.3
 
-  '@types/readable-stream@4.0.23':
+  '@types/react@19.2.1':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/react@19.2.7':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/readable-stream@4.0.22':
     dependencies:
       '@types/node': 22.15.18
 
@@ -14886,9 +15898,9 @@ snapshots:
     dependencies:
       '@types/node': 22.15.18
 
-  '@types/testing-library__react@10.2.0(@testing-library/dom@8.20.1)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)':
+  '@types/testing-library__react@10.2.0(@testing-library/dom@8.20.1)(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
     dependencies:
-      '@testing-library/react': 16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      '@testing-library/react': 16.3.0(@testing-library/dom@8.20.1)(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
     transitivePeerDependencies:
       - '@testing-library/dom'
       - '@types/react'
@@ -14931,23 +15943,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.32.0(@typescript-eslint/parser@8.32.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.32.0(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/type-utils': 8.32.0(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.0(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.32.0
-      eslint: 8.57.0
-      graphemer: 1.4.0
-      ignore: 5.3.2
-      natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.32.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -14965,6 +15960,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/eslint-plugin@8.48.0(@typescript-eslint/parser@8.48.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
+      '@typescript-eslint/scope-manager': 8.48.0
+      '@typescript-eslint/type-utils': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.48.0
+      eslint: 8.57.0
+      graphemer: 1.4.0
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 7.18.0
@@ -14978,18 +15990,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.32.0(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.32.0
-      debug: 4.4.3
-      eslint: 8.57.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.32.1
@@ -15002,10 +16002,31 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.49.0(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.48.0(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/scope-manager': 8.48.0
+      '@typescript-eslint/types': 8.48.0
+      '@typescript-eslint/typescript-estree': 8.48.0(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.48.0
+      debug: 4.4.3
+      eslint: 8.57.0
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.46.2(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.8.3)
+      '@typescript-eslint/types': 8.46.2
+      debug: 4.4.3
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.48.0(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.48.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.48.0
       debug: 4.4.3
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -15021,22 +16042,26 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
 
-  '@typescript-eslint/scope-manager@8.32.0':
-    dependencies:
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/visitor-keys': 8.32.0
-
   '@typescript-eslint/scope-manager@8.32.1':
     dependencies:
       '@typescript-eslint/types': 8.32.1
       '@typescript-eslint/visitor-keys': 8.32.1
 
-  '@typescript-eslint/scope-manager@8.49.0':
+  '@typescript-eslint/scope-manager@8.46.2':
     dependencies:
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/visitor-keys': 8.46.2
 
-  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.8.3)':
+  '@typescript-eslint/scope-manager@8.48.0':
+    dependencies:
+      '@typescript-eslint/types': 8.48.0
+      '@typescript-eslint/visitor-keys': 8.48.0
+
+  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.8.3)':
+    dependencies:
+      typescript: 5.8.3
+
+  '@typescript-eslint/tsconfig-utils@8.48.0(typescript@5.8.3)':
     dependencies:
       typescript: 5.8.3
 
@@ -15052,17 +16077,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.32.0(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.32.0(eslint@8.57.0)(typescript@5.8.3)
-      debug: 4.4.3
-      eslint: 8.57.0
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.32.1(typescript@5.8.3)
@@ -15074,15 +16088,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/type-utils@8.48.0(eslint@8.57.0)(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.48.0
+      '@typescript-eslint/typescript-estree': 8.48.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
+      debug: 4.4.3
+      eslint: 8.57.0
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/types@5.62.0': {}
 
   '@typescript-eslint/types@7.18.0': {}
 
-  '@typescript-eslint/types@8.32.0': {}
-
   '@typescript-eslint/types@8.32.1': {}
 
-  '@typescript-eslint/types@8.49.0': {}
+  '@typescript-eslint/types@8.46.2': {}
+
+  '@typescript-eslint/types@8.48.0': {}
 
   '@typescript-eslint/typescript-estree@5.62.0(typescript@5.8.3)':
     dependencies:
@@ -15113,20 +16139,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.32.0(typescript@5.8.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/visitor-keys': 8.32.0
-      debug: 4.4.3
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      ts-api-utils: 2.1.0(typescript@5.8.3)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.32.1(typescript@5.8.3)':
     dependencies:
       '@typescript-eslint/types': 8.32.1
@@ -15141,12 +16153,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.8.3)':
+  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.49.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/visitor-keys': 8.49.0
+      '@typescript-eslint/project-service': 8.46.2(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.8.3)
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/visitor-keys': 8.46.2
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      ts-api-utils: 2.1.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.48.0(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.48.0(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.48.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.48.0
+      '@typescript-eslint/visitor-keys': 8.48.0
       debug: 4.4.3
       minimatch: 9.0.5
       semver: 7.7.3
@@ -15182,17 +16210,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.32.0(eslint@8.57.0)(typescript@5.8.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 8.32.0
-      '@typescript-eslint/types': 8.32.0
-      '@typescript-eslint/typescript-estree': 8.32.0(typescript@5.8.3)
-      eslint: 8.57.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.32.1(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.0)
@@ -15204,12 +16221,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.49.0(eslint@8.57.0)(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.46.2(eslint@8.57.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/types': 8.49.0
-      '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.8.3)
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.8.3)
+      eslint: 8.57.0
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.48.0(eslint@8.57.0)(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.0)
+      '@typescript-eslint/scope-manager': 8.48.0
+      '@typescript-eslint/types': 8.48.0
+      '@typescript-eslint/typescript-estree': 8.48.0(typescript@5.8.3)
       eslint: 8.57.0
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -15225,22 +16253,22 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.32.0':
-    dependencies:
-      '@typescript-eslint/types': 8.32.0
-      eslint-visitor-keys: 4.2.1
-
   '@typescript-eslint/visitor-keys@8.32.1':
     dependencies:
       '@typescript-eslint/types': 8.32.1
       eslint-visitor-keys: 4.2.1
 
-  '@typescript-eslint/visitor-keys@8.49.0':
+  '@typescript-eslint/visitor-keys@8.46.2':
     dependencies:
-      '@typescript-eslint/types': 8.49.0
+      '@typescript-eslint/types': 8.46.2
       eslint-visitor-keys: 4.2.1
 
-  '@typespec/ts-http-runtime@0.3.2':
+  '@typescript-eslint/visitor-keys@8.48.0':
+    dependencies:
+      '@typescript-eslint/types': 8.48.0
+      eslint-visitor-keys: 4.2.1
+
+  '@typespec/ts-http-runtime@0.3.1':
     dependencies:
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
@@ -15309,11 +16337,11 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vercel/functions@2.2.8(@aws-sdk/credential-provider-web-identity@3.948.0)':
+  '@vercel/functions@2.2.8(@aws-sdk/credential-provider-web-identity@3.920.0)':
     dependencies:
       '@vercel/oidc': 2.0.0
     optionalDependencies:
-      '@aws-sdk/credential-provider-web-identity': 3.948.0
+      '@aws-sdk/credential-provider-web-identity': 3.920.0
 
   '@vercel/og@0.8.5':
     dependencies:
@@ -15322,11 +16350,11 @@ snapshots:
 
   '@vercel/oidc@2.0.0': {}
 
-  '@vercel/style-guide@6.0.0(@next/eslint-plugin-next@15.3.2)(eslint@8.57.0)(prettier@3.5.3)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@vercel/style-guide@6.0.0(@next/eslint-plugin-next@15.3.2)(eslint@8.57.0)(prettier@3.5.3)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/eslint-parser': 7.28.5(@babel/core@7.28.5)(eslint@8.57.0)
-      '@rushstack/eslint-patch': 1.15.0
+      '@rushstack/eslint-patch': 1.14.1
       '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.0)(typescript@5.8.3)
       eslint-config-prettier: 9.1.2(eslint@8.57.0)
@@ -15342,8 +16370,8 @@ snapshots:
       eslint-plugin-testing-library: 6.5.0(eslint@8.57.0)(typescript@5.8.3)
       eslint-plugin-tsdoc: 0.2.17
       eslint-plugin-unicorn: 51.0.1(eslint@8.57.0)
-      eslint-plugin-vitest: 0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
-      prettier-plugin-packagejson: 2.5.20(prettier@3.5.3)
+      eslint-plugin-vitest: 0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      prettier-plugin-packagejson: 2.5.19(prettier@3.5.3)
     optionalDependencies:
       '@next/eslint-plugin-next': 15.3.2
       eslint: 8.57.0
@@ -15356,18 +16384,30 @@ snapshots:
       - supports-color
       - vitest
 
-  '@vitejs/plugin-react@4.4.1(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@vitejs/plugin-react@4.3.4(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
       '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
       '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      react-refresh: 0.14.2
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@vitejs/plugin-react@5.1.1(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.47
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/coverage-v8@3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
@@ -15381,17 +16421,53 @@ snapshots:
       std-env: 3.10.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/eslint-plugin@1.1.44(@typescript-eslint/utils@8.49.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@vitest/coverage-v8@3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
-      '@typescript-eslint/utils': 8.49.0(eslint@8.57.0)(typescript@5.8.3)
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      std-env: 3.10.0
+      test-exclude: 7.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/coverage-v8@3.1.3(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      std-env: 3.10.0
+      test-exclude: 7.0.1
+      tinyrainbow: 2.0.0
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitest/eslint-plugin@1.1.44(@typescript-eslint/utils@8.48.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@typescript-eslint/utils': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.8.3
-      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   '@vitest/expect@3.1.3':
     dependencies:
@@ -15408,13 +16484,45 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))':
+  '@vitest/mocker@3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.1.3
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@vitest/mocker@3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 3.1.3
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@vitest/mocker@3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 3.1.3
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+
+  '@vitest/mocker@3.2.4(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.1.3':
     dependencies:
@@ -15455,30 +16563,30 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
-  '@volar/language-core@2.4.27':
+  '@volar/language-core@2.4.23':
     dependencies:
-      '@volar/source-map': 2.4.27
+      '@volar/source-map': 2.4.23
 
-  '@volar/source-map@2.4.27': {}
+  '@volar/source-map@2.4.23': {}
 
-  '@volar/typescript@2.4.27':
+  '@volar/typescript@2.4.23':
     dependencies:
-      '@volar/language-core': 2.4.27
+      '@volar/language-core': 2.4.23
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
-  '@vue/compiler-core@3.5.25':
+  '@vue/compiler-core@3.5.22':
     dependencies:
       '@babel/parser': 7.28.5
-      '@vue/shared': 3.5.25
+      '@vue/shared': 3.5.22
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.25':
+  '@vue/compiler-dom@3.5.22':
     dependencies:
-      '@vue/compiler-core': 3.5.25
-      '@vue/shared': 3.5.25
+      '@vue/compiler-core': 3.5.22
+      '@vue/shared': 3.5.22
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -15487,10 +16595,10 @@ snapshots:
 
   '@vue/language-core@2.2.0(typescript@5.8.3)':
     dependencies:
-      '@volar/language-core': 2.4.27
-      '@vue/compiler-dom': 3.5.25
+      '@volar/language-core': 2.4.23
+      '@vue/compiler-dom': 3.5.22
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.25
+      '@vue/shared': 3.5.22
       alien-signals: 0.4.14
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -15498,7 +16606,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
-  '@vue/shared@3.5.25': {}
+  '@vue/shared@3.5.22': {}
 
   '@webassemblyjs/ast@1.14.1':
     dependencies:
@@ -15681,7 +16789,7 @@ snapshots:
 
   alien-signals@0.4.14: {}
 
-  ansi-escapes@7.2.0:
+  ansi-escapes@7.1.1:
     dependencies:
       environment: 1.1.0
 
@@ -15703,7 +16811,7 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
-  ansis@4.2.0: {}
+  ansis@3.17.0: {}
 
   any-promise@1.3.0: {}
 
@@ -15743,15 +16851,15 @@ snapshots:
 
   aria-query@5.3.2: {}
 
-  arkregex@0.0.5:
+  arkregex@0.0.2:
     dependencies:
-      '@ark/util': 0.56.0
+      '@ark/util': 0.53.0
 
-  arktype@2.1.29:
+  arktype@2.1.25:
     dependencies:
-      '@ark/schema': 0.56.0
-      '@ark/util': 0.56.0
-      arkregex: 0.0.5
+      '@ark/schema': 0.53.0
+      '@ark/util': 0.53.0
+      arkregex: 0.0.2
 
   array-buffer-byte-length@1.0.2:
     dependencies:
@@ -15763,7 +16871,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
       is-string: 1.1.1
@@ -15775,7 +16883,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -15785,7 +16893,7 @@ snapshots:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       es-shim-unscopables: 1.1.0
@@ -15794,21 +16902,21 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-shim-unscopables: 1.1.0
 
   array.prototype.flatmap@1.3.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-shim-unscopables: 1.1.0
 
   array.prototype.tosorted@1.1.4:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-shim-unscopables: 1.1.0
 
@@ -15817,7 +16925,7 @@ snapshots:
       array-buffer-byte-length: 1.0.2
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
@@ -15838,8 +16946,8 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.5.3):
     dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001760
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001751
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -15854,10 +16962,10 @@ snapshots:
 
   axe-core@4.11.0: {}
 
-  axios@1.13.2:
+  axios@1.13.1:
     dependencies:
       follow-redirects: 1.15.11
-      form-data: 4.0.5
+      form-data: 4.0.4
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
       - debug
@@ -15874,13 +16982,13 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.9.7: {}
+  baseline-browser-mapping@2.8.21: {}
 
   bcryptjs@3.0.2: {}
 
-  better-opn@3.0.2:
+  bidi-js@1.0.3:
     dependencies:
-      open: 8.4.2
+      require-from-string: 2.0.2
 
   big.js@5.2.2: {}
 
@@ -15898,21 +17006,21 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  bl@6.1.6:
+  bl@6.1.4:
     dependencies:
-      '@types/readable-stream': 4.0.23
+      '@types/readable-stream': 4.0.22
       buffer: 6.0.3
       inherits: 2.0.4
       readable-stream: 4.7.0
 
   boolbase@1.0.0: {}
 
-  boring-avatars@2.0.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  boring-avatars@2.0.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
-  bowser@2.13.1: {}
+  bowser@2.12.1: {}
 
   brace-expansion@1.1.12:
     dependencies:
@@ -15927,13 +17035,15 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.28.1:
+  browser-assert@1.2.1: {}
+
+  browserslist@4.27.0:
     dependencies:
-      baseline-browser-mapping: 2.9.7
-      caniuse-lite: 1.0.30001760
-      electron-to-chromium: 1.5.267
+      baseline-browser-mapping: 2.8.21
+      caniuse-lite: 1.0.30001751
+      electron-to-chromium: 1.5.243
       node-releases: 2.0.27
-      update-browserslist-db: 1.2.2(browserslist@4.28.1)
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
 
   bson@6.10.4: {}
 
@@ -15963,7 +17073,7 @@ snapshots:
       confbox: 0.2.2
       defu: 6.1.4
       dotenv: 16.6.1
-      exsolve: 1.0.8
+      exsolve: 1.0.7
       giget: 2.0.0
       jiti: 2.4.2
       ohash: 2.0.11
@@ -16025,7 +17135,7 @@ snapshots:
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001760: {}
+  caniuse-lite@1.0.30001751: {}
 
   chai@5.3.3:
     dependencies:
@@ -16125,14 +17235,14 @@ snapshots:
 
   cluster-key-slot@1.1.2: {}
 
-  cmdk@1.1.1(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  cmdk@1.1.1(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-dialog': 1.1.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.2)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dialog': 1.1.13(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.1(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
@@ -16213,9 +17323,9 @@ snapshots:
     dependencies:
       toggle-selection: 1.0.6
 
-  core-js-compat@3.47.0:
+  core-js-compat@3.46.0:
     dependencies:
-      browserslist: 4.28.1
+      browserslist: 4.27.0
 
   core-util-is@1.0.3: {}
 
@@ -16263,16 +17373,24 @@ snapshots:
       mdn-data: 2.0.14
       source-map: 0.6.1
 
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
   css-what@6.2.2: {}
 
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
 
-  cssstyle@4.6.0:
+  cssstyle@5.3.3:
     dependencies:
-      '@asamuzakjp/css-color': 3.2.0
-      rrweb-cssom: 0.8.0
+      '@asamuzakjp/css-color': 4.1.0
+      '@csstools/css-syntax-patches-for-csstree': 1.0.20
+      css-tree: 3.1.0
+
+  csstype@3.1.3: {}
 
   csstype@3.2.3: {}
 
@@ -16282,10 +17400,10 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
-  data-urls@5.0.0:
+  data-urls@6.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
-      whatwg-url: 14.2.0
+      whatwg-url: 15.1.0
 
   data-view-buffer@1.0.2:
     dependencies:
@@ -16311,7 +17429,7 @@ snapshots:
 
   dateformat@4.6.3: {}
 
-  dayjs@1.11.19: {}
+  dayjs@1.11.18: {}
 
   de-indent@1.0.2: {}
 
@@ -16364,12 +17482,12 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
-  default-browser-id@5.0.1: {}
+  default-browser-id@5.0.0: {}
 
-  default-browser@5.4.0:
+  default-browser@5.2.1:
     dependencies:
       bundle-name: 4.1.0
-      default-browser-id: 5.0.1
+      default-browser-id: 5.0.0
 
   define-data-property@1.1.4:
     dependencies:
@@ -16377,8 +17495,6 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  define-lazy-prop@2.0.0: {}
-
   define-lazy-prop@3.0.0: {}
 
   define-properties@1.2.1:
@@ -16398,8 +17514,6 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-element-overflow@1.4.2: {}
-
   detect-europe-js@0.1.2: {}
 
   detect-indent@7.0.2: {}
@@ -16416,8 +17530,6 @@ snapshots:
 
   diff@4.0.2: {}
 
-  diff@8.0.2: {}
-
   dijkstrajs@1.0.3: {}
 
   dir-glob@3.0.1:
@@ -16450,7 +17562,7 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.3.1:
+  dompurify@3.3.0:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -16492,7 +17604,7 @@ snapshots:
       '@standard-schema/spec': 1.0.0
       fast-check: 3.23.2
 
-  electron-to-chromium@1.5.267: {}
+  electron-to-chromium@1.5.243: {}
 
   emoji-regex-xs@2.0.1: {}
 
@@ -16514,7 +17626,7 @@ snapshots:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.18.4:
+  enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.0
@@ -16539,7 +17651,7 @@ snapshots:
     dependencies:
       stackframe: 1.3.4
 
-  es-abstract@1.24.1:
+  es-abstract@1.24.0:
     dependencies:
       array-buffer-byte-length: 1.0.2
       arraybuffer.prototype.slice: 1.0.4
@@ -16612,12 +17724,12 @@ snapshots:
       isarray: 2.0.5
       stop-iteration-iterator: 1.1.0
 
-  es-iterator-helpers@1.2.2:
+  es-iterator-helpers@1.2.1:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-set-tostringtag: 2.1.0
       function-bind: 1.1.2
@@ -16654,13 +17766,6 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  esbuild-register@3.6.0(esbuild@0.25.10):
-    dependencies:
-      debug: 4.4.3
-      esbuild: 0.25.10
-    transitivePeerDependencies:
-      - supports-color
-
   esbuild@0.25.10:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.10
@@ -16690,33 +17795,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.10
       '@esbuild/win32-x64': 0.25.10
 
-  esbuild@0.25.4:
+  esbuild@0.27.0:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.25.4
-      '@esbuild/android-arm': 0.25.4
-      '@esbuild/android-arm64': 0.25.4
-      '@esbuild/android-x64': 0.25.4
-      '@esbuild/darwin-arm64': 0.25.4
-      '@esbuild/darwin-x64': 0.25.4
-      '@esbuild/freebsd-arm64': 0.25.4
-      '@esbuild/freebsd-x64': 0.25.4
-      '@esbuild/linux-arm': 0.25.4
-      '@esbuild/linux-arm64': 0.25.4
-      '@esbuild/linux-ia32': 0.25.4
-      '@esbuild/linux-loong64': 0.25.4
-      '@esbuild/linux-mips64el': 0.25.4
-      '@esbuild/linux-ppc64': 0.25.4
-      '@esbuild/linux-riscv64': 0.25.4
-      '@esbuild/linux-s390x': 0.25.4
-      '@esbuild/linux-x64': 0.25.4
-      '@esbuild/netbsd-arm64': 0.25.4
-      '@esbuild/netbsd-x64': 0.25.4
-      '@esbuild/openbsd-arm64': 0.25.4
-      '@esbuild/openbsd-x64': 0.25.4
-      '@esbuild/sunos-x64': 0.25.4
-      '@esbuild/win32-arm64': 0.25.4
-      '@esbuild/win32-ia32': 0.25.4
-      '@esbuild/win32-x64': 0.25.4
+      '@esbuild/aix-ppc64': 0.27.0
+      '@esbuild/android-arm': 0.27.0
+      '@esbuild/android-arm64': 0.27.0
+      '@esbuild/android-x64': 0.27.0
+      '@esbuild/darwin-arm64': 0.27.0
+      '@esbuild/darwin-x64': 0.27.0
+      '@esbuild/freebsd-arm64': 0.27.0
+      '@esbuild/freebsd-x64': 0.27.0
+      '@esbuild/linux-arm': 0.27.0
+      '@esbuild/linux-arm64': 0.27.0
+      '@esbuild/linux-ia32': 0.27.0
+      '@esbuild/linux-loong64': 0.27.0
+      '@esbuild/linux-mips64el': 0.27.0
+      '@esbuild/linux-ppc64': 0.27.0
+      '@esbuild/linux-riscv64': 0.27.0
+      '@esbuild/linux-s390x': 0.27.0
+      '@esbuild/linux-x64': 0.27.0
+      '@esbuild/netbsd-arm64': 0.27.0
+      '@esbuild/netbsd-x64': 0.27.0
+      '@esbuild/openbsd-arm64': 0.27.0
+      '@esbuild/openbsd-x64': 0.27.0
+      '@esbuild/openharmony-arm64': 0.27.0
+      '@esbuild/sunos-x64': 0.27.0
+      '@esbuild/win32-arm64': 0.27.0
+      '@esbuild/win32-ia32': 0.27.0
+      '@esbuild/win32-x64': 0.27.0
 
   escalade@3.2.0: {}
 
@@ -16729,9 +17835,9 @@ snapshots:
   eslint-config-next@15.3.2(eslint@8.57.0)(typescript@5.8.3):
     dependencies:
       '@next/eslint-plugin-next': 15.3.2
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.32.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
+      '@rushstack/eslint-patch': 1.14.1
+      '@typescript-eslint/eslint-plugin': 8.48.0(@typescript-eslint/parser@8.48.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.48.0(eslint@8.57.0)(typescript@5.8.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0)
@@ -16798,14 +17904,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0))(eslint@8.57.0):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.32.1(eslint@8.57.0)(typescript@5.8.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -16868,7 +17973,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0))(eslint@8.57.0)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.32.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -16934,6 +18039,10 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
+  eslint-plugin-react-refresh@0.4.24(eslint@8.57.0):
+    dependencies:
+      eslint: 8.57.0
+
   eslint-plugin-react@7.37.5(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.9
@@ -16941,7 +18050,7 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.2.2
+      es-iterator-helpers: 1.2.1
       eslint: 8.57.0
       estraverse: 5.3.0
       hasown: 2.0.2
@@ -16956,11 +18065,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.0.15(eslint@8.57.0)(storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3))(typescript@5.8.3):
+  eslint-plugin-storybook@10.0.8(eslint@8.57.0)(storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/utils': 8.49.0(eslint@8.57.0)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.46.2(eslint@8.57.0)(typescript@5.8.3)
       eslint: 8.57.0
-      storybook: 9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3)
+      storybook: 10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -16991,7 +18100,7 @@ snapshots:
       '@eslint/eslintrc': 2.1.4
       ci-info: 4.3.1
       clean-regexp: 1.0.0
-      core-js-compat: 3.47.0
+      core-js-compat: 3.46.0
       eslint: 8.57.0
       esquery: 1.6.0
       indent-string: 4.0.0
@@ -17006,13 +18115,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)):
+  eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
     dependencies:
       '@typescript-eslint/utils': 7.18.0(eslint@8.57.0)(typescript@5.8.3)
       eslint: 8.57.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0)(typescript@5.8.3)
-      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -17064,7 +18173,7 @@ snapshots:
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
-      js-yaml: 4.1.1
+      js-yaml: 4.1.0
       json-stable-stringify-without-jsonify: 1.0.1
       levn: 0.4.1
       lodash.merge: 4.6.2
@@ -17112,9 +18221,9 @@ snapshots:
 
   expand-template@2.0.3: {}
 
-  expect-type@1.3.0: {}
+  expect-type@1.2.2: {}
 
-  exsolve@1.0.8: {}
+  exsolve@1.0.7: {}
 
   extend@3.0.2: {}
 
@@ -17160,7 +18269,7 @@ snapshots:
 
   fast-xml-parser@5.2.5:
     dependencies:
-      strnum: 2.1.2
+      strnum: 2.1.1
 
   fastest-stable-stringify@2.0.2: {}
 
@@ -17207,12 +18316,6 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  find-up@7.0.0:
-    dependencies:
-      locate-path: 7.2.0
-      path-exists: 5.0.0
-      unicorn-magic: 0.1.0
-
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.3.3
@@ -17232,7 +18335,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.5:
+  form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
@@ -17248,14 +18351,14 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@12.10.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  framer-motion@12.10.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       motion-dom: 12.23.23
       motion-utils: 12.23.6
       tslib: 2.8.1
     optionalDependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
   fs-constants@1.0.0: {}
 
@@ -17420,6 +18523,13 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  glob@9.3.5:
+    dependencies:
+      fs.realpath: 1.0.0
+      minimatch: 8.0.4
+      minipass: 4.2.8
+      path-scurry: 1.11.1
+
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
@@ -17440,9 +18550,9 @@ snapshots:
 
   globrex@0.1.2: {}
 
-  goober@2.1.18(csstype@3.2.3):
+  goober@2.1.18(csstype@3.1.3):
     dependencies:
-      csstype: 3.2.3
+      csstype: 3.1.3
 
   google-auth-library@9.15.1(encoding@0.1.13):
     dependencies:
@@ -17451,7 +18561,7 @@ snapshots:
       gaxios: 6.7.1(encoding@0.1.13)
       gcp-metadata: 6.1.1(encoding@0.1.13)
       gtoken: 7.1.0(encoding@0.1.13)
-      jws: 4.0.1
+      jws: 4.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -17487,7 +18597,7 @@ snapshots:
   gtoken@7.1.0(encoding@0.1.13):
     dependencies:
       gaxios: 6.7.1(encoding@0.1.13)
-      jws: 4.0.1
+      jws: 4.0.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -17695,7 +18805,7 @@ snapshots:
       '@formatjs/icu-messageformat-parser': 2.11.4
       tslib: 2.8.1
 
-  ip-address@10.1.0:
+  ip-address@10.0.1:
     optional: true
 
   ipaddr.js@2.2.0: {}
@@ -17763,8 +18873,6 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-docker@2.2.1: {}
-
   is-docker@3.0.0: {}
 
   is-extglob@2.1.1: {}
@@ -17868,10 +18976,6 @@ snapshots:
 
   is-what@4.1.16: {}
 
-  is-wsl@2.2.0:
-    dependencies:
-      is-docker: 2.2.1
-
   is-wsl@3.1.0:
     dependencies:
       is-inside-container: 1.0.0
@@ -17882,10 +18986,10 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  isomorphic-dompurify@2.24.0:
+  isomorphic-dompurify@2.33.0:
     dependencies:
-      dompurify: 3.3.1
-      jsdom: 26.1.0
+      dompurify: 3.3.0
+      jsdom: 27.2.0
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -17955,6 +19059,8 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  jiti@2.6.1: {}
+
   jju@1.4.0: {}
 
   jose@4.15.9: {}
@@ -17973,30 +19079,30 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.1:
+  js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@26.1.0:
+  jsdom@27.2.0:
     dependencies:
-      cssstyle: 4.6.0
-      data-urls: 5.0.0
+      '@acemir/cssom': 0.9.28
+      '@asamuzakjp/dom-selector': 6.7.6
+      cssstyle: 5.3.3
+      data-urls: 6.0.0
       decimal.js: 10.6.0
       html-encoding-sniffer: 4.0.0
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.23
-      parse5: 7.3.0
-      rrweb-cssom: 0.8.0
+      parse5: 8.0.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 5.1.2
+      tough-cookie: 6.0.0
       w3c-xmlserializer: 5.0.0
-      webidl-conversions: 7.0.0
+      webidl-conversions: 8.0.0
       whatwg-encoding: 3.1.1
       whatwg-mimetype: 4.0.0
-      whatwg-url: 14.2.0
+      whatwg-url: 15.1.0
       ws: 8.18.3
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
@@ -18036,7 +19142,7 @@ snapshots:
 
   jsonwebtoken@9.0.2:
     dependencies:
-      jws: 3.2.3
+      jws: 3.2.2
       lodash.includes: 4.3.0
       lodash.isboolean: 3.0.3
       lodash.isinteger: 4.0.4
@@ -18066,12 +19172,12 @@ snapshots:
       ecdsa-sig-formatter: 1.0.11
       safe-buffer: 5.2.1
 
-  jws@3.2.3:
+  jws@3.2.2:
     dependencies:
       jwa: 1.4.2
       safe-buffer: 5.2.1
 
-  jws@4.0.1:
+  jws@4.0.0:
     dependencies:
       jwa: 2.0.1
       safe-buffer: 5.2.1
@@ -18103,6 +19209,55 @@ snapshots:
 
   libheif-js@1.19.8: {}
 
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
   lilconfig@3.1.3: {}
 
   linebreak@1.1.0:
@@ -18127,7 +19282,7 @@ snapshots:
       nano-spawn: 1.0.3
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.8.2
+      yaml: 2.8.1
     transitivePeerDependencies:
       - supports-color
 
@@ -18162,10 +19317,6 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
-  locate-path@7.2.0:
-    dependencies:
-      p-locate: 6.0.0
-
   lodash.camelcase@4.3.0: {}
 
   lodash.castarray@4.4.0: {}
@@ -18194,7 +19345,7 @@ snapshots:
 
   log-update@6.1.0:
     dependencies:
-      ansi-escapes: 7.2.0
+      ansi-escapes: 7.1.1
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
       strip-ansi: 7.1.2
@@ -18210,6 +19361,8 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@11.2.2: {}
+
   lru-cache@11.2.4: {}
 
   lru-cache@5.1.1:
@@ -18220,14 +19373,20 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lru.min@1.1.3: {}
+  lru-cache@7.18.3: {}
 
-  lucide-react@0.507.0(react@19.1.2):
+  lru.min@1.1.2: {}
+
+  lucide-react@0.507.0(react@19.2.1):
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
 
   lz-string@1.5.0: {}
 
+  magic-string@0.27.0:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -18248,8 +19407,6 @@ snapshots:
 
   make-error@1.3.6: {}
 
-  make-event-props@1.6.2: {}
-
   make-fetch-happen@9.1.0:
     dependencies:
       agentkeepalive: 4.6.0
@@ -18290,13 +19447,15 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  md-to-react-email@5.0.5(react@19.1.2):
+  md-to-react-email@5.0.5(react@19.2.1):
     dependencies:
       marked: 7.0.4
-      react: 19.1.2
+      react: 19.2.1
 
   mdn-data@2.0.14: {}
 
+  mdn-data@2.12.2: {}
+
   mdurl@2.0.0: {}
 
   mem@8.1.1:
@@ -18349,6 +19508,10 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.12
 
+  minimatch@8.0.4:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
@@ -18388,6 +19551,8 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  minipass@4.2.8: {}
+
   minipass@5.0.0: {}
 
   minipass@7.1.2: {}
@@ -18427,7 +19592,7 @@ snapshots:
 
   mongodb@6.16.0(@aws-sdk/credential-providers@3.817.0)(socks@2.8.7):
     dependencies:
-      '@mongodb-js/saslprep': 1.4.0
+      '@mongodb-js/saslprep': 1.3.2
       bson: 6.10.4
       mongodb-connection-string-url: 3.0.2
     optionalDependencies:
@@ -18449,7 +19614,7 @@ snapshots:
       debug: 4.4.3
       rfdc: 1.4.1
       tarn: 3.0.2
-      tedious: 18.6.2
+      tedious: 18.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -18462,8 +19627,8 @@ snapshots:
       generate-function: 2.3.1
       iconv-lite: 0.6.3
       long: 5.3.2
-      lru.min: 1.1.3
-      named-placeholders: 1.1.4
+      lru.min: 1.1.2
+      named-placeholders: 1.1.3
       seq-queue: 0.0.5
       sqlstring: 2.3.3
 
@@ -18473,19 +19638,19 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  named-placeholders@1.1.4:
+  named-placeholders@1.1.3:
     dependencies:
-      lru.min: 1.1.3
+      lru-cache: 7.18.3
 
-  nano-css@5.6.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  nano-css@5.6.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
       css-tree: 1.1.3
       csstype: 3.2.3
       fastest-stable-stringify: 2.0.2
       inline-style-prefixer: 7.0.1
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       rtl-css-js: 1.16.1
       stacktrace-js: 2.0.2
       stylis: 4.3.6
@@ -18507,40 +19672,40 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-auth@4.24.12(patch_hash=bdy3m55bopfzpysceipfxj5eei)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(nodemailer@7.0.11)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  next-auth@4.24.12(patch_hash=bdy3m55bopfzpysceipfxj5eei)(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(nodemailer@7.0.11)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@babel/runtime': 7.28.4
       '@panva/hkdf': 1.2.1
       cookie: 0.7.2
       jose: 4.15.9
-      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
+      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       oauth: 0.9.15
       openid-client: 5.7.1
       preact: 10.26.6
       preact-render-to-string: 5.2.6(preact@10.26.6)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       uuid: 8.3.2
     optionalDependencies:
       nodemailer: 7.0.11
 
-  next-safe-action@7.10.8(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(zod@3.24.4):
+  next-safe-action@7.10.8(next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(zod@3.24.4):
     dependencies:
-      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      next: 15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
     optionalDependencies:
       zod: 3.24.4
 
-  next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  next@15.5.9(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@next/env': 15.5.9
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001760
+      caniuse-lite: 1.0.30001751
       postcss: 8.4.31
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      styled-jsx: 5.1.6(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      styled-jsx: 5.1.6(react@19.2.1)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.5.7
       '@next/swc-darwin-x64': 15.5.7
@@ -18552,12 +19717,12 @@ snapshots:
       '@next/swc-win32-x64-msvc': 15.5.7
       '@opentelemetry/api': 1.9.0
       '@playwright/test': 1.56.1
-      sharp: 0.34.5
+      sharp: 0.34.4
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
 
-  node-abi@3.85.0:
+  node-abi@3.79.0:
     dependencies:
       semver: 7.7.3
 
@@ -18640,17 +19805,15 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nwsapi@2.2.23: {}
-
   nypm@0.6.2:
     dependencies:
       citty: 0.1.6
       consola: 3.4.2
       pathe: 2.0.3
       pkg-types: 2.3.0
-      tinyexec: 1.0.2
+      tinyexec: 1.0.1
 
-  oauth4webapi@3.8.3: {}
+  oauth4webapi@3.8.2: {}
 
   oauth@0.9.15: {}
 
@@ -18689,14 +19852,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-object-atoms: 1.1.1
 
   object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
 
   object.values@1.2.1:
     dependencies:
@@ -18709,7 +19872,7 @@ snapshots:
 
   ohash@2.0.11: {}
 
-  oidc-token-hash@5.2.0: {}
+  oidc-token-hash@5.1.1: {}
 
   on-exit-leak-free@2.1.2: {}
 
@@ -18723,28 +19886,22 @@ snapshots:
 
   open@10.2.0:
     dependencies:
-      default-browser: 5.4.0
+      default-browser: 5.2.1
       define-lazy-prop: 3.0.0
       is-inside-container: 1.0.0
       wsl-utils: 0.1.0
 
-  open@8.4.2:
-    dependencies:
-      define-lazy-prop: 2.0.0
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
-
   openid-client@5.7.1:
     dependencies:
       jose: 4.15.9
       lru-cache: 6.0.0
       object-hash: 2.2.0
-      oidc-token-hash: 5.2.0
+      oidc-token-hash: 5.1.1
 
   openid-client@6.5.0:
     dependencies:
       jose: 6.0.11
-      oauth4webapi: 3.8.3
+      oauth4webapi: 3.8.2
 
   optionator@0.9.4:
     dependencies:
@@ -18777,10 +19934,6 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@4.0.0:
-    dependencies:
-      yocto-queue: 1.2.2
-
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
@@ -18789,10 +19942,6 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-locate@6.0.0:
-    dependencies:
-      p-limit: 4.0.0
-
   p-map@4.0.0:
     dependencies:
       aggregate-error: 3.1.0
@@ -18822,7 +19971,7 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse5@7.3.0:
+  parse5@8.0.0:
     dependencies:
       entities: 6.0.1
 
@@ -18835,8 +19984,6 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-exists@5.0.0: {}
-
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
@@ -18850,7 +19997,7 @@ snapshots:
 
   path-scurry@2.0.1:
     dependencies:
-      lru-cache: 11.2.4
+      lru-cache: 11.2.2
       minipass: 7.1.2
 
   path-type@4.0.0: {}
@@ -18955,7 +20102,7 @@ snapshots:
   pkg-types@2.3.0:
     dependencies:
       confbox: 0.2.2
-      exsolve: 1.0.8
+      exsolve: 1.0.7
       pathe: 2.0.3
 
   playwright-core@1.56.1: {}
@@ -18993,7 +20140,7 @@ snapshots:
   postcss-load-config@4.0.2(postcss@8.5.3)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)):
     dependencies:
       lilconfig: 3.1.3
-      yaml: 2.8.2
+      yaml: 2.8.1
     optionalDependencies:
       postcss: 8.5.3
       ts-node: 10.9.2(@types/node@22.15.18)(typescript@5.8.3)
@@ -19027,6 +20174,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postgres-array@2.0.0: {}
 
   postgres-bytea@1.0.0: {}
@@ -19052,7 +20205,7 @@ snapshots:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 2.0.0
-      node-abi: 3.85.0
+      node-abi: 3.79.0
       pump: 3.0.3
       rc: 1.2.8
       simple-get: 4.0.1
@@ -19061,9 +20214,9 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-packagejson@2.5.20(prettier@3.5.3):
+  prettier-plugin-packagejson@2.5.19(prettier@3.5.3):
     dependencies:
-      sort-package-json: 3.5.0
+      sort-package-json: 3.4.0
       synckit: 0.11.11
     optionalDependencies:
       prettier: 3.5.3
@@ -19096,7 +20249,7 @@ snapshots:
   prisma-json-types-generator@3.5.4(@prisma/client@6.14.0(prisma@6.14.0(magicast@0.3.5)(typescript@5.8.3))(typescript@5.8.3))(prisma@6.14.0(magicast@0.3.5)(typescript@5.8.3))(typescript@5.8.3):
     dependencies:
       '@prisma/client': 6.14.0(prisma@6.14.0(magicast@0.3.5)(typescript@5.8.3))(typescript@5.8.3)
-      '@prisma/generator-helper': 6.19.1
+      '@prisma/generator-helper': 6.18.0
       prisma: 6.14.0(magicast@0.3.5)(typescript@5.8.3)
       semver: 7.7.3
       tslib: 2.8.1
@@ -19202,54 +20355,53 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-calendar@5.1.0(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  react-calendar@5.1.0(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@wojtekmaj/date-utils': 1.5.1
       clsx: 2.1.1
       get-user-locale: 2.3.2
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
       warning: 4.0.3
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  react-colorful@5.6.1(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  react-colorful@5.6.1(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
-  react-confetti@6.4.0(react@19.1.2):
+  react-confetti@6.4.0(react@19.2.1):
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
       tween-functions: 1.2.0
 
-  react-date-picker@11.0.0(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
-    dependencies:
-      '@wojtekmaj/date-utils': 1.5.1
-      clsx: 2.1.1
-      get-user-locale: 2.3.2
-      make-event-props: 1.6.2
-      react: 19.1.2
-      react-calendar: 5.1.0(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react-dom: 19.1.2(react@19.1.2)
-      react-fit: 2.0.1(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      update-input-width: 1.4.2
-    optionalDependencies:
-      '@types/react': 19.1.4
-    transitivePeerDependencies:
-      - '@types/react-dom'
-
-  react-day-picker@9.6.7(react@19.1.2):
+  react-day-picker@9.6.7(react@19.2.1):
     dependencies:
       '@date-fns/tz': 1.2.0
       date-fns: 4.1.0
       date-fns-jalali: 4.1.0-0
-      react: 19.1.2
+      react: 19.2.1
 
   react-docgen-typescript@2.4.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
 
+  react-docgen@7.1.1:
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.11
+      strip-indent: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   react-docgen@8.0.2:
     dependencies:
       '@babel/core': 7.28.5
@@ -19265,44 +20417,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.1.2(react@19.1.2):
+  react-dom@19.2.1(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      scheduler: 0.26.0
+      react: 19.2.1
+      scheduler: 0.27.0
 
-  react-error-boundary@6.0.0(react@19.1.2):
+  react-error-boundary@6.0.0(react@19.2.1):
     dependencies:
       '@babel/runtime': 7.28.4
-      react: 19.1.2
+      react: 19.2.1
 
-  react-fit@2.0.1(@types/react@19.1.4)(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  react-hook-form@7.56.2(react@19.2.1):
     dependencies:
-      detect-element-overflow: 1.4.2
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      warning: 4.0.3
-    optionalDependencies:
-      '@types/react': 19.1.4
+      react: 19.2.1
 
-  react-hook-form@7.56.2(react@19.1.2):
+  react-hot-toast@2.5.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      react: 19.1.2
+      csstype: 3.1.3
+      goober: 2.1.18(csstype@3.1.3)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
 
-  react-hot-toast@2.5.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
-    dependencies:
-      csstype: 3.2.3
-      goober: 2.1.18(csstype@3.2.3)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-
-  react-i18next@15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(typescript@5.8.3):
+  react-i18next@15.7.3(i18next@25.5.2(typescript@5.8.3))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.8.3):
     dependencies:
       '@babel/runtime': 7.28.4
       html-parse-stringify: 3.0.1
       i18next: 25.5.2(typescript@5.8.3)
-      react: 19.1.2
+      react: 19.2.1
     optionalDependencies:
-      react-dom: 19.1.2(react@19.1.2)
+      react-dom: 19.2.1(react@19.2.1)
       typescript: 5.8.3
 
   react-is@16.13.1: {}
@@ -19313,46 +20456,75 @@ snapshots:
     dependencies:
       fast-deep-equal: 2.0.1
 
-  react-refresh@0.17.0: {}
+  react-refresh@0.14.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.1.4)(react@19.1.2):
+  react-refresh@0.18.0: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.1)(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      react-style-singleton: 2.2.3(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-style-singleton: 2.2.3(@types/react@19.2.1)(react@19.2.1)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  react-remove-scroll@2.7.2(@types/react@19.1.4)(react@19.1.2):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      react-remove-scroll-bar: 2.3.8(@types/react@19.1.4)(react@19.1.2)
-      react-style-singleton: 2.2.3(@types/react@19.1.4)(react@19.1.2)
+      react: 19.2.1
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.1)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.1.4)(react@19.1.2)
-      use-sidecar: 1.1.3(@types/react@19.1.4)(react@19.1.2)
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.7
 
-  react-style-singleton@2.2.3(@types/react@19.1.4)(react@19.1.2):
+  react-remove-scroll@2.7.1(@types/react@19.2.1)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.1)(react@19.2.1)
+      react-style-singleton: 2.2.3(@types/react@19.2.1)(react@19.2.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.1)(react@19.2.1)
+      use-sidecar: 1.1.3(@types/react@19.2.1)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.1
+
+  react-remove-scroll@2.7.1(@types/react@19.2.7)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.1)
+      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.1)
+      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  react-style-singleton@2.2.3(@types/react@19.2.1)(react@19.2.1):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.1.2
+      react: 19.2.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  react-turnstile@1.1.4(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.1):
     dependencies:
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
+      get-nonce: 1.0.1
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
 
-  react-universal-interface@0.6.2(react@19.1.2)(tslib@2.8.1):
+  react-turnstile@1.1.4(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+
+  react-universal-interface@0.6.2(react@19.2.1)(tslib@2.8.1):
+    dependencies:
+      react: 19.2.1
       tslib: 2.8.1
 
-  react-use@17.6.0(react-dom@19.1.2(react@19.1.2))(react@19.1.2):
+  react-use@17.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
       '@types/js-cookie': 2.2.7
       '@xobotyi/scrollbar-width': 1.9.5
@@ -19360,10 +20532,10 @@ snapshots:
       fast-deep-equal: 3.1.3
       fast-shallow-equal: 1.0.0
       js-cookie: 2.2.1
-      nano-css: 5.6.2(react-dom@19.1.2(react@19.1.2))(react@19.1.2)
-      react: 19.1.2
-      react-dom: 19.1.2(react@19.1.2)
-      react-universal-interface: 0.6.2(react@19.1.2)(tslib@2.8.1)
+      nano-css: 5.6.2(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-universal-interface: 0.6.2(react@19.2.1)(tslib@2.8.1)
       resize-observer-polyfill: 1.5.1
       screenfull: 5.2.0
       set-harmonic-interval: 1.0.1
@@ -19371,7 +20543,7 @@ snapshots:
       ts-easing: 0.2.0
       tslib: 2.8.1
 
-  react@19.1.2: {}
+  react@19.2.1: {}
 
   read-cache@1.0.0:
     dependencies:
@@ -19458,7 +20630,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -19549,36 +20721,34 @@ snapshots:
       hash-base: 3.1.2
       inherits: 2.0.4
 
-  rollup@4.53.3:
+  rollup@4.52.5:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.53.3
-      '@rollup/rollup-android-arm64': 4.53.3
-      '@rollup/rollup-darwin-arm64': 4.53.3
-      '@rollup/rollup-darwin-x64': 4.53.3
-      '@rollup/rollup-freebsd-arm64': 4.53.3
-      '@rollup/rollup-freebsd-x64': 4.53.3
-      '@rollup/rollup-linux-arm-gnueabihf': 4.53.3
-      '@rollup/rollup-linux-arm-musleabihf': 4.53.3
-      '@rollup/rollup-linux-arm64-gnu': 4.53.3
-      '@rollup/rollup-linux-arm64-musl': 4.53.3
-      '@rollup/rollup-linux-loong64-gnu': 4.53.3
-      '@rollup/rollup-linux-ppc64-gnu': 4.53.3
-      '@rollup/rollup-linux-riscv64-gnu': 4.53.3
-      '@rollup/rollup-linux-riscv64-musl': 4.53.3
-      '@rollup/rollup-linux-s390x-gnu': 4.53.3
-      '@rollup/rollup-linux-x64-gnu': 4.53.3
-      '@rollup/rollup-linux-x64-musl': 4.53.3
-      '@rollup/rollup-openharmony-arm64': 4.53.3
-      '@rollup/rollup-win32-arm64-msvc': 4.53.3
-      '@rollup/rollup-win32-ia32-msvc': 4.53.3
-      '@rollup/rollup-win32-x64-gnu': 4.53.3
-      '@rollup/rollup-win32-x64-msvc': 4.53.3
+      '@rollup/rollup-android-arm-eabi': 4.52.5
+      '@rollup/rollup-android-arm64': 4.52.5
+      '@rollup/rollup-darwin-arm64': 4.52.5
+      '@rollup/rollup-darwin-x64': 4.52.5
+      '@rollup/rollup-freebsd-arm64': 4.52.5
+      '@rollup/rollup-freebsd-x64': 4.52.5
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
+      '@rollup/rollup-linux-arm64-gnu': 4.52.5
+      '@rollup/rollup-linux-arm64-musl': 4.52.5
+      '@rollup/rollup-linux-loong64-gnu': 4.52.5
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
+      '@rollup/rollup-linux-riscv64-musl': 4.52.5
+      '@rollup/rollup-linux-s390x-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-gnu': 4.52.5
+      '@rollup/rollup-linux-x64-musl': 4.52.5
+      '@rollup/rollup-openharmony-arm64': 4.52.5
+      '@rollup/rollup-win32-arm64-msvc': 4.52.5
+      '@rollup/rollup-win32-ia32-msvc': 4.52.5
+      '@rollup/rollup-win32-x64-gnu': 4.52.5
+      '@rollup/rollup-win32-x64-msvc': 4.52.5
       fsevents: 2.3.3
 
-  rrweb-cssom@0.8.0: {}
-
   rtl-css-js@1.16.1:
     dependencies:
       '@babel/runtime': 7.28.4
@@ -19634,13 +20804,13 @@ snapshots:
       postcss-value-parser: 4.2.0
       yoga-layout: 3.2.1
 
-  sax@1.4.3: {}
+  sax@1.4.1: {}
 
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.26.0: {}
+  scheduler@0.27.0: {}
 
   schema-utils@3.3.0:
     dependencies:
@@ -19740,36 +20910,34 @@ snapshots:
       '@img/sharp-win32-ia32': 0.34.1
       '@img/sharp-win32-x64': 0.34.1
 
-  sharp@0.34.5:
+  sharp@0.34.4:
     dependencies:
       '@img/colour': 1.0.0
       detect-libc: 2.1.2
       semver: 7.7.3
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.34.5
-      '@img/sharp-darwin-x64': 0.34.5
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-      '@img/sharp-libvips-linux-arm': 1.2.4
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-      '@img/sharp-libvips-linux-x64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-      '@img/sharp-linux-arm': 0.34.5
-      '@img/sharp-linux-arm64': 0.34.5
-      '@img/sharp-linux-ppc64': 0.34.5
-      '@img/sharp-linux-riscv64': 0.34.5
-      '@img/sharp-linux-s390x': 0.34.5
-      '@img/sharp-linux-x64': 0.34.5
-      '@img/sharp-linuxmusl-arm64': 0.34.5
-      '@img/sharp-linuxmusl-x64': 0.34.5
-      '@img/sharp-wasm32': 0.34.5
-      '@img/sharp-win32-arm64': 0.34.5
-      '@img/sharp-win32-ia32': 0.34.5
-      '@img/sharp-win32-x64': 0.34.5
+      '@img/sharp-darwin-arm64': 0.34.4
+      '@img/sharp-darwin-x64': 0.34.4
+      '@img/sharp-libvips-darwin-arm64': 1.2.3
+      '@img/sharp-libvips-darwin-x64': 1.2.3
+      '@img/sharp-libvips-linux-arm': 1.2.3
+      '@img/sharp-libvips-linux-arm64': 1.2.3
+      '@img/sharp-libvips-linux-ppc64': 1.2.3
+      '@img/sharp-libvips-linux-s390x': 1.2.3
+      '@img/sharp-libvips-linux-x64': 1.2.3
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.3
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.3
+      '@img/sharp-linux-arm': 0.34.4
+      '@img/sharp-linux-arm64': 0.34.4
+      '@img/sharp-linux-ppc64': 0.34.4
+      '@img/sharp-linux-s390x': 0.34.4
+      '@img/sharp-linux-x64': 0.34.4
+      '@img/sharp-linuxmusl-arm64': 0.34.4
+      '@img/sharp-linuxmusl-x64': 0.34.4
+      '@img/sharp-wasm32': 0.34.4
+      '@img/sharp-win32-arm64': 0.34.4
+      '@img/sharp-win32-ia32': 0.34.4
+      '@img/sharp-win32-x64': 0.34.4
     optional: true
 
   shebang-command@2.0.0:
@@ -19861,7 +21029,7 @@ snapshots:
 
   socks@2.8.7:
     dependencies:
-      ip-address: 10.1.0
+      ip-address: 10.0.1
       smart-buffer: 4.2.0
     optional: true
 
@@ -19869,16 +21037,16 @@ snapshots:
     dependencies:
       atomic-sleep: 1.0.0
 
-  sort-object-keys@2.0.1: {}
+  sort-object-keys@1.1.3: {}
 
-  sort-package-json@3.5.0:
+  sort-package-json@3.4.0:
     dependencies:
       detect-indent: 7.0.2
       detect-newline: 4.0.1
       git-hooks-list: 4.1.1
       is-plain-obj: 4.1.0
       semver: 7.7.3
-      sort-object-keys: 2.0.1
+      sort-object-keys: 1.1.3
       tinyglobby: 0.2.15
 
   source-map-js@1.2.1: {}
@@ -19973,16 +21141,16 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook@9.0.15(@testing-library/dom@8.20.1)(prettier@3.5.3):
+  storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
     dependencies:
       '@storybook/global': 5.0.0
+      '@storybook/icons': 1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@testing-library/jest-dom': 6.6.3
       '@testing-library/user-event': 14.6.1(@testing-library/dom@8.20.1)
       '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       '@vitest/spy': 3.2.4
-      better-opn: 3.0.2
       esbuild: 0.25.10
-      esbuild-register: 3.6.0(esbuild@0.25.10)
       recast: 0.23.11
       semver: 7.7.3
       ws: 8.18.3
@@ -19991,8 +21159,35 @@ snapshots:
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
-      - supports-color
+      - msw
+      - react
+      - react-dom
       - utf-8-validate
+      - vite
+
+  storybook@10.0.8(@testing-library/dom@8.20.1)(prettier@3.5.3)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 1.6.0(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@testing-library/jest-dom': 6.6.3
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@8.20.1)
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@vitest/spy': 3.2.4
+      esbuild: 0.25.10
+      recast: 0.23.11
+      semver: 7.7.3
+      ws: 8.18.3
+    optionalDependencies:
+      prettier: 3.5.3
+    transitivePeerDependencies:
+      - '@testing-library/dom'
+      - bufferutil
+      - msw
+      - react
+      - react-dom
+      - utf-8-validate
+      - vite
 
   string-argv@0.3.2: {}
 
@@ -20020,14 +21215,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
 
   string.prototype.matchall@4.0.12:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
       get-intrinsic: 1.3.0
@@ -20041,7 +21236,7 @@ snapshots:
   string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
 
   string.prototype.trim@1.2.10:
     dependencies:
@@ -20049,7 +21244,7 @@ snapshots:
       call-bound: 1.0.4
       define-data-property: 1.1.4
       define-properties: 1.2.1
-      es-abstract: 1.24.1
+      es-abstract: 1.24.0
       es-object-atoms: 1.1.1
       has-property-descriptors: 1.0.2
 
@@ -20103,23 +21298,23 @@ snapshots:
 
   strnum@1.1.2: {}
 
-  strnum@2.1.2: {}
+  strnum@2.1.1: {}
 
-  styled-jsx@5.1.6(react@19.1.2):
+  styled-jsx@5.1.6(react@19.2.1):
     dependencies:
       client-only: 0.0.1
-      react: 19.1.2
+      react: 19.2.1
 
   stylis@4.3.6: {}
 
-  sucrase@3.35.1:
+  sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
       commander: 4.1.1
+      glob: 10.5.0
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.7
-      tinyglobby: 0.2.15
       ts-interface-checker: 0.1.13
 
   superjson@2.2.2:
@@ -20175,10 +21370,16 @@ snapshots:
       postcss-nested: 6.2.0(postcss@8.5.3)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.11
-      sucrase: 3.35.1
+      sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
+  tailwindcss@4.0.0: {}
+
+  tailwindcss@4.1.1: {}
+
+  tailwindcss@4.1.17: {}
+
   tapable@2.3.0: {}
 
   tar-fs@2.1.4:
@@ -20207,14 +21408,14 @@ snapshots:
 
   tarn@3.0.2: {}
 
-  tedious@18.6.2:
+  tedious@18.6.1:
     dependencies:
       '@azure/core-auth': 1.10.1
       '@azure/identity': 4.13.0
       '@azure/keyvault-keys': 4.10.0
       '@js-joda/core': 5.6.5
       '@types/node': 22.15.18
-      bl: 6.1.6
+      bl: 6.1.4
       iconv-lite: 0.6.3
       js-md4: 0.3.2
       native-duplexpair: 1.0.0
@@ -20222,7 +21423,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  terser-webpack-plugin@5.3.16(esbuild@0.25.10)(webpack@5.99.8(esbuild@0.25.10)):
+  terser-webpack-plugin@5.3.14(esbuild@0.25.10)(webpack@5.99.8(esbuild@0.25.10)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
@@ -20233,6 +21434,18 @@ snapshots:
     optionalDependencies:
       esbuild: 0.25.10
 
+  terser-webpack-plugin@5.3.14(esbuild@0.27.0)(webpack@5.99.8(esbuild@0.27.0)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      serialize-javascript: 6.0.2
+      terser: 5.39.1
+      webpack: 5.99.8(esbuild@0.27.0)
+    optionalDependencies:
+      esbuild: 0.27.0
+    optional: true
+
   terser@5.39.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
@@ -20240,6 +21453,14 @@ snapshots:
       commander: 2.20.3
       source-map-support: 0.5.21
 
+  terser@5.44.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    optional: true
+
   test-exclude@7.0.1:
     dependencies:
       '@istanbuljs/schema': 0.1.3
@@ -20272,7 +21493,7 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
-  tinyexec@1.0.2: {}
+  tinyexec@1.0.1: {}
 
   tinyglobby@0.2.15:
     dependencies:
@@ -20287,11 +21508,11 @@ snapshots:
 
   tinyspy@4.0.4: {}
 
-  tldts-core@6.1.86: {}
+  tldts-core@7.0.19: {}
 
-  tldts@6.1.86:
+  tldts@7.0.19:
     dependencies:
-      tldts-core: 6.1.86
+      tldts-core: 7.0.19
 
   to-buffer@1.2.2:
     dependencies:
@@ -20305,9 +21526,9 @@ snapshots:
 
   toggle-selection@1.0.6: {}
 
-  tough-cookie@5.1.2:
+  tough-cookie@6.0.0:
     dependencies:
-      tldts: 6.1.86
+      tldts: 7.0.19
 
   tr46@0.0.3: {}
 
@@ -20315,6 +21536,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
   tree-kill@1.2.2: {}
 
   ts-api-utils@1.4.3(typescript@5.8.3):
@@ -20338,7 +21563,7 @@ snapshots:
   ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.12
+      '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
@@ -20464,16 +21689,16 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typeorm@0.3.28(mongodb@6.16.0(@aws-sdk/credential-providers@3.817.0)(socks@2.8.7))(mssql@11.0.1)(mysql2@3.14.1)(pg@8.16.0)(redis@4.7.0)(sqlite3@5.1.7)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)):
+  typeorm@0.3.27(mongodb@6.16.0(@aws-sdk/credential-providers@3.817.0)(socks@2.8.7))(mssql@11.0.1)(mysql2@3.14.1)(pg@8.16.0)(redis@4.7.0)(reflect-metadata@0.2.2)(sqlite3@5.1.7)(ts-node@10.9.2(@types/node@22.15.18)(typescript@5.8.3)):
     dependencies:
       '@sqltools/formatter': 1.2.5
-      ansis: 4.2.0
+      ansis: 3.17.0
       app-root-path: 3.1.0
       buffer: 6.0.3
-      dayjs: 1.11.19
+      dayjs: 1.11.18
       debug: 4.4.3
       dedent: 1.7.0
-      dotenv: 16.6.1
+      dotenv: 16.5.0
       glob: 10.5.0
       reflect-metadata: 0.2.2
       sha.js: 2.4.12
@@ -20527,8 +21752,6 @@ snapshots:
       pako: 0.2.9
       tiny-inflate: 1.0.3
 
-  unicorn-magic@0.1.0: {}
-
   unique-filename@1.1.1:
     dependencies:
       unique-slug: 2.0.2
@@ -20553,6 +21776,13 @@ snapshots:
       acorn: 8.15.0
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.4
@@ -20577,34 +21807,47 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
 
-  update-browserslist-db@1.2.2(browserslist@4.28.1):
+  update-browserslist-db@1.1.4(browserslist@4.27.0):
     dependencies:
-      browserslist: 4.28.1
+      browserslist: 4.27.0
       escalade: 3.2.0
       picocolors: 1.1.1
 
-  update-input-width@1.4.2: {}
-
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
   url-template@2.0.8: {}
 
-  use-callback-ref@1.3.3(@types/react@19.1.4)(react@19.1.2):
+  use-callback-ref@1.3.3(@types/react@19.2.1)(react@19.2.1):
     dependencies:
-      react: 19.1.2
+      react: 19.2.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
 
-  use-sidecar@1.1.3(@types/react@19.1.4)(react@19.1.2):
+  use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
+
+  use-sidecar@1.1.3(@types/react@19.2.1)(react@19.2.1):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.1.2
+      react: 19.2.1
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.1.4
+      '@types/react': 19.2.1
+
+  use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.7
 
   util-deprecate@1.0.2: {}
 
@@ -20621,13 +21864,13 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2):
+  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -20642,11 +21885,53 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-dts@4.5.3(@types/node@22.15.18)(rollup@4.53.3)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)):
+  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1):
     dependencies:
-      '@microsoft/api-extractor': 7.55.2(@types/node@22.15.18)
-      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
-      '@volar/typescript': 2.4.27
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-node@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-plugin-dts@4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)):
+    dependencies:
+      '@microsoft/api-extractor': 7.53.3(@types/node@22.15.18)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.8.3)
       compare-versions: 6.1.1
       debug: 4.4.3
@@ -20655,13 +21940,32 @@ snapshots:
       magic-string: 0.30.21
       typescript: 5.8.3
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-prerender-plugin@0.5.12(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)):
+  vite-plugin-dts@4.5.3(@types/node@22.15.18)(rollup@4.52.5)(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
+    dependencies:
+      '@microsoft/api-extractor': 7.53.3(@types/node@22.15.18)
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@volar/typescript': 2.4.23
+      '@vue/language-core': 2.2.0(typescript@5.8.3)
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 5.8.3
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+
+  vite-prerender-plugin@0.5.12(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)):
     dependencies:
       kolorist: 1.8.0
       magic-string: 0.30.21
@@ -20669,45 +21973,119 @@ snapshots:
       simple-code-frame: 1.3.0
       source-map: 0.7.6
       stack-trace: 1.0.0-pre2
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
 
-  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)):
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
     dependencies:
       debug: 4.4.3
       globrex: 0.1.2
       tsconfck: 3.1.6(typescript@5.8.3)
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2):
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.8.3)
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.8.3)
+    optionalDependencies:
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.10
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.3
-      rollup: 4.53.3
+      rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 22.15.18
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.30.2
+      terser: 5.44.1
+      tsx: 4.19.4
+      yaml: 2.8.1
+
+  vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.10
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.3
+      rollup: 4.52.5
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 22.15.18
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
       terser: 5.39.1
       tsx: 4.19.4
-      yaml: 2.8.2
+      yaml: 2.8.1
 
-  vitest-mock-extended@3.1.0(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)):
+  vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.10
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.3
+      rollup: 4.52.5
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 22.15.18
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      terser: 5.44.1
+      tsx: 4.19.4
+      yaml: 2.8.1
+
+  vite@7.2.4(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      esbuild: 0.25.10
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.52.5
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 22.15.18
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      terser: 5.44.1
+      tsx: 4.19.4
+      yaml: 2.8.1
+
+  vitest-mock-extended@3.1.0(typescript@5.8.3)(vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)):
     dependencies:
       ts-essentials: 10.1.1(typescript@5.8.3)
       typescript: 5.8.3
-      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
 
-  vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@26.1.0)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2):
+  vitest@3.1.3(@types/node@22.15.18)(jiti@2.4.2)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
     dependencies:
       '@vitest/expect': 3.1.3
-      '@vitest/mocker': 3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2))
+      '@vitest/mocker': 3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.1.3
       '@vitest/snapshot': 3.1.3
@@ -20715,7 +22093,7 @@ snapshots:
       '@vitest/utils': 3.1.3
       chai: 5.3.3
       debug: 4.4.3
-      expect-type: 1.3.0
+      expect-type: 1.2.2
       magic-string: 0.30.21
       pathe: 2.0.3
       std-env: 3.10.0
@@ -20724,12 +22102,92 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
-      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.4.2)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.15.18
-      jsdom: 26.1.0
+      jsdom: 27.2.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      '@vitest/expect': 3.1.3
+      '@vitest/mocker': 3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.1.3
+      '@vitest/snapshot': 3.1.3
+      '@vitest/spy': 3.1.3
+      '@vitest/utils': 3.1.3
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.2.2
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.39.1)(tsx@4.19.4)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.15.18
+      jsdom: 27.2.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vitest@3.1.3(@types/node@22.15.18)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1):
+    dependencies:
+      '@vitest/expect': 3.1.3
+      '@vitest/mocker': 3.1.3(vite@6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.1.3
+      '@vitest/snapshot': 3.1.3
+      '@vitest/spy': 3.1.3
+      '@vitest/utils': 3.1.3
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.2.2
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.4.1(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+      vite-node: 3.1.3(@types/node@22.15.18)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.19.4)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.15.18
+      jsdom: 27.2.0
     transitivePeerDependencies:
       - jiti
       - less
@@ -20767,6 +22225,8 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
+  webidl-conversions@8.0.0: {}
+
   webpack-sources@3.3.3: {}
 
   webpack-virtual-modules@0.5.0: {}
@@ -20782,9 +22242,9 @@ snapshots:
       '@webassemblyjs/wasm-edit': 1.14.1
       '@webassemblyjs/wasm-parser': 1.14.1
       acorn: 8.15.0
-      browserslist: 4.28.1
+      browserslist: 4.27.0
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.4
+      enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
       eslint-scope: 5.1.1
       events: 3.3.0
@@ -20796,7 +22256,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.0
-      terser-webpack-plugin: 5.3.16(esbuild@0.25.10)(webpack@5.99.8(esbuild@0.25.10))
+      terser-webpack-plugin: 5.3.14(esbuild@0.25.10)(webpack@5.99.8(esbuild@0.25.10))
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     transitivePeerDependencies:
@@ -20804,6 +22264,38 @@ snapshots:
       - esbuild
       - uglify-js
 
+  webpack@5.99.8(esbuild@0.27.0):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.15.0
+      browserslist: 4.27.0
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 1.7.0
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.3.14(esbuild@0.27.0)(webpack@5.99.8(esbuild@0.27.0))
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+    optional: true
+
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
@@ -20815,6 +22307,11 @@ snapshots:
       tr46: 5.1.1
       webidl-conversions: 7.0.0
 
+  whatwg-url@15.1.0:
+    dependencies:
+      tr46: 6.0.0
+      webidl-conversions: 8.0.0
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -20929,7 +22426,7 @@ snapshots:
 
   xml2js@0.6.2:
     dependencies:
-      sax: 1.4.3
+      sax: 1.4.1
       xmlbuilder: 11.0.1
 
   xmlbuilder@11.0.1: {}
@@ -20952,7 +22449,7 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yaml@2.8.2: {}
+  yaml@2.8.1: {}
 
   yargs-parser@18.1.3:
     dependencies:
@@ -20993,8 +22490,6 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.2.2: {}
-
   yoga-layout@3.2.1: {}
 
   zod-openapi@4.2.4(zod@3.24.4):
diff --git a/sonar-project.properties b/sonar-project.properties
index 1f710fd0c7..e21abf95df 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -2,16 +2,16 @@ sonar.projectKey=formbricks_formbricks
 sonar.organization=formbricks
 
 # Sources
-sonar.sources=apps/web,packages/surveys,packages/js-core,packages/cache,packages/storage
-sonar.exclusions=**/node_modules/**,**/.next/**,**/dist/**,**/build/**,**/*.test.*,**/*.spec.*,**/__mocks__/**
+sonar.sources=apps/web,packages/surveys,packages/survey-ui,packages/js-core,packages/cache,packages/storage
+sonar.exclusions=**/node_modules/**,**/.next/**,**/dist/**,**/build/**,**/*.test.*,**/*.spec.*,**/__mocks__/**,packages/survey-ui/**/*.stories.*
 
 # Tests
-sonar.tests=apps/web,packages/surveys,packages/js-core,packages/cache,packages/storage
+sonar.tests=apps/web,packages/surveys,packages/survey-ui,packages/js-core,packages/cache,packages/storage
 sonar.test.inclusions=**/*.test.ts,**/*.spec.ts
-sonar.javascript.lcov.reportPaths=apps/web/coverage/lcov.info,packages/surveys/coverage/lcov.info,packages/js-core/coverage/lcov.info,packages/cache/coverage/lcov.info,packages/storage/coverage/lcov.info
+sonar.javascript.lcov.reportPaths=apps/web/coverage/lcov.info,packages/surveys/coverage/lcov.info,packages/survey-ui/coverage/lcov.info,packages/js-core/coverage/lcov.info,packages/cache/coverage/lcov.info,packages/storage/coverage/lcov.info
 
 # TypeScript configuration
-sonar.typescript.tsconfigPath=apps/web/tsconfig.json,packages/surveys/tsconfig.json,packages/js-core/tsconfig.json,packages/cache/tsconfig.json,packages/storage/tsconfig.json
+sonar.typescript.tsconfigPath=apps/web/tsconfig.json,packages/surveys/tsconfig.json,packages/survey-ui/tsconfig.json,packages/js-core/tsconfig.json,packages/cache/tsconfig.json,packages/storage/tsconfig.json
 
 # SCM
 sonar.scm.provider=git
@@ -21,5 +21,5 @@ sonar.scm.exclusions.disabled=false
 sonar.sourceEncoding=UTF-8
 
 # Coverage
-sonar.coverage.exclusions=**/*.test.*,**/*.spec.*,**/*.tsx,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/route.tsx,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/openapi/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,packages/js-core/src/index.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,**/*.svg,apps/web/modules/ui/components/icons/**,apps/web/modules/ui/components/table/**
-sonar.cpd.exclusions=**/*.test.*,**/*.spec.*,**/*.tsx,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/route.tsx,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/openapi/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,packages/js-core/src/index.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,**/*.svg,apps/web/modules/ui/components/icons/**,apps/web/modules/ui/components/table/**
+sonar.coverage.exclusions=**/*.test.*,**/*.spec.*,**/*.tsx,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/route.tsx,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/openapi/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,packages/js-core/src/index.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,**/*.svg,apps/web/modules/ui/components/icons/**,apps/web/modules/ui/components/table/**,packages/survey-ui/**/*.stories.*
+sonar.cpd.exclusions=**/*.test.*,**/*.spec.*,**/*.tsx,**/*.mdx,**/*.config.mts,**/*.config.ts,**/constants.ts,**/route.ts,**/route.tsx,**/types/**,**/types.ts,**/stories.*,**/*.mock.*,**/mocks/**,**/__mocks__/**,**/openapi.ts,**/openapi-document.ts,**/instrumentation.ts,scripts/openapi/merge-client-endpoints.ts,**/playwright/**,**/Dockerfile,**/*.config.cjs,**/*.css,**/templates.ts,**/actions.ts,apps/web/modules/ui/components/icons/*,**/*.json,apps/web/vitestSetup.ts,apps/web/tailwind.config.js,apps/web/postcss.config.js,apps/web/next.config.mjs,apps/web/scripts/**,packages/js-core/vitest.setup.ts,packages/js-core/src/index.ts,**/*.mjs,apps/web/modules/auth/lib/mock-data.ts,**/cache.ts,apps/web/app/**/billing-confirmation/**,apps/web/modules/ee/billing/**,apps/web/modules/ee/multi-language-surveys/**,apps/web/modules/email/**,apps/web/modules/integrations/**,apps/web/modules/setup/**/intro/**,apps/web/modules/setup/**/signup/**,apps/web/modules/setup/**/layout.tsx,apps/web/modules/survey/follow-ups/**,apps/web/app/share/**,apps/web/modules/ee/contacts/[contactId]/**,apps/web/modules/ee/contacts/components/**,apps/web/modules/ee/two-factor-auth/**,apps/web/lib/slack/**,apps/web/lib/notion/**,apps/web/lib/googleSheet/**,apps/web/app/api/google-sheet/**,apps/web/app/api/billing/**,apps/web/lib/airtable/**,apps/web/app/api/v1/integrations/**,apps/web/lib/env.ts,**/instrumentation-node.ts,**/cache/**,**/*.svg,apps/web/modules/ui/components/icons/**,apps/web/modules/ui/components/table/**,packages/survey-ui/**/*.stories.*
diff --git a/turbo.json b/turbo.json
index ea4ce00866..b6c0281c55 100644
--- a/turbo.json
+++ b/turbo.json
@@ -74,6 +74,19 @@
     "@formbricks/storage#test:coverage": {
       "dependsOn": ["@formbricks/logger#build"]
     },
+    "@formbricks/survey-ui#build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+    "@formbricks/survey-ui#build:dev": {
+      "dependsOn": ["^build:dev"],
+      "outputs": ["dist/**"]
+    },
+    "@formbricks/survey-ui#go": {
+      "cache": false,
+      "dependsOn": ["@formbricks/survey-ui#build"],
+      "persistent": true
+    },
     "@formbricks/surveys#build": {
       "dependsOn": ["^build"],
       "outputs": ["dist/**"]
@@ -87,6 +100,25 @@
       "dependsOn": ["@formbricks/surveys#build"],
       "persistent": true
     },
+    "@formbricks/surveys#test": {
+      "dependsOn": ["@formbricks/survey-ui#build"]
+    },
+    "@formbricks/surveys#test:coverage": {
+      "dependsOn": ["@formbricks/survey-ui#build"]
+    },
+    "@formbricks/ui#build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+    "@formbricks/ui#build:dev": {
+      "dependsOn": ["^build:dev"],
+      "outputs": ["dist/**"]
+    },
+    "@formbricks/ui#go": {
+      "cache": false,
+      "dependsOn": ["@formbricks/ui#build"],
+      "persistent": true
+    },
     "@formbricks/web#go": {
       "cache": false,
       "dependsOn": ["@formbricks/database#db:setup"],