@flexmatch-dev/react-ui 0.0.1

package/dist/index.css

@@ -0,0 +1,1066 @@
+/* @flexmatch-dev/react-ui - Bundled CSS */
+
+
+/* === ./_generated/color-variable.css === */
+@theme {
+  --color-base-black: #030303;
+  --color-base-white: #ffffff;
+  --color-core-black: #1f1f1f;
+  --color-core-green: #00623c;
+  --color-core-light-gray: #eaeaea;
+  --color-core-lime: #d2ff4c;
+  --color-core-mint: #1ad9c6;
+  --color-core-navy: #101828;
+  --color-core-purple: #a4b5d7;
+  --color-core-white: #fdfdfd;
+  --color-core-yellow: #feffe5;
+  --color-gray-100: #f2f2f2;
+  --color-gray-200: #e0e0e0;
+  --color-gray-300: #c4c4c4;
+  --color-gray-400: #a6a6a6;
+  --color-gray-50: #f8f8f8;
+  --color-gray-500: #8a8a8a;
+  --color-gray-600: #6a6a6a;
+  --color-gray-700: #4a4a4a;
+  --color-gray-800: #2b2b2b;
+  --color-gray-900: #1f1f1f;
+  --color-primary-10: #f9fdec;
+    --color-primary-100: var(--color-core-lime);
+  --color-primary-200: #a8d921;
+  --color-primary-30: #f2ffca;
+  --color-primary-300: #648929;
+  --color-primary-400: #406221;
+  --color-primary-50: #ebffaf;
+  --color-primary-500: #233915;
+  --color-secondary-brand-100: #d5dcec;
+    --color-secondary-brand-200: var(--color-core-purple);
+  --color-secondary-brand-300: #738fc0;
+  --color-secondary-brand-400: #556b90;
+  --color-secondary-brand-500: #394963;
+  --color-secondary-creator-100: #c9fff8;
+  --color-secondary-creator-200: #83ffee;
+    --color-secondary-creator-300: var(--color-core-mint);
+  --color-secondary-creator-400: #19a598;
+  --color-secondary-creator-500: #065e56;
+  --color-secondary-green-100: #a2ffcb;
+  --color-secondary-green-200: #0ed28b;
+  --color-secondary-green-300: #00a667;
+    --color-secondary-green-400: var(--color-core-green);
+  --color-secondary-green-500: #00341f;
+    --color-secondary-yellow-100: var(--color-core-yellow);
+  --color-secondary-yellow-200: #f4f687;
+  --color-secondary-yellow-300: #bdbf53;
+  --color-secondary-yellow-400: #7c7d35;
+  --color-secondary-yellow-500: #585925;
+  --color-semantic-error-bg: #fff1f2;
+  --color-semantic-error-bg30: #fffbfc;
+  --color-semantic-error-border: #ff6b72;
+  --color-semantic-error-icon: #fb2c36;
+  --color-semantic-error-text: #fb2c36;
+  --color-semantic-info-bg: #eff6ff;
+  --color-semantic-info-bg30: #fbfdff;
+  --color-semantic-info-border: #93c5fd;
+  --color-semantic-info-icon: #2563eb;
+  --color-semantic-info-text: #2563eb;
+  --color-semantic-success-bg: #e9fff1;
+  --color-semantic-success-bg30: #f9fffb;
+  --color-semantic-success-border: #6ee7a8;
+  --color-semantic-success-icon: #00c950;
+  --color-semantic-success-text: #00c950;
+  --color-semantic-warning-bg: #fff9e8;
+  --color-semantic-warning-bg30: #fffef9;
+  --color-semantic-warning-border: #ffd27a;
+  --color-semantic-warning-icon: #f59e0b;
+  --color-semantic-warning-text: #f59e0b;
+}
+
+
+/* === ./_generated/color-style.css === */
+/* Color Utilities */
+.bg-base-black {
+  background-color: var(--color-base-black);
+}
+.font-base-black {
+  color: var(--color-base-black);
+}
+
+.border-base-black {
+  border-color: var(--color-base-black);
+}
+
+.bg-base-white {
+  background-color: var(--color-base-white);
+}
+.font-base-white {
+  color: var(--color-base-white);
+}
+
+.border-base-white {
+  border-color: var(--color-base-white);
+}
+
+.bg-core-black {
+  background-color: var(--color-core-black);
+}
+.font-core-black {
+  color: var(--color-core-black);
+}
+
+.border-core-black {
+  border-color: var(--color-core-black);
+}
+
+.bg-core-green {
+  background-color: var(--color-core-green);
+}
+.font-core-green {
+  color: var(--color-core-green);
+}
+
+.border-core-green {
+  border-color: var(--color-core-green);
+}
+
+.bg-core-light-gray {
+  background-color: var(--color-core-light-gray);
+}
+.font-core-light-gray {
+  color: var(--color-core-light-gray);
+}
+
+.border-core-light-gray {
+  border-color: var(--color-core-light-gray);
+}
+
+.bg-core-lime {
+  background-color: var(--color-core-lime);
+}
+.font-core-lime {
+  color: var(--color-core-lime);
+}
+
+.border-core-lime {
+  border-color: var(--color-core-lime);
+}
+
+.bg-core-mint {
+  background-color: var(--color-core-mint);
+}
+.font-core-mint {
+  color: var(--color-core-mint);
+}
+
+.border-core-mint {
+  border-color: var(--color-core-mint);
+}
+
+.bg-core-navy {
+  background-color: var(--color-core-navy);
+}
+.font-core-navy {
+  color: var(--color-core-navy);
+}
+
+.border-core-navy {
+  border-color: var(--color-core-navy);
+}
+
+.bg-core-purple {
+  background-color: var(--color-core-purple);
+}
+.font-core-purple {
+  color: var(--color-core-purple);
+}
+
+.border-core-purple {
+  border-color: var(--color-core-purple);
+}
+
+.bg-core-white {
+  background-color: var(--color-core-white);
+}
+.font-core-white {
+  color: var(--color-core-white);
+}
+
+.border-core-white {
+  border-color: var(--color-core-white);
+}
+
+.bg-core-yellow {
+  background-color: var(--color-core-yellow);
+}
+.font-core-yellow {
+  color: var(--color-core-yellow);
+}
+
+.border-core-yellow {
+  border-color: var(--color-core-yellow);
+}
+
+.bg-gray-100 {
+  background-color: var(--color-gray-100);
+}
+.font-gray-100 {
+  color: var(--color-gray-100);
+}
+
+.border-gray-100 {
+  border-color: var(--color-gray-100);
+}
+
+.bg-gray-200 {
+  background-color: var(--color-gray-200);
+}
+.font-gray-200 {
+  color: var(--color-gray-200);
+}
+
+.border-gray-200 {
+  border-color: var(--color-gray-200);
+}
+
+.bg-gray-300 {
+  background-color: var(--color-gray-300);
+}
+.font-gray-300 {
+  color: var(--color-gray-300);
+}
+
+.border-gray-300 {
+  border-color: var(--color-gray-300);
+}
+
+.bg-gray-400 {
+  background-color: var(--color-gray-400);
+}
+.font-gray-400 {
+  color: var(--color-gray-400);
+}
+
+.border-gray-400 {
+  border-color: var(--color-gray-400);
+}
+
+.bg-gray-50 {
+  background-color: var(--color-gray-50);
+}
+.font-gray-50 {
+  color: var(--color-gray-50);
+}
+
+.border-gray-50 {
+  border-color: var(--color-gray-50);
+}
+
+.bg-gray-500 {
+  background-color: var(--color-gray-500);
+}
+.font-gray-500 {
+  color: var(--color-gray-500);
+}
+
+.border-gray-500 {
+  border-color: var(--color-gray-500);
+}
+
+.bg-gray-600 {
+  background-color: var(--color-gray-600);
+}
+.font-gray-600 {
+  color: var(--color-gray-600);
+}
+
+.border-gray-600 {
+  border-color: var(--color-gray-600);
+}
+
+.bg-gray-700 {
+  background-color: var(--color-gray-700);
+}
+.font-gray-700 {
+  color: var(--color-gray-700);
+}
+
+.border-gray-700 {
+  border-color: var(--color-gray-700);
+}
+
+.bg-gray-800 {
+  background-color: var(--color-gray-800);
+}
+.font-gray-800 {
+  color: var(--color-gray-800);
+}
+
+.border-gray-800 {
+  border-color: var(--color-gray-800);
+}
+
+.bg-gray-900 {
+  background-color: var(--color-gray-900);
+}
+.font-gray-900 {
+  color: var(--color-gray-900);
+}
+
+.border-gray-900 {
+  border-color: var(--color-gray-900);
+}
+
+.bg-primary-10 {
+  background-color: var(--color-primary-10);
+}
+.font-primary-10 {
+  color: var(--color-primary-10);
+}
+
+.border-primary-10 {
+  border-color: var(--color-primary-10);
+}
+
+.bg-primary-100 {
+  background-color: var(--color-primary-100);
+}
+.font-primary-100 {
+  color: var(--color-primary-100);
+}
+
+.border-primary-100 {
+  border-color: var(--color-primary-100);
+}
+
+.bg-primary-200 {
+  background-color: var(--color-primary-200);
+}
+.font-primary-200 {
+  color: var(--color-primary-200);
+}
+
+.border-primary-200 {
+  border-color: var(--color-primary-200);
+}
+
+.bg-primary-30 {
+  background-color: var(--color-primary-30);
+}
+.font-primary-30 {
+  color: var(--color-primary-30);
+}
+
+.border-primary-30 {
+  border-color: var(--color-primary-30);
+}
+
+.bg-primary-300 {
+  background-color: var(--color-primary-300);
+}
+.font-primary-300 {
+  color: var(--color-primary-300);
+}
+
+.border-primary-300 {
+  border-color: var(--color-primary-300);
+}
+
+.bg-primary-400 {
+  background-color: var(--color-primary-400);
+}
+.font-primary-400 {
+  color: var(--color-primary-400);
+}
+
+.border-primary-400 {
+  border-color: var(--color-primary-400);
+}
+
+.bg-primary-50 {
+  background-color: var(--color-primary-50);
+}
+.font-primary-50 {
+  color: var(--color-primary-50);
+}
+
+.border-primary-50 {
+  border-color: var(--color-primary-50);
+}
+
+.bg-primary-500 {
+  background-color: var(--color-primary-500);
+}
+.font-primary-500 {
+  color: var(--color-primary-500);
+}
+
+.border-primary-500 {
+  border-color: var(--color-primary-500);
+}
+
+.bg-secondary-brand-100 {
+  background-color: var(--color-secondary-brand-100);
+}
+.font-secondary-brand-100 {
+  color: var(--color-secondary-brand-100);
+}
+
+.border-secondary-brand-100 {
+  border-color: var(--color-secondary-brand-100);
+}
+
+.bg-secondary-brand-200 {
+  background-color: var(--color-secondary-brand-200);
+}
+.font-secondary-brand-200 {
+  color: var(--color-secondary-brand-200);
+}
+
+.border-secondary-brand-200 {
+  border-color: var(--color-secondary-brand-200);
+}
+
+.bg-secondary-brand-300 {
+  background-color: var(--color-secondary-brand-300);
+}
+.font-secondary-brand-300 {
+  color: var(--color-secondary-brand-300);
+}
+
+.border-secondary-brand-300 {
+  border-color: var(--color-secondary-brand-300);
+}
+
+.bg-secondary-brand-400 {
+  background-color: var(--color-secondary-brand-400);
+}
+.font-secondary-brand-400 {
+  color: var(--color-secondary-brand-400);
+}
+
+.border-secondary-brand-400 {
+  border-color: var(--color-secondary-brand-400);
+}
+
+.bg-secondary-brand-500 {
+  background-color: var(--color-secondary-brand-500);
+}
+.font-secondary-brand-500 {
+  color: var(--color-secondary-brand-500);
+}
+
+.border-secondary-brand-500 {
+  border-color: var(--color-secondary-brand-500);
+}
+
+.bg-secondary-creator-100 {
+  background-color: var(--color-secondary-creator-100);
+}
+.font-secondary-creator-100 {
+  color: var(--color-secondary-creator-100);
+}
+
+.border-secondary-creator-100 {
+  border-color: var(--color-secondary-creator-100);
+}
+
+.bg-secondary-creator-200 {
+  background-color: var(--color-secondary-creator-200);
+}
+.font-secondary-creator-200 {
+  color: var(--color-secondary-creator-200);
+}
+
+.border-secondary-creator-200 {
+  border-color: var(--color-secondary-creator-200);
+}
+
+.bg-secondary-creator-300 {
+  background-color: var(--color-secondary-creator-300);
+}
+.font-secondary-creator-300 {
+  color: var(--color-secondary-creator-300);
+}
+
+.border-secondary-creator-300 {
+  border-color: var(--color-secondary-creator-300);
+}
+
+.bg-secondary-creator-400 {
+  background-color: var(--color-secondary-creator-400);
+}
+.font-secondary-creator-400 {
+  color: var(--color-secondary-creator-400);
+}
+
+.border-secondary-creator-400 {
+  border-color: var(--color-secondary-creator-400);
+}
+
+.bg-secondary-creator-500 {
+  background-color: var(--color-secondary-creator-500);
+}
+.font-secondary-creator-500 {
+  color: var(--color-secondary-creator-500);
+}
+
+.border-secondary-creator-500 {
+  border-color: var(--color-secondary-creator-500);
+}
+
+.bg-secondary-green-100 {
+  background-color: var(--color-secondary-green-100);
+}
+.font-secondary-green-100 {
+  color: var(--color-secondary-green-100);
+}
+
+.border-secondary-green-100 {
+  border-color: var(--color-secondary-green-100);
+}
+
+.bg-secondary-green-200 {
+  background-color: var(--color-secondary-green-200);
+}
+.font-secondary-green-200 {
+  color: var(--color-secondary-green-200);
+}
+
+.border-secondary-green-200 {
+  border-color: var(--color-secondary-green-200);
+}
+
+.bg-secondary-green-300 {
+  background-color: var(--color-secondary-green-300);
+}
+.font-secondary-green-300 {
+  color: var(--color-secondary-green-300);
+}
+
+.border-secondary-green-300 {
+  border-color: var(--color-secondary-green-300);
+}
+
+.bg-secondary-green-400 {
+  background-color: var(--color-secondary-green-400);
+}
+.font-secondary-green-400 {
+  color: var(--color-secondary-green-400);
+}
+
+.border-secondary-green-400 {
+  border-color: var(--color-secondary-green-400);
+}
+
+.bg-secondary-green-500 {
+  background-color: var(--color-secondary-green-500);
+}
+.font-secondary-green-500 {
+  color: var(--color-secondary-green-500);
+}
+
+.border-secondary-green-500 {
+  border-color: var(--color-secondary-green-500);
+}
+
+.bg-secondary-yellow-100 {
+  background-color: var(--color-secondary-yellow-100);
+}
+.font-secondary-yellow-100 {
+  color: var(--color-secondary-yellow-100);
+}
+
+.border-secondary-yellow-100 {
+  border-color: var(--color-secondary-yellow-100);
+}
+
+.bg-secondary-yellow-200 {
+  background-color: var(--color-secondary-yellow-200);
+}
+.font-secondary-yellow-200 {
+  color: var(--color-secondary-yellow-200);
+}
+
+.border-secondary-yellow-200 {
+  border-color: var(--color-secondary-yellow-200);
+}
+
+.bg-secondary-yellow-300 {
+  background-color: var(--color-secondary-yellow-300);
+}
+.font-secondary-yellow-300 {
+  color: var(--color-secondary-yellow-300);
+}
+
+.border-secondary-yellow-300 {
+  border-color: var(--color-secondary-yellow-300);
+}
+
+.bg-secondary-yellow-400 {
+  background-color: var(--color-secondary-yellow-400);
+}
+.font-secondary-yellow-400 {
+  color: var(--color-secondary-yellow-400);
+}
+
+.border-secondary-yellow-400 {
+  border-color: var(--color-secondary-yellow-400);
+}
+
+.bg-secondary-yellow-500 {
+  background-color: var(--color-secondary-yellow-500);
+}
+.font-secondary-yellow-500 {
+  color: var(--color-secondary-yellow-500);
+}
+
+.border-secondary-yellow-500 {
+  border-color: var(--color-secondary-yellow-500);
+}
+
+.bg-semantic-error-bg {
+  background-color: var(--color-semantic-error-bg);
+}
+.font-semantic-error-bg {
+  color: var(--color-semantic-error-bg);
+}
+
+.border-semantic-error-bg {
+  border-color: var(--color-semantic-error-bg);
+}
+
+.bg-semantic-error-bg30 {
+  background-color: var(--color-semantic-error-bg30);
+}
+.font-semantic-error-bg30 {
+  color: var(--color-semantic-error-bg30);
+}
+
+.border-semantic-error-bg30 {
+  border-color: var(--color-semantic-error-bg30);
+}
+
+.bg-semantic-error-border {
+  background-color: var(--color-semantic-error-border);
+}
+.font-semantic-error-border {
+  color: var(--color-semantic-error-border);
+}
+
+.border-semantic-error-border {
+  border-color: var(--color-semantic-error-border);
+}
+
+.bg-semantic-error-icon {
+  background-color: var(--color-semantic-error-icon);
+}
+.font-semantic-error-icon {
+  color: var(--color-semantic-error-icon);
+}
+
+.border-semantic-error-icon {
+  border-color: var(--color-semantic-error-icon);
+}
+
+.bg-semantic-error-text {
+  background-color: var(--color-semantic-error-text);
+}
+.font-semantic-error-text {
+  color: var(--color-semantic-error-text);
+}
+
+.border-semantic-error-text {
+  border-color: var(--color-semantic-error-text);
+}
+
+.bg-semantic-info-bg {
+  background-color: var(--color-semantic-info-bg);
+}
+.font-semantic-info-bg {
+  color: var(--color-semantic-info-bg);
+}
+
+.border-semantic-info-bg {
+  border-color: var(--color-semantic-info-bg);
+}
+
+.bg-semantic-info-bg30 {
+  background-color: var(--color-semantic-info-bg30);
+}
+.font-semantic-info-bg30 {
+  color: var(--color-semantic-info-bg30);
+}
+
+.border-semantic-info-bg30 {
+  border-color: var(--color-semantic-info-bg30);
+}
+
+.bg-semantic-info-border {
+  background-color: var(--color-semantic-info-border);
+}
+.font-semantic-info-border {
+  color: var(--color-semantic-info-border);
+}
+
+.border-semantic-info-border {
+  border-color: var(--color-semantic-info-border);
+}
+
+.bg-semantic-info-icon {
+  background-color: var(--color-semantic-info-icon);
+}
+.font-semantic-info-icon {
+  color: var(--color-semantic-info-icon);
+}
+
+.border-semantic-info-icon {
+  border-color: var(--color-semantic-info-icon);
+}
+
+.bg-semantic-info-text {
+  background-color: var(--color-semantic-info-text);
+}
+.font-semantic-info-text {
+  color: var(--color-semantic-info-text);
+}
+
+.border-semantic-info-text {
+  border-color: var(--color-semantic-info-text);
+}
+
+.bg-semantic-success-bg {
+  background-color: var(--color-semantic-success-bg);
+}
+.font-semantic-success-bg {
+  color: var(--color-semantic-success-bg);
+}
+
+.border-semantic-success-bg {
+  border-color: var(--color-semantic-success-bg);
+}
+
+.bg-semantic-success-bg30 {
+  background-color: var(--color-semantic-success-bg30);
+}
+.font-semantic-success-bg30 {
+  color: var(--color-semantic-success-bg30);
+}
+
+.border-semantic-success-bg30 {
+  border-color: var(--color-semantic-success-bg30);
+}
+
+.bg-semantic-success-border {
+  background-color: var(--color-semantic-success-border);
+}
+.font-semantic-success-border {
+  color: var(--color-semantic-success-border);
+}
+
+.border-semantic-success-border {
+  border-color: var(--color-semantic-success-border);
+}
+
+.bg-semantic-success-icon {
+  background-color: var(--color-semantic-success-icon);
+}
+.font-semantic-success-icon {
+  color: var(--color-semantic-success-icon);
+}
+
+.border-semantic-success-icon {
+  border-color: var(--color-semantic-success-icon);
+}
+
+.bg-semantic-success-text {
+  background-color: var(--color-semantic-success-text);
+}
+.font-semantic-success-text {
+  color: var(--color-semantic-success-text);
+}
+
+.border-semantic-success-text {
+  border-color: var(--color-semantic-success-text);
+}
+
+.bg-semantic-warning-bg {
+  background-color: var(--color-semantic-warning-bg);
+}
+.font-semantic-warning-bg {
+  color: var(--color-semantic-warning-bg);
+}
+
+.border-semantic-warning-bg {
+  border-color: var(--color-semantic-warning-bg);
+}
+
+.bg-semantic-warning-bg30 {
+  background-color: var(--color-semantic-warning-bg30);
+}
+.font-semantic-warning-bg30 {
+  color: var(--color-semantic-warning-bg30);
+}
+
+.border-semantic-warning-bg30 {
+  border-color: var(--color-semantic-warning-bg30);
+}
+
+.bg-semantic-warning-border {
+  background-color: var(--color-semantic-warning-border);
+}
+.font-semantic-warning-border {
+  color: var(--color-semantic-warning-border);
+}
+
+.border-semantic-warning-border {
+  border-color: var(--color-semantic-warning-border);
+}
+
+.bg-semantic-warning-icon {
+  background-color: var(--color-semantic-warning-icon);
+}
+.font-semantic-warning-icon {
+  color: var(--color-semantic-warning-icon);
+}
+
+.border-semantic-warning-icon {
+  border-color: var(--color-semantic-warning-icon);
+}
+
+.bg-semantic-warning-text {
+  background-color: var(--color-semantic-warning-text);
+}
+.font-semantic-warning-text {
+  color: var(--color-semantic-warning-text);
+}
+
+.border-semantic-warning-text {
+  border-color: var(--color-semantic-warning-text);
+}
+
+
+
+
+/* === ./_generated/typo-variable.css === */
+@theme {
+  /* Typography - Font Families */
+  --font-family-b1: "Pretendard", Helvetica;
+  --font-family-b1-l: "Pretendard", Helvetica;
+  --font-family-b2: "Pretendard", Helvetica;
+  --font-family-b2-l: "Pretendard", Helvetica;
+  --font-family-b3: "Pretendard", Helvetica;
+  --font-family-caption: "Pretendard", Helvetica;
+  --font-family-h1: "Pretendard", Helvetica;
+  --font-family-h2: "Pretendard", Helvetica;
+  --font-family-h3: "Pretendard", Helvetica;
+  --font-family-h4: "Pretendard", Helvetica;
+  --font-family-micro: "Pretendard", Helvetica;
+
+  /* Typography - Font Sizes */
+  --font-size-b1: 18px;
+  --font-size-b1-l: 18px;
+  --font-size-b2: 16px;
+  --font-size-b2-l: 16px;
+  --font-size-b3: 14px;
+  --font-size-caption: 12px;
+  --font-size-h1: 32px;
+  --font-size-h2: 28px;
+  --font-size-h3: 24px;
+  --font-size-h4: 20px;
+  --font-size-micro: 10px;
+
+  /* Typography - Font Weights */
+  --font-weight-b1: 500;
+  --font-weight-b1-l: 700;
+  --font-weight-b2: 500;
+  --font-weight-b2-l: 700;
+  --font-weight-b3: 500;
+  --font-weight-caption: 500;
+  --font-weight-h1: 700;
+  --font-weight-h2: 600;
+  --font-weight-h3: 600;
+  --font-weight-h4: 600;
+  --font-weight-micro: 500;
+
+  /* Typography - Line Heights */
+  --line-height-b1: 28px;
+  --line-height-b1-l: 28px;
+  --line-height-b2: 24px;
+  --line-height-b2-l: 24px;
+  --line-height-b3: 20px;
+  --line-height-caption: 16px;
+  --line-height-h1: 42px;
+  --line-height-h2: 36px;
+  --line-height-h3: 32px;
+  --line-height-h4: 28px;
+  --line-height-micro: 12px;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing-b1: 0px;
+  --letter-spacing-b1-l: 0px;
+  --letter-spacing-b2: 0px;
+  --letter-spacing-b2-l: 0px;
+  --letter-spacing-b3: 0px;
+  --letter-spacing-caption: 0px;
+  --letter-spacing-h1: 0px;
+  --letter-spacing-h2: 0px;
+  --letter-spacing-h3: 0px;
+  --letter-spacing-h4: 0px;
+  --letter-spacing-micro: 0px;
+}
+
+
+/* === ./_generated/typo-style.css === */
+/* Typography Utilities */
+.text-b1 {
+  font-family: var(--font-family-b1);
+  font-size: var(--font-size-b1);
+  font-weight: var(--font-weight-b1);
+  line-height: var(--line-height-b1);
+  letter-spacing: var(--letter-spacing-b1);
+  font-style: normal;
+}
+
+.text-b1-l {
+  font-family: var(--font-family-b1-l);
+  font-size: var(--font-size-b1-l);
+  font-weight: var(--font-weight-b1-l);
+  line-height: var(--line-height-b1-l);
+  letter-spacing: var(--letter-spacing-b1-l);
+  font-style: normal;
+}
+
+.text-b2 {
+  font-family: var(--font-family-b2);
+  font-size: var(--font-size-b2);
+  font-weight: var(--font-weight-b2);
+  line-height: var(--line-height-b2);
+  letter-spacing: var(--letter-spacing-b2);
+  font-style: normal;
+}
+
+.text-b2-l {
+  font-family: var(--font-family-b2-l);
+  font-size: var(--font-size-b2-l);
+  font-weight: var(--font-weight-b2-l);
+  line-height: var(--line-height-b2-l);
+  letter-spacing: var(--letter-spacing-b2-l);
+  font-style: normal;
+}
+
+.text-b3 {
+  font-family: var(--font-family-b3);
+  font-size: var(--font-size-b3);
+  font-weight: var(--font-weight-b3);
+  line-height: var(--line-height-b3);
+  letter-spacing: var(--letter-spacing-b3);
+  font-style: normal;
+}
+
+.text-caption {
+  font-family: var(--font-family-caption);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-caption);
+  line-height: var(--line-height-caption);
+  letter-spacing: var(--letter-spacing-caption);
+  font-style: normal;
+}
+
+.text-h1 {
+  font-family: var(--font-family-h1);
+  font-size: var(--font-size-h1);
+  font-weight: var(--font-weight-h1);
+  line-height: var(--line-height-h1);
+  letter-spacing: var(--letter-spacing-h1);
+  font-style: normal;
+}
+
+.text-h2 {
+  font-family: var(--font-family-h2);
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-h2);
+  line-height: var(--line-height-h2);
+  letter-spacing: var(--letter-spacing-h2);
+  font-style: normal;
+}
+
+.text-h3 {
+  font-family: var(--font-family-h3);
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-h3);
+  line-height: var(--line-height-h3);
+  letter-spacing: var(--letter-spacing-h3);
+  font-style: normal;
+}
+
+.text-h4 {
+  font-family: var(--font-family-h4);
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-h4);
+  line-height: var(--line-height-h4);
+  letter-spacing: var(--letter-spacing-h4);
+  font-style: normal;
+}
+
+.text-micro {
+  font-family: var(--font-family-micro);
+  font-size: var(--font-size-micro);
+  font-weight: var(--font-weight-micro);
+  line-height: var(--line-height-micro);
+  letter-spacing: var(--letter-spacing-micro);
+  font-style: normal;
+}
+
+
+
+
+
+/* === ./option-switch.ui.css === */
+@theme {
+  --flexmatch-input-option-switch-size: 100px;
+}
+
+.flexmatch-input-option-switch {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  flex-shrink: 0;
+  width: fit-content;
+  border-radius: 10px;
+  background-color: var(--color-core-light-gray);
+}
+.flexmatch-input-option-switch-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--flexmatch-input-option-switch-size);
+  height: 100%;
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 10px;
+  text-align: center;
+  z-index: 1;
+}
+.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 {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--flexmatch-input-option-switch-size);
+  height: 100%;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0);
+  padding: 4px;
+  > div {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    background-color: var(--color-core-white);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+}
+