From 660a9ace20578ecf0e6a6c7d4ab0821b4ebac835 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:53:37 +0700
Subject: [PATCH] feat: Implement Calendar component, UiProvider, and a `cn`
 utility, while enhancing picker components with new icons and styles.

---
 .../components/date-picker.showcase.tsx       | 104 +-
 .../modules/example/showcase/showcase.tsx     |   8 +-
 packages/ui/package.json                      |   3 +
 .../picker/generate-picker.component.tsx      |  13 +-
 .../forms/styles/picker.style copy.css        | 647 ++++++++++++
 .../components/forms/styles/picker.style.css  | 964 ++++++++++--------
 packages/ui/src/index.ts                      |   7 +-
 packages/ui/src/providers/ui-provider.tsx     |  10 +
 packages/ui/src/utils/cn.ts                   |  11 +
 pnpm-lock.yaml                                | 593 ++++++++++-
 10 files changed, 1890 insertions(+), 470 deletions(-)
 create mode 100644 packages/ui/src/components/forms/styles/picker.style copy.css
 create mode 100644 packages/ui/src/providers/ui-provider.tsx
 create mode 100644 packages/ui/src/utils/cn.ts

diff --git a/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx b/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
index c557463..7a3a8f4 100644
--- a/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/components/date-picker.showcase.tsx
@@ -13,19 +13,27 @@ import {
   MonthRangePicker,
   QuarterRangePicker,
   YearRangePicker,
-  InputStatusType
+  InputStatusType,
+  Calendar,
 } from '@repo/ui'; // Sesuaikan path
+import { DateUtils } from '@repo/utils';
 
 // --- UI Helper Components ---
-const Section = ({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) => (
+const Section = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) => (
   <section className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
     <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
       <h2 className="text-lg font-bold text-gray-800">{title}</h2>
       {description && <p className="text-sm text-gray-500 mt-1">{description}</p>}
     </div>
-    <div className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-      {children}
-    </div>
+    <div className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">{children}</div>
   </section>
 );
 
@@ -35,22 +43,17 @@ const Card = ({ label, code, children }: { label: string; code?: string; childre
       <label className="text-sm font-semibold text-gray-700">{label}</label>
       {code && <span className="text-xs font-mono text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{code}</span>}
     </div>
-    <div className="w-full">
-      {children}
-    </div>
+    <div className="w-full">{children}</div>
   </div>
 );
 
-export default function PickerShowcase({status}: {status: InputStatusType}) {
+export default function PickerShowcase({ status }: { status: InputStatusType }) {
   return (
     <div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-6 lg:px-8 font-sans">
       <div className="max-w-7xl mx-auto">
-        
         {/* Header */}
         <div className="mb-10 text-center">
-          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">
-            Component Picker Showcase
-          </h1>
+          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">Component Picker Showcase</h1>
           <p className="mt-2 text-lg text-gray-600">
             Fully typed, Tailwind-styled, and robust date manipulation components.
           </p>
@@ -65,7 +68,7 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           <Card label="Date Picker" code="<DatePicker />">
             <DatePicker placeholder="Select date..." className="w-full" />
           </Card>
-          
+
           <Card label="Week Picker" code="<WeekPicker />">
             <WeekPicker placeholder="Select week..." className="w-full" />
           </Card>
@@ -74,23 +77,21 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
             <MonthPicker placeholder="Select month..." className="w-full" />
           </Card>
 
-           <Card label="Quarter Picker" code="<QuarterPicker />">
+          <Card label="Quarter Picker" code="<QuarterPicker />">
             <QuarterPicker placeholder="Select quarter..." className="w-full" />
           </Card>
 
           <Card label="Year Picker" code="<YearPicker />">
             <YearPicker placeholder="Select year..." className="w-full" />
           </Card>
-
-          
         </Section>
 
         {/* 2. Range Pickers */}
         <Section title="Range Pickers" description="Komponen untuk memilih rentang waktu (Start - End).">
-            <Card label="Time Range" code="<TimeRangePicker />">
+          <Card label="Time Range" code="<TimeRangePicker />">
             <TimeRangePicker className="w-full" />
           </Card>
-          
+
           <Card label="Date Range" code="<DateRangePicker />">
             <DateRangePicker className="w-full" />
           </Card>
@@ -110,23 +111,21 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           <Card label="Year Range" code="<YearRangePicker />">
             <YearRangePicker className="w-full" />
           </Card>
-
-        
         </Section>
 
         {/* 3. Validation States */}
         <Section title="Validation & States" description="Visualisasi state error, warning, dan disabled.">
-          <Card label="Error State" code={`status="${status}"`}   >
+          <Card label="Error State" code={`status="${status}"`}>
             <DatePicker status={status} placeholder="Field is required" />
             <span className="text-xs text-red-500 mt-1 block">This field is required.</span>
           </Card>
 
-          <Card label="Warning State" code={`status="${status}"`}   >
+          <Card label="Warning State" code={`status="${status}"`}>
             <DatePicker status={status} placeholder="Check compatibility" defaultValue={dayjs()} />
             <span className="text-xs text-yellow-600 mt-1 block">Warning: Date is in the past.</span>
           </Card>
 
-          <Card label="Success State" code={`status="${status}"`} >
+          <Card label="Success State" code={`status="${status}"`}>
             <DatePicker status={status} defaultValue={dayjs()} />
           </Card>
 
@@ -141,22 +140,15 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
         {/* 4. Advanced & Customization */}
         <Section title="Advanced Features" description="Fitur lanjutan seperti format, waktu, dan presets.">
           <Card label="Date & Time" code="showTime">
-            <DatePicker 
-              showTime 
-              format="YYYY-MM-DD HH:mm" 
-              placeholder="Select date & time" 
-            />
+            <DatePicker showTime format="YYYY-MM-DD HH:mm" placeholder="Select date & time" />
           </Card>
 
           <Card label="Custom Format" code='format="DD/MM/YYYY"'>
-            <DatePicker 
-              format="DD/MM/YYYY" 
-              placeholder="31/12/2025" 
-            />
+            <DatePicker format="DD/MM/YYYY" placeholder="31/12/2025" />
           </Card>
 
           <Card label="Range with Presets" code="presets={[...]}">
-            <DateRangePicker 
+            <DateRangePicker
               presets={[
                 { label: 'Today', value: [dayjs(), dayjs()] },
                 { label: 'Next 7 Days', value: [dayjs(), dayjs().add(7, 'd')] },
@@ -166,11 +158,51 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           </Card>
 
           <Card label="Read Only Input" code="inputReadOnly">
-             <DatePicker inputReadOnly placeholder="Click to open (No typing)" />
+            <DatePicker inputReadOnly placeholder="Click to open (No typing)" />
           </Card>
         </Section>
 
+        {/* 5. STATIC CALENDAR (Picker Panel) */}
+        <Section
+          title="Static Calendar (Embedded)"
+          description="Kalender statis yang langsung ditampilkan di halaman (bukan popup)."
+        >
+          {/* Basic Calendar */}
+          <div className="col-span-1 md:col-span-1">
+            <Card label="Standard Calendar" code="<Calendar />">
+              <div className="border border-gray-200 rounded-lg shadow-sm bg-white inline-block overflow-hidden">
+                <Calendar />
+              </div>
+            </Card>
+          </div>
+
+          {/* Calendar with State & Time */}
+          <div className="col-span-1 md:col-span-2">
+            <Card label="Calendar with Date & Time" code="<Calendar showTime />">
+              <div className="flex flex-col sm:flex-row gap-6 items-start">
+                {/* Visual Calendar */}
+                <div className="border border-gray-200 rounded-lg shadow-sm bg-white inline-block overflow-hidden">
+                  <Calendar
+                    showTime
+                    onChange={(date) => {
+                      console.log('Selected:', new DateUtils(date as any).format('YYYY-MM-DD HH:mm:ss'));
+                    }}
+                  />
+                </div>
+
+                {/* Info Text */}
+                <div className="p-4 bg-blue-50 text-blue-800 rounded-lg text-sm max-w-xs">
+                  <p className="font-semibold mb-2">Info:</p>
+                  <p>
+                    Komponen <code>Calendar</code> ini adalah <i>Panel</i> dasar. Sangat berguna untuk sidebar,
+                    dashboard widget, atau form yang membutuhkan pemilihan tanggal yang selalu terlihat.
+                  </p>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </Section>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/apps/modules/example/showcase/showcase.tsx b/apps/web/src/apps/modules/example/showcase/showcase.tsx
index dd0c46a..450173f 100644
--- a/apps/web/src/apps/modules/example/showcase/showcase.tsx
+++ b/apps/web/src/apps/modules/example/showcase/showcase.tsx
@@ -3,6 +3,7 @@ import { InputStatusType } from '@repo/ui';
 import CheckboxShowcase from './components/checkbox.showcase';
 import InputShowCase from './components/input.showcase';
 import { SwitchShowcase } from './components/switch.showcase';
+import PickerShowcase from './components/date-picker.showcase';
 
 export default function Showcase() {
   // State untuk menyimpan status yang dipilih
@@ -66,9 +67,10 @@ export default function Showcase() {
             </div>
 
             <div className="space-y-12 p-8 ">
-              <SwitchShowcase />
-              <CheckboxShowcase status={selectedStatus} />
-              <InputShowCase status={selectedStatus} />
+              {/* <SwitchShowcase /> */}
+              {/* <CheckboxShowcase status={selectedStatus} /> */}
+              {/* <InputShowCase status={selectedStatus} /> */}
+              <PickerShowcase status={selectedStatus} />
             </div>
           </div>
         </section>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5f6d5fe..c26932d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,6 +12,7 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.1.0",
     "@rc-component/checkbox": "^1.0.1",
     "@rc-component/form": "^1.6.2",
     "@rc-component/input": "^1.1.2",
@@ -21,6 +22,8 @@
     "@rc-component/textarea": "^1.1.2",
     "@repo/utils": "workspace:*",
     "@tailwindcss/vite": "^4.1.18",
+    "antd": "^6.2.3",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
diff --git a/packages/ui/src/components/forms/picker/generate-picker.component.tsx b/packages/ui/src/components/forms/picker/generate-picker.component.tsx
index 7fa8605..c7d1de1 100644
--- a/packages/ui/src/components/forms/picker/generate-picker.component.tsx
+++ b/packages/ui/src/components/forms/picker/generate-picker.component.tsx
@@ -59,6 +59,11 @@ export function generateComponentPicker<DateType extends object>(
         generateConfig={generateConfig}
         locale={locale || enUS}
         className={getStatusClassName(prefixCls, className, status, props.disabled)}
+        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+        nextIcon={<span className={`${prefixCls}-next-icon`} />}
+        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+        transitionName={`rc-slide-up`}
         {...restProps}
       />
     );
@@ -150,7 +155,13 @@ export function generateComponentPicker<DateType extends object>(
   MonthRangePicker.displayName = 'MonthRangePicker';
 
   const QuarterRangePicker = forwardRef<any, SpecificRangePickerProps<DateType>>((props, ref) => (
-    <RangePicker ref={ref} mode={undefined} placeholder={['Start quarter', 'End quarter']} {...props} picker="quarter" />
+    <RangePicker
+      ref={ref}
+      mode={undefined}
+      placeholder={['Start quarter', 'End quarter']}
+      {...props}
+      picker="quarter"
+    />
   ));
   QuarterRangePicker.displayName = 'QuarterRangePicker';
 
diff --git a/packages/ui/src/components/forms/styles/picker.style copy.css b/packages/ui/src/components/forms/styles/picker.style copy.css
new file mode 100644
index 0000000..05f4567
--- /dev/null
+++ b/packages/ui/src/components/forms/styles/picker.style copy.css	
@@ -0,0 +1,647 @@
+@layer components {
+  /* =========================================
+     PICKER BASE (INPUT WRAPPER)
+     ========================================= */
+  .rc-picker {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    position: relative;
+
+    /* Using variable dimensions from globals.css */
+    height: var(--input-height);
+    padding: 0 var(--input-padding-x);
+
+    font-size: var(--input-font-size);
+    line-height: 1.5;
+    color: var(--input-text);
+
+    background-color: var(--input-bg);
+    border: 1px solid transparent;
+    border-color: var(--input-border);
+    border-radius: var(--input-radius);
+
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    outline: none;
+  }
+
+  /* Input inside Picker */
+  .rc-picker-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+
+  .rc-picker-input > input {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    transition: all 0.2s;
+  }
+
+  .rc-picker-input > input::placeholder {
+    color: var(--input-placeholder);
+    opacity: 1;
+  }
+
+  /* Suffix Icon (Calendar Icon) */
+  .rc-picker-suffix {
+    margin-left: 0.5rem;
+    color: var(--color-gray-400);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    font-size: var(--text-lg);
+    transition: all 0.2s;
+  }
+
+  /* Clear Icon */
+  .rc-picker-clear {
+    position: absolute;
+    top: 50%;
+    right: var(--input-padding-x);
+    transform: translateY(-50%);
+    cursor: pointer;
+    opacity: 0;
+    transition:
+      opacity 0.2s,
+      color 0.2s;
+    background: var(--input-bg);
+    color: var(--color-gray-400);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+  }
+
+  .rc-picker:hover:not(.rc-picker-disabled) .rc-picker-clear {
+    opacity: 1;
+  }
+
+  .rc-picker-clear:hover {
+    color: var(--color-gray-500);
+    background-color: var(--color-gray-100);
+  }
+  .rc-picker-clear-btn::after {
+    content: '×';
+    font-size: 1.2em;
+    line-height: 1;
+  }
+
+  /* =========================================
+     STATES (HOVER, FOCUS, DISABLED, ERROR)
+     ========================================= */
+
+  /* Hover State */
+  .rc-picker:hover:not(.rc-picker-disabled) {
+    border-color: var(--input-border-hover);
+  }
+
+  /* Focused State */
+  .rc-picker-focused {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 0 3px var(--focus-ring-color);
+    z-index: 1;
+  }
+
+  /* Disabled State */
+  .rc-picker-disabled {
+    background-color: var(--disabled-bg);
+    color: var(--disabled-text);
+    border-color: var(--disabled-border);
+    cursor: not-allowed;
+  }
+
+  .rc-picker-disabled input {
+    cursor: not-allowed;
+  }
+
+  /* Range Picker Specific */
+  .rc-picker-range.rc-picker-focused .rc-picker-active-bar {
+    opacity: 1;
+  }
+
+  .rc-picker-range-separator {
+    align-items: center;
+    padding: 0 8px;
+    line-height: 1;
+    color: var(--color-gray-400);
+    display: inline-flex;
+  }
+
+  .rc-picker-active-bar {
+    bottom: -1px;
+    height: 2px;
+    margin-left: var(--input-padding-x); /* Align with input start */
+    background: var(--color-brand-500);
+    opacity: 0;
+    transition: all 0.3s ease-out;
+    pointer-events: none;
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    width: auto;
+  }
+
+  /* =========================================
+     PICKER DROPDOWN PANEL (THE MEAT)
+     ========================================= */
+  .rc-picker-dropdown {
+    position: absolute;
+    z-index: 1050;
+    box-sizing: border-box;
+    font-size: var(--text-sm);
+    font-family: inherit;
+  }
+
+  .rc-picker-dropdown-hidden {
+    display: none;
+  }
+
+  /* Arrow styling removed for modern clean look (AntD v5/v6 typically removes large arrows) */
+  .rc-picker-dropdown .rc-picker-range-arrow {
+    display: none;
+  }
+
+  /* Panel Container */
+  .rc-picker-panel-container {
+    overflow: hidden;
+    vertical-align: top;
+    background: #fff;
+    border-radius: var(--radius-lg);
+    /* Elevation 3/4 equivalent */
+    box-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    transition: margin 0.3s;
+    border: 1px solid var(--color-gray-100);
+  }
+
+  .rc-picker-panel-layout {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  .rc-picker-panel {
+    vertical-align: top;
+    background: transparent;
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  /* Double Panel (Range Picker) */
+  .rc-picker-panel + .rc-picker-panel {
+    border-left: 1px solid var(--color-gray-100);
+  }
+
+  /* =========================================
+     HEADER SECTION
+     ========================================= */
+  .rc-picker-header {
+    display: flex;
+    padding: 0 8px;
+    border-bottom: 1px solid var(--color-gray-100);
+    min-height: 40px;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .rc-picker-header > * {
+    flex: none;
+  }
+
+  .rc-picker-header-view {
+    flex: auto;
+    text-align: center;
+    font-weight: var(--font-weight-semibold);
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .rc-picker-header-view button {
+    color: var(--color-gray-800);
+    font-weight: inheriting;
+    padding: 0 4px;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    font-size: var(--text-sm);
+    line-height: 40px;
+    transition: color 0.2s;
+  }
+
+  .rc-picker-header-view button:hover {
+    color: var(--color-brand-500);
+  }
+
+  /* Navigation Buttons (< << >> >) */
+  .rc-picker-header-super-prev-btn,
+  .rc-picker-header-prev-btn,
+  .rc-picker-header-next-btn,
+  .rc-picker-header-super-next-btn {
+    min-width: 1.6em;
+    font-size: 14px;
+    color: var(--color-gray-400);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    line-height: 40px;
+    padding: 0 5px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: color 0.2s;
+    position: relative;
+  }
+
+  .rc-picker-header-super-prev-btn:hover,
+  .rc-picker-header-prev-btn:hover,
+  .rc-picker-header-next-btn:hover,
+  .rc-picker-header-super-next-btn:hover {
+    color: var(--color-gray-900);
+  }
+
+  /* Arrow Symbols using pseudo elements if needed, or rely on RC Picker default text symbols but styled */
+  /* RC Picker default uses unicode arrows usually. */
+
+  /* =========================================
+     BODY SECTION (CALENDAR GRID)
+     ========================================= */
+  .rc-picker-body {
+    padding: 8px 12px;
+  }
+
+  .rc-picker-content {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
+
+  .rc-picker-content th,
+  .rc-picker-content td {
+    position: relative;
+    min-width: 24px;
+    font-weight: 400;
+  }
+
+  .rc-picker-content th {
+    height: 32px;
+    color: var(--color-gray-500);
+    line-height: 32px;
+    text-align: center;
+  }
+
+  .rc-picker-cell {
+    padding: 4px 0;
+    color: var(--color-gray-400);
+    cursor: pointer;
+  }
+
+  .rc-picker-cell-in-view {
+    color: var(--color-gray-800);
+  }
+
+  .rc-picker-cell-disabled {
+    cursor: not-allowed;
+    color: var(--disabled-text);
+  }
+  .rc-picker-cell-disabled .rc-picker-cell-inner {
+    background: var(--disabled-bg);
+  }
+
+  /* Inner Cell (The Circle/Square) */
+  .rc-picker-cell-inner {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: var(
+      --radius-md
+    ); /* Ant Design v5 uses slightly rounded squares, not full circles usually, but we can do md radius */
+    transition:
+      background 0.2s,
+      border 0.2s,
+      color 0.2s;
+    text-align: center;
+    margin: 0 auto;
+    padding: 0 4px; /* For longer text like months */
+  }
+
+  /* Month/Year Panel cells are wider */
+  .rc-picker-month-panel .rc-picker-cell-inner,
+  .rc-picker-year-panel .rc-picker-cell-inner,
+  .rc-picker-quarter-panel .rc-picker-cell-inner,
+  .rc-picker-decade-panel .rc-picker-cell-inner {
+    width: auto;
+    padding: 0 12px;
+    min-width: 48px;
+  }
+
+  /* Hover State */
+  .rc-picker-cell:hover:not(.rc-picker-cell-selected):not(.rc-picker-cell-range-start):not(
+      .rc-picker-cell-range-end
+    ):not(.rc-picker-cell-disabled)
+    .rc-picker-cell-inner {
+    background: var(--color-gray-100);
+  }
+
+  /* Selected Date */
+  .rc-picker-cell-selected .rc-picker-cell-inner,
+  .rc-picker-cell-range-start .rc-picker-cell-inner,
+  .rc-picker-cell-range-end .rc-picker-cell-inner {
+    color: #fff;
+    background: var(--color-brand-500);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+  }
+
+  .rc-picker-cell-selected:hover .rc-picker-cell-inner {
+    background: var(--color-brand-600);
+  }
+
+  /* Today */
+  .rc-picker-cell-today .rc-picker-cell-inner::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    border: 1px solid var(--color-brand-500);
+    border-radius: var(--radius-md);
+    content: '';
+    transition: all 0.2s;
+  }
+
+  .rc-picker-cell-selected.rc-picker-cell-today .rc-picker-cell-inner::before {
+    border-color: #fff; /* White border inside selected today */
+  }
+
+  /* =========================================
+     RANGE SELECTION STYLING
+     ========================================= */
+
+  /* The strip between start and end */
+  .rc-picker-cell-in-range > .rc-picker-cell-inner {
+    background: var(--color-brand-50);
+    border-radius: 0;
+    min-width: 100%; /* Fill the whole cell width */
+    color: var(--color-gray-800);
+  }
+
+  .rc-picker-cell-in-range::before {
+    background: var(--color-brand-50);
+  }
+
+  /* Range Edge Adjustments */
+  .rc-picker-cell-range-start > .rc-picker-cell-inner {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .rc-picker-cell-range-end > .rc-picker-cell-inner {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  /* Ghost/Pseudo elements for continuous range background */
+  /* RC Picker handles this logic via class combinations. 
+     We need to ensure the background flows nicely. */
+
+  .rc-picker-cell-range-start.rc-picker-cell-range-end .rc-picker-cell-inner {
+    border-radius: var(--radius-md);
+  }
+
+  /* Range Hover (when selecting the second date) */
+  .rc-picker-cell-range-hover-start::after,
+  .rc-picker-cell-range-hover-end::after,
+  .rc-picker-cell-range-hover::after {
+    content: ''; /* Should show dotted line or lighter highlight */
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-top: 2px dashed var(--color-brand-300);
+    transform: translateY(-50%);
+    z-index: 0;
+    display: none; /* AntD v6 doesn't really emphasize this as much, can keep simple */
+  }
+
+  /* =========================================
+     TIME PANEL
+     ========================================= */
+  .rc-picker-time-panel {
+    border-left: 1px solid var(--color-gray-100);
+    width: auto;
+  }
+
+  .rc-picker-time-panel .rc-picker-content {
+    display: flex;
+    max-height: 224px;
+    height: 224px;
+  }
+
+  .rc-picker-time-panel-column {
+    flex: 1 0 auto;
+    width: 60px; /* Wider for easier clicking */
+    margin: 0;
+    padding: 0;
+    overflow-y: hidden;
+    text-align: left;
+    list-style: none;
+    transition: background 0.3s;
+    overflow-x: hidden;
+    border-left: 1px solid var(--color-gray-100); /* Separator between hrs/min/sec */
+  }
+
+  .rc-picker-time-panel-column:first-child {
+    border-left: 0;
+  }
+
+  .rc-picker-time-panel-column:hover {
+    overflow-y: auto;
+  }
+
+  .rc-picker-time-panel-column > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
+    display: block;
+    width: 100%;
+    height: 28px;
+    margin: 0;
+    padding: 0 0 0 12px;
+    color: var(--color-gray-800);
+    line-height: 28px;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .rc-picker-time-panel-column > li:hover .rc-picker-time-panel-cell-inner {
+    background: var(--color-gray-100);
+  }
+
+  .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-selected .rc-picker-time-panel-cell-inner {
+    background: var(--color-brand-50);
+    color: var(--color-brand-600);
+    font-weight: 600;
+  }
+
+  .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled .rc-picker-time-panel-cell-inner {
+    color: var(--disabled-text);
+    cursor: not-allowed;
+    background: transparent;
+  }
+
+  /* Date + Time Layout */
+  .rc-picker-datetime-panel {
+    display: flex;
+  }
+  .rc-picker-datetime-panel .rc-picker-date-panel,
+  .rc-picker-datetime-panel .rc-picker-time-panel {
+    transition: opacity 0.3s;
+  }
+
+  /* =========================================
+     FOOTER
+     ========================================= */
+  .rc-picker-footer {
+    width: auto;
+    min-width: 100%;
+    line-height: 38px;
+    text-align: center;
+    border-top: 1px solid var(--color-gray-100);
+    padding: 0 12px;
+  }
+
+  .rc-picker-footer-extra {
+    text-align: left;
+  }
+
+  /* Ranges (Presets) */
+  .rc-picker-ranges {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .rc-picker-ranges > li {
+    display: inline-block;
+  }
+
+  .rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag {
+    display: inline-block;
+    margin-right: 8px;
+    color: var(--color-brand-500);
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+
+  .rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag:hover {
+    color: var(--color-brand-600);
+  }
+
+  .rc-picker-ranges .rc-picker-ok {
+    float: right;
+  }
+
+  /* OK Button */
+  .rc-picker-ok button {
+    background: var(--color-brand-500);
+    color: #fff;
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: 2px 12px;
+    height: 24px;
+    cursor: pointer;
+    font-size: var(--text-sm);
+    transition: background 0.2s;
+  }
+
+  .rc-picker-ok button:hover {
+    background: var(--color-brand-600);
+  }
+
+  .rc-picker-ok button:disabled {
+    background: var(--disabled-bg);
+    color: var(--disabled-text);
+    cursor: not-allowed;
+  }
+
+  .rc-picker-now-btn {
+    color: var(--color-brand-500);
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+  .rc-picker-now-btn:hover {
+    color: var(--color-brand-600);
+  }
+
+  /* =========================================
+     STATUS MODIFIERS (ERROR, WARNING, ETC)
+     ========================================= */
+
+  .picker-status-error.rc-picker {
+    border-color: var(--color-error-500);
+  }
+  .picker-status-error.rc-picker:hover:not(.rc-picker-disabled) {
+    border-color: var(--color-error-600);
+  }
+  .picker-status-error.rc-picker.rc-picker-focused {
+    border-color: var(--color-error-600);
+    box-shadow: 0 0 0 3px var(--color-error-100);
+  }
+
+  .picker-status-warning.rc-picker {
+    border-color: var(--color-warning-500);
+  }
+  .picker-status-warning.rc-picker:hover:not(.rc-picker-disabled) {
+    border-color: var(--color-warning-600);
+  }
+  .picker-status-warning.rc-picker.rc-picker-focused {
+    border-color: var(--color-warning-600);
+    box-shadow: 0 0 0 3px var(--color-warning-100);
+  }
+
+  .picker-status-success.rc-picker {
+    border-color: var(--color-success-500);
+  }
+  .picker-status-success.rc-picker:hover:not(.rc-picker-disabled) {
+    border-color: var(--color-success-600);
+  }
+  .picker-status-success.rc-picker.rc-picker-focused {
+    border-color: var(--color-success-600);
+    box-shadow: 0 0 0 3px var(--color-success-100);
+  }
+}
diff --git a/packages/ui/src/components/forms/styles/picker.style.css b/packages/ui/src/components/forms/styles/picker.style.css
index 14bd93d..26f174a 100644
--- a/packages/ui/src/components/forms/styles/picker.style.css
+++ b/packages/ui/src/components/forms/styles/picker.style.css
@@ -1,285 +1,429 @@
 @layer components {
-  /* =========================================
-     PICKER BASE (INPUT WRAPPER)
-     ========================================= */
+  /* ==========================================================================
+   Ant Design DatePicker - Pure CSS Implementation
+   ========================================================================== */
+
+  /* --------------------------------------------------------------------------
+   Variables & Tokens
+   -------------------------------------------------------------------------- */
+  :root {
+    /* Colors */
+    --ant-color-primary: #1677ff;
+    --ant-color-primary-hover: #4096ff;
+    --ant-color-primary-active: #0958d9;
+    --ant-color-primary-bg: #e6f4ff;
+    --ant-color-primary-border: #91caff;
+
+    --ant-color-bg-container: #ffffff;
+    --ant-color-bg-elevated: #ffffff;
+    --ant-color-bg-layout: #f5f5f5;
+    --ant-color-bg-mask: rgba(0, 0, 0, 0.45);
+    --ant-color-bg-spotlight: rgba(0, 0, 0, 0.85);
+
+    --ant-color-text: rgba(0, 0, 0, 0.88);
+    --ant-color-text-secondary: rgba(0, 0, 0, 0.65);
+    --ant-color-text-tertiary: rgba(0, 0, 0, 0.45);
+    --ant-color-text-quaternary: rgba(0, 0, 0, 0.25);
+    --ant-color-text-placeholder: rgba(0, 0, 0, 0.25);
+    --ant-color-text-disabled: rgba(0, 0, 0, 0.25);
+    --ant-color-text-heading: rgba(0, 0, 0, 0.88);
+    --ant-color-text-light-solid: #ffffff;
+
+    --ant-color-border: #d9d9d9;
+    --ant-color-split: rgba(5, 5, 5, 0.06);
+    --ant-color-error: #ff4d4f;
+    --ant-color-warning: #faad14;
+
+    /* Dimensions & Spacing */
+    --ant-control-height: 32px;
+    --ant-control-height-sm: 24px;
+    --ant-control-height-lg: 40px;
+
+    --ant-padding-xs: 8px;
+    --ant-padding-sm: 12px;
+    --ant-padding-md: 16px;
+    --ant-padding-xxs: 4px;
+
+    --ant-margin-xs: 8px;
+    --ant-margin-xxs: 4px;
+
+    --ant-border-radius: 6px;
+    --ant-border-radius-sm: 4px;
+    --ant-border-radius-lg: 8px;
+
+    --ant-line-width: 1px;
+    --ant-line-width-bold: 2px;
+    --ant-line-type: solid;
+
+    /* Font */
+    --ant-font-size: 14px;
+    --ant-font-size-sm: 12px;
+    --ant-font-size-lg: 16px;
+    --ant-line-height: 1.5714285714285714;
+
+    /* Animation */
+    --ant-motion-duration-mid: 0.2s;
+    --ant-motion-duration-slow: 0.3s;
+
+    /* Shadows */
+    --ant-box-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    --ant-box-shadow-secondary:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    /* Picker Specific Tokens */
+    --ant-picker-z-index-popup: 1050;
+    --ant-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);
+    --ant-picker-cell-active-with-range-bg: var(--ant-color-primary-bg);
+    --ant-picker-basic-cell-hover-with-range-bg: #cce9ff; /* lighten(primary, 35) approx */
+    --ant-picker-date-hover-range-border-color: #7ec1ff; /* lighten(primary, 20) approx */
+
+    --ant-picker-panel-width: 280px; /* cellWidth * 7 + padding */
+    --ant-picker-year-month-cell-width: 60px;
+    --ant-picker-time-column-width: 56px;
+    --ant-picker-time-column-height: 224px;
+    --ant-picker-time-cell-height: 28px;
+
+    --ant-picker-cell-width: 36px;
+    --ant-picker-cell-height: 24px;
+    --ant-picker-text-height: 40px;
+  }
+
+  /* --------------------------------------------------------------------------
+   Base Styles (.rc-picker)
+   -------------------------------------------------------------------------- */
   .rc-picker {
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--ant-color-text);
+    font-size: var(--ant-font-size);
+    line-height: var(--ant-line-height);
+    list-style: none;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    background: var(--ant-color-bg-container);
+    border: var(--ant-line-width) var(--ant-line-type) var(--ant-color-border);
+    border-radius: var(--ant-border-radius);
+    transition:
+      border var(--ant-motion-duration-mid),
+      box-shadow var(--ant-motion-duration-mid);
+    padding: 4px 11px;
+  }
+
+  /* Base States */
+  .rc-picker:hover,
+  .rc-picker-focused {
+    border-color: var(--ant-color-primary);
+    border-inline-end-width: var(--ant-line-width);
+  }
+
+  .rc-picker-focused {
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+    outline: 0;
+  }
+
+  .rc-picker.rc-picker-disabled {
+    background: var(--ant-color-bg-layout);
+    border-color: var(--ant-color-border);
+    color: var(--ant-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .rc-picker.rc-picker-disabled .rc-picker-suffix {
+    color: var(--ant-color-text-disabled);
+  }
+
+  /* Clean Input Style */
+  .rc-picker-input {
+    position: relative;
     display: inline-flex;
     align-items: center;
     width: 100%;
-    position: relative;
-    
-    /* Using variable dimensions from globals.css */
-    height: var(--input-height);
-    padding: 0 var(--input-padding-x);
-    
-    font-size: var(--input-font-size);
-    line-height: 1.5;
-    color: var(--input-text);
-    
-    background-color: var(--input-bg);
-    border: 1px solid transparent; 
-    border-color: var(--input-border);
-    border-radius: var(--input-radius);
-    
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    outline: none;
   }
 
-  /* Input inside Picker */
-  .rc-picker-input {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    flex: 1;
-  }
-  
   .rc-picker-input > input {
+    position: relative;
+    display: inline-block;
     width: 100%;
-    height: 100%;
-    min-width: 0;
+    min-width: 1px; /* Firefox flex fix */
     padding: 0;
-    background-color: transparent;
-    border: 0;
-    outline: none;
     color: inherit;
     font-size: inherit;
     line-height: inherit;
-    transition: all 0.2s;
+    background: transparent;
+    border: 0;
+    outline: 0;
+    transition: all var(--ant-motion-duration-mid);
+    flex: auto;
+    height: auto;
   }
-  
+
   .rc-picker-input > input::placeholder {
-    color: var(--input-placeholder);
-    opacity: 1;
+    color: var(--ant-color-text-placeholder);
   }
-  
-  /* Suffix Icon (Calendar Icon) */
+
+  .rc-picker-input > input:disabled {
+    color: var(--ant-color-text-disabled);
+    background: transparent;
+    cursor: not-allowed;
+  }
+
+  /* Suffix & Clear Icon */
   .rc-picker-suffix {
-    margin-left: 0.5rem;
-    color: var(--color-gray-400);
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex: none;
+    align-self: center;
+    margin-inline-start: 4px;
+    color: var(--ant-color-text-quaternary);
+    line-height: 1;
     pointer-events: none;
-    font-size: var(--text-lg);
-    transition: all 0.2s;
+    transition:
+      opacity var(--ant-motion-duration-mid),
+      color var(--ant-motion-duration-mid);
   }
 
-  /* Clear Icon */
   .rc-picker-clear {
     position: absolute;
     top: 50%;
-    right: var(--input-padding-x);
+    inset-inline-end: 0;
+    color: var(--ant-color-text-quaternary);
+    line-height: 1;
+    background: var(--ant-color-bg-container);
     transform: translateY(-50%);
     cursor: pointer;
     opacity: 0;
-    transition: opacity 0.2s, color 0.2s;
-    background: var(--input-bg);
-    color: var(--color-gray-400);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    transition:
+      opacity var(--ant-motion-duration-mid),
+      color var(--ant-motion-duration-mid);
     z-index: 1;
-    width: 1.2em;
-    height: 1.2em;
-    border-radius: 50%;
   }
 
-  .rc-picker:hover:not(.rc-picker-disabled) .rc-picker-clear {
+  .rc-picker-clear:hover {
+    color: var(--ant-color-text-tertiary);
+  }
+
+  .rc-picker:hover .rc-picker-clear {
     opacity: 1;
   }
-  
-  .rc-picker-clear:hover {
-    color: var(--color-gray-500);
-    background-color: var(--color-gray-100);
-  }
-  .rc-picker-clear-btn::after {
-    content: "×";
-    font-size: 1.2em;
-    line-height: 1;
+
+  /* Hide suffix when clear is shown on hover (approximate behavior) */
+  .rc-picker:hover .rc-picker-clear + .rc-picker-suffix {
+    opacity: 0;
   }
 
-  /* =========================================
-     STATES (HOVER, FOCUS, DISABLED, ERROR)
-     ========================================= */
-     
-  /* Hover State */
-  .rc-picker:hover:not(.rc-picker-disabled) {
-    border-color: var(--input-border-hover);
+  /* Sizes */
+  .rc-picker-large {
+    padding: 6.5px 11px;
+    font-size: var(--ant-font-size-lg);
+    border-radius: var(--ant-border-radius-lg);
   }
 
-  /* Focused State */
-  .rc-picker-focused {
-    border-color: var(--focus-border-color);
-    box-shadow: 0 0 0 3px var(--focus-ring-color);
-    z-index: 1;
+  .rc-picker-large .rc-picker-input > input {
+    font-size: var(--ant-font-size-lg);
   }
 
-  /* Disabled State */
-  .rc-picker-disabled {
-    background-color: var(--disabled-bg);
-    color: var(--disabled-text);
-    border-color: var(--disabled-border);
-    cursor: not-allowed;
-  }
-  
-  .rc-picker-disabled input {
-    cursor: not-allowed;
+  .rc-picker-small {
+    padding: 0px 7px;
+    border-radius: var(--ant-border-radius-sm);
+  }
+
+  /* --------------------------------------------------------------------------
+   Range Picker Specifics
+   -------------------------------------------------------------------------- */
+  .rc-picker-range {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .rc-picker-range .rc-picker-clear {
+    inset-inline-end: 11px; /* padding inline */
+  }
+
+  .rc-picker-range.rc-picker-small .rc-picker-clear {
+    inset-inline-end: 7px;
+  }
+
+  .rc-picker-range .rc-picker-active-bar {
+    bottom: -1px;
+    height: 2px;
+    margin-inline-start: 11px;
+    background: var(--ant-color-primary);
+    opacity: 0;
+    transition: all var(--ant-motion-duration-slow) ease-out;
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    width: 0; /* Dynamic width managed by JS usually, but styled here */
   }
 
-  /* Range Picker Specific */
   .rc-picker-range.rc-picker-focused .rc-picker-active-bar {
     opacity: 1;
   }
-  
+
   .rc-picker-range-separator {
     align-items: center;
     padding: 0 8px;
     line-height: 1;
-    color: var(--color-gray-400);
+    color: var(--ant-color-text-quaternary);
     display: inline-flex;
   }
 
-  .rc-picker-active-bar {
-    bottom: -1px;
-    height: 2px;
-    margin-left: var(--input-padding-x); /* Align with input start */
-    background: var(--color-brand-500);
-    opacity: 0;
-    transition: all 0.3s ease-out;
-    pointer-events: none;
-    z-index: 2;
-    position: absolute;
-    left: 0;
-    width: auto;
-  }
-
-  /* =========================================
-     PICKER DROPDOWN PANEL (THE MEAT)
-     ========================================= */
+  /* --------------------------------------------------------------------------
+   Dropdown Panel
+   -------------------------------------------------------------------------- */
   .rc-picker-dropdown {
-    position: absolute;
-    z-index: 1050;
     box-sizing: border-box;
-    font-size: var(--text-sm);
-    font-family: inherit;
+    margin: 0;
+    padding: 0;
+    color: var(--ant-color-text);
+    font-size: var(--ant-font-size);
+    list-style: none;
+    position: absolute;
+    z-index: var(--ant-picker-z-index-popup);
+    top: -9999px;
+    left: -9999px;
   }
 
   .rc-picker-dropdown-hidden {
     display: none;
   }
-  
-  /* Arrow styling removed for modern clean look (AntD v5/v6 typically removes large arrows) */
-  .rc-picker-dropdown .rc-picker-range-arrow {
-    display: none; 
-  }
 
-  /* Panel Container */
   .rc-picker-panel-container {
     overflow: hidden;
     vertical-align: top;
-    background: #fff;
-    border-radius: var(--radius-lg);
-    /* Elevation 3/4 equivalent */
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    transition: margin 0.3s;
-    border: 1px solid var(--color-gray-100);
+    background: var(--ant-color-bg-elevated);
+    border-radius: var(--ant-border-radius-lg);
+    box-shadow: var(--ant-box-shadow-secondary);
+    transition: margin var(--ant-motion-duration-slow);
+    display: inline-block;
+    pointer-events: auto;
   }
-  
+
+  /* Layout */
   .rc-picker-panel-layout {
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
   }
-  
-  .rc-picker-panel {
-    vertical-align: top;
-    background: transparent;
+
+  .rc-picker-panels {
     display: inline-flex;
-    flex-direction: column;
-  }
-  
-  /* Double Panel (Range Picker) */
-  .rc-picker-panel + .rc-picker-panel {
-    border-left: 1px solid var(--color-gray-100);
+    flex-wrap: nowrap;
   }
 
-  /* =========================================
-     HEADER SECTION
-     ========================================= */
+  .rc-picker-panel {
+    display: inline-flex;
+    flex-direction: column;
+    text-align: center;
+    background: transparent;
+    outline: none;
+    vertical-align: top;
+  }
+
+  /* Header */
   .rc-picker-header {
     display: flex;
     padding: 0 8px;
-    border-bottom: 1px solid var(--color-gray-100);
-    min-height: 40px;
-    align-items: center;
-    justify-content: space-between;
+    color: var(--ant-color-text-heading);
+    border-bottom: var(--ant-line-width) var(--ant-line-type) var(--ant-color-split);
+    min-width: var(--ant-picker-panel-width);
   }
 
   .rc-picker-header > * {
     flex: none;
   }
 
+  .rc-picker-header button {
+    padding: 0;
+    color: var(--ant-color-text-quaternary);
+    line-height: var(--ant-picker-text-height);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: color var(--ant-motion-duration-mid);
+    font-size: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.6em;
+  }
+
+  .rc-picker-header button:hover {
+    color: var(--ant-color-text);
+  }
+
   .rc-picker-header-view {
     flex: auto;
-    text-align: center;
-    font-weight: var(--font-weight-semibold);
+    font-weight: 600; /* Strong */
+    line-height: var(--ant-picker-text-height);
     display: flex;
     justify-content: center;
-    gap: 4px;
   }
 
   .rc-picker-header-view button {
-    color: var(--color-gray-800);
-    font-weight: inheriting;
+    color: inherit;
+    font-weight: inherit;
+    min-width: auto;
     padding: 0 4px;
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    font-size: var(--text-sm);
-    line-height: 40px;
-    transition: color 0.2s;
   }
-  
+
   .rc-picker-header-view button:hover {
-    color: var(--color-brand-500);
+    color: var(--ant-color-primary);
   }
 
-  /* Navigation Buttons (< << >> >) */
-  .rc-picker-header-super-prev-btn,
-  .rc-picker-header-prev-btn,
-  .rc-picker-header-next-btn,
-  .rc-picker-header-super-next-btn {
-    min-width: 1.6em;
-    font-size: 14px;
-    color: var(--color-gray-400);
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    line-height: 40px;
-    padding: 0 5px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    transition: color 0.2s;
+  /* Header Icons (Arrows) */
+  .rc-picker-prev-icon,
+  .rc-picker-next-icon,
+  .rc-picker-super-prev-icon,
+  .rc-picker-super-next-icon {
     position: relative;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
   }
 
-  .rc-picker-header-super-prev-btn:hover,
-  .rc-picker-header-prev-btn:hover,
-  .rc-picker-header-next-btn:hover,
-  .rc-picker-header-super-next-btn:hover {
-    color: var(--color-gray-900);
+  .rc-picker-prev-icon::before,
+  .rc-picker-next-icon::before,
+  .rc-picker-super-prev-icon::before,
+  .rc-picker-super-next-icon::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 7px;
+    height: 7px;
+    border: 0 solid currentColor;
+    border-block-start-width: 1.5px;
+    border-inline-start-width: 1.5px;
+    content: '';
   }
 
-  /* Arrow Symbols using pseudo elements if needed, or rely on RC Picker default text symbols but styled */
-  /* RC Picker default uses unicode arrows usually. */
+  .rc-picker-super-prev-icon::after,
+  .rc-picker-super-next-icon::after {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border: 0 solid currentColor;
+    border-block-start-width: 1.5px;
+    border-inline-start-width: 1.5px;
+    content: '';
+  }
 
-  /* =========================================
-     BODY SECTION (CALENDAR GRID)
-     ========================================= */
+  .rc-picker-prev-icon,
+  .rc-picker-super-prev-icon {
+    transform: rotate(-45deg);
+  }
+
+  .rc-picker-next-icon,
+  .rc-picker-super-next-icon {
+    transform: rotate(135deg);
+  }
+
+  /* Body */
   .rc-picker-body {
     padding: 8px 12px;
   }
@@ -289,348 +433,314 @@
     table-layout: fixed;
     border-collapse: collapse;
   }
-  
+
   .rc-picker-content th,
   .rc-picker-content td {
     position: relative;
-    min-width: 24px;
-    font-weight: 400;
+    min-width: var(--ant-picker-cell-width);
+    font-weight: normal;
   }
-  
+
   .rc-picker-content th {
-    height: 32px;
-    color: var(--color-gray-500);
-    line-height: 32px;
-    text-align: center;
+    height: 30px;
+    color: var(--ant-color-text);
+    vertical-align: middle;
   }
-  
+
+  /* Cells */
   .rc-picker-cell {
-    padding: 4px 0;
-    color: var(--color-gray-400); 
+    padding: 3px 0;
+    color: var(--ant-color-text-disabled);
     cursor: pointer;
   }
-  
+
   .rc-picker-cell-in-view {
-    color: var(--color-gray-800);
+    color: var(--ant-color-text);
   }
-  
-  .rc-picker-cell-disabled {
-    cursor: not-allowed;
-    color: var(--disabled-text);
-  }
-  .rc-picker-cell-disabled .rc-picker-cell-inner {
-    background: var(--disabled-bg);
+
+  .rc-picker-cell::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: var(--ant-picker-cell-height);
+    transform: translateY(-50%);
+    content: '';
+    pointer-events: none;
   }
 
-  /* Inner Cell (The Circle/Square) */
   .rc-picker-cell-inner {
     position: relative;
     z-index: 2;
     display: inline-block;
-    min-width: 24px;
-    height: 24px;
-    line-height: 24px;
-    border-radius: var(--radius-md); /* Ant Design v5 uses slightly rounded squares, not full circles usually, but we can do md radius */
-    transition: background 0.2s, border 0.2s, color 0.2s;
-    text-align: center;
-    margin: 0 auto;
-    padding: 0 4px; /* For longer text like months */
-  }
-  
-  /* Month/Year Panel cells are wider */
-  .rc-picker-month-panel .rc-picker-cell-inner, 
-  .rc-picker-year-panel .rc-picker-cell-inner,
-  .rc-picker-quarter-panel .rc-picker-cell-inner,
-  .rc-picker-decade-panel .rc-picker-cell-inner {
-    width: auto;
-    padding: 0 12px;
-    min-width: 48px;
+    min-width: var(--ant-picker-cell-height);
+    height: var(--ant-picker-cell-height);
+    line-height: var(--ant-picker-cell-height);
+    border-radius: var(--ant-border-radius-sm);
+    transition: background-color var(--ant-motion-duration-mid);
   }
 
-  /* Hover State */
-  .rc-picker-cell:hover:not(.rc-picker-cell-selected):not(.rc-picker-cell-range-start):not(.rc-picker-cell-range-end):not(.rc-picker-cell-disabled) .rc-picker-cell-inner {
-    background: var(--color-gray-100);
-  }
-  
-  /* Selected Date */
-  .rc-picker-cell-selected .rc-picker-cell-inner,
-  .rc-picker-cell-range-start .rc-picker-cell-inner,
-  .rc-picker-cell-range-end .rc-picker-cell-inner {
-    color: #fff;
-    background: var(--color-brand-500);
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-  }
-
-  .rc-picker-cell-selected:hover .rc-picker-cell-inner {
-    background: var(--color-brand-600);
+  /* Cell States */
+  .rc-picker-cell:hover:not(.rc-picker-cell-in-view):not(.rc-picker-cell-disabled) .rc-picker-cell-inner,
+  .rc-picker-cell:hover:not(.rc-picker-cell-selected):not(.rc-picker-cell-range-start):not(
+      .rc-picker-cell-range-end
+    ):not(.rc-picker-cell-disabled)
+    .rc-picker-cell-inner {
+    background: var(--ant-picker-cell-hover-bg);
   }
 
   /* Today */
-  .rc-picker-cell-today .rc-picker-cell-inner::before {
+  .rc-picker-cell-in-view.rc-picker-cell-today .rc-picker-cell-inner::before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
-    border: 1px solid var(--color-brand-500);
-    border-radius: var(--radius-md);
+    border: 1px solid var(--ant-color-primary);
+    border-radius: var(--ant-border-radius-sm);
     content: '';
-    transition: all 0.2s;
-  }
-  
-  .rc-picker-cell-selected.rc-picker-cell-today .rc-picker-cell-inner::before {
-    border-color: #fff; /* White border inside selected today */
   }
 
-  /* =========================================
-     RANGE SELECTION STYLING
-     ========================================= */
-  
-  /* The strip between start and end */
-  .rc-picker-cell-in-range > .rc-picker-cell-inner {
-    background: var(--color-brand-50);
-    border-radius: 0;
-    min-width: 100%; /* Fill the whole cell width */
-    color: var(--color-gray-800);
-  }
-  
-  .rc-picker-cell-in-range::before {
-    background: var(--color-brand-50);
+  /* Selected / Range Start / Range End */
+  .rc-picker-cell-in-view.rc-picker-cell-selected .rc-picker-cell-inner,
+  .rc-picker-cell-in-view.rc-picker-cell-range-start .rc-picker-cell-inner,
+  .rc-picker-cell-in-view.rc-picker-cell-range-end .rc-picker-cell-inner {
+    color: var(--ant-color-text-light-solid);
+    background: var(--ant-color-primary);
   }
 
-  /* Range Edge Adjustments */
-  .rc-picker-cell-range-start > .rc-picker-cell-inner {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
-  }
-  
-  .rc-picker-cell-range-end > .rc-picker-cell-inner {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
+  /* In Range Background */
+  .rc-picker-cell-in-view.rc-picker-cell-in-range::before,
+  .rc-picker-cell-in-view.rc-picker-cell-range-start::before,
+  .rc-picker-cell-in-view.rc-picker-cell-range-end::before {
+    background: var(--ant-picker-cell-active-with-range-bg);
   }
 
-  /* Ghost/Pseudo elements for continuous range background */
-  /* RC Picker handles this logic via class combinations. 
-     We need to ensure the background flows nicely. */
-  
-  .rc-picker-cell-range-start.rc-picker-cell-range-end .rc-picker-cell-inner {
-    border-radius: var(--radius-md);
+  .rc-picker-cell-in-view.rc-picker-cell-range-start:not(.rc-picker-cell-range-end) .rc-picker-cell-inner {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
-  /* Range Hover (when selecting the second date) */
-  .rc-picker-cell-range-hover-start::after,
-  .rc-picker-cell-range-hover-end::after,
-  .rc-picker-cell-range-hover::after {
-    content: ""; /* Should show dotted line or lighter highlight */
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-top: 2px dashed var(--color-brand-300);
-    transform: translateY(-50%);
-    z-index: 0;
-    display: none; /* AntD v6 doesn't really emphasize this as much, can keep simple */
+  .rc-picker-cell-in-view.rc-picker-cell-range-end:not(.rc-picker-cell-range-start) .rc-picker-cell-inner {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 
+  /* Disabled Cell */
+  .rc-picker-cell-disabled {
+    color: var(--ant-color-text-disabled);
+    cursor: not-allowed;
+  }
 
-  /* =========================================
-     TIME PANEL
-     ========================================= */
+  .rc-picker-cell-disabled .rc-picker-cell-inner {
+    background: transparent;
+  }
+
+  .rc-picker-cell-disabled::before {
+    background: var(--ant-color-bg-layout);
+  }
+
+  /* --------------------------------------------------------------------------
+   Special Panels (Year, Quarter, Month, Decade)
+   -------------------------------------------------------------------------- */
+  .rc-picker-year-panel .rc-picker-body,
+  .rc-picker-quarter-panel .rc-picker-body,
+  .rc-picker-month-panel .rc-picker-body {
+    padding: 0 8px;
+  }
+
+  .rc-picker-year-panel .rc-picker-cell-inner,
+  .rc-picker-quarter-panel .rc-picker-cell-inner,
+  .rc-picker-month-panel .rc-picker-cell-inner {
+    width: var(--ant-picker-year-month-cell-width);
+    padding: 0 8px;
+  }
+
+  .rc-picker-decade-panel .rc-picker-cell-inner {
+    padding: 0 4px;
+  }
+
+  .rc-picker-decade-panel .rc-picker-cell::before {
+    display: none;
+  }
+
+  /* --------------------------------------------------------------------------
+   Time Panel
+   -------------------------------------------------------------------------- */
   .rc-picker-time-panel {
-    border-left: 1px solid var(--color-gray-100);
+    display: flex;
+    flex-direction: column;
     width: auto;
+    min-width: auto;
   }
-  
+
   .rc-picker-time-panel .rc-picker-content {
     display: flex;
-    max-height: 224px;
+    flex: auto;
     height: 224px;
+    overflow: hidden;
   }
-  
+
   .rc-picker-time-panel-column {
     flex: 1 0 auto;
-    width: 60px; /* Wider for easier clicking */
-    margin: 0;
+    width: 56px;
+    margin: 4px 0;
     padding: 0;
     overflow-y: hidden;
-    text-align: left;
+    text-align: start;
     list-style: none;
-    transition: background 0.3s;
+    transition: background-color var(--ant-motion-duration-mid);
     overflow-x: hidden;
-    border-left: 1px solid var(--color-gray-100); /* Separator between hrs/min/sec */
+    border-left: 1px solid var(--ant-color-split);
   }
-  
+
   .rc-picker-time-panel-column:first-child {
-    border-left: 0;
+    border-left: none;
   }
 
   .rc-picker-time-panel-column:hover {
     overflow-y: auto;
   }
-  
+
   .rc-picker-time-panel-column > li {
     margin: 0;
     padding: 0;
   }
-  
-  .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
+
+  .rc-picker-time-panel-cell .rc-picker-time-panel-cell-inner {
     display: block;
     width: 100%;
     height: 28px;
     margin: 0;
     padding: 0 0 0 12px;
-    color: var(--color-gray-800);
+    color: var(--ant-color-text);
     line-height: 28px;
-    text-align: left;
+    border-radius: var(--ant-border-radius-sm);
     cursor: pointer;
-    transition: background 0.2s;
-  }
-  
-  .rc-picker-time-panel-column > li:hover .rc-picker-time-panel-cell-inner {
-    background: var(--color-gray-100);
-  }
-  
-  .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-selected .rc-picker-time-panel-cell-inner {
-    background: var(--color-brand-50);
-    color: var(--color-brand-600);
-    font-weight: 600;
-  }
-  
-  .rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled .rc-picker-time-panel-cell-inner {
-    color: var(--disabled-text);
-    cursor: not-allowed;
-    background: transparent;
+    transition: background-color var(--ant-motion-duration-mid);
   }
 
-  /* Date + Time Layout */
-  .rc-picker-datetime-panel {
-    display: flex;
-  }
-  .rc-picker-datetime-panel .rc-picker-date-panel,
-  .rc-picker-datetime-panel .rc-picker-time-panel {
-    transition: opacity 0.3s;
+  .rc-picker-time-panel-cell:hover .rc-picker-time-panel-cell-inner {
+    background: var(--ant-picker-cell-hover-bg);
   }
 
-  /* =========================================
-     FOOTER
-     ========================================= */
+  .rc-picker-time-panel-cell-selected .rc-picker-time-panel-cell-inner {
+    background: var(--ant-picker-cell-active-with-range-bg);
+  }
+
+  /* --------------------------------------------------------------------------
+   Footer
+   -------------------------------------------------------------------------- */
   .rc-picker-footer {
-    width: auto;
+    width: min-content;
     min-width: 100%;
     line-height: 38px;
     text-align: center;
-    border-top: 1px solid var(--color-gray-100);
-    padding: 0 12px;
+    border-top: 1px solid var(--ant-color-split);
   }
-  
+
   .rc-picker-footer-extra {
-    text-align: left;
+    padding: 0 12px;
+    line-height: 38px;
+    text-align: start;
   }
-  
-  /* Ranges (Presets) */
+
   .rc-picker-ranges {
     margin: 0;
-    padding: 0;
-    list-style: none;
+    padding: 4px 12px;
     overflow: hidden;
+    list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-  
-  .rc-picker-ranges > li {
-    display: inline-block;
-  }
-  
-  .rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag {
-    display: inline-block;
-    margin-right: 8px;
-    color: var(--color-brand-500);
-    cursor: pointer;
-    transition: color 0.2s;
-  }
-  
-  .rc-picker-ranges .rc-picker-preset > .rc-picker-preset-tag:hover {
-    color: var(--color-brand-600);
-  }
-  
-  .rc-picker-ranges .rc-picker-ok {
-    float: right;
-  }
-  
-  /* OK Button */
-  .rc-picker-ok button {
-    background: var(--color-brand-500);
-    color: #fff;
-    border: none;
-    border-radius: var(--radius-sm);
-    padding: 2px 12px;
-    height: 24px;
-    cursor: pointer;
-    font-size: var(--text-sm);
-    transition: background 0.2s;
-  }
-  
-  .rc-picker-ok button:hover {
-    background: var(--color-brand-600);
-  }
-  
-  .rc-picker-ok button:disabled {
-    background: var(--disabled-bg);
-    color: var(--disabled-text);
-    cursor: not-allowed;
-  }
 
   .rc-picker-now-btn {
-    color: var(--color-brand-500);
+    color: var(--ant-color-primary);
     cursor: pointer;
-    transition: color 0.2s;
-  }
-  .rc-picker-now-btn:hover {
-    color: var(--color-brand-600);
   }
 
-
-  /* =========================================
-     STATUS MODIFIERS (ERROR, WARNING, ETC)
-     ========================================= */
-  
-  .picker-status-error.rc-picker {
-    border-color: var(--color-error-500);
-  }
-  .picker-status-error.rc-picker:hover:not(.rc-picker-disabled) {
-    border-color: var(--color-error-600);
-  }
-  .picker-status-error.rc-picker.rc-picker-focused {
-    border-color: var(--color-error-600);
-    box-shadow: 0 0 0 3px var(--color-error-100);
+  .rc-picker-ok {
+    margin-inline-start: auto;
   }
 
-  .picker-status-warning.rc-picker {
-    border-color: var(--color-warning-500);
-  }
-  .picker-status-warning.rc-picker:hover:not(.rc-picker-disabled) {
-    border-color: var(--color-warning-600);
-  }
-  .picker-status-warning.rc-picker.rc-picker-focused {
-    border-color: var(--color-warning-600);
-    box-shadow: 0 0 0 3px var(--color-warning-100);
+  /* --------------------------------------------------------------------------
+   Variants
+   -------------------------------------------------------------------------- */
+  .rc-picker-borderless {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none !important;
   }
 
-  .picker-status-success.rc-picker {
-    border-color: var(--color-success-500);
+  .rc-picker-filled {
+    background: var(--ant-color-bg-layout);
+    border-color: transparent;
   }
-  .picker-status-success.rc-picker:hover:not(.rc-picker-disabled) {
-    border-color: var(--color-success-600);
+
+  .rc-picker-filled:hover,
+  .rc-picker-filled.rc-picker-focused {
+    background: var(--ant-color-bg-container);
+    border-color: var(--ant-color-primary);
   }
-  .picker-status-success.rc-picker.rc-picker-focused {
-    border-color: var(--color-success-600);
-    box-shadow: 0 0 0 3px var(--color-success-100);
+
+  /* --------------------------------------------------------------------------
+   Status
+   -------------------------------------------------------------------------- */
+  .rc-picker-status-error {
+    border-color: var(--ant-color-error) !important;
+  }
+
+  .rc-picker-status-error.rc-picker-focused {
+    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+  }
+
+  .rc-picker-status-warning {
+    border-color: var(--ant-color-warning) !important;
+  }
+
+  .rc-picker-status-warning.rc-picker-focused {
+    box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
+  }
+
+  /* --------------------------------------------------------------------------
+   Multiple
+   -------------------------------------------------------------------------- */
+  .rc-picker-multiple .rc-picker-selector {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    padding: 1px 4px;
+  }
+
+  .rc-picker-multiple .rc-picker-selection-item {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    margin-inline-end: 4px;
+    padding-inline-start: 8px;
+    padding-inline-end: 4px;
+    background: var(--ant-color-bg-layout);
+    border-radius: var(--ant-border-radius-sm);
+    cursor: default;
+    line-height: 22px;
+  }
+
+  .rc-picker-multiple .rc-picker-selection-item-remove {
+    color: var(--ant-color-text-quaternary);
+    font-size: 10px;
+    cursor: pointer;
+    display: inline-flex;
+    margin-left: 4px;
+    transition: color var(--ant-motion-duration-mid);
+  }
+
+  .rc-picker-multiple .rc-picker-selection-item-remove:hover {
+    color: var(--ant-color-text-tertiary);
   }
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index af24e8b..9a6ad6a 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,2 +1,5 @@
-// components
-export * from "./components";
+// UI Components
+export * from './components';
+
+// UI utils
+export * from './utils/cn';
diff --git a/packages/ui/src/providers/ui-provider.tsx b/packages/ui/src/providers/ui-provider.tsx
new file mode 100644
index 0000000..43d6330
--- /dev/null
+++ b/packages/ui/src/providers/ui-provider.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { ConfigProvider, App } from 'antd';
+
+export const UIProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ConfigProvider>
+      <App>{children}</App>
+    </ConfigProvider>
+  );
+};
diff --git a/packages/ui/src/utils/cn.ts b/packages/ui/src/utils/cn.ts
new file mode 100644
index 0000000..563be8c
--- /dev/null
+++ b/packages/ui/src/utils/cn.ts
@@ -0,0 +1,11 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Intelligently merges classnames.
+ * 1. clsx: handles conditional logic (true/false)
+ * 2. twMerge: removes conflicting Tailwind classes
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e05bbf..c32a62f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,6 +161,9 @@ importers:
 
   packages/ui:
     dependencies:
+      '@ant-design/icons':
+        specifier: ^6.1.0
+        version: 6.1.0(react-dom@19.2.3)(react@19.2.3)
       '@rc-component/checkbox':
         specifier: ^1.0.1
         version: 1.0.1(react-dom@19.2.3)(react@19.2.3)
@@ -188,6 +191,12 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@5.4.17)
+      antd:
+        specifier: ^6.2.3
+        version: 6.2.3(react-dom@19.2.3)(react@19.2.3)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       dayjs:
         specifier: ^1.11.19
         version: 1.11.19
@@ -265,6 +274,80 @@ importers:
 
 packages:
 
+  /@ant-design/colors@8.0.1:
+    resolution: {integrity: sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==}
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+    dev: false
+
+  /@ant-design/cssinjs-utils@2.0.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-Mq3Hm6fJuQeFNKSp3+yT4bjuhVbdrsyXE2RyfpJFL0xiYNZdaJ6oFaE3zFrzmHbmvTd2Wp3HCbRtkD4fU+v2ZA==}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    dependencies:
+      '@ant-design/cssinjs': 2.0.3(react-dom@19.2.3)(react@19.2.3)
+      '@babel/runtime': 7.28.4
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@ant-design/cssinjs@2.0.3(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-HAo8SZ3a6G8v6jT0suCz1270na6EA3obeJWM4uzRijBhdwdoMAXWK2f4WWkwB28yUufsfk3CAhN1coGPQq4kNQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@emotion/hash': 0.8.0
+      '@emotion/unitless': 0.7.5
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      csstype: 3.2.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      stylis: 4.3.6
+    dev: false
+
+  /@ant-design/fast-color@3.0.1:
+    resolution: {integrity: sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==}
+    engines: {node: '>=8.x'}
+    dev: false
+
+  /@ant-design/icons-svg@4.4.2:
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+    dev: false
+
+  /@ant-design/icons@6.1.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-KrWMu1fIg3w/1F2zfn+JlfNDU8dDqILfA5Tg85iqs1lf8ooyGlbkA+TkwfOKKgqpUmAiRY1PTFpuOU2DAIgSUg==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@ant-design/colors': 8.0.1
+      '@ant-design/icons-svg': 4.4.2
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@ant-design/react-slick@2.0.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-HMS9sRoEmZey8LsE/Yo6+klhlzU12PisjrVcydW3So7RdklyEd2qehyU6a7Yp+OYN72mgsYs3NFCyP2lCPFVqg==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.28.4
+      clsx: 2.1.1
+      json2mq: 0.2.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      throttle-debounce: 5.0.2
+    dev: false
+
   /@babel/code-frame@7.27.1:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -468,6 +551,14 @@ packages:
     dev: false
     optional: true
 
+  /@emotion/hash@0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    dev: false
+
+  /@emotion/unitless@0.7.5:
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+    dev: false
+
   /@esbuild/aix-ppc64@0.21.5:
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -1160,6 +1251,20 @@ packages:
       '@babel/runtime': 7.28.4
     dev: false
 
+  /@rc-component/cascader@1.11.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-VDiEsskThWi8l0/1Nquc9I4ytcMKQYAb9Jkm6wiX5O5fpcMRsm+b8OulBMbr/b4rFTl/2y2y4GdKqQ+2whD+XQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/select': 1.5.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tree': 1.1.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/checkbox@1.0.1(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-08yTH8m+bSm8TOqbybbJ9KiAuIATti6bDs2mVeSfu4QfEnyeF6X0enHVvD1NEAyuBWEAo56QtLe++MYs2D9XiQ==}
     peerDependencies:
@@ -1172,6 +1277,85 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/collapse@1.2.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-ZRYSKSS39qsFx93p26bde7JUZJshsUBEQRlRXPuJYlAiNX0vyYlF5TsAm8JZN3LcF8XvKikdzPbgAtXSbkLUkw==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/color-picker@3.0.3(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-V7gFF9O7o5XwIWafdbOtqI4BUUkEUkgdBwp6favy3xajMX/2dDqytFaiXlcwrpq6aRyPLp5dKLAG5RFKLXMeGA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/context@2.0.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-HyZbYm47s/YqtP6pKXNMjPEMaukyg7P0qVfgMLzr7YiFNMHbK2fKTAGzms9ykfGHSfyf75nBbgWw+hHkp+VImw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/dialog@1.8.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-CwDSjpjZ1FcgsdKFPuSoYfi9Vbt2bp+ak4Pzkwq4APQC8DopJKWetRu1V+HE9vI1CNAeqvT5WAvAxE6RiDhl7A==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/portal': 2.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/drawer@1.4.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-kNJQie/QjJO5wGeWrZQwSGeuo8staxXx1nYN+dpK2UY7i8teo5PQdZ6ukKSnnW9vmPXsLn3F5nKYRbf43e8+5g==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/portal': 2.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/dropdown@1.0.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-6PY2ecUSYhDPhkNHHb4wfeAya04WhpmUSKzdR60G+kMNVUCX2vjT/AgTS0Lz0I/K6xrPMJ3enQbwVpeN3sHCgg==}
+    peerDependencies:
+      react: '>=16.11.0'
+      react-dom: '>=16.11.0'
+    dependencies:
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/form@1.6.2(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-OgIn2RAoaSBqaIgzJf/X6iflIa9LpTozci1lagLBdURDFhGA370v0+T0tXxOi8YShMjTha531sFhwtnrv+EJaQ==}
     engines: {node: '>=8.x'}
@@ -1186,6 +1370,20 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/image@1.6.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-tSfn2ZE/oP082g4QIOxeehkmgnXB7R+5AFj/lIFr4k7pEuxHBdyGIq9axoCY9qea8NN0DY6p4IB/F07tLqaT5A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/portal': 2.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/input-number@1.6.2(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-Gjcq7meZlCOiWN1t1xCC+7/s85humHVokTBI7PJgTfoyw5OWF74y3e6P8PHX104g9+b54jsodFIzyaj6p8LI9w==}
     peerDependencies:
@@ -1211,6 +1409,37 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/mentions@1.6.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-KIkQNP6habNuTsLhUv0UGEOwG67tlmE7KNIJoQZZNggEZl5lQJTytFDb69sl5CK3TDdISCTjKP3nGEBKgT61CQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/input': 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/menu': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/textarea': 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/menu@1.2.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-VWwDuhvYHSnTGj4n6bV3ISrLACcPAzdPOq3d0BzkeiM5cve8BEYfvkEhNoM0PLzv51jpcejeyrLXeMVIJ+QJlg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/overflow': 1.0.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/mini-decimal@1.1.0:
     resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==}
     engines: {node: '>=8.x'}
@@ -1218,6 +1447,18 @@ packages:
       '@babel/runtime': 7.28.4
     dev: false
 
+  /@rc-component/motion@1.1.6(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-aEQobs/YA0kqRvHIPjQvOytdtdRVyhf/uXAal4chBjxDu6odHckExJzjn2D+Ju1aKK6hx3pAs6BXdV9+86xkgQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/motion@1.2.0(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-Vx+OL3I1l3HWflc1miXgjeFR9OnStKD8FOMLJCdby3I6HAOi8jo7of7iqF4hqvxQhoP31RTlNk+C+v5QjytAVg==}
     peerDependencies:
@@ -1230,6 +1471,32 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/mutate-observer@2.0.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-AyarjoLU5YlxuValRi+w8JRH2Z84TBbFO2RoGWz9d8bSu0FqT8DtugH3xC3BV7mUwlmROFauyWuXFuq4IFbH+w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/notification@1.2.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-OX3J+zVU7rvoJCikjrfW7qOUp7zlDeFBK2eA3SFbGSkDqo63Sl4Ss8A04kFP+fxHSxMDIS9jYVEZtU1FNCFuBA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/overflow@1.0.0(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-GSlBeoE0XTBi5cf3zl8Qh7Uqhn7v8RrlJ8ajeVpEkNe94HWy5l5BQ0Mwn2TVUq9gdgbfEMUmTX7tJFAg7mz0Rw==}
     peerDependencies:
@@ -1244,6 +1511,18 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/pagination@1.2.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-YcpUFE8dMLfSo6OARJlK6DbHHvrxz7pMGPGmC/caZSJJz6HRKHC1RPP001PRHCvG9Z/veD039uOQmazVuLJzlw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/picker@1.9.0(dayjs@1.11.19)(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-OLisdk8AWVCG9goBU1dWzuH5QlBQk8jktmQ6p0/IyBFwdKGwyIZOSjnBYo8hooHiTdl0lU+wGf/OfMtVBw02KQ==}
     engines: {node: '>=12.x'}
@@ -1287,6 +1566,43 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/progress@1.0.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-WZUnH9eGxH1+xodZKqdrHke59uyGZSWgj5HBM5Kwk5BrTMuAORO7VJ2IP5Qbm9aH3n9x3IcesqHHR0NWPBC7fQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/qrcode@1.1.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-LfLGNymzKdUPjXUbRP+xOhIWY4jQ+YMj5MmWAcgcAq1Ij8XP7tRmAXqyuv96XvLUBE/5cA8hLFl9eO1JQMujrA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/rate@1.0.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-bkXxeBqDpl5IOC7yL7GcSYjQx9G8H+6kLYQnNZWeBYq2OYIv1MONd6mqKTjnnJYpV0cQIU2z3atdW0j1kttpTw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/resize-observer@1.1.1(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-NfXXMmiR+SmUuKE1NwJESzEUYUFWIDUn2uXpxCTOLwiRUUakd62DRNFjRJArgzyFW8S5rsL4aX5XlyIXyC/vRA==}
     peerDependencies:
@@ -1298,6 +1614,62 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/segmented@1.3.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-5J/bJ01mbDnoA6P/FW8SxUvKn+OgUSTZJPzCNnTBntG50tzoP7DydGhqxp7ggZXZls7me3mc2EQDXakU3iTVFg==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/select@1.5.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-7wqD5D4I2+fc5XoB4nzDDK656QPlDnFAUaxLljkU1wwSpi4+MZxndv9vgg7NQfveuuf0/ilUdOjuPg7NPl7Mmg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/overflow': 1.0.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/virtual-list': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/slider@1.0.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-uDhEPU1z3WDfCJhaL9jfd2ha/Eqpdfxsn0Zb0Xcq1NGQAman0TWaR37OWp2vVXEOdV2y0njSILTMpTfPV1454g==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/steps@1.2.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-/yVIZ00gDYYPHSY0JP+M+s3ZvuXLu2f9rEjQqiUDs7EcYsUYrpJ/1bLj9aI9R7MBR3fu/NGh6RM9u2qGfqp+Nw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/switch@1.0.3(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-Jgi+EbOBquje/XNdofr7xbJQZPYJP+BlPfR0h+WN4zFkdtB2EWqEfvkXJWeipflwjWip0/17rNbxEAqs8hVHfw==}
     peerDependencies:
@@ -1310,6 +1682,39 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/table@1.9.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-FVI5ZS/GdB3BcgexfCYKi3iHhZS3Fr59EtsxORszYGrfpH1eWr33eDNSYkVfLI6tfJ7vftJDd9D5apfFWqkdJg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/context': 2.0.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/virtual-list': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/tabs@1.7.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-J48cs2iBi7Ho3nptBxxIqizEliUC+ExE23faspUQKGQ550vaBlv3aGF8Epv/UB1vFWeoJDTW/dNzgIU0Qj5i/w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/dropdown': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/menu': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/textarea@1.1.2(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-9rMUEODWZDMovfScIEHXWlVZuPljZ2pd1LKNjslJVitn4SldEzq5vO1CL3yy3Dnib6zZal2r2DPtjy84VVpF6A==}
     peerDependencies:
@@ -1324,6 +1729,63 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/tooltip@1.4.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-8Rx5DCctIlLI4raR0I0xHjVTf1aF48+gKCNeAAo5bmF5VoR5YED+A/XEqzXv9KKqrJDRcd3Wndpxh2hyzrTtSg==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/tour@2.3.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-K04K9r32kUC+auBSQfr+Fss4SpSIS9JGe56oq/ALAX0p+i2ylYOI1MgR83yBY7v96eO6ZFXcM/igCQmubps0Ow==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/portal': 2.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/tree-select@1.6.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-UvEGmZT+gcVvRwImAZg3/sXw9nUdn4FmCs1rSIMWjEXEIAo0dTGmIyWuLCvs+1rGe9AZ7CHMPiQUEbdadwV0fw==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/select': 1.5.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tree': 1.1.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
+  /@rc-component/tree@1.1.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-HZs3aOlvFgQdgrmURRc/f4IujiNBf4DdEeXUlkS0lPoLlx9RoqsZcF0caXIAMVb+NaWqKtGQDnrH8hqLCN5zlA==}
+    engines: {node: '>=10.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/motion': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/virtual-list': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/trigger@3.9.0(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-X8btpwfrT27AgrZVOz4swclhEHTZcqaHeQMXXBgveagOiakTa36uObXbdwerXffgV8G9dH1fAAE0DHtVQs8EHg==}
     engines: {node: '>=8.x'}
@@ -1340,6 +1802,18 @@ packages:
       react-dom: 19.2.3(react@19.2.3)
     dev: false
 
+  /@rc-component/upload@1.1.0(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-LIBV90mAnUE6VK5N4QvForoxZc4XqEYZimcp7fk+lkE4XwHHyJWxpIXQQwMU8hJM+YwBbsoZkGksL1sISWHQxw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rc-component/util@1.7.0(react-dom@19.2.3)(react@19.2.3):
     resolution: {integrity: sha512-tIvIGj4Vl6fsZFvWSkYw9sAfiCKUXMyhVz6kpKyZbwyZyRPqv2vxYZROdaO1VB4gqTNvUZFXh6i3APUiterw5g==}
     peerDependencies:
@@ -1352,6 +1826,33 @@ packages:
       react-is: 18.3.1
     dev: false
 
+  /@rc-component/util@1.8.1(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-Ku6BzF0Ov5L9U3ewFJZDQ//iWCR2nIkLBBiYSrhxIVl3PqeUqiYP2W8gNI8qoKAFQKZdYcS0+B6+SQTDtv/erw==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      is-mobile: 5.0.0
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-is: 18.3.1
+    dev: false
+
+  /@rc-component/virtual-list@1.0.2(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-uvTol/mH74FYsn5loDGJxo+7kjkO4i+y4j87Re1pxJBs0FaeuMuLRzQRGaXwnMcV1CxpZLi2Z56Rerj2M00fjQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    dev: false
+
   /@rolldown/pluginutils@1.0.0-beta.53:
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
     dev: true
@@ -3073,6 +3574,68 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
+  /antd@6.2.3(react-dom@19.2.3)(react@19.2.3):
+    resolution: {integrity: sha512-q92r7/hcQAR2iv6CCysdz7c2Pdl/3nhslc3azF9e6AEl4knO6v+nlaeor1oF2jBanZ/tiw2m3NprOVUgPDvyhg==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@ant-design/colors': 8.0.1
+      '@ant-design/cssinjs': 2.0.3(react-dom@19.2.3)(react@19.2.3)
+      '@ant-design/cssinjs-utils': 2.0.2(react-dom@19.2.3)(react@19.2.3)
+      '@ant-design/fast-color': 3.0.1
+      '@ant-design/icons': 6.1.0(react-dom@19.2.3)(react@19.2.3)
+      '@ant-design/react-slick': 2.0.0(react-dom@19.2.3)(react@19.2.3)
+      '@babel/runtime': 7.28.4
+      '@rc-component/cascader': 1.11.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/checkbox': 1.0.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/collapse': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/color-picker': 3.0.3(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/dialog': 1.8.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/drawer': 1.4.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/dropdown': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/form': 1.6.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/image': 1.6.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/input': 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/input-number': 1.6.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/mentions': 1.6.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/menu': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/motion': 1.1.6(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/mutate-observer': 2.0.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/notification': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/pagination': 1.2.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/picker': 1.9.0(dayjs@1.11.19)(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/progress': 1.0.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/qrcode': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/rate': 1.0.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/resize-observer': 1.1.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/segmented': 1.3.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/select': 1.5.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/slider': 1.0.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/steps': 1.2.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/switch': 1.0.3(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/table': 1.9.1(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tabs': 1.7.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/textarea': 1.1.2(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tooltip': 1.4.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tour': 2.3.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tree': 1.1.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/tree-select': 1.6.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/trigger': 3.9.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/upload': 1.1.0(react-dom@19.2.3)(react@19.2.3)
+      '@rc-component/util': 1.8.1(react-dom@19.2.3)(react@19.2.3)
+      clsx: 2.1.1
+      dayjs: 1.11.19
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      scroll-into-view-if-needed: 3.1.0
+      throttle-debounce: 5.0.2
+    transitivePeerDependencies:
+      - date-fns
+      - luxon
+      - moment
+    dev: false
+
   /arch@2.2.0:
     resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
     dev: true
@@ -3452,6 +4015,10 @@ packages:
       - supports-color
     dev: true
 
+  /compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+    dev: false
+
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -3492,7 +4059,6 @@ packages:
 
   /csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-    dev: true
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -5136,6 +5702,12 @@ packages:
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  /json2mq@0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+    dependencies:
+      string-convert: 0.2.1
+    dev: false
+
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -6641,6 +7213,12 @@ packages:
   /scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  /scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+    dev: false
+
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -6874,6 +7452,10 @@ packages:
       - utf-8-validate
     dev: true
 
+  /string-convert@0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+    dev: false
+
   /string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -7021,6 +7603,10 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  /stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+    dev: false
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -7073,6 +7659,11 @@ packages:
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  /throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
     dev: true