feat: Implement Calendar component, UiProvider, and a cn utility, while enhancing picker components with new icons and styles.

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">
+    <div className="p-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">{children}</div>
-      {children}
-    </div>
   </section>
 );
 
@@ -35,9 +43,7 @@ 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">
+    <div className="w-full">{children}</div>
-      {children}
-    </div>
   </div>
 );
 
@@ -45,12 +51,9 @@ 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">
+          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">Component Picker Showcase</h1>
-            Component Picker Showcase
-          </h1>
           <p className="mt-2 text-lg text-gray-600">
             Fully typed, Tailwind-styled, and robust date manipulation components.
           </p>
@@ -81,8 +84,6 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           <Card label="Year Picker" code="<YearPicker />">
             <YearPicker placeholder="Select year..." className="w-full" />
           </Card>
-
-          
         </Section>
 
         {/* 2. Range Pickers */}
@@ -110,8 +111,6 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           <Card label="Year Range" code="<YearRangePicker />">
             <YearRangePicker className="w-full" />
           </Card>
-
-        
         </Section>
 
         {/* 3. Validation States */}
@@ -141,18 +140,11 @@ 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 
+            <DatePicker showTime format="YYYY-MM-DD HH:mm" placeholder="Select date & time" />
-              showTime 
-              format="YYYY-MM-DD HH:mm" 
-              placeholder="Select date & time" 
-            />
           </Card>
 
           <Card label="Custom Format" code='format="DD/MM/YYYY"'>
-            <DatePicker 
+            <DatePicker format="DD/MM/YYYY" placeholder="31/12/2025" />
-              format="DD/MM/YYYY" 
-              placeholder="31/12/2025" 
-            />
           </Card>
 
           <Card label="Range with Presets" code="presets={[...]}">
@@ -170,6 +162,46 @@ export default function PickerShowcase({status}: {status: InputStatusType}) {
           </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>
   );

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 />
+              {/* <SwitchShowcase /> */}
-              <CheckboxShowcase status={selectedStatus} />
+              {/* <CheckboxShowcase status={selectedStatus} /> */}
-              <InputShowCase status={selectedStatus} />
+              {/* <InputShowCase status={selectedStatus} /> */}
+              <PickerShowcase status={selectedStatus} />
             </div>
           </div>
         </section>

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",

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';
 

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);
+  }
+}

packages/ui/src/index.ts

@@ -1,2 +1,5 @@
-// components
+// UI Components
-export * from "./components";
+export * from './components';
+
+// UI utils
+export * from './utils/cn';

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>
+  );
+};

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));
+}

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