@kimkihwan/cytur-design-system 0.5.0 → 0.5.2

package/dist/index.css

@@ -1,2 +1,2 @@
-:root{--base-button-primary-bg-default:#0a9e9e;--base-button-primary-bg-hover:#078080;--base-button-primary-bg-active:#056363;--base-button-primary-bg-disabled:#e2e6ea;--base-button-primary-text-default:#fff;--base-button-primary-text-disabled:#a3adb8;--base-button-secondary-bg-default:transparent;--base-button-secondary-bg-hover:#e0f7f7;--base-button-secondary-bg-active:#056363;--base-button-secondary-bg-disabled:#e2e6ea;--base-button-secondary-text-default:#0a9e9e;--base-button-secondary-text-disabled:#a3adb8;--base-button-secondary-border-default:#80dddd;--base-button-secondary-border-disabled:#e2e6ea;--base-button-ghost-bg-default:transparent;--base-button-ghost-bg-hover:#f8fafb;--base-button-ghost-bg-active:#d8d8d8;--base-button-ghost-bg-disabled:#e2e6ea;--base-button-ghost-text-default:#111827;--base-button-ghost-text-disabled:#a3adb8;--base-button-danger-bg-default:#dc2626;--base-button-danger-bg-hover:#b91c1c;--base-button-danger-bg-active:#991b1b;--base-button-danger-bg-disabled:#e2e6ea;--base-button-danger-text-default:#fff;--base-button-danger-text-disabled:#a3adb8;--base-input-bg-default:#fff;--base-input-bg-disabled:#f8fafc;--base-input-bg-error:#fef2f2;--base-input-bg-warning:#fffbeb;--base-input-bg-readonly:#f8fafc;--base-input-border-default:#e2e8f0;--base-input-border-hover:#cbd5e1;--base-input-border-focus:#0a9e9e;--base-input-border-error:#ef4444;--base-input-border-warning:#f59e0b;--base-input-border-success:#22c55e;--base-input-text-default:#0f172a;--base-input-text-value:#0f172a;--base-input-text-placeholder:#94a3b8;--base-input-text-disabled:#94a3b8;--base-input-text-error:#ef4444;--base-input-text-success:#22c55e;--base-input-text-warning:#f59e0b;--base-input-text-helper:#64748b;--base-input-icon:#94a3b8;--base-input-shadow-focus:0 0 0 2px #0a9e9e1f;--base-checkbox-unchecked-bg-default:#fff;--base-checkbox-unchecked-bg-hover:#f8fafb;--base-checkbox-unchecked-bg-active:#f1f3f5;--base-checkbox-unchecked-bg-disabled:#f1f3f5;--base-checkbox-unchecked-border-default:#e1e6ea;--base-checkbox-unchecked-border-hover:#0db5b5;--base-checkbox-unchecked-border-active:#0db5b5;--base-checkbox-unchecked-border-disabled:#e1e6ea;--base-checkbox-checked-bg-default:#0db5b5;--base-checkbox-checked-bg-hover:#0a9e9e;--base-checkbox-checked-bg-active:#078080;--base-checkbox-checked-bg-disabled:#e6f7f7;--base-checkbox-checked-border-default:#0db5b5;--base-checkbox-checked-border-hover:#0a9e9e;--base-checkbox-checked-border-active:#078080;--base-checkbox-checked-border-disabled:#e6f7f7;--base-checkbox-border-focus:#26c6c6;--base-checkbox-icon-default:#fff;--base-checkbox-icon-disabled:#cdd3d9;--base-checkbox-shadow-focus:0 0 0 2px #26c6c633;--base-radio-bg-default:#fff;--base-radio-bg-hover:#fff;--base-radio-bg-active:#f8fafb;--base-radio-bg-disabled:#f1f3f5;--base-radio-unselected-border-default:#e1e6ea;--base-radio-unselected-border-hover:#0db5b5;--base-radio-unselected-border-active:#0db5b5;--base-radio-unselected-border-disabled:#e1e6ea;--base-radio-selected-border-default:#0db5b5;--base-radio-selected-border-hover:#0a9e9e;--base-radio-selected-border-active:#078080;--base-radio-selected-border-disabled:#e1e6ea;--base-radio-dot-default:#0db5b5;--base-radio-dot-hover:#0a9e9e;--base-radio-dot-active:#078080;--base-radio-dot-disabled:#a3adb8;--base-radio-border-focus:#26c6c6;--base-radio-shadow-focus:0 0 0 2px #26c6c633;--base-toggle-on-bg-default:#0db5b5;--base-toggle-on-bg-hover:#0a9e9e;--base-toggle-on-bg-active:#078080;--base-toggle-on-bg-disabled:#e6f7f7;--base-toggle-off-bg-default:#cdd3d9;--base-toggle-off-bg-hover:#a3adb8;--base-toggle-off-bg-active:#6b7b8d;--base-toggle-off-bg-disabled:#e2e6ea;--base-toggle-thumb-bg-default:#fff;--base-toggle-thumb-bg-disabled:#f1f3f5;--base-toggle-border-focus:#26c6c6;--base-toggle-shadow-focus:0 0 0 2px #26c6c633;--base-color-primary:#0a9e9e;--base-color-text-default:#0f172a;--base-color-text-secondary:#475569;--base-color-text-tertiary:#64748b;--base-color-text-muted:#94a3b8;--base-color-border-default:#e1e4e9;--base-color-border-light:#f1f3f6;--base-color-bg-default:#fff;--base-color-bg-subtle:#f9f9f9;--base-color-bg-muted:#f1f5f9;--base-color-focus:#0a9e9e;--base-color-success:#22c55e;--base-color-warning:#f59e0b;--base-color-error:#ef4444;--base-color-info:#3b82f6;--rm-button-primary-bg-default:#2563eb;--rm-button-primary-bg-hover:#1d4ed8;--rm-button-primary-bg-active:#1e40af;--rm-button-primary-bg-disabled:#e2e6ea;--rm-button-primary-text-default:#fff;--rm-button-primary-text-disabled:#a3adb8;--rm-button-secondary-bg-default:transparent;--rm-button-secondary-bg-hover:#eff6ff;--rm-button-secondary-bg-active:#1e40af;--rm-button-secondary-bg-disabled:#e2e6ea;--rm-button-secondary-text-default:#2563eb;--rm-button-secondary-text-disabled:#a3adb8;--rm-button-secondary-border-default:#93c5fd;--rm-button-secondary-border-disabled:#e2e6ea;--rm-button-ghost-bg-default:transparent;--rm-button-ghost-bg-hover:#f8fafc;--rm-button-ghost-bg-active:#e2e8f0;--rm-button-ghost-bg-disabled:#e2e6ea;--rm-button-ghost-text-default:#111827;--rm-button-ghost-text-disabled:#a3adb8;--rm-button-danger-bg-default:#dc2626;--rm-button-danger-bg-hover:#b91c1c;--rm-button-danger-bg-active:#991b1b;--rm-button-danger-bg-disabled:#e2e6ea;--rm-button-danger-text-default:#fff;--rm-button-danger-text-disabled:#a3adb8;--rm-input-bg-default:#fff;--rm-input-bg-disabled:#f8fafc;--rm-input-bg-error:#fef2f2;--rm-input-bg-warning:#fffbeb;--rm-input-bg-readonly:#f8fafc;--rm-input-border-default:#e2e8f0;--rm-input-border-hover:#cbd5e1;--rm-input-border-focus:#2563eb;--rm-input-border-error:#ef4444;--rm-input-border-warning:#f59e0b;--rm-input-border-success:#22c55e;--rm-input-text-default:#0f172a;--rm-input-text-value:#0f172a;--rm-input-text-placeholder:#94a3b8;--rm-input-text-disabled:#94a3b8;--rm-input-text-error:#ef4444;--rm-input-text-success:#22c55e;--rm-input-text-warning:#f59e0b;--rm-input-text-helper:#64748b;--rm-input-icon:#94a3b8;--rm-input-shadow-focus:0 0 0 2px #2563eb1f;--rm-checkbox-unchecked-bg-default:#fff;--rm-checkbox-unchecked-bg-hover:#f8fafc;--rm-checkbox-unchecked-bg-active:#f1f3f5;--rm-checkbox-unchecked-bg-disabled:#f1f3f5;--rm-checkbox-unchecked-border-default:#e1e6ea;--rm-checkbox-unchecked-border-hover:#3b82f6;--rm-checkbox-unchecked-border-active:#3b82f6;--rm-checkbox-unchecked-border-disabled:#e1e6ea;--rm-checkbox-checked-bg-default:#3b82f6;--rm-checkbox-checked-bg-hover:#2563eb;--rm-checkbox-checked-bg-active:#1d4ed8;--rm-checkbox-checked-bg-disabled:#dbeafe;--rm-checkbox-checked-border-default:#3b82f6;--rm-checkbox-checked-border-hover:#2563eb;--rm-checkbox-checked-border-active:#1d4ed8;--rm-checkbox-checked-border-disabled:#dbeafe;--rm-checkbox-border-focus:#60a5fa;--rm-checkbox-icon-default:#fff;--rm-checkbox-icon-disabled:#cdd3d9;--rm-checkbox-shadow-focus:0 0 0 2px #3b82f633;--rm-radio-bg-default:#fff;--rm-radio-bg-hover:#fff;--rm-radio-bg-active:#f8fafc;--rm-radio-bg-disabled:#f1f3f5;--rm-radio-unselected-border-default:#e1e6ea;--rm-radio-unselected-border-hover:#3b82f6;--rm-radio-unselected-border-active:#3b82f6;--rm-radio-unselected-border-disabled:#e1e6ea;--rm-radio-selected-border-default:#3b82f6;--rm-radio-selected-border-hover:#2563eb;--rm-radio-selected-border-active:#1d4ed8;--rm-radio-selected-border-disabled:#e1e6ea;--rm-radio-dot-default:#3b82f6;--rm-radio-dot-hover:#2563eb;--rm-radio-dot-active:#1d4ed8;--rm-radio-dot-disabled:#a3adb8;--rm-radio-border-focus:#60a5fa;--rm-radio-shadow-focus:0 0 0 2px #3b82f633;--rm-toggle-on-bg-default:#3b82f6;--rm-toggle-on-bg-hover:#2563eb;--rm-toggle-on-bg-active:#1d4ed8;--rm-toggle-on-bg-disabled:#dbeafe;--rm-toggle-off-bg-default:#cdd3d9;--rm-toggle-off-bg-hover:#a3adb8;--rm-toggle-off-bg-active:#6b7b8d;--rm-toggle-off-bg-disabled:#e2e6ea;--rm-toggle-thumb-bg-default:#fff;--rm-toggle-thumb-bg-disabled:#f1f3f5;--rm-toggle-border-focus:#60a5fa;--rm-toggle-shadow-focus:0 0 0 2px #3b82f633;--rm-color-primary:#2563eb;--rm-color-text-default:#0f172a;--rm-color-text-secondary:red;--rm-color-text-tertiary:#64748b;--rm-color-text-muted:#94a3b8;--rm-color-border-default:#e1e4e9;--rm-color-border-light:#f1f3f6;--rm-color-bg-default:#fff;--rm-color-bg-subtle:#f9fafb;--rm-color-bg-muted:#f1f5f9;--rm-color-focus:#2563eb;--rm-color-success:#22c55e;--rm-color-warning:#f59e0b;--rm-color-error:#ef4444;--rm-color-info:#3b82f6;--csc-button-primary-bg-default:#4f46e5;--csc-button-primary-bg-hover:#4338ca;--csc-button-primary-bg-active:#3730a3;--csc-button-primary-bg-disabled:#e2e6ea;--csc-button-primary-text-default:#fff;--csc-button-primary-text-disabled:#a3adb8;--csc-button-secondary-bg-default:transparent;--csc-button-secondary-bg-hover:#eef2ff;--csc-button-secondary-bg-active:#3730a3;--csc-button-secondary-bg-disabled:#e2e6ea;--csc-button-secondary-text-default:#4f46e5;--csc-button-secondary-text-disabled:#a3adb8;--csc-button-secondary-border-default:#a5b4fc;--csc-button-secondary-border-disabled:#e2e6ea;--csc-button-ghost-bg-default:transparent;--csc-button-ghost-bg-hover:#f9fafb;--csc-button-ghost-bg-active:#e5e7eb;--csc-button-ghost-bg-disabled:#e2e6ea;--csc-button-ghost-text-default:#111827;--csc-button-ghost-text-disabled:#a3adb8;--csc-button-danger-bg-default:#dc2626;--csc-button-danger-bg-hover:#b91c1c;--csc-button-danger-bg-active:#991b1b;--csc-button-danger-bg-disabled:#e2e6ea;--csc-button-danger-text-default:#fff;--csc-button-danger-text-disabled:#a3adb8;--csc-input-bg-default:#fff;--csc-input-bg-disabled:#f8fafc;--csc-input-bg-error:#fef2f2;--csc-input-bg-warning:#fffbeb;--csc-input-bg-readonly:#f8fafc;--csc-input-border-default:#e2e8f0;--csc-input-border-hover:#cbd5e1;--csc-input-border-focus:#4f46e5;--csc-input-border-error:#ef4444;--csc-input-border-warning:#f59e0b;--csc-input-border-success:#22c55e;--csc-input-text-default:#0f172a;--csc-input-text-value:#0f172a;--csc-input-text-placeholder:#94a3b8;--csc-input-text-disabled:#94a3b8;--csc-input-text-error:#ef4444;--csc-input-text-success:#22c55e;--csc-input-text-warning:#f59e0b;--csc-input-text-helper:#64748b;--csc-input-icon:#94a3b8;--csc-input-shadow-focus:0 0 0 2px #4f46e51f;--csc-checkbox-unchecked-bg-default:#fff;--csc-checkbox-unchecked-bg-hover:#f9fafb;--csc-checkbox-unchecked-bg-active:#f1f3f5;--csc-checkbox-unchecked-bg-disabled:#f1f3f5;--csc-checkbox-unchecked-border-default:#e1e6ea;--csc-checkbox-unchecked-border-hover:#6366f1;--csc-checkbox-unchecked-border-active:#6366f1;--csc-checkbox-unchecked-border-disabled:#e1e6ea;--csc-checkbox-checked-bg-default:#6366f1;--csc-checkbox-checked-bg-hover:#4f46e5;--csc-checkbox-checked-bg-active:#4338ca;--csc-checkbox-checked-bg-disabled:#e0e7ff;--csc-checkbox-checked-border-default:#6366f1;--csc-checkbox-checked-border-hover:#4f46e5;--csc-checkbox-checked-border-active:#4338ca;--csc-checkbox-checked-border-disabled:#e0e7ff;--csc-checkbox-border-focus:#818cf8;--csc-checkbox-icon-default:#fff;--csc-checkbox-icon-disabled:#cdd3d9;--csc-checkbox-shadow-focus:0 0 0 2px #6366f133;--csc-radio-bg-default:#fff;--csc-radio-bg-hover:#fff;--csc-radio-bg-active:#f9fafb;--csc-radio-bg-disabled:#f1f3f5;--csc-radio-unselected-border-default:#e1e6ea;--csc-radio-unselected-border-hover:#6366f1;--csc-radio-unselected-border-active:#6366f1;--csc-radio-unselected-border-disabled:#e1e6ea;--csc-radio-selected-border-default:#6366f1;--csc-radio-selected-border-hover:#4f46e5;--csc-radio-selected-border-active:#4338ca;--csc-radio-selected-border-disabled:#e1e6ea;--csc-radio-dot-default:#6366f1;--csc-radio-dot-hover:#4f46e5;--csc-radio-dot-active:#4338ca;--csc-radio-dot-disabled:#a3adb8;--csc-radio-border-focus:#818cf8;--csc-radio-shadow-focus:0 0 0 2px #6366f133;--csc-toggle-on-bg-default:#6366f1;--csc-toggle-on-bg-hover:#4f46e5;--csc-toggle-on-bg-active:#4338ca;--csc-toggle-on-bg-disabled:#e0e7ff;--csc-toggle-off-bg-default:#cdd3d9;--csc-toggle-off-bg-hover:#a3adb8;--csc-toggle-off-bg-active:#6b7b8d;--csc-toggle-off-bg-disabled:#e2e6ea;--csc-toggle-thumb-bg-default:#fff;--csc-toggle-thumb-bg-disabled:#f1f3f5;--csc-toggle-border-focus:#818cf8;--csc-toggle-shadow-focus:0 0 0 2px #6366f133;--csc-color-primary:#4f46e5;--csc-color-text-default:#0f172a;--csc-color-text-secondary:blue;--csc-color-text-tertiary:#64748b;--csc-color-text-muted:#94a3b8;--csc-color-border-default:#e1e4e9;--csc-color-border-light:#f1f3f6;--csc-color-bg-default:#fff;--csc-color-bg-subtle:#fafafb;--csc-color-bg-muted:#f1f5f9;--csc-color-focus:#4f46e5;--csc-color-success:#22c55e;--csc-color-warning:#f59e0b;--csc-color-error:#ef4444;--csc-color-info:#6366f1;--font-family:"Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 4px 16px #0000001f;--label-default-bg-solid:#e2e6ea;--label-default-text-solid:#374151;--label-primary-bg-solid:#0a9e9e;--label-primary-text-solid:#fff;--label-info-bg-solid:#2563eb;--label-info-text-solid:#fff;--label-success-bg-solid:#22c55e;--label-success-text-solid:#fff;--label-warning-bg-solid:#f59e0b;--label-warning-text-solid:#fff;--label-danger-bg-solid:#dc2626;--label-danger-text-solid:#fff;--label-default-bg-subtle:#f1f5f9;--label-default-text-subtle:#475569;--label-primary-bg-subtle:#e6f7f7;--label-primary-text-subtle:#0a9e9e;--label-info-bg-subtle:#e8f0fe;--label-info-text-subtle:#1d4ed8;--label-success-bg-subtle:#f0fdf4;--label-success-text-subtle:#16a34a;--label-warning-bg-subtle:#fffbeb;--label-warning-text-subtle:#d97706;--label-danger-bg-subtle:#fef2f2;--label-danger-text-subtle:#dc2626;--label-default-bg-border:transparent;--label-default-text-border:#475569;--label-default-border:#e2e6ea;--label-primary-bg-border:transparent;--label-primary-text-border:#0a9e9e;--label-primary-border:#0db5b5;--label-info-bg-border:transparent;--label-info-text-border:#1d4ed8;--label-info-border:#3b82f6;--label-success-bg-border:transparent;--label-success-text-border:#16a34a;--label-success-border:#22c55e;--label-warning-bg-border:transparent;--label-warning-text-border:#d97706;--label-warning-border:#f59e0b;--label-danger-bg-border:transparent;--label-danger-text-border:#dc2626;--label-danger-border:#ef4444;--tag-default-bg-solid:#1f2937;--tag-default-bg-solid-hover:#111827;--tag-default-text-solid:#fff;--tag-primary-bg-solid:#0a9e9e;--tag-primary-bg-solid-hover:#078080;--tag-primary-text-solid:#fff;--tag-info-bg-solid:#2563eb;--tag-info-bg-solid-hover:#1d4ed8;--tag-info-text-solid:#fff;--tag-success-bg-solid:#056363;--tag-success-bg-solid-hover:#044e4e;--tag-success-text-solid:#fff;--tag-warning-bg-solid:#f59e0b;--tag-warning-bg-solid-hover:#d97706;--tag-warning-text-solid:#78350f;--tag-danger-bg-solid:#dc2626;--tag-danger-bg-solid-hover:#b91c1c;--tag-danger-text-solid:#fff;--tag-default-bg-subtle:#f1f5f9;--tag-default-bg-subtle-hover:#e2e8f0;--tag-default-text-subtle:#475569;--tag-primary-bg-subtle:#e6f7f7;--tag-primary-bg-subtle-hover:#ccefef;--tag-primary-text-subtle:#0a9e9e;--tag-info-bg-subtle:#e8f0fe;--tag-info-bg-subtle-hover:#d1e1fd;--tag-info-text-subtle:#1d4ed8;--tag-success-bg-subtle:#f0fdf4;--tag-success-bg-subtle-hover:#dcfce7;--tag-success-text-subtle:#16a34a;--tag-warning-bg-subtle:#fffbeb;--tag-warning-bg-subtle-hover:#fef3c7;--tag-warning-text-subtle:#d97706;--tag-danger-bg-subtle:#fef2f2;--tag-danger-bg-subtle-hover:#fee2e2;--tag-danger-text-subtle:#dc2626;--tag-default-bg-border:transparent;--tag-default-bg-border-hover:#f1f5f9;--tag-default-text-border:#475569;--tag-default-border:#e2e6ea;--tag-primary-bg-border:transparent;--tag-primary-bg-border-hover:#e6f7f7;--tag-primary-text-border:#0a9e9e;--tag-primary-border:#0db5b5;--tag-info-bg-border:transparent;--tag-info-bg-border-hover:#e8f0fe;--tag-info-text-border:#1d4ed8;--tag-info-border:#3b82f6;--tag-success-bg-border:transparent;--tag-success-bg-border-hover:#f0fdf4;--tag-success-text-border:#16a34a;--tag-success-border:#22c55e;--tag-warning-bg-border:transparent;--tag-warning-bg-border-hover:#fffbeb;--tag-warning-text-border:#d97706;--tag-warning-border:#f59e0b;--tag-danger-bg-border:transparent;--tag-danger-bg-border-hover:#fef2f2;--tag-danger-text-border:#dc2626;--tag-danger-border:#ef4444;--dropdown-option-bg-default:#fff;--dropdown-option-bg-hover:#f1f5f9;--dropdown-option-text-default:#0f172a;--dropdown-option-text-disabled:#94a3b8;--dropdown-trigger-text:#0f172a;--dropdown-icon-arrow:#6b7b8d;--dropdown-panel-bg:#fff;--dropdown-panel-border:#e2e6ea;--dropdown-panel-shadow:0 4px 16px #00000014;--dropdown-input-border:#e2e8f0;--dropdown-input-border-focus:#0a9e9e;--dropdown-input-border-hover:#cbd5e1;--badge-bg:#ef4444;--badge-text:#fff;--multiselect-bg-default:#fff;--multiselect-bg-disabled:#f8fafc;--multiselect-border-default:#e2e6ea;--multiselect-border-hover:#cdd3d9;--multiselect-border-focus:#26c6c6;--multiselect-border-error:#ef4444;--multiselect-panel-bg:#fff;--multiselect-panel-border:#e2e6ea;--multiselect-option-bg-default:#fff;--multiselect-option-bg-selected:#e6f7f7;--multiselect-option-text-default:#111827;--multiselect-option-text-selected:#078080;--multiselect-option-check:#0a9e9e;--multiselect-tag-bg:#f1f3f5;--multiselect-tag-text:#374151;--tabs-text-default:#374151;--tabs-text-active:#0a9e9e;--tabs-text-disabled:#a3adb8;--tabs-indicator-default:#e2e6ea;--tabs-indicator-active:#0a9e9e;--tabs-bg-hover:#f8fafb;--tabs-card-bg-active:#fff;--scrollbar-track:#cdd3d9;--scrollbar-thumb:#a3adb8;--tooltip-bg:#1f2937;--tooltip-text:#fff;--link-default:#3b82f6;--link-hover:#2563eb;--link-pressed:#1d4ed8;--file-default:#3b82f6;--file-hover:#2563eb;--file-pressed:#1d4ed8;--file-loading:#a3adb8;--toast-success-bg:#e6f7f7;--toast-success-border:#80dddd;--toast-success-icon:#0a9e9e;--toast-error-bg:#fef2f2;--toast-error-border:#fecaca;--toast-error-icon:#ef4444;--toast-warning-bg:#fffbeb;--toast-warning-border:#fde68a;--toast-warning-icon:#f59e0b;--toast-info-bg:#e8f0fe;--toast-info-border:#88b8fa;--toast-info-icon:#3b82f6;--toast-text-primary:#111827;--toast-text-secondary:#4a5568;--toast-action-text:#1d4ed8;--toast-close:#6b7280;--modal-bg:#fff;--modal-title:#111827;--modal-body:#4a5568;--modal-close:#6b7280;--modal-overlay:#00000080;--avatar-color-bg-default:#1675f9;--avatar-color-bg-image:#e5e7eb;--avatar-color-text-default:#fff;--table-border:#e2e6ea;--table-header-text:#4a5568;--table-header-bg-default:#fff;--table-header-bg-hover:#f5f6f7;--table-header-bg-pressed:#edefed;--table-cell-text:#111827;--table-cell-bg-default:#fff;--table-cell-bg-hover:#f8fafb;--table-cell-bg-selected:#e6f7f7;--table-cell-bg-stripe:#fafbfc;--table-sort-active:#3b82f6;--table-sort-inactive:#a3adb8;--pagination-bg-default:#fff;--pagination-bg-hover:#f1f3f5;--pagination-bg-active:#f1f3f5;--pagination-bg-disabled:#e2e6ea;--pagination-text-default:#4a5568;--pagination-text-hover:#4a5568;--pagination-text-active:#4a5568;--pagination-text-disabled:#a3adb8;--pagination-border-default:#e2e6ea;--pagination-border-hover:#cdd3d9;--pagination-border-active:#a3adb8;--pagination-border-disabled:#e2e6ea;--color-gray-50:#f8fafb;--color-gray-100:#f1f3f5;--color-gray-200:#e2e6ea;--color-gray-300:#cdd3d9;--color-gray-400:#a3adb8;--color-gray-500:#6b7b8d;--color-gray-600:#4a5568;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--status-success-default:#0a9e9e;--status-success-hover:#078080;--status-success-active:#056363;--status-success-subtle:#f8fafb;--status-info-default:#1d4ed8;--status-info-hover:#1e40af;--status-info-active:#1e3a8a;--status-info-subtle:#e8f0fe;--status-danger-default:#dc2626;--status-danger-hover:#b91c1c;--status-danger-active:#991b1b;--status-danger-subtle:#fef2f2;--status-warning-default:#f59e0b;--status-warning-subtle:#fffbeb;--dataviz-teal:#0db5b5;--dataviz-blue:#2563eb;--dataviz-red:#ef4444;--dataviz-yellow:#f59e0b;--dataviz-teal-light:#80dddd;--dataviz-blue-light:#88b8fa}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:2px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#6b7b8d}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{border-radius:4px}.scrollbar-md::-webkit-scrollbar-thumb{border-radius:4px}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{scrollbar-width:none}
+:root{--base-button-primary-bg-default:#0a9e9e;--base-button-primary-bg-hover:#078080;--base-button-primary-bg-active:#056363;--base-button-primary-bg-disabled:#e2e6ea;--base-button-primary-text-default:#fff;--base-button-primary-text-disabled:#a3adb8;--base-button-secondary-bg-default:transparent;--base-button-secondary-bg-hover:#e0f7f7;--base-button-secondary-bg-active:#056363;--base-button-secondary-bg-disabled:#e2e6ea;--base-button-secondary-text-default:#0a9e9e;--base-button-secondary-text-disabled:#a3adb8;--base-button-secondary-border-default:#80dddd;--base-button-secondary-border-disabled:#e2e6ea;--base-button-ghost-bg-default:transparent;--base-button-ghost-bg-hover:#f8fafb;--base-button-ghost-bg-active:#d8d8d8;--base-button-ghost-bg-disabled:#e2e6ea;--base-button-ghost-text-default:#111827;--base-button-ghost-text-disabled:#a3adb8;--base-button-danger-bg-default:#dc2626;--base-button-danger-bg-hover:#b91c1c;--base-button-danger-bg-active:#991b1b;--base-button-danger-bg-disabled:#e2e6ea;--base-button-danger-text-default:#fff;--base-button-danger-text-disabled:#a3adb8;--base-input-bg-default:#fff;--base-input-bg-disabled:#f8fafc;--base-input-bg-error:#fef2f2;--base-input-bg-warning:#fffbeb;--base-input-bg-readonly:#f8fafc;--base-input-border-default:#e2e8f0;--base-input-border-hover:#cbd5e1;--base-input-border-focus:#0a9e9e;--base-input-border-error:#ef4444;--base-input-border-warning:#f59e0b;--base-input-border-success:#22c55e;--base-input-text-default:#0f172a;--base-input-text-value:#0f172a;--base-input-text-placeholder:#94a3b8;--base-input-text-disabled:#94a3b8;--base-input-text-error:#ef4444;--base-input-text-success:#22c55e;--base-input-text-warning:#f59e0b;--base-input-text-helper:#64748b;--base-input-icon:#94a3b8;--base-input-shadow-focus:0 0 0 2px #0a9e9e1f;--base-checkbox-unchecked-bg-default:#fff;--base-checkbox-unchecked-bg-hover:#f8fafb;--base-checkbox-unchecked-bg-active:#f1f3f5;--base-checkbox-unchecked-bg-disabled:#f1f3f5;--base-checkbox-unchecked-border-default:#e1e6ea;--base-checkbox-unchecked-border-hover:#0db5b5;--base-checkbox-unchecked-border-active:#0db5b5;--base-checkbox-unchecked-border-disabled:#e1e6ea;--base-checkbox-checked-bg-default:#0db5b5;--base-checkbox-checked-bg-hover:#0a9e9e;--base-checkbox-checked-bg-active:#078080;--base-checkbox-checked-bg-disabled:#e6f7f7;--base-checkbox-checked-border-default:#0db5b5;--base-checkbox-checked-border-hover:#0a9e9e;--base-checkbox-checked-border-active:#078080;--base-checkbox-checked-border-disabled:#e6f7f7;--base-checkbox-border-focus:#26c6c6;--base-checkbox-icon-default:#fff;--base-checkbox-icon-disabled:#cdd3d9;--base-checkbox-shadow-focus:0 0 0 2px #26c6c633;--base-radio-bg-default:#fff;--base-radio-bg-hover:#fff;--base-radio-bg-active:#f8fafb;--base-radio-bg-disabled:#f1f3f5;--base-radio-unselected-border-default:#e1e6ea;--base-radio-unselected-border-hover:#0db5b5;--base-radio-unselected-border-active:#0db5b5;--base-radio-unselected-border-disabled:#e1e6ea;--base-radio-selected-border-default:#0db5b5;--base-radio-selected-border-hover:#0a9e9e;--base-radio-selected-border-active:#078080;--base-radio-selected-border-disabled:#e1e6ea;--base-radio-dot-default:#0db5b5;--base-radio-dot-hover:#0a9e9e;--base-radio-dot-active:#078080;--base-radio-dot-disabled:#a3adb8;--base-radio-border-focus:#26c6c6;--base-radio-shadow-focus:0 0 0 2px #26c6c633;--base-toggle-on-bg-default:#0db5b5;--base-toggle-on-bg-hover:#0a9e9e;--base-toggle-on-bg-active:#078080;--base-toggle-on-bg-disabled:#e6f7f7;--base-toggle-off-bg-default:#cdd3d9;--base-toggle-off-bg-hover:#a3adb8;--base-toggle-off-bg-active:#6b7b8d;--base-toggle-off-bg-disabled:#e2e6ea;--base-toggle-thumb-bg-default:#fff;--base-toggle-thumb-bg-disabled:#f1f3f5;--base-toggle-border-focus:#26c6c6;--base-toggle-shadow-focus:0 0 0 2px #26c6c633;--base-color-primary:#0a9e9e;--base-color-text-default:#0f172a;--base-color-text-secondary:#475569;--base-color-text-tertiary:#64748b;--base-color-text-muted:#94a3b8;--base-color-border-default:#e1e4e9;--base-color-border-light:#f1f3f6;--base-color-bg-default:#fff;--base-color-bg-subtle:#f9f9f9;--base-color-bg-muted:#f1f5f9;--base-color-focus:#0a9e9e;--base-color-success:#22c55e;--base-color-warning:#f59e0b;--base-color-error:#ef4444;--base-color-info:#3b82f6;--rm-button-primary-bg-default:#2563eb;--rm-button-primary-bg-hover:#1d4ed8;--rm-button-primary-bg-active:#1e40af;--rm-button-primary-bg-disabled:#e2e6ea;--rm-button-primary-text-default:#fff;--rm-button-primary-text-disabled:#a3adb8;--rm-button-secondary-bg-default:transparent;--rm-button-secondary-bg-hover:#eff6ff;--rm-button-secondary-bg-active:#1e40af;--rm-button-secondary-bg-disabled:#e2e6ea;--rm-button-secondary-text-default:#2563eb;--rm-button-secondary-text-disabled:#a3adb8;--rm-button-secondary-border-default:#93c5fd;--rm-button-secondary-border-disabled:#e2e6ea;--rm-button-ghost-bg-default:transparent;--rm-button-ghost-bg-hover:#f8fafc;--rm-button-ghost-bg-active:#e2e8f0;--rm-button-ghost-bg-disabled:#e2e6ea;--rm-button-ghost-text-default:#111827;--rm-button-ghost-text-disabled:#a3adb8;--rm-button-danger-bg-default:#dc2626;--rm-button-danger-bg-hover:#b91c1c;--rm-button-danger-bg-active:#991b1b;--rm-button-danger-bg-disabled:#e2e6ea;--rm-button-danger-text-default:#fff;--rm-button-danger-text-disabled:#a3adb8;--rm-input-bg-default:#fff;--rm-input-bg-disabled:#f8fafc;--rm-input-bg-error:#fef2f2;--rm-input-bg-warning:#fffbeb;--rm-input-bg-readonly:#f8fafc;--rm-input-border-default:#e2e8f0;--rm-input-border-hover:#cbd5e1;--rm-input-border-focus:#2563eb;--rm-input-border-error:#ef4444;--rm-input-border-warning:#f59e0b;--rm-input-border-success:#22c55e;--rm-input-text-default:#0f172a;--rm-input-text-value:#0f172a;--rm-input-text-placeholder:#94a3b8;--rm-input-text-disabled:#94a3b8;--rm-input-text-error:#ef4444;--rm-input-text-success:#22c55e;--rm-input-text-warning:#f59e0b;--rm-input-text-helper:#64748b;--rm-input-icon:#94a3b8;--rm-input-shadow-focus:0 0 0 2px #2563eb1f;--rm-checkbox-unchecked-bg-default:#fff;--rm-checkbox-unchecked-bg-hover:#f8fafc;--rm-checkbox-unchecked-bg-active:#f1f3f5;--rm-checkbox-unchecked-bg-disabled:#f1f3f5;--rm-checkbox-unchecked-border-default:#e1e6ea;--rm-checkbox-unchecked-border-hover:#3b82f6;--rm-checkbox-unchecked-border-active:#3b82f6;--rm-checkbox-unchecked-border-disabled:#e1e6ea;--rm-checkbox-checked-bg-default:#3b82f6;--rm-checkbox-checked-bg-hover:#2563eb;--rm-checkbox-checked-bg-active:#1d4ed8;--rm-checkbox-checked-bg-disabled:#dbeafe;--rm-checkbox-checked-border-default:#3b82f6;--rm-checkbox-checked-border-hover:#2563eb;--rm-checkbox-checked-border-active:#1d4ed8;--rm-checkbox-checked-border-disabled:#dbeafe;--rm-checkbox-border-focus:#60a5fa;--rm-checkbox-icon-default:#fff;--rm-checkbox-icon-disabled:#cdd3d9;--rm-checkbox-shadow-focus:0 0 0 2px #3b82f633;--rm-radio-bg-default:#fff;--rm-radio-bg-hover:#fff;--rm-radio-bg-active:#f8fafc;--rm-radio-bg-disabled:#f1f3f5;--rm-radio-unselected-border-default:#e1e6ea;--rm-radio-unselected-border-hover:#3b82f6;--rm-radio-unselected-border-active:#3b82f6;--rm-radio-unselected-border-disabled:#e1e6ea;--rm-radio-selected-border-default:#3b82f6;--rm-radio-selected-border-hover:#2563eb;--rm-radio-selected-border-active:#1d4ed8;--rm-radio-selected-border-disabled:#e1e6ea;--rm-radio-dot-default:#3b82f6;--rm-radio-dot-hover:#2563eb;--rm-radio-dot-active:#1d4ed8;--rm-radio-dot-disabled:#a3adb8;--rm-radio-border-focus:#60a5fa;--rm-radio-shadow-focus:0 0 0 2px #3b82f633;--rm-toggle-on-bg-default:#3b82f6;--rm-toggle-on-bg-hover:#2563eb;--rm-toggle-on-bg-active:#1d4ed8;--rm-toggle-on-bg-disabled:#dbeafe;--rm-toggle-off-bg-default:#cdd3d9;--rm-toggle-off-bg-hover:#a3adb8;--rm-toggle-off-bg-active:#6b7b8d;--rm-toggle-off-bg-disabled:#e2e6ea;--rm-toggle-thumb-bg-default:#fff;--rm-toggle-thumb-bg-disabled:#f1f3f5;--rm-toggle-border-focus:#60a5fa;--rm-toggle-shadow-focus:0 0 0 2px #3b82f633;--rm-color-primary:#2563eb;--rm-color-text-default:#0f172a;--rm-color-text-secondary:red;--rm-color-text-tertiary:#64748b;--rm-color-text-muted:#94a3b8;--rm-color-border-default:#e1e4e9;--rm-color-border-light:#f1f3f6;--rm-color-bg-default:#fff;--rm-color-bg-subtle:#f9fafb;--rm-color-bg-muted:#f1f5f9;--rm-color-focus:#2563eb;--rm-color-success:#22c55e;--rm-color-warning:#f59e0b;--rm-color-error:#ef4444;--rm-color-info:#3b82f6;--csc-button-primary-bg-default:#4f46e5;--csc-button-primary-bg-hover:#4338ca;--csc-button-primary-bg-active:#3730a3;--csc-button-primary-bg-disabled:#e2e6ea;--csc-button-primary-text-default:#fff;--csc-button-primary-text-disabled:#a3adb8;--csc-button-secondary-bg-default:transparent;--csc-button-secondary-bg-hover:#eef2ff;--csc-button-secondary-bg-active:#3730a3;--csc-button-secondary-bg-disabled:#e2e6ea;--csc-button-secondary-text-default:#4f46e5;--csc-button-secondary-text-disabled:#a3adb8;--csc-button-secondary-border-default:#a5b4fc;--csc-button-secondary-border-disabled:#e2e6ea;--csc-button-ghost-bg-default:transparent;--csc-button-ghost-bg-hover:#f9fafb;--csc-button-ghost-bg-active:#e5e7eb;--csc-button-ghost-bg-disabled:#e2e6ea;--csc-button-ghost-text-default:#111827;--csc-button-ghost-text-disabled:#a3adb8;--csc-button-danger-bg-default:#dc2626;--csc-button-danger-bg-hover:#b91c1c;--csc-button-danger-bg-active:#991b1b;--csc-button-danger-bg-disabled:#e2e6ea;--csc-button-danger-text-default:#fff;--csc-button-danger-text-disabled:#a3adb8;--csc-input-bg-default:#fff;--csc-input-bg-disabled:#f8fafc;--csc-input-bg-error:#fef2f2;--csc-input-bg-warning:#fffbeb;--csc-input-bg-readonly:#f8fafc;--csc-input-border-default:#e2e8f0;--csc-input-border-hover:#cbd5e1;--csc-input-border-focus:#4f46e5;--csc-input-border-error:#ef4444;--csc-input-border-warning:#f59e0b;--csc-input-border-success:#22c55e;--csc-input-text-default:#0f172a;--csc-input-text-value:#0f172a;--csc-input-text-placeholder:#94a3b8;--csc-input-text-disabled:#94a3b8;--csc-input-text-error:#ef4444;--csc-input-text-success:#22c55e;--csc-input-text-warning:#f59e0b;--csc-input-text-helper:#64748b;--csc-input-icon:#94a3b8;--csc-input-shadow-focus:0 0 0 2px #4f46e51f;--csc-checkbox-unchecked-bg-default:#fff;--csc-checkbox-unchecked-bg-hover:#f9fafb;--csc-checkbox-unchecked-bg-active:#f1f3f5;--csc-checkbox-unchecked-bg-disabled:#f1f3f5;--csc-checkbox-unchecked-border-default:#e1e6ea;--csc-checkbox-unchecked-border-hover:#6366f1;--csc-checkbox-unchecked-border-active:#6366f1;--csc-checkbox-unchecked-border-disabled:#e1e6ea;--csc-checkbox-checked-bg-default:#6366f1;--csc-checkbox-checked-bg-hover:#4f46e5;--csc-checkbox-checked-bg-active:#4338ca;--csc-checkbox-checked-bg-disabled:#e0e7ff;--csc-checkbox-checked-border-default:#6366f1;--csc-checkbox-checked-border-hover:#4f46e5;--csc-checkbox-checked-border-active:#4338ca;--csc-checkbox-checked-border-disabled:#e0e7ff;--csc-checkbox-border-focus:#818cf8;--csc-checkbox-icon-default:#fff;--csc-checkbox-icon-disabled:#cdd3d9;--csc-checkbox-shadow-focus:0 0 0 2px #6366f133;--csc-radio-bg-default:#fff;--csc-radio-bg-hover:#fff;--csc-radio-bg-active:#f9fafb;--csc-radio-bg-disabled:#f1f3f5;--csc-radio-unselected-border-default:#e1e6ea;--csc-radio-unselected-border-hover:#6366f1;--csc-radio-unselected-border-active:#6366f1;--csc-radio-unselected-border-disabled:#e1e6ea;--csc-radio-selected-border-default:#6366f1;--csc-radio-selected-border-hover:#4f46e5;--csc-radio-selected-border-active:#4338ca;--csc-radio-selected-border-disabled:#e1e6ea;--csc-radio-dot-default:#6366f1;--csc-radio-dot-hover:#4f46e5;--csc-radio-dot-active:#4338ca;--csc-radio-dot-disabled:#a3adb8;--csc-radio-border-focus:#818cf8;--csc-radio-shadow-focus:0 0 0 2px #6366f133;--csc-toggle-on-bg-default:#6366f1;--csc-toggle-on-bg-hover:#4f46e5;--csc-toggle-on-bg-active:#4338ca;--csc-toggle-on-bg-disabled:#e0e7ff;--csc-toggle-off-bg-default:#cdd3d9;--csc-toggle-off-bg-hover:#a3adb8;--csc-toggle-off-bg-active:#6b7b8d;--csc-toggle-off-bg-disabled:#e2e6ea;--csc-toggle-thumb-bg-default:#fff;--csc-toggle-thumb-bg-disabled:#f1f3f5;--csc-toggle-border-focus:#818cf8;--csc-toggle-shadow-focus:0 0 0 2px #6366f133;--csc-color-primary:#4f46e5;--csc-color-text-default:#0f172a;--csc-color-text-secondary:blue;--csc-color-text-tertiary:#64748b;--csc-color-text-muted:#94a3b8;--csc-color-border-default:#e1e4e9;--csc-color-border-light:#f1f3f6;--csc-color-bg-default:#fff;--csc-color-bg-subtle:#fafafb;--csc-color-bg-muted:#f1f5f9;--csc-color-focus:#4f46e5;--csc-color-success:#22c55e;--csc-color-warning:#f59e0b;--csc-color-error:#ef4444;--csc-color-info:#6366f1;--font-family:"Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 8px #00000014;--shadow-lg:0 4px 16px #0000001f;--label-default-bg-solid:#e2e6ea;--label-default-text-solid:#374151;--label-primary-bg-solid:#0a9e9e;--label-primary-text-solid:#fff;--label-info-bg-solid:#2563eb;--label-info-text-solid:#fff;--label-success-bg-solid:#22c55e;--label-success-text-solid:#fff;--label-warning-bg-solid:#f59e0b;--label-warning-text-solid:#fff;--label-danger-bg-solid:#dc2626;--label-danger-text-solid:#fff;--label-default-bg-subtle:#f1f5f9;--label-default-text-subtle:#475569;--label-primary-bg-subtle:#e6f7f7;--label-primary-text-subtle:#0a9e9e;--label-info-bg-subtle:#e8f0fe;--label-info-text-subtle:#1d4ed8;--label-success-bg-subtle:#f0fdf4;--label-success-text-subtle:#16a34a;--label-warning-bg-subtle:#fffbeb;--label-warning-text-subtle:#d97706;--label-danger-bg-subtle:#fef2f2;--label-danger-text-subtle:#dc2626;--label-default-bg-border:transparent;--label-default-text-border:#475569;--label-default-border:#e2e6ea;--label-primary-bg-border:transparent;--label-primary-text-border:#0a9e9e;--label-primary-border:#0db5b5;--label-info-bg-border:transparent;--label-info-text-border:#1d4ed8;--label-info-border:#3b82f6;--label-success-bg-border:transparent;--label-success-text-border:#16a34a;--label-success-border:#22c55e;--label-warning-bg-border:transparent;--label-warning-text-border:#d97706;--label-warning-border:#f59e0b;--label-danger-bg-border:transparent;--label-danger-text-border:#dc2626;--label-danger-border:#ef4444;--tag-default-bg-solid:#1f2937;--tag-default-bg-solid-hover:#111827;--tag-default-text-solid:#fff;--tag-primary-bg-solid:#0a9e9e;--tag-primary-bg-solid-hover:#078080;--tag-primary-text-solid:#fff;--tag-info-bg-solid:#2563eb;--tag-info-bg-solid-hover:#1d4ed8;--tag-info-text-solid:#fff;--tag-success-bg-solid:#056363;--tag-success-bg-solid-hover:#044e4e;--tag-success-text-solid:#fff;--tag-warning-bg-solid:#f59e0b;--tag-warning-bg-solid-hover:#d97706;--tag-warning-text-solid:#78350f;--tag-danger-bg-solid:#dc2626;--tag-danger-bg-solid-hover:#b91c1c;--tag-danger-text-solid:#fff;--tag-default-bg-subtle:#f1f5f9;--tag-default-bg-subtle-hover:#e2e8f0;--tag-default-text-subtle:#475569;--tag-primary-bg-subtle:#e6f7f7;--tag-primary-bg-subtle-hover:#ccefef;--tag-primary-text-subtle:#0a9e9e;--tag-info-bg-subtle:#e8f0fe;--tag-info-bg-subtle-hover:#d1e1fd;--tag-info-text-subtle:#1d4ed8;--tag-success-bg-subtle:#f0fdf4;--tag-success-bg-subtle-hover:#dcfce7;--tag-success-text-subtle:#16a34a;--tag-warning-bg-subtle:#fffbeb;--tag-warning-bg-subtle-hover:#fef3c7;--tag-warning-text-subtle:#d97706;--tag-danger-bg-subtle:#fef2f2;--tag-danger-bg-subtle-hover:#fee2e2;--tag-danger-text-subtle:#dc2626;--tag-default-bg-border:transparent;--tag-default-bg-border-hover:#f1f5f9;--tag-default-text-border:#475569;--tag-default-border:#e2e6ea;--tag-primary-bg-border:transparent;--tag-primary-bg-border-hover:#e6f7f7;--tag-primary-text-border:#0a9e9e;--tag-primary-border:#0db5b5;--tag-info-bg-border:transparent;--tag-info-bg-border-hover:#e8f0fe;--tag-info-text-border:#1d4ed8;--tag-info-border:#3b82f6;--tag-success-bg-border:transparent;--tag-success-bg-border-hover:#f0fdf4;--tag-success-text-border:#16a34a;--tag-success-border:#22c55e;--tag-warning-bg-border:transparent;--tag-warning-bg-border-hover:#fffbeb;--tag-warning-text-border:#d97706;--tag-warning-border:#f59e0b;--tag-danger-bg-border:transparent;--tag-danger-bg-border-hover:#fef2f2;--tag-danger-text-border:#dc2626;--tag-danger-border:#ef4444;--dropdown-option-bg-default:#fff;--dropdown-option-bg-hover:#f8fafb;--dropdown-option-text-default:#111827;--dropdown-option-text-disabled:#94a3b8;--dropdown-trigger-text:#0f172a;--dropdown-icon-arrow:#6b7b8d;--dropdown-panel-bg:#fff;--dropdown-panel-border:#e2e6ea;--dropdown-panel-shadow:0 4px 16px #00000014;--dropdown-input-border:#e2e8f0;--dropdown-input-border-focus:#0a9e9e;--dropdown-input-border-hover:#cbd5e1;--badge-bg:#ef4444;--badge-text:#fff;--multiselect-bg-default:#fff;--multiselect-bg-disabled:#f8fafc;--multiselect-border-default:#e2e6ea;--multiselect-border-hover:#cdd3d9;--multiselect-border-focus:#26c6c6;--multiselect-border-error:#ef4444;--multiselect-panel-bg:#fff;--multiselect-panel-border:#e2e6ea;--multiselect-option-bg-default:#fff;--multiselect-option-bg-selected:#e6f7f7;--multiselect-option-text-default:#111827;--multiselect-option-text-selected:#078080;--multiselect-option-check:#0a9e9e;--multiselect-tag-bg:#f1f3f5;--multiselect-tag-text:#374151;--tabs-text-default:#374151;--tabs-text-active:#0a9e9e;--tabs-text-disabled:#a3adb8;--tabs-indicator-default:#e2e6ea;--tabs-indicator-active:#0a9e9e;--tabs-bg-hover:#f8fafb;--tabs-card-bg-active:#fff;--scrollbar-track:#cdd3d9;--scrollbar-thumb:#a3adb8;--tooltip-bg:#1f2937;--tooltip-text:#fff;--link-default:#3b82f6;--link-hover:#2563eb;--link-pressed:#1d4ed8;--file-default:#3b82f6;--file-hover:#2563eb;--file-pressed:#1d4ed8;--file-loading:#a3adb8;--toast-success-bg:#e6f7f7;--toast-success-border:#80dddd;--toast-success-icon:#0a9e9e;--toast-error-bg:#fef2f2;--toast-error-border:#fecaca;--toast-error-icon:#ef4444;--toast-warning-bg:#fffbeb;--toast-warning-border:#fde68a;--toast-warning-icon:#f59e0b;--toast-info-bg:#e8f0fe;--toast-info-border:#88b8fa;--toast-info-icon:#3b82f6;--toast-text-primary:#111827;--toast-text-secondary:#4a5568;--toast-action-text:#1d4ed8;--toast-close:#6b7280;--modal-bg:#fff;--modal-title:#111827;--modal-body:#4a5568;--modal-close:#6b7280;--modal-overlay:#00000080;--avatar-color-bg-default:#1675f9;--avatar-color-bg-image:#e5e7eb;--avatar-color-text-default:#fff;--table-border:#e2e6ea;--table-header-text:#4a5568;--table-header-bg-default:#fff;--table-header-bg-hover:#f5f6f7;--table-header-bg-pressed:#edefed;--table-cell-text:#111827;--table-cell-bg-default:#fff;--table-cell-bg-hover:#f8fafb;--table-cell-bg-selected:#e6f7f7;--table-cell-bg-stripe:#fafbfc;--table-sort-active:#3b82f6;--table-sort-inactive:#a3adb8;--pagination-bg-default:#fff;--pagination-bg-hover:#f1f3f5;--pagination-bg-active:#f1f3f5;--pagination-bg-disabled:#e2e6ea;--pagination-text-default:#374151;--pagination-text-hover:#374151;--pagination-text-active:#111827;--pagination-text-disabled:#a3adb8;--pagination-border-default:#e2e6ea;--pagination-border-hover:#cdd3d9;--pagination-border-active:#a3adb8;--pagination-border-disabled:#e2e6ea;--color-gray-50:#f8fafb;--color-gray-100:#f1f3f5;--color-gray-200:#e2e6ea;--color-gray-300:#cdd3d9;--color-gray-400:#a3adb8;--color-gray-500:#6b7b8d;--color-gray-600:#4a5568;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--status-success-default:#0a9e9e;--status-success-hover:#078080;--status-success-active:#056363;--status-success-subtle:#f8fafb;--status-info-default:#1d4ed8;--status-info-hover:#1e40af;--status-info-active:#1e3a8a;--status-info-subtle:#e8f0fe;--status-danger-default:#dc2626;--status-danger-hover:#b91c1c;--status-danger-active:#991b1b;--status-danger-subtle:#fef2f2;--status-warning-default:#f59e0b;--status-warning-subtle:#fffbeb;--dataviz-teal:#0db5b5;--dataviz-blue:#2563eb;--dataviz-red:#ef4444;--dataviz-yellow:#f59e0b;--dataviz-teal-light:#80dddd;--dataviz-blue-light:#88b8fa}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:2px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#6b7b8d}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{border-radius:4px}.scrollbar-md::-webkit-scrollbar-thumb{border-radius:4px}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{scrollbar-width:none}
 /*$vite$:1*/

package/dist/index.js

@@ -9066,11 +9066,118 @@ var xm = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("caption", {
 }));
 xm.displayName = "TableCaption";
 //#endregion
+//#region src/components/table/DataTable.tsx
+function Sm({ columns: t, data: n, rowKey: r = "id", striped: i = !1, pagination: a = !1, pageSize: o = 10, pageSizeOptions: s = [
+	5,
+	10,
+	20,
+	50
+], showGoTo: c = !1, selectable: l = !1, selectedKey: d = null, onRowClick: p, emptyText: m = "No data", ...h }) {
+	let [g, _] = f(null), [v, y] = f("none"), [b, x] = f({}), [S, C] = f(1), [w, T] = f(o), E = u(() => {
+		let e = {};
+		return t.forEach((t) => {
+			t.filterable && (e[t.key] = [...new Set(n.map((e) => String(e[t.key])))]);
+		}), e;
+	}, [t, n]), D = u(() => {
+		let e = n;
+		return Object.entries(b).forEach(([t, n]) => {
+			n.length > 0 && (e = e.filter((e) => n.includes(String(e[t]))));
+		}), e;
+	}, [n, b]), O = u(() => !g || v === "none" ? D : [...D].sort((e, t) => {
+		let n = String(e[g] ?? ""), r = String(t[g] ?? ""), i = Number(n), a = Number(r);
+		return !isNaN(i) && !isNaN(a) ? v === "asc" ? i - a : a - i : v === "asc" ? n.localeCompare(r) : r.localeCompare(n);
+	}), [
+		D,
+		g,
+		v
+	]), k = a ? Math.max(1, Math.ceil(O.length / w)) : 1, A = Math.min(S, k), j = a ? O.slice((A - 1) * w, A * w) : O, M = (e) => {
+		g === e ? y((e) => e === "none" ? "asc" : e === "asc" ? "desc" : "none") : (_(e), y("asc"));
+	}, N = (e) => (t) => {
+		x((n) => ({
+			...n,
+			[e]: t
+		})), C(1);
+	}, P = (e, t) => typeof r == "function" ? r(e, t) : e[r] ?? t, F = (e) => g === e ? v : "none";
+	return /* @__PURE__ */ Y("div", {
+		...h,
+		children: [/* @__PURE__ */ J("div", {
+			css: e({
+				border: "1px solid #e5e7eb",
+				borderRadius: "8px",
+				overflow: "hidden",
+				background: "#fff"
+			}),
+			children: /* @__PURE__ */ Y(mm, {
+				striped: i,
+				children: [/* @__PURE__ */ J(hm, { children: /* @__PURE__ */ J(_m, { children: t.map((t) => /* @__PURE__ */ J(ym, {
+					sortable: t.sortable,
+					sortDirection: t.sortable ? F(t.key) : void 0,
+					onSort: t.sortable ? () => M(t.key) : void 0,
+					filterable: t.filterable,
+					filterOptions: t.filterable ? E[t.key] : void 0,
+					filterValue: t.filterable ? b[t.key] ?? [] : void 0,
+					onFilterChange: t.filterable ? N(t.key) : void 0,
+					css: e({
+						...t.width ? { width: t.width } : {},
+						...t.align ? { textAlign: t.align } : {}
+					}),
+					children: t.label
+				}, t.key)) }) }), /* @__PURE__ */ J(gm, { children: j.length === 0 ? /* @__PURE__ */ J(_m, { children: /* @__PURE__ */ J(bm, {
+					colSpan: t.length,
+					children: /* @__PURE__ */ J("div", {
+						css: e({
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							padding: "40px 0",
+							color: "#9ca3af",
+							fontSize: "14px",
+							fontFamily: W.family
+						}),
+						children: m
+					})
+				}) }) : j.map((n, r) => {
+					let i = P(n, r);
+					return /* @__PURE__ */ J(_m, {
+						selected: l && d === i,
+						onClick: p ? () => p(n, r) : void 0,
+						css: p ? e({ cursor: "pointer" }) : void 0,
+						children: t.map((t) => /* @__PURE__ */ J(bm, {
+							css: t.align ? e({ textAlign: t.align }) : void 0,
+							children: t.render ? t.render(n[t.key], n, r) : String(n[t.key] ?? "")
+						}, t.key))
+					}, i);
+				}) })]
+			})
+		}), a && k > 0 && /* @__PURE__ */ J("div", {
+			css: e({
+				display: "flex",
+				justifyContent: "center",
+				marginTop: "16px"
+			}),
+			children: /* @__PURE__ */ J(fm, {
+				size: "sm",
+				totalPages: k,
+				currentPage: A,
+				onChange: C,
+				showPageSize: !0,
+				pageSize: w,
+				pageSizeOptions: s,
+				onPageSizeChange: (e) => {
+					T(e), C(1);
+				},
+				showGoTo: c
+			})
+		})]
+	});
+}
+Sm.displayName = "DataTable";
+//#endregion
 //#region src/components/file/File.tsx
-var Sm = t`
+var Cm = t`
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`, Cm = i(({ state: t = "default", children: n, ...r }, i) => {
+`, wm = i(({ state: t = "default", children: n, ...r }, i) => {
 	let a = t === "loading";
 	return /* @__PURE__ */ Y("a", {
 		ref: i,
@@ -9101,7 +9208,7 @@ var Sm = t`
 		children: [a ? /* @__PURE__ */ J("span", {
 			css: e({
 				display: "inline-flex",
-				animation: `${Sm} 1s linear infinite`
+				animation: `${Cm} 1s linear infinite`
 			}),
 			children: /* @__PURE__ */ J(X, {
 				name: "autorenew",
@@ -9113,10 +9220,10 @@ var Sm = t`
 		}), n]
 	});
 });
-Cm.displayName = "File";
+wm.displayName = "File";
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-var wm = {
+var Tm = {
 	sm: {
 		px: "24px",
 		fontSize: "12px",
@@ -9132,8 +9239,8 @@ var wm = {
 		fontSize: "16px",
 		lineHeight: "24px"
 	}
-}, Tm = (e, t) => t === "circle" ? "50%" : e === "sm" ? "4px" : "8px", Em = i(({ size: t = "md", shape: n = "circle", src: r, alt: i = "", initials: a, children: o, ...s }, c) => {
-	let l = wm[t], u = !!r;
+}, Em = (e, t) => t === "circle" ? "50%" : e === "sm" ? "4px" : "8px", Dm = i(({ size: t = "md", shape: n = "circle", src: r, alt: i = "", initials: a, children: o, ...s }, c) => {
+	let l = Tm[t], u = !!r;
 	return /* @__PURE__ */ J("div", {
 		ref: c,
 		css: e({
@@ -9142,7 +9249,7 @@ var wm = {
 			justifyContent: "center",
 			width: l.px,
 			height: l.px,
-			borderRadius: Tm(t, n),
+			borderRadius: Em(t, n),
 			overflow: "hidden",
 			background: u ? ae.color.bg.image : ae.color.bg.default,
 			flexShrink: 0
@@ -9170,17 +9277,17 @@ var wm = {
 		})
 	});
 });
-Em.displayName = "Avatar";
+Dm.displayName = "Avatar";
 //#endregion
 //#region node_modules/@radix-ui/react-dialog/dist/index.mjs
-var Dm = "Dialog", [Om, km] = Cn(Dm), [Am, jm] = Om(Dm), Mm = (e) => {
+var Om = "Dialog", [km, Am] = Cn(Om), [jm, Mm] = km(Om), Nm = (e) => {
 	let { __scopeDialog: t, children: r, open: i, defaultOpen: a, onOpenChange: o, modal: s = !0 } = e, c = n.useRef(null), l = n.useRef(null), [u, d] = lo({
 		prop: i,
 		defaultProp: a ?? !1,
 		onChange: o,
-		caller: Dm
+		caller: Om
 	});
-	return /* @__PURE__ */ h(Am, {
+	return /* @__PURE__ */ h(jm, {
 		scope: t,
 		triggerRef: c,
 		contentRef: l,
@@ -9194,24 +9301,24 @@ var Dm = "Dialog", [Om, km] = Cn(Dm), [Am, jm] = Om(Dm), Mm = (e) => {
 		children: r
 	});
 };
-Mm.displayName = Dm;
-var Nm = "DialogTrigger", Pm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Nm, n), a = Q(t, i.triggerRef);
+Nm.displayName = Om;
+var Pm = "DialogTrigger", Fm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Pm, n), a = Q(t, i.triggerRef);
 	return /* @__PURE__ */ h($.button, {
 		type: "button",
 		"aria-haspopup": "dialog",
 		"aria-expanded": i.open,
 		"aria-controls": i.contentId,
-		"data-state": eh(i.open),
+		"data-state": th(i.open),
 		...r,
 		ref: a,
 		onClick: Z(e.onClick, i.onOpenToggle)
 	});
 });
-Pm.displayName = Nm;
-var Fm = "DialogPortal", [Im, Lm] = Om(Fm, { forceMount: void 0 }), Rm = (e) => {
-	let { __scopeDialog: t, forceMount: r, children: i, container: a } = e, o = jm(Fm, t);
-	return /* @__PURE__ */ h(Im, {
+Fm.displayName = Pm;
+var Im = "DialogPortal", [Lm, Rm] = km(Im, { forceMount: void 0 }), zm = (e) => {
+	let { __scopeDialog: t, forceMount: r, children: i, container: a } = e, o = Mm(Im, t);
+	return /* @__PURE__ */ h(Lm, {
 		scope: t,
 		forceMount: r,
 		children: n.Children.map(i, (e) => /* @__PURE__ */ h(zl, {
@@ -9224,26 +9331,26 @@ var Fm = "DialogPortal", [Im, Lm] = Om(Fm, { forceMount: void 0 }), Rm = (e) =>
 		}))
 	});
 };
-Rm.displayName = Fm;
-var zm = "DialogOverlay", Bm = n.forwardRef((e, t) => {
-	let n = Lm(zm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = jm(zm, e.__scopeDialog);
+zm.displayName = Im;
+var Bm = "DialogOverlay", Vm = n.forwardRef((e, t) => {
+	let n = Rm(Bm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = Mm(Bm, e.__scopeDialog);
 	return a.modal ? /* @__PURE__ */ h(zl, {
 		present: r || a.open,
-		children: /* @__PURE__ */ h(Hm, {
+		children: /* @__PURE__ */ h(Um, {
 			...i,
 			ref: t
 		})
 	}) : null;
 });
-Bm.displayName = zm;
-var Vm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Hm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(zm, n);
+Vm.displayName = Bm;
+var Hm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Um = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Bm, n);
 	return /* @__PURE__ */ h(Fs, {
-		as: Vm,
+		as: Hm,
 		allowPinchZoom: !0,
 		shards: [i.contentRef],
 		children: /* @__PURE__ */ h($.div, {
-			"data-state": eh(i.open),
+			"data-state": th(i.open),
 			...r,
 			ref: t,
 			style: {
@@ -9252,26 +9359,26 @@ var Vm = /* @__PURE__ */ Dn("DialogOverlay.RemoveScroll"), Hm = n.forwardRef((e,
 			}
 		})
 	});
-}), Um = "DialogContent", Wm = n.forwardRef((e, t) => {
-	let n = Lm(Um, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = jm(Um, e.__scopeDialog);
+}), Wm = "DialogContent", Gm = n.forwardRef((e, t) => {
+	let n = Rm(Wm, e.__scopeDialog), { forceMount: r = n.forceMount, ...i } = e, a = Mm(Wm, e.__scopeDialog);
 	return /* @__PURE__ */ h(zl, {
 		present: r || a.open,
-		children: a.modal ? /* @__PURE__ */ h(Gm, {
+		children: a.modal ? /* @__PURE__ */ h(Km, {
 			...i,
 			ref: t
-		}) : /* @__PURE__ */ h(Km, {
+		}) : /* @__PURE__ */ h(qm, {
 			...i,
 			ref: t
 		})
 	});
 });
-Wm.displayName = Um;
-var Gm = n.forwardRef((e, t) => {
-	let r = jm(Um, e.__scopeDialog), i = n.useRef(null), a = Q(t, r.contentRef, i);
+Gm.displayName = Wm;
+var Km = n.forwardRef((e, t) => {
+	let r = Mm(Wm, e.__scopeDialog), i = n.useRef(null), a = Q(t, r.contentRef, i);
 	return n.useEffect(() => {
 		let e = i.current;
 		if (e) return Eo(e);
-	}, []), /* @__PURE__ */ h(qm, {
+	}, []), /* @__PURE__ */ h(Jm, {
 		...e,
 		ref: a,
 		trapFocus: r.open,
@@ -9285,9 +9392,9 @@ var Gm = n.forwardRef((e, t) => {
 		}),
 		onFocusOutside: Z(e.onFocusOutside, (e) => e.preventDefault())
 	});
-}), Km = n.forwardRef((e, t) => {
-	let r = jm(Um, e.__scopeDialog), i = n.useRef(!1), a = n.useRef(!1);
-	return /* @__PURE__ */ h(qm, {
+}), qm = n.forwardRef((e, t) => {
+	let r = Mm(Wm, e.__scopeDialog), i = n.useRef(!1), a = n.useRef(!1);
+	return /* @__PURE__ */ h(Jm, {
 		...e,
 		ref: t,
 		trapFocus: !1,
@@ -9301,8 +9408,8 @@ var Gm = n.forwardRef((e, t) => {
 			r.triggerRef.current?.contains(n) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && a.current && t.preventDefault();
 		}
 	});
-}), qm = n.forwardRef((e, t) => {
-	let { __scopeDialog: r, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, ...s } = e, c = jm(Um, r), l = n.useRef(null), u = Q(t, l);
+}), Jm = n.forwardRef((e, t) => {
+	let { __scopeDialog: r, trapFocus: i, onOpenAutoFocus: a, onCloseAutoFocus: o, ...s } = e, c = Mm(Wm, r), l = n.useRef(null), u = Q(t, l);
 	return er(), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(or, {
 		asChild: !0,
 		loop: !0,
@@ -9314,35 +9421,35 @@ var Gm = n.forwardRef((e, t) => {
 			id: c.contentId,
 			"aria-describedby": c.descriptionId,
 			"aria-labelledby": c.titleId,
-			"data-state": eh(c.open),
+			"data-state": th(c.open),
 			...s,
 			ref: u,
 			onDismiss: () => c.onOpenChange(!1)
 		})
-	}), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(ih, { titleId: c.titleId }), /* @__PURE__ */ h(oh, {
+	}), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(ah, { titleId: c.titleId }), /* @__PURE__ */ h(sh, {
 		contentRef: l,
 		descriptionId: c.descriptionId
 	})] })] });
-}), Jm = "DialogTitle", Ym = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Jm, n);
+}), Ym = "DialogTitle", Xm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Ym, n);
 	return /* @__PURE__ */ h($.h2, {
 		id: i.titleId,
 		...r,
 		ref: t
 	});
 });
-Ym.displayName = Jm;
-var Xm = "DialogDescription", Zm = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Xm, n);
+Xm.displayName = Ym;
+var Zm = "DialogDescription", Qm = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm(Zm, n);
 	return /* @__PURE__ */ h($.p, {
 		id: i.descriptionId,
 		...r,
 		ref: t
 	});
 });
-Zm.displayName = Xm;
-var Qm = "DialogClose", $m = n.forwardRef((e, t) => {
-	let { __scopeDialog: n, ...r } = e, i = jm(Qm, n);
+Qm.displayName = Zm;
+var $m = "DialogClose", eh = n.forwardRef((e, t) => {
+	let { __scopeDialog: n, ...r } = e, i = Mm($m, n);
 	return /* @__PURE__ */ h($.button, {
 		type: "button",
 		...r,
@@ -9350,16 +9457,16 @@ var Qm = "DialogClose", $m = n.forwardRef((e, t) => {
 		onClick: Z(e.onClick, () => i.onOpenChange(!1))
 	});
 });
-$m.displayName = Qm;
-function eh(e) {
+eh.displayName = $m;
+function th(e) {
 	return e ? "open" : "closed";
 }
-var th = "DialogTitleWarning", [nh, rh] = Sn(th, {
-	contentName: Um,
-	titleName: Jm,
+var nh = "DialogTitleWarning", [rh, ih] = Sn(nh, {
+	contentName: Wm,
+	titleName: Ym,
 	docsSlug: "dialog"
-}), ih = ({ titleId: e }) => {
-	let t = rh(th), r = `\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
+}), ah = ({ titleId: e }) => {
+	let t = ih(nh), r = `\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
 
 If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.
 
@@ -9367,8 +9474,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 	return n.useEffect(() => {
 		e && (document.getElementById(e) || console.error(r));
 	}, [r, e]), null;
-}, ah = "DialogDescriptionWarning", oh = ({ contentRef: e, descriptionId: t }) => {
-	let r = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${rh(ah).contentName}}.`;
+}, oh = "DialogDescriptionWarning", sh = ({ contentRef: e, descriptionId: t }) => {
+	let r = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${ih(oh).contentName}}.`;
 	return n.useEffect(() => {
 		let n = e.current?.getAttribute("aria-describedby");
 		t && n && (document.getElementById(t) || console.warn(r));
@@ -9377,7 +9484,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		e,
 		t
 	]), null;
-}, sh = Mm, ch = Rm, lh = Bm, uh = Wm, dh = Ym, fh = Zm, ph = $m, mh = {
+}, ch = Nm, lh = zm, uh = Vm, dh = Gm, fh = Xm, ph = Qm, mh = eh, hh = {
 	sm: {
 		width: "360px",
 		headerPt: "16px",
@@ -9414,24 +9521,24 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		footerPx: "24px",
 		scrollHeight: "640px"
 	}
-}, hh = t`
+}, gh = t`
   from { opacity: 0; }
   to { opacity: 1; }
-`, gh = t`
+`, _h = t`
   from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
   to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-`, _h = ({ open: t, onOpenChange: n, size: r = "md", showClose: i = !0, children: a }) => {
-	let o = mh[r];
-	return /* @__PURE__ */ J(sh, {
+`, vh = ({ open: t, onOpenChange: n, size: r = "md", showClose: i = !0, children: a }) => {
+	let o = hh[r];
+	return /* @__PURE__ */ J(ch, {
 		open: t,
 		onOpenChange: n,
-		children: /* @__PURE__ */ Y(ch, { children: [/* @__PURE__ */ J(lh, { css: e({
+		children: /* @__PURE__ */ Y(lh, { children: [/* @__PURE__ */ J(uh, { css: e({
 			position: "fixed",
 			inset: 0,
 			background: ie.overlay,
-			animation: `${hh} 150ms ease`,
+			animation: `${gh} 150ms ease`,
 			zIndex: 999
-		}) }), /* @__PURE__ */ Y(uh, {
+		}) }), /* @__PURE__ */ Y(dh, {
 			css: e({
 				position: "fixed",
 				top: "50%",
@@ -9447,12 +9554,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 				flexDirection: "column",
 				overflow: "hidden",
 				fontFamily: W.family,
-				animation: `${gh} 150ms ease`,
+				animation: `${_h} 150ms ease`,
 				zIndex: 1e3,
 				"&:focus": { outline: "none" }
 			}),
 			"data-modal-size": r,
-			children: [i && /* @__PURE__ */ J(ph, {
+			children: [i && /* @__PURE__ */ J(mh, {
 				asChild: !0,
 				children: /* @__PURE__ */ J("button", {
 					css: e({
@@ -9481,8 +9588,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
 		})] })
 	});
 };
-_h.displayName = "Modal";
-var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
+vh.displayName = "Modal";
+var yh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	ref: r,
 	css: e({
 		padding: "20px 24px 8px",
@@ -9490,7 +9597,7 @@ var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 		"[data-modal-size=\"lg\"] &": { padding: "24px 24px 12px" }
 	}),
 	...n,
-	children: /* @__PURE__ */ J(dh, {
+	children: /* @__PURE__ */ J(fh, {
 		css: e({
 			fontSize: "16px",
 			fontWeight: W.weight.bold,
@@ -9502,8 +9609,8 @@ var vh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 		children: t
 	})
 }));
-vh.displayName = "ModalHeader";
-var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div", {
+yh.displayName = "ModalHeader";
+var bh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div", {
 	ref: i,
 	css: e({
 		padding: "0 24px 20px",
@@ -9525,7 +9632,7 @@ var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div"
 		} : {}
 	}),
 	...r,
-	children: /* @__PURE__ */ J(fh, {
+	children: /* @__PURE__ */ J(ph, {
 		asChild: !0,
 		children: /* @__PURE__ */ J("div", {
 			css: e({
@@ -9538,8 +9645,8 @@ var yh = i(({ scroll: t = !1, children: n, ...r }, i) => /* @__PURE__ */ J("div"
 		})
 	})
 }));
-yh.displayName = "ModalBody";
-var bh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
+bh.displayName = "ModalBody";
+var xh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	ref: r,
 	css: e({
 		display: "flex",
@@ -9554,18 +9661,18 @@ var bh = i(({ children: t, ...n }, r) => /* @__PURE__ */ J("div", {
 	...n,
 	children: t
 }));
-bh.displayName = "ModalFooter";
+xh.displayName = "ModalFooter";
 //#endregion
 //#region src/components/toast/Toast.tsx
-var xh = {
+var Sh = {
 	success: "check-circle",
 	error: "error",
 	warning: "warning",
 	info: "info"
-}, Sh = t`
+}, Ch = t`
   from { transform: translateX(100%); opacity: 0; }
   to { transform: translateX(0); opacity: 1; }
-`, Ch = i(({ type: t = "success", title: n, description: r, action: i, showClose: a = !0, onClose: o, duration: c = 5e3, ...l }, u) => {
+`, wh = i(({ type: t = "success", title: n, description: r, action: i, showClose: a = !0, onClose: o, duration: c = 5e3, ...l }, u) => {
 	let d = re[t];
 	return s(() => {
 		if (c > 0 && o) {
@@ -9587,12 +9694,12 @@ var xh = {
 			borderRadius: "8px",
 			boxShadow: ue.md,
 			fontFamily: W.family,
-			animation: `${Sh} 200ms ease`
+			animation: `${Ch} 200ms ease`
 		}),
 		...l,
 		children: [
 			/* @__PURE__ */ J(X, {
-				name: xh[t],
+				name: Sh[t],
 				size: "md",
 				color: d.icon,
 				css: e({ flexShrink: 0 })
@@ -9663,10 +9770,10 @@ var xh = {
 		]
 	});
 });
-Ch.displayName = "Toast";
+wh.displayName = "Toast";
 //#endregion
 //#region src/components/alert-feed/AlertFeed.tsx
-var wh = {
+var Th = {
 	emergency: {
 		label: "Emergency",
 		bg: "var(--tag-danger-bg-solid)",
@@ -9687,17 +9794,17 @@ var wh = {
 		bg: "var(--tag-info-bg-solid)",
 		text: "var(--tag-info-text-solid)"
 	}
-}, Th = t`
+}, Eh = t`
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
-`, Eh = ({ width: t, height: n, radius: r = "4px" }) => /* @__PURE__ */ J("div", { css: e({
+`, Dh = ({ width: t, height: n, radius: r = "4px" }) => /* @__PURE__ */ J("div", { css: e({
 	width: t,
 	height: n,
 	borderRadius: r,
 	background: "#f3f4f6",
-	animation: `${Th} 1.5s ease-in-out infinite`
-}) }), Dh = ({ severity: t }) => {
-	let n = wh[t];
+	animation: `${Eh} 1.5s ease-in-out infinite`
+}) }), Oh = ({ severity: t }) => {
+	let n = Th[t];
 	return /* @__PURE__ */ J("span", {
 		css: e({
 			display: "inline-flex",
@@ -9715,7 +9822,7 @@ var wh = {
 		}),
 		children: n.label
 	});
-}, Oh = {
+}, kh = {
 	emergency: {
 		bg: "var(--tag-danger-bg-solid)",
 		text: "var(--tag-danger-text-solid)"
@@ -9736,11 +9843,11 @@ var wh = {
 		bg: "#374151",
 		text: "#ffffff"
 	}
-}, kh = {
+}, Ah = {
 	bg: "var(--tag-default-bg-subtle)",
 	text: "var(--tag-default-text-subtle)"
-}, Ah = ({ label: t, count: n, active: r, filterKey: i }) => {
-	let a = r ? Oh[i] ?? kh : kh;
+}, jh = ({ label: t, count: n, active: r, filterKey: i }) => {
+	let a = r ? kh[i] ?? Ah : Ah;
 	return /* @__PURE__ */ J("span", {
 		css: e({
 			display: "inline-flex",
@@ -9761,7 +9868,7 @@ var wh = {
 		}),
 		children: `${t}  ${n}`
 	});
-}, jh = ({ item: t }) => /* @__PURE__ */ Y("div", {
+}, Mh = ({ item: t }) => /* @__PURE__ */ Y("div", {
 	css: e({
 		display: "flex",
 		flexDirection: "column",
@@ -9779,7 +9886,7 @@ var wh = {
 				alignItems: "center",
 				justifyContent: "space-between"
 			}),
-			children: [/* @__PURE__ */ J(Dh, { severity: t.severity }), /* @__PURE__ */ J("span", {
+			children: [/* @__PURE__ */ J(Oh, { severity: t.severity }), /* @__PURE__ */ J("span", {
 				css: e({
 					fontSize: "12px",
 					lineHeight: "18px",
@@ -9810,7 +9917,7 @@ var wh = {
 			children: t.meta
 		})
 	]
-}), Mh = () => /* @__PURE__ */ Y("div", {
+}), Nh = () => /* @__PURE__ */ Y("div", {
 	css: e({
 		display: "flex",
 		flexDirection: "column",
@@ -9828,25 +9935,25 @@ var wh = {
 				alignItems: "center",
 				justifyContent: "space-between"
 			}),
-			children: [/* @__PURE__ */ J(Eh, {
+			children: [/* @__PURE__ */ J(Dh, {
 				width: "72px",
 				height: "22px",
 				radius: "100px"
-			}), /* @__PURE__ */ J(Eh, {
+			}), /* @__PURE__ */ J(Dh, {
 				width: "40px",
 				height: "12px"
 			})]
 		}),
-		/* @__PURE__ */ J(Eh, {
+		/* @__PURE__ */ J(Dh, {
 			width: "80%",
 			height: "14px"
 		}),
-		/* @__PURE__ */ J(Eh, {
+		/* @__PURE__ */ J(Dh, {
 			width: "60%",
 			height: "12px"
 		})
 	]
-}), Nh = i(({ title: t = "Threat Event Alarms", subtitle: n = "(Last 7 Days)", items: r = [], loading: i = !1, height: a = 620, filterCounts: o, activeFilter: s = "all", onFilterChange: c, onViewAll: l, onSettingsClick: u, viewAllLabel: d = "View All Threat Events", ...f }, p) => {
+}), Ph = i(({ title: t = "Threat Event Alarms", subtitle: n = "(Last 7 Days)", items: r = [], loading: i = !1, height: a = 620, filterCounts: o, activeFilter: s = "all", onFilterChange: c, onViewAll: l, onSettingsClick: u, viewAllLabel: d = "View All Threat Events", ...f }, p) => {
 	let m = o ?? {
 		all: r.length,
 		emergency: r.filter((e) => e.severity === "emergency").length,
@@ -9899,20 +10006,20 @@ var wh = {
 							gap: "8px"
 						}),
 						children: [
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "16px",
 								height: "16px"
 							}),
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "140px",
 								height: "16px"
 							}),
-							/* @__PURE__ */ J(Eh, {
+							/* @__PURE__ */ J(Dh, {
 								width: "64px",
 								height: "12px"
 							})
 						]
-					}), /* @__PURE__ */ J(Eh, {
+					}), /* @__PURE__ */ J(Dh, {
 						width: "16px",
 						height: "16px"
 					})]
@@ -9927,7 +10034,7 @@ var wh = {
 						52,
 						60,
 						56
-					].map((e, t) => /* @__PURE__ */ J(Eh, {
+					].map((e, t) => /* @__PURE__ */ J(Dh, {
 						width: `${e}px`,
 						height: "24px",
 						radius: "100px"
@@ -9990,7 +10097,7 @@ var wh = {
 					children: Object.entries(m).map(([t, n]) => /* @__PURE__ */ J("span", {
 						onClick: () => c?.(t),
 						css: e({ cursor: "pointer" }),
-						children: /* @__PURE__ */ J(Ah, {
+						children: /* @__PURE__ */ J(jh, {
 							filterKey: t,
 							label: _[t] ?? t,
 							count: n,
@@ -10021,7 +10128,7 @@ var wh = {
 						minHeight: 0,
 						overflowY: "auto"
 					}),
-					children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ J(Mh, {}, t))
+					children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ J(Nh, {}, t))
 				}), /* @__PURE__ */ J("div", {
 					css: e({
 						display: "flex",
@@ -10029,7 +10136,7 @@ var wh = {
 						padding: "8px",
 						flexShrink: 0
 					}),
-					children: /* @__PURE__ */ J(Eh, {
+					children: /* @__PURE__ */ J(Dh, {
 						width: "160px",
 						height: "16px"
 					})
@@ -10134,7 +10241,7 @@ var wh = {
 							borderRadius: "2px"
 						}
 					}),
-					children: h.map((e) => /* @__PURE__ */ J(jh, { item: e }, e.id))
+					children: h.map((e) => /* @__PURE__ */ J(Mh, { item: e }, e.id))
 				}), l && /* @__PURE__ */ J("button", {
 					onClick: l,
 					css: e({
@@ -10161,10 +10268,10 @@ var wh = {
 		]
 	});
 });
-Nh.displayName = "AlertFeed";
+Ph.displayName = "AlertFeed";
 //#endregion
 //#region src/tokens/index.ts
-var Ph = {
+var Fh = {
 	button: E,
 	checkbox: D,
 	radio: O,
@@ -10202,4 +10309,4 @@ var Ph = {
 	csc: T
 };
 //#endregion
-export { Nh as AlertFeed, bu as Autocomplete, Em as Avatar, Cl as Badge, gn as Button, wl as Card, Ol as CardAction, Al as CardContent, Dl as CardDescription, jl as CardFooter, Tl as CardHeader, El as CardTitle, pl as Checkbox, up as Dropdown, fp as DropdownItem, Cm as File, X as Icon, yn as Input, ol as InputWithButton, pm as Link, _h as Modal, yh as ModalBody, bh as ModalFooter, vh as ModalHeader, hp as MultiSelect, pp as NotificationBadge, fm as Pagination, bl as Radio, xl as RadioGroup, Ll as Search, al as Select, mm as Table, gm as TableBody, xm as TableCaption, bm as TableCell, ym as TableHead, hm as TableHeader, _m as TableRow, gp as Tabs, Fl as Tag, bn as Textarea, Ch as Toast, Nl as Toggle, cm as Tooltip, ae as avatar, x as base, A as color, T as csc, ve as dataviz, R as dropdown, oe as file, W as font, ge as gray, N as label, te as link, ie as modal, B as multiselect, ee as notificationBadge, U as pagination, le as radius, C as rm, ue as shadow, _e as status, H as table, V as tabs, I as tag, re as toast, Ph as tokens, ce as tooltip };
+export { Ph as AlertFeed, bu as Autocomplete, Dm as Avatar, Cl as Badge, gn as Button, wl as Card, Ol as CardAction, Al as CardContent, Dl as CardDescription, jl as CardFooter, Tl as CardHeader, El as CardTitle, pl as Checkbox, Sm as DataTable, up as Dropdown, fp as DropdownItem, wm as File, X as Icon, yn as Input, ol as InputWithButton, pm as Link, vh as Modal, bh as ModalBody, xh as ModalFooter, yh as ModalHeader, hp as MultiSelect, pp as NotificationBadge, fm as Pagination, bl as Radio, xl as RadioGroup, Ll as Search, al as Select, mm as Table, gm as TableBody, xm as TableCaption, bm as TableCell, ym as TableHead, hm as TableHeader, _m as TableRow, gp as Tabs, Fl as Tag, bn as Textarea, wh as Toast, Nl as Toggle, cm as Tooltip, ae as avatar, x as base, A as color, T as csc, ve as dataviz, R as dropdown, oe as file, W as font, ge as gray, N as label, te as link, ie as modal, B as multiselect, ee as notificationBadge, U as pagination, le as radius, C as rm, ue as shadow, _e as status, H as table, V as tabs, I as tag, re as toast, Fh as tokens, ce as tooltip };

package/dist/types/components/index.d.ts

@@ -20,6 +20,7 @@ export { Pagination, type PaginationProps, type PaginationSize } from './paginat
 export { Link, type LinkProps, type LinkType } from './link/Link';
 export { Icon, type IconProps, type IconSize, type IconName } from './icon/Icon';
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableRowProps, type TableHeadProps, type SortDirection } from './table/Table';
+export { DataTable, type DataTableProps, type DataTableColumn } from './table/DataTable';
 export { File, type FileProps, type FileState } from './file/File';
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarShape } from './avatar/Avatar';
 export { Modal, ModalHeader, ModalBody, ModalFooter, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from './modal/Modal';

package/dist/types/components/table/DataTable.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface DataTableColumn<T = Record<string, unknown>> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    render?: (value: unknown, row: T, index: number) => ReactNode;
+}
+export interface DataTableProps<T = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    rowKey?: string | ((row: T, index: number) => string | number);
+    striped?: boolean;
+    pagination?: boolean;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showGoTo?: boolean;
+    selectable?: boolean;
+    selectedKey?: string | number | null;
+    onRowClick?: (row: T, index: number) => void;
+    emptyText?: string;
+}
+export declare function DataTable<T extends Record<string, unknown>>({ columns, data, rowKey, striped, pagination, pageSize: initialPageSize, pageSizeOptions, showGoTo, selectable, selectedKey, onRowClick, emptyText, ...rest }: DataTableProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+}

package/dist/types/lib.d.ts

@@ -20,6 +20,7 @@ export { Pagination, type PaginationProps, type PaginationSize } from "./compone
 export { Link, type LinkProps, type LinkType } from "./components/link/Link";
 export { Icon, type IconProps, type IconSize, type IconName } from "./components/icon/Icon";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableRowProps, type TableHeadProps, type SortDirection } from "./components/table/Table";
+export { DataTable, type DataTableProps, type DataTableColumn } from "./components/table/DataTable";
 export { File, type FileProps, type FileState } from "./components/file/File";
 export { Avatar, type AvatarProps, type AvatarSize, type AvatarShape } from "./components/avatar/Avatar";
 export { Modal, ModalHeader, ModalBody, ModalFooter, type ModalProps, type ModalSize, type ModalHeaderProps, type ModalBodyProps, type ModalFooterProps } from "./components/modal/Modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimkihwan/cytur-design-system",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",