@flexmatch-dev/react-ui 0.0.1 → 0.0.3

package/dist/index.css

@@ -1,6 +1,83 @@
 /* @flexmatch-dev/react-ui - Bundled CSS */
 
 
+/* === ./font.css === */
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Pretendard';
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-display: swap;
+}
+
+
+
+/* === ./common.css === */
+.no-drag {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
+
+
 /* === ./_generated/color-variable.css === */
 @theme {
   --color-base-black: #030303;
@@ -80,6 +157,12 @@
 .bg-base-black {
   background-color: var(--color-base-black);
 }
+.hover:bg-base-black {
+  &:hover {
+    background-color: var(--color-base-black);
+  }
+}
+
 .font-base-black {
   color: var(--color-base-black);
 }
@@ -91,6 +174,12 @@
 .bg-base-white {
   background-color: var(--color-base-white);
 }
+.hover:bg-base-white {
+  &:hover {
+    background-color: var(--color-base-white);
+  }
+}
+
 .font-base-white {
   color: var(--color-base-white);
 }
@@ -102,6 +191,12 @@
 .bg-core-black {
   background-color: var(--color-core-black);
 }
+.hover:bg-core-black {
+  &:hover {
+    background-color: var(--color-core-black);
+  }
+}
+
 .font-core-black {
   color: var(--color-core-black);
 }
@@ -113,6 +208,12 @@
 .bg-core-green {
   background-color: var(--color-core-green);
 }
+.hover:bg-core-green {
+  &:hover {
+    background-color: var(--color-core-green);
+  }
+}
+
 .font-core-green {
   color: var(--color-core-green);
 }
@@ -124,6 +225,12 @@
 .bg-core-light-gray {
   background-color: var(--color-core-light-gray);
 }
+.hover:bg-core-light-gray {
+  &:hover {
+    background-color: var(--color-core-light-gray);
+  }
+}
+
 .font-core-light-gray {
   color: var(--color-core-light-gray);
 }
@@ -135,6 +242,12 @@
 .bg-core-lime {
   background-color: var(--color-core-lime);
 }
+.hover:bg-core-lime {
+  &:hover {
+    background-color: var(--color-core-lime);
+  }
+}
+
 .font-core-lime {
   color: var(--color-core-lime);
 }
@@ -146,6 +259,12 @@
 .bg-core-mint {
   background-color: var(--color-core-mint);
 }
+.hover:bg-core-mint {
+  &:hover {
+    background-color: var(--color-core-mint);
+  }
+}
+
 .font-core-mint {
   color: var(--color-core-mint);
 }
@@ -157,6 +276,12 @@
 .bg-core-navy {
   background-color: var(--color-core-navy);
 }
+.hover:bg-core-navy {
+  &:hover {
+    background-color: var(--color-core-navy);
+  }
+}
+
 .font-core-navy {
   color: var(--color-core-navy);
 }
@@ -168,6 +293,12 @@
 .bg-core-purple {
   background-color: var(--color-core-purple);
 }
+.hover:bg-core-purple {
+  &:hover {
+    background-color: var(--color-core-purple);
+  }
+}
+
 .font-core-purple {
   color: var(--color-core-purple);
 }
@@ -179,6 +310,12 @@
 .bg-core-white {
   background-color: var(--color-core-white);
 }
+.hover:bg-core-white {
+  &:hover {
+    background-color: var(--color-core-white);
+  }
+}
+
 .font-core-white {
   color: var(--color-core-white);
 }
@@ -190,6 +327,12 @@
 .bg-core-yellow {
   background-color: var(--color-core-yellow);
 }
+.hover:bg-core-yellow {
+  &:hover {
+    background-color: var(--color-core-yellow);
+  }
+}
+
 .font-core-yellow {
   color: var(--color-core-yellow);
 }
@@ -201,6 +344,12 @@
 .bg-gray-100 {
   background-color: var(--color-gray-100);
 }
+.hover:bg-gray-100 {
+  &:hover {
+    background-color: var(--color-gray-100);
+  }
+}
+
 .font-gray-100 {
   color: var(--color-gray-100);
 }
@@ -212,6 +361,12 @@
 .bg-gray-200 {
   background-color: var(--color-gray-200);
 }
+.hover:bg-gray-200 {
+  &:hover {
+    background-color: var(--color-gray-200);
+  }
+}
+
 .font-gray-200 {
   color: var(--color-gray-200);
 }
@@ -223,6 +378,12 @@
 .bg-gray-300 {
   background-color: var(--color-gray-300);
 }
+.hover:bg-gray-300 {
+  &:hover {
+    background-color: var(--color-gray-300);
+  }
+}
+
 .font-gray-300 {
   color: var(--color-gray-300);
 }
@@ -234,6 +395,12 @@
 .bg-gray-400 {
   background-color: var(--color-gray-400);
 }
+.hover:bg-gray-400 {
+  &:hover {
+    background-color: var(--color-gray-400);
+  }
+}
+
 .font-gray-400 {
   color: var(--color-gray-400);
 }
@@ -245,6 +412,12 @@
 .bg-gray-50 {
   background-color: var(--color-gray-50);
 }
+.hover:bg-gray-50 {
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}
+
 .font-gray-50 {
   color: var(--color-gray-50);
 }
@@ -256,6 +429,12 @@
 .bg-gray-500 {
   background-color: var(--color-gray-500);
 }
+.hover:bg-gray-500 {
+  &:hover {
+    background-color: var(--color-gray-500);
+  }
+}
+
 .font-gray-500 {
   color: var(--color-gray-500);
 }
@@ -267,6 +446,12 @@
 .bg-gray-600 {
   background-color: var(--color-gray-600);
 }
+.hover:bg-gray-600 {
+  &:hover {
+    background-color: var(--color-gray-600);
+  }
+}
+
 .font-gray-600 {
   color: var(--color-gray-600);
 }
@@ -278,6 +463,12 @@
 .bg-gray-700 {
   background-color: var(--color-gray-700);
 }
+.hover:bg-gray-700 {
+  &:hover {
+    background-color: var(--color-gray-700);
+  }
+}
+
 .font-gray-700 {
   color: var(--color-gray-700);
 }
@@ -289,6 +480,12 @@
 .bg-gray-800 {
   background-color: var(--color-gray-800);
 }
+.hover:bg-gray-800 {
+  &:hover {
+    background-color: var(--color-gray-800);
+  }
+}
+
 .font-gray-800 {
   color: var(--color-gray-800);
 }
@@ -300,6 +497,12 @@
 .bg-gray-900 {
   background-color: var(--color-gray-900);
 }
+.hover:bg-gray-900 {
+  &:hover {
+    background-color: var(--color-gray-900);
+  }
+}
+
 .font-gray-900 {
   color: var(--color-gray-900);
 }
@@ -311,6 +514,12 @@
 .bg-primary-10 {
   background-color: var(--color-primary-10);
 }
+.hover:bg-primary-10 {
+  &:hover {
+    background-color: var(--color-primary-10);
+  }
+}
+
 .font-primary-10 {
   color: var(--color-primary-10);
 }
@@ -322,6 +531,12 @@
 .bg-primary-100 {
   background-color: var(--color-primary-100);
 }
+.hover:bg-primary-100 {
+  &:hover {
+    background-color: var(--color-primary-100);
+  }
+}
+
 .font-primary-100 {
   color: var(--color-primary-100);
 }
@@ -333,6 +548,12 @@
 .bg-primary-200 {
   background-color: var(--color-primary-200);
 }
+.hover:bg-primary-200 {
+  &:hover {
+    background-color: var(--color-primary-200);
+  }
+}
+
 .font-primary-200 {
   color: var(--color-primary-200);
 }
@@ -344,6 +565,12 @@
 .bg-primary-30 {
   background-color: var(--color-primary-30);
 }
+.hover:bg-primary-30 {
+  &:hover {
+    background-color: var(--color-primary-30);
+  }
+}
+
 .font-primary-30 {
   color: var(--color-primary-30);
 }
@@ -355,6 +582,12 @@
 .bg-primary-300 {
   background-color: var(--color-primary-300);
 }
+.hover:bg-primary-300 {
+  &:hover {
+    background-color: var(--color-primary-300);
+  }
+}
+
 .font-primary-300 {
   color: var(--color-primary-300);
 }
@@ -366,6 +599,12 @@
 .bg-primary-400 {
   background-color: var(--color-primary-400);
 }
+.hover:bg-primary-400 {
+  &:hover {
+    background-color: var(--color-primary-400);
+  }
+}
+
 .font-primary-400 {
   color: var(--color-primary-400);
 }
@@ -377,6 +616,12 @@
 .bg-primary-50 {
   background-color: var(--color-primary-50);
 }
+.hover:bg-primary-50 {
+  &:hover {
+    background-color: var(--color-primary-50);
+  }
+}
+
 .font-primary-50 {
   color: var(--color-primary-50);
 }
@@ -388,6 +633,12 @@
 .bg-primary-500 {
   background-color: var(--color-primary-500);
 }
+.hover:bg-primary-500 {
+  &:hover {
+    background-color: var(--color-primary-500);
+  }
+}
+
 .font-primary-500 {
   color: var(--color-primary-500);
 }
@@ -399,6 +650,12 @@
 .bg-secondary-brand-100 {
   background-color: var(--color-secondary-brand-100);
 }
+.hover:bg-secondary-brand-100 {
+  &:hover {
+    background-color: var(--color-secondary-brand-100);
+  }
+}
+
 .font-secondary-brand-100 {
   color: var(--color-secondary-brand-100);
 }
@@ -410,6 +667,12 @@
 .bg-secondary-brand-200 {
   background-color: var(--color-secondary-brand-200);
 }
+.hover:bg-secondary-brand-200 {
+  &:hover {
+    background-color: var(--color-secondary-brand-200);
+  }
+}
+
 .font-secondary-brand-200 {
   color: var(--color-secondary-brand-200);
 }
@@ -421,6 +684,12 @@
 .bg-secondary-brand-300 {
   background-color: var(--color-secondary-brand-300);
 }
+.hover:bg-secondary-brand-300 {
+  &:hover {
+    background-color: var(--color-secondary-brand-300);
+  }
+}
+
 .font-secondary-brand-300 {
   color: var(--color-secondary-brand-300);
 }
@@ -432,6 +701,12 @@
 .bg-secondary-brand-400 {
   background-color: var(--color-secondary-brand-400);
 }
+.hover:bg-secondary-brand-400 {
+  &:hover {
+    background-color: var(--color-secondary-brand-400);
+  }
+}
+
 .font-secondary-brand-400 {
   color: var(--color-secondary-brand-400);
 }
@@ -443,6 +718,12 @@
 .bg-secondary-brand-500 {
   background-color: var(--color-secondary-brand-500);
 }
+.hover:bg-secondary-brand-500 {
+  &:hover {
+    background-color: var(--color-secondary-brand-500);
+  }
+}
+
 .font-secondary-brand-500 {
   color: var(--color-secondary-brand-500);
 }
@@ -454,6 +735,12 @@
 .bg-secondary-creator-100 {
   background-color: var(--color-secondary-creator-100);
 }
+.hover:bg-secondary-creator-100 {
+  &:hover {
+    background-color: var(--color-secondary-creator-100);
+  }
+}
+
 .font-secondary-creator-100 {
   color: var(--color-secondary-creator-100);
 }
@@ -465,6 +752,12 @@
 .bg-secondary-creator-200 {
   background-color: var(--color-secondary-creator-200);
 }
+.hover:bg-secondary-creator-200 {
+  &:hover {
+    background-color: var(--color-secondary-creator-200);
+  }
+}
+
 .font-secondary-creator-200 {
   color: var(--color-secondary-creator-200);
 }
@@ -476,6 +769,12 @@
 .bg-secondary-creator-300 {
   background-color: var(--color-secondary-creator-300);
 }
+.hover:bg-secondary-creator-300 {
+  &:hover {
+    background-color: var(--color-secondary-creator-300);
+  }
+}
+
 .font-secondary-creator-300 {
   color: var(--color-secondary-creator-300);
 }
@@ -487,6 +786,12 @@
 .bg-secondary-creator-400 {
   background-color: var(--color-secondary-creator-400);
 }
+.hover:bg-secondary-creator-400 {
+  &:hover {
+    background-color: var(--color-secondary-creator-400);
+  }
+}
+
 .font-secondary-creator-400 {
   color: var(--color-secondary-creator-400);
 }
@@ -498,6 +803,12 @@
 .bg-secondary-creator-500 {
   background-color: var(--color-secondary-creator-500);
 }
+.hover:bg-secondary-creator-500 {
+  &:hover {
+    background-color: var(--color-secondary-creator-500);
+  }
+}
+
 .font-secondary-creator-500 {
   color: var(--color-secondary-creator-500);
 }
@@ -509,6 +820,12 @@
 .bg-secondary-green-100 {
   background-color: var(--color-secondary-green-100);
 }
+.hover:bg-secondary-green-100 {
+  &:hover {
+    background-color: var(--color-secondary-green-100);
+  }
+}
+
 .font-secondary-green-100 {
   color: var(--color-secondary-green-100);
 }
@@ -520,6 +837,12 @@
 .bg-secondary-green-200 {
   background-color: var(--color-secondary-green-200);
 }
+.hover:bg-secondary-green-200 {
+  &:hover {
+    background-color: var(--color-secondary-green-200);
+  }
+}
+
 .font-secondary-green-200 {
   color: var(--color-secondary-green-200);
 }
@@ -531,6 +854,12 @@
 .bg-secondary-green-300 {
   background-color: var(--color-secondary-green-300);
 }
+.hover:bg-secondary-green-300 {
+  &:hover {
+    background-color: var(--color-secondary-green-300);
+  }
+}
+
 .font-secondary-green-300 {
   color: var(--color-secondary-green-300);
 }
@@ -542,6 +871,12 @@
 .bg-secondary-green-400 {
   background-color: var(--color-secondary-green-400);
 }
+.hover:bg-secondary-green-400 {
+  &:hover {
+    background-color: var(--color-secondary-green-400);
+  }
+}
+
 .font-secondary-green-400 {
   color: var(--color-secondary-green-400);
 }
@@ -553,6 +888,12 @@
 .bg-secondary-green-500 {
   background-color: var(--color-secondary-green-500);
 }
+.hover:bg-secondary-green-500 {
+  &:hover {
+    background-color: var(--color-secondary-green-500);
+  }
+}
+
 .font-secondary-green-500 {
   color: var(--color-secondary-green-500);
 }
@@ -564,6 +905,12 @@
 .bg-secondary-yellow-100 {
   background-color: var(--color-secondary-yellow-100);
 }
+.hover:bg-secondary-yellow-100 {
+  &:hover {
+    background-color: var(--color-secondary-yellow-100);
+  }
+}
+
 .font-secondary-yellow-100 {
   color: var(--color-secondary-yellow-100);
 }
@@ -575,6 +922,12 @@
 .bg-secondary-yellow-200 {
   background-color: var(--color-secondary-yellow-200);
 }
+.hover:bg-secondary-yellow-200 {
+  &:hover {
+    background-color: var(--color-secondary-yellow-200);
+  }
+}
+
 .font-secondary-yellow-200 {
   color: var(--color-secondary-yellow-200);
 }
@@ -586,6 +939,12 @@
 .bg-secondary-yellow-300 {
   background-color: var(--color-secondary-yellow-300);
 }
+.hover:bg-secondary-yellow-300 {
+  &:hover {
+    background-color: var(--color-secondary-yellow-300);
+  }
+}
+
 .font-secondary-yellow-300 {
   color: var(--color-secondary-yellow-300);
 }
@@ -597,6 +956,12 @@
 .bg-secondary-yellow-400 {
   background-color: var(--color-secondary-yellow-400);
 }
+.hover:bg-secondary-yellow-400 {
+  &:hover {
+    background-color: var(--color-secondary-yellow-400);
+  }
+}
+
 .font-secondary-yellow-400 {
   color: var(--color-secondary-yellow-400);
 }
@@ -608,6 +973,12 @@
 .bg-secondary-yellow-500 {
   background-color: var(--color-secondary-yellow-500);
 }
+.hover:bg-secondary-yellow-500 {
+  &:hover {
+    background-color: var(--color-secondary-yellow-500);
+  }
+}
+
 .font-secondary-yellow-500 {
   color: var(--color-secondary-yellow-500);
 }
@@ -619,6 +990,12 @@
 .bg-semantic-error-bg {
   background-color: var(--color-semantic-error-bg);
 }
+.hover:bg-semantic-error-bg {
+  &:hover {
+    background-color: var(--color-semantic-error-bg);
+  }
+}
+
 .font-semantic-error-bg {
   color: var(--color-semantic-error-bg);
 }
@@ -630,6 +1007,12 @@
 .bg-semantic-error-bg30 {
   background-color: var(--color-semantic-error-bg30);
 }
+.hover:bg-semantic-error-bg30 {
+  &:hover {
+    background-color: var(--color-semantic-error-bg30);
+  }
+}
+
 .font-semantic-error-bg30 {
   color: var(--color-semantic-error-bg30);
 }
@@ -641,6 +1024,12 @@
 .bg-semantic-error-border {
   background-color: var(--color-semantic-error-border);
 }
+.hover:bg-semantic-error-border {
+  &:hover {
+    background-color: var(--color-semantic-error-border);
+  }
+}
+
 .font-semantic-error-border {
   color: var(--color-semantic-error-border);
 }
@@ -652,6 +1041,12 @@
 .bg-semantic-error-icon {
   background-color: var(--color-semantic-error-icon);
 }
+.hover:bg-semantic-error-icon {
+  &:hover {
+    background-color: var(--color-semantic-error-icon);
+  }
+}
+
 .font-semantic-error-icon {
   color: var(--color-semantic-error-icon);
 }
@@ -663,6 +1058,12 @@
 .bg-semantic-error-text {
   background-color: var(--color-semantic-error-text);
 }
+.hover:bg-semantic-error-text {
+  &:hover {
+    background-color: var(--color-semantic-error-text);
+  }
+}
+
 .font-semantic-error-text {
   color: var(--color-semantic-error-text);
 }
@@ -674,6 +1075,12 @@
 .bg-semantic-info-bg {
   background-color: var(--color-semantic-info-bg);
 }
+.hover:bg-semantic-info-bg {
+  &:hover {
+    background-color: var(--color-semantic-info-bg);
+  }
+}
+
 .font-semantic-info-bg {
   color: var(--color-semantic-info-bg);
 }
@@ -685,6 +1092,12 @@
 .bg-semantic-info-bg30 {
   background-color: var(--color-semantic-info-bg30);
 }
+.hover:bg-semantic-info-bg30 {
+  &:hover {
+    background-color: var(--color-semantic-info-bg30);
+  }
+}
+
 .font-semantic-info-bg30 {
   color: var(--color-semantic-info-bg30);
 }
@@ -696,6 +1109,12 @@
 .bg-semantic-info-border {
   background-color: var(--color-semantic-info-border);
 }
+.hover:bg-semantic-info-border {
+  &:hover {
+    background-color: var(--color-semantic-info-border);
+  }
+}
+
 .font-semantic-info-border {
   color: var(--color-semantic-info-border);
 }
@@ -707,6 +1126,12 @@
 .bg-semantic-info-icon {
   background-color: var(--color-semantic-info-icon);
 }
+.hover:bg-semantic-info-icon {
+  &:hover {
+    background-color: var(--color-semantic-info-icon);
+  }
+}
+
 .font-semantic-info-icon {
   color: var(--color-semantic-info-icon);
 }
@@ -718,6 +1143,12 @@
 .bg-semantic-info-text {
   background-color: var(--color-semantic-info-text);
 }
+.hover:bg-semantic-info-text {
+  &:hover {
+    background-color: var(--color-semantic-info-text);
+  }
+}
+
 .font-semantic-info-text {
   color: var(--color-semantic-info-text);
 }
@@ -729,6 +1160,12 @@
 .bg-semantic-success-bg {
   background-color: var(--color-semantic-success-bg);
 }
+.hover:bg-semantic-success-bg {
+  &:hover {
+    background-color: var(--color-semantic-success-bg);
+  }
+}
+
 .font-semantic-success-bg {
   color: var(--color-semantic-success-bg);
 }
@@ -740,6 +1177,12 @@
 .bg-semantic-success-bg30 {
   background-color: var(--color-semantic-success-bg30);
 }
+.hover:bg-semantic-success-bg30 {
+  &:hover {
+    background-color: var(--color-semantic-success-bg30);
+  }
+}
+
 .font-semantic-success-bg30 {
   color: var(--color-semantic-success-bg30);
 }
@@ -751,6 +1194,12 @@
 .bg-semantic-success-border {
   background-color: var(--color-semantic-success-border);
 }
+.hover:bg-semantic-success-border {
+  &:hover {
+    background-color: var(--color-semantic-success-border);
+  }
+}
+
 .font-semantic-success-border {
   color: var(--color-semantic-success-border);
 }
@@ -762,6 +1211,12 @@
 .bg-semantic-success-icon {
   background-color: var(--color-semantic-success-icon);
 }
+.hover:bg-semantic-success-icon {
+  &:hover {
+    background-color: var(--color-semantic-success-icon);
+  }
+}
+
 .font-semantic-success-icon {
   color: var(--color-semantic-success-icon);
 }
@@ -773,6 +1228,12 @@
 .bg-semantic-success-text {
   background-color: var(--color-semantic-success-text);
 }
+.hover:bg-semantic-success-text {
+  &:hover {
+    background-color: var(--color-semantic-success-text);
+  }
+}
+
 .font-semantic-success-text {
   color: var(--color-semantic-success-text);
 }
@@ -784,6 +1245,12 @@
 .bg-semantic-warning-bg {
   background-color: var(--color-semantic-warning-bg);
 }
+.hover:bg-semantic-warning-bg {
+  &:hover {
+    background-color: var(--color-semantic-warning-bg);
+  }
+}
+
 .font-semantic-warning-bg {
   color: var(--color-semantic-warning-bg);
 }
@@ -795,6 +1262,12 @@
 .bg-semantic-warning-bg30 {
   background-color: var(--color-semantic-warning-bg30);
 }
+.hover:bg-semantic-warning-bg30 {
+  &:hover {
+    background-color: var(--color-semantic-warning-bg30);
+  }
+}
+
 .font-semantic-warning-bg30 {
   color: var(--color-semantic-warning-bg30);
 }
@@ -806,6 +1279,12 @@
 .bg-semantic-warning-border {
   background-color: var(--color-semantic-warning-border);
 }
+.hover:bg-semantic-warning-border {
+  &:hover {
+    background-color: var(--color-semantic-warning-border);
+  }
+}
+
 .font-semantic-warning-border {
   color: var(--color-semantic-warning-border);
 }
@@ -817,6 +1296,12 @@
 .bg-semantic-warning-icon {
   background-color: var(--color-semantic-warning-icon);
 }
+.hover:bg-semantic-warning-icon {
+  &:hover {
+    background-color: var(--color-semantic-warning-icon);
+  }
+}
+
 .font-semantic-warning-icon {
   color: var(--color-semantic-warning-icon);
 }
@@ -828,6 +1313,12 @@
 .bg-semantic-warning-text {
   background-color: var(--color-semantic-warning-text);
 }
+.hover:bg-semantic-warning-text {
+  &:hover {
+    background-color: var(--color-semantic-warning-text);
+  }
+}
+
 .font-semantic-warning-text {
   color: var(--color-semantic-warning-text);
 }
@@ -1013,6 +1504,231 @@
 
 
 
+/* === ./button.ui.css === */
+.flexmatch-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 10px;
+  height: 40px;
+  padding: 0 16px;
+  width: fit-content;
+  flex-shrink: 0;
+}
+.flexmatch-btn.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.flexmatch-btn-chip-add {
+  background-color: var(--color-primary-100);
+  color: var(--color-gray-900);
+}
+
+
+/* === ./button-select.ui.css === */
+.flexmatch-button-select-container {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.flexmatch-button-select-button-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  width: fit-content;
+  border-radius: 14px;
+  cursor: pointer;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 10px;
+}
+
+.flexmatch-button-select-button-container.selected {
+  background-color: var(--color-primary-100);
+  border: 1px solid var(--color-primary-100);
+}
+
+.flexmatch-button-select-button-container.small {
+  min-height: 40px;
+  padding: 10px 32px;
+}
+
+.flexmatch-button-select-button-container.normal {
+  min-height: 50px;
+  padding: 10px 32px;
+}
+
+
+/* === ./card-select.ui.css === */
+
+.flexmatch-card-select-container {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.flexmatch-card-select-button-container {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  border-radius: 14px;
+  border: 2px solid var(--color-gray-200);
+  cursor: pointer;
+}
+
+.flexmatch-card-select-button-container.small {
+  min-height: 64px;
+  padding: 16px;
+}
+
+.flexmatch-card-select-button-container.normal {
+  min-height: 98px;
+  padding: 24px;
+}
+.flexmatch-card-select-button-container.selected {
+  border: 2px solid var(--color-primary-100);
+  background-color: var(--color-primary-10);
+}
+
+.flexmatch-card-select-button-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+}
+
+.flexmatch-card-select-button-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.flexmatch-card-select-button-content-title {
+  color: var(--color-gray-900);
+}
+.flexmatch-card-select-button-content-description {
+  color: var(--color-gray-700);
+}
+
+.flexmatch-card-select-button-check {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 2px solid var(--color-gray-200);
+}
+
+.flexmatch-card-select-button-check.active {
+  border: 2px solid var(--color-primary-100);
+  background-color: var(--color-primary-100);
+}
+
+
+
+/* === ./checkbox.ui.css === */
+.flexmatch-checkbox-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+}
+
+.flexmatch-checkbox-label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--color-gray-900);
+  flex-shrink: 0;
+}
+.flexmatch-checkbox {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-200);
+}
+.flexmatch-checkbox.xs {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+.flexmatch-checkbox.sm {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+.flexmatch-checkbox.md {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+}
+.flexmatch-checkbox.lg {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+}
+.flexmatch-checkbox.xl {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+
+@keyframes flexmatch-checkbox-checked-scale {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.flexmatch-checkbox-checked {
+  background-color: var(--color-primary-100);
+  border-color: var(--color-primary-100);
+  animation: flexmatch-checkbox-checked-scale 0.2s ease-out;
+}
+.flexmatch-checkbox-required {
+  background-color: var(--color-gray-200);
+}
+.flexmatch-checkbox-input {
+  display: none;
+}
+
+
 /* === ./option-switch.ui.css === */
 @theme {
   --flexmatch-input-option-switch-size: 100px;
@@ -1025,7 +1741,7 @@
   flex-shrink: 0;
   width: fit-content;
   border-radius: 10px;
-  background-color: var(--color-core-light-gray);
+  background-color: var(--color-gray-100);
 }
 .flexmatch-input-option-switch-button {
   display: flex;
@@ -1038,11 +1754,14 @@
   padding: 10px;
   text-align: center;
   z-index: 1;
+  color: var(--color-gray-500);
+}
+.flexmatch-input-option-switch-button.selected {
+  color: var(--color-gray-800);
 }
 .flexmatch-input-option-switch-button.disabled {
   cursor: not-allowed;
   opacity: 0.5;
-  background-color: var(--color-core-light-gray);
   color: var(--color-gray-500);
 }
 .flexmatch-input-option-switch-selection {
@@ -1060,7 +1779,368 @@
     height: 100%;
     border-radius: 10px;
     background-color: var(--color-core-white);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
   }
 }
 
+
+/* === ./chip.ui.css === */
+.flexmatch-chip {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: default;
+  user-select: none;
+  border-radius: 14px;
+  height: 28px;
+  padding: 0 10px;
+  width: fit-content;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.flexmatch-chip-delete {
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Buzz/shake animation when limit exceeded */
+@keyframes flexmatch-chip-buzz {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-4px);
+  }
+  40% {
+    transform: translateX(4px);
+  }
+  60% {
+    transform: translateX(-3px);
+  }
+  80% {
+    transform: translateX(3px);
+  }
+}
+
+.flexmatch-chip-row-buzz {
+  animation: flexmatch-chip-buzz 0.2s ease-in-out;
+}
+
+
+/* === ./info-card.ui.css === */
+.flexmatch-info-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid var(--color-semantic-info-border);
+  background-color: var(--color-semantic-info-bg);
+}
+
+
+
+/* === ./modal.css === */
+@keyframes flexmatch-modal-open {
+  from {
+    transform: scale(1);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.flexmatch-modal {
+  animation: flexmatch-modal-open 0.3s ease-out;
+}
+
+@keyframes flexmatch-right-sidebar-open {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.flexmatch-right-sidebar {
+  animation: flexmatch-right-sidebar-open 0.3s ease-out;
+}
+
+
+/* === ./textbox.ui.css === */
+.flexmatch-textbox-container {
+  position: relative;
+  border-radius: 10px;
+}
+.flexmatch-textbox-label {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 2px;
+  height: calc(100% - 4px);
+  color: var(--color-gray-600);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.flexmatch-textbox-label.left {
+  left: 12px;
+  right: auto;
+}
+.flexmatch-textbox-label.right {
+  left: auto;
+  right: 12px;
+}
+.flexmatch-textbox-label.disabled,
+.flexmatch-textbox-label.readonly {
+  background-color: var(--color-gray-100);
+}
+.flexmatch-textbox {
+  display: block;
+  width: 100%;
+  padding: 16px 12px;
+  background-color: var(--color-core-white);
+  border: 1px solid var(--color-gray-200);
+  appearance: none;
+  border-radius: 10px;
+}
+.flexmatch-textbox:focus {
+  border-color: var(--color-gray-900);
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
+}
+.flexmatch-textbox.error {
+  border-color: var(--color-semantic-error-icon);
+}
+.flexmatch-textbox::placeholder {
+  color: var(--color-gray-400);
+}
+.flexmatch-textbox:disabled,
+.flexmatch-textbox[readonly] {
+  background-color: var(--color-gray-100);
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.flexmatch-textarea {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 16px 12px;
+  background-color: var(--color-gray-0);
+  border: 1px solid var(--color-gray-200);
+  resize: none;
+  border-radius: 10px;
+}
+.flexmatch-textarea.error {
+  border-color: var(--color-semantic-error-icon);
+}
+.flexmatch-textarea::placeholder {
+  color: var(--color-gray-400);
+}
+.flexmatch-textarea:focus {
+  border-color: var(--color-gray-900);
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
+}
+.flexmatch-textarea:disabled,
+.flexmatch-textarea[readonly] {
+  background-color: var(--color-gray-100);
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+
+/* === ./selectbox.css === */
+.flexmatch-selectbox-container {
+  position: relative;
+  border-radius: 10px;
+}
+.flexmatch-selectbox-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  padding: 12px 16px;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: var(--color-gray-0);
+}
+.flexmatch-selectbox-button:hover {
+  background-color: var(--color-primary-10);
+}
+.flexmatch-selectbox-button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
+}
+.flexmatch-selectbox-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-200);
+  cursor: not-allowed;
+}
+
+.flexmatch-selectbox-button-overlay {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 32px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.flexmatch-selectbox-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: transparent;
+  border-radius: 10px;
+  border: 1px solid var(--color-gray-900);
+  z-index: 10;
+  height: fit-content;
+  max-height: 300px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.flexmatch-selectbox-menu::-webkit-scrollbar {
+  display: none;
+}
+.flexmatch-selectbox-item-background {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  height: fit-content;
+  padding: 12px 0;
+  border-radius: 10px;
+  background-color: var(--color-base-white);
+}
+
+.flexmatch-selectbox-item {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  padding: 5px 16px;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  cursor: pointer;
+  min-height: 24px;
+}
+.flexmatch-selectbox-item:hover {
+  background-color: var(--color-primary-10);
+}
+
+.flexmatch-selectbox-item-text {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  flex-shrink: 0;
+  max-width: 100%;
+  color: var(--color-gray-700);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.flexmatch-selectbox-item-text.placeholder {
+  color: var(--color-gray-400);
+}
+.flexmatch-selectbox-item-text.disabled {
+  color: var(--color-gray-400);
+}
+.flexmatch-selectbox-toggle {
+  transition: transform 0.3s ease-in-out;
+}
+.flexmatch-selectbox-toggle.open {
+  transform: rotate(180deg);
+}
+
+
+
+/* === ./radiobutton.ui.css === */
+.flexmatch-radiobutton-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+}
+.flexmatch-radiobutton-item {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.flexmatch-radiobutton-input {
+  display: none;
+}
+.flexmatch-radiobutton-icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--color-gray-200);
+}
+.flexmatch-radiobutton-icon.checked {
+  border-color: var(--color-primary-200);
+}
+@keyframes flexmatch-radiobutton-checked-scale {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.flexmatch-radiobutton-icon-checked {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background-color: var(--color-primary-200);
+  animation: flexmatch-radiobutton-checked-scale 0.2s ease-out;
+}
+.flexmatch-radiobutton-label {
+  color: var(--color-gray-900);
+}
+.flexmatch-radiobutton-label.disabled {
+  color: var(--color-gray-500);
+  cursor: not-allowed;
+}