@ktnpm_devops/react-component 0.0.1 → 0.1.1

package/dist/style.css

@@ -2,31 +2,31 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 18px;
+  border-radius: 1.125rem;
   background: linear-gradient(135deg, var(--accent-color), var(--orbit-color-purple-light));
   color: #ffffff;
   font-weight: 600;
 }
 
 .krc-sm-QGnvH {
-  width: 32px;
-  height: 32px;
+  width: 2rem;
+  height: 2rem;
   font-size: 0.75rem;
-  border-radius: 12px;
+  border-radius: 0.75rem;
 }
 
 .krc-md-rQKlJ {
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
   font-size: 1rem;
-  border-radius: 18px;
+  border-radius: 1.125rem;
 }
 
 .krc-lg-eC2yT {
-  width: 64px;
-  height: 64px;
+  width: 4rem;
+  height: 4rem;
   font-size: 1.25rem;
-  border-radius: 22px;
+  border-radius: 1.375rem;
 }
 .krc-root-oc0XP {
   display: inline-flex;
@@ -66,7 +66,7 @@
   font-family: inherit;
   font-weight: 600;
   border-radius: var(--radius-md);
-  border: 1px solid transparent;
+  border: var(--border-width) solid transparent;
   padding: 0.625rem 1.25rem;
   font-size: 0.95rem;
   line-height: 1.25;
@@ -77,7 +77,7 @@
 
 .krc-root-Kdtyn:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(255, 107, 90, 0.35), 0 0 0 4px rgba(255, 107, 90, 0.18);
+  box-shadow: 0 0 0 var(--border-width-md) rgba(255, 107, 90, 0.35), 0 0 0 var(--focus-ring-spread) rgba(255, 107, 90, 0.18);
 }
 
 .krc-root-Kdtyn:disabled {
@@ -94,7 +94,7 @@
 
 .krc-primary-6l6aH:hover:not(:disabled) {
   background: var(--accent-color-strong);
-  transform: translateY(-1px);
+  transform: translateY(-0.0625rem);
 }
 
 .krc-secondary-29n8Y {
@@ -150,31 +150,305 @@
 }
 .krc-root-AouLD {
   background: var(--surface-color);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-subtle);
 }
 
 .krc-header-pNze5 {
   padding: 1.25rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border-width) solid var(--border-color);
 }
 
 .krc-content-egG2e {
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
 }
 
 .krc-footer-WJw5Z {
   padding: 1.25rem;
-  border-top: 1px solid var(--border-color);
+  border-top: var(--border-width) solid var(--border-color);
   background: var(--surface-alt);
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
 }
+.krc-overlay-WWw5c {
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--overlay-color, rgba(0, 0, 0, 0.6));
+}
+
+.krc-modal-ZLlQ4 {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+
+.krc-modal-ZLlQ4:not(.krc-resizable-G8TND) {
+  width: min(93.75rem, calc(100vw - 2rem));
+  height: min(51.25rem, calc(100vh - 2rem));
+}
+
+.krc-header-RFEXB {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.krc-title-FhVKX {
+  margin: 0;
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.krc-headerActions-Qj5SG {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-close-EQ-3d {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.krc-close-EQ-3d:hover {
+  color: var(--text-primary);
+  background: var(--surface-secondary);
+}
+
+.krc-body-ZLPhV {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+.krc-loading-lxD8d {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-resizeHandle-Q0J-B {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  cursor: nwse-resize;
+}
+
+.krc-resizeHandle-Q0J-B span {
+  display: block;
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+  margin: 0.1875rem;
+  border-right: var(--border-width-md) solid var(--text-secondary);
+  border-bottom: var(--border-width-md) solid var(--text-secondary);
+}
+.krc-root-LQf3S {
+  position: fixed;
+  z-index: 10;
+  min-width: 11.25rem;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-xs) 0;
+  outline: none;
+}
+
+.krc-item-Y5RvK {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.krc-item-Y5RvK:hover:not(.krc-disabled-wnQRZ),
+.krc-item-Y5RvK.krc-focused-hDoa3:not(.krc-disabled-wnQRZ) {
+  background: var(--surface-secondary);
+}
+
+.krc-item-Y5RvK.krc-disabled-wnQRZ {
+  color: var(--text-secondary);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-icon-q-Jmu {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+
+.krc-item-Y5RvK:hover:not(.krc-disabled-wnQRZ) .krc-icon-q-Jmu {
+  color: var(--text-primary);
+}
+.krc-root-7cxYt {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.krc-chip-tgAQw {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.krc-chip-tgAQw:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-chip-tgAQw.krc-active-hboGd {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.krc-summary-E-FXy {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.krc-popover-IJFWK {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 10;
+  min-width: 18.75rem;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-md);
+}
+
+.krc-popoverHeader-mdeD8 {
+  margin-bottom: var(--spacing-sm);
+}
+
+.krc-popoverHeader-mdeD8 h4 {
+  margin: 0;
+  font-size: var(--font-size-md);
+  color: var(--text-primary);
+}
+
+.krc-fields-h5R5w {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.krc-field-u9yvp {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.krc-field-u9yvp input {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-field-u9yvp input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.krc-error-jsFkv {
+  margin-top: var(--spacing-sm);
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-actions-prbFX {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-md);
+}
+
+.krc-btnGhost-x8cbA {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.krc-btnGhost-x8cbA:hover {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+}
+
+.krc-btnPrimary-T0w2q {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: #fff;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.krc-btnPrimary-T0w2q:hover {
+  opacity: 0.85;
+}
 .krc-root-bWynN {
   width: 100%;
   padding: 0.65rem 0.85rem;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   background: var(--surface-color);
   color: var(--text-primary);
   font-size: 0.95rem;
@@ -188,7 +462,7 @@
 .krc-root-bWynN:focus {
   outline: none;
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px rgba(255, 107, 90, 0.15);
+  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
 }
 
 .krc-root-bWynN:disabled {
@@ -199,20 +473,20 @@
   position: fixed;
   inset: 0;
   background: rgba(17, 24, 39, 0.55);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--backdrop-blur));
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
   z-index: 99999;
 }
 
 .krc-root-eKDda {
-  width: min(640px, 100%);
+  width: min(40rem, 100%);
   max-height: 90vh;
   overflow: hidden;
   border-radius: var(--radius-lg);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   background: var(--surface-color);
   box-shadow: var(--shadow-elevated);
   display: flex;
@@ -220,12 +494,12 @@
 }
 
 .krc-header-YrzLd {
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  padding: var(--spacing-lg);
+  border-bottom: var(--border-width) solid var(--border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--spacing-md);
 }
 
 .krc-title-9rzEH {
@@ -255,25 +529,312 @@
 }
 
 .krc-body-g43Cd {
-  padding: 1.5rem;
+  padding: var(--spacing-lg);
   overflow-y: auto;
   flex: 1;
   min-height: 0;
 }
 
 .krc-footer-JRwi5 {
-  padding: 1.5rem;
-  border-top: 1px solid var(--border-color);
+  padding: var(--spacing-lg);
+  border-top: var(--border-width) solid var(--border-color);
   background: var(--surface-alt);
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
 }
+.krc-root-WYIsp {
+  position: relative;
+  display: inline-block;
+}
+
+.krc-trigger-UedSS {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.krc-trigger-UedSS:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-trigger-UedSS.krc-active-cH8Tl {
+  border-color: var(--accent-color);
+  background: var(--surface-secondary);
+}
+
+.krc-triggerContent-Kkhoi {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-chevron-NoNsI {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.krc-active-cH8Tl .krc-chevron-NoNsI {
+  transform: rotate(180deg);
+}
+
+.krc-label-RPlXR {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.krc-valueGroup-xfNcx {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-value-aKdIW {
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.krc-badge-yVq9o {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 var(--spacing-xs);
+  background: var(--accent-color);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.krc-clear-11V9Q {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.krc-clear-11V9Q:hover {
+  color: var(--text-primary);
+  background: var(--surface-secondary);
+}
+
+.krc-panel-xf2f8 {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 10;
+  min-width: 17.5rem;
+  max-width: 22.5rem;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.krc-header--VMR- {
+  padding: var(--spacing-sm);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-search-4gQgB {
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.krc-search-4gQgB:focus {
+  border-color: var(--accent-color);
+}
+
+.krc-search-4gQgB::placeholder {
+  color: var(--text-secondary);
+}
+
+.krc-headerActions-orxXD {
+  display: flex;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+}
+
+.krc-chip--n-9m {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--accent-color);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.krc-chip--n-9m:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.krc-chip--n-9m:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.krc-chipGhost-oayjh {
+  background: transparent;
+  color: var(--text-secondary);
+  border: var(--border-width) solid var(--border-color);
+}
+
+.krc-chipGhost-oayjh:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: var(--text-secondary);
+  opacity: 1;
+}
+
+.krc-list-NRoxf {
+  max-height: 15rem;
+  overflow-y: auto;
+  padding: var(--spacing-xs) 0;
+}
+
+.krc-status-j7xbM {
+  padding: var(--spacing-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.krc-statusError-u6rfB {
+  color: var(--danger-color);
+}
+
+.krc-option-ZAXum {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.krc-option-ZAXum:hover {
+  background: var(--surface-secondary);
+}
+
+.krc-optionLabel-MdDyI {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}
+
+.krc-optionCount-JSQl9 {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.krc-create-hO8Cq {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: none;
+  border: none;
+  color: var(--accent-color);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.krc-create-hO8Cq:hover {
+  background: var(--surface-secondary);
+}
+
+.krc-footer-2yk6S {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm);
+  border-top: var(--border-width) solid var(--border-color);
+}
+
+.krc-selection-aYDH- {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.krc-selectionDelta-S1dV7 {
+  margin-left: var(--spacing-xs);
+  color: var(--accent-color);
+}
+
+.krc-footerActions-77iCX {
+  display: flex;
+  gap: var(--spacing-xs);
+}
+.krc-root-WL0sD {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.krc-left-9KFDB,
+.krc-right-YmUbX {
+  overflow: auto;
+}
+
+.krc-divider-jNOSU {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.5rem;
+  cursor: col-resize;
+  background: var(--surface-color);
+  border-left: var(--border-width) solid var(--border-color);
+  border-right: var(--border-width) solid var(--border-color);
+  transition: background-color 0.15s ease;
+}
+
+.krc-divider-jNOSU:hover,
+.krc-divider-jNOSU:focus-visible {
+  background: var(--surface-secondary);
+}
+
+.krc-divider-jNOSU:focus-visible {
+  outline: var(--border-width-md) solid var(--accent-color);
+  outline-offset: -0.125rem;
+}
+
+.krc-dividerHandle-SoNqx {
+  color: var(--text-secondary);
+}
 .krc-root-jba0x {
   width: 100%;
   padding: 0.65rem 0.85rem;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   background: var(--surface-color);
   color: var(--text-primary);
   font-size: 0.95rem;
@@ -283,15 +844,173 @@
 .krc-root-jba0x:focus {
   outline: none;
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px rgba(255, 107, 90, 0.15);
+  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
 }
 
 .krc-root-jba0x:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
+.krc-root--s1oD {
+  position: relative;
+  display: inline-block;
+}
+
+.krc-trigger-WMlNa {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.krc-trigger-WMlNa:hover {
+  border-color: var(--accent-color);
+}
+
+.krc-trigger-WMlNa.krc-active-O65lj {
+  border-color: var(--accent-color);
+  background: var(--surface-secondary);
+}
+
+.krc-triggerContent-JipmE {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-chevron-J2Zsy {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease;
+}
+
+.krc-active-O65lj .krc-chevron-J2Zsy {
+  transform: rotate(180deg);
+}
+
+.krc-label-lZlV- {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.krc-value-HsQrC {
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.krc-clear-bsi5j {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xs);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.krc-clear-bsi5j:hover {
+  color: var(--text-primary);
+}
+
+.krc-panel--0odx {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  z-index: 10;
+  min-width: 13.75rem;
+  max-width: 20rem;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.krc-searchContainer-WRS-U {
+  padding: var(--spacing-sm);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-search-Dh3pY {
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--surface-secondary);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.krc-search-Dh3pY:focus {
+  border-color: var(--accent-color);
+}
+
+.krc-search-Dh3pY::placeholder {
+  color: var(--text-secondary);
+}
+
+.krc-list-1RUtr {
+  max-height: 15rem;
+  overflow-y: auto;
+  padding: var(--spacing-xs) 0;
+}
+
+.krc-noResults-Hin1U {
+  padding: var(--spacing-sm);
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.krc-option-0mFGi {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: none;
+  border: none;
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+.krc-option-0mFGi:hover,
+.krc-option-0mFGi.krc-focused-0-7tE {
+  background: var(--surface-secondary);
+}
+
+.krc-option-0mFGi.krc-selected-1zIqI {
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.krc-optionLabel-pj-hL {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-optionCount-rVlCP {
+  color: var(--text-secondary);
+  font-size: var(--font-size-xs);
+}
 .krc-container-cpDoQ {
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--surface-color);
@@ -320,7 +1039,7 @@
 
 .krc-root-20TMP td {
   padding: 1rem 1.25rem;
-  border-top: 1px solid var(--border-color);
+  border-top: var(--border-width) solid var(--border-color);
   color: var(--text-primary);
   font-size: 0.9rem;
 }
@@ -332,12 +1051,12 @@
   width: 100%;
   padding: 0.65rem 0.85rem;
   border-radius: var(--radius-md);
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   background: var(--surface-color);
   color: var(--text-primary);
   font-size: 0.95rem;
   resize: vertical;
-  min-height: 120px;
+  min-height: 7.5rem;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 
@@ -348,7 +1067,7 @@
 .krc-root-FVKOX:focus {
   outline: none;
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px rgba(255, 107, 90, 0.15);
+  box-shadow: 0 0 0 var(--focus-ring-width) rgba(255, 107, 90, 0.15);
 }
 
 .krc-root-FVKOX:disabled {