Initial deployment setup

2026-08-31 16:45:24 +09:00
commit 33453ecc55
3475 changed files with 850363 additions and 0 deletions
@@ -0,0 +1,50 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.accordion {
+  --accordion-fg: var(--fg-neutral-primary);
+  --accordion-border: var(--border-neutral-tertiary);
+  --accordion-bg: var(--bg-primary);
+
+  @apply h-fit overflow-hidden bg-[var(--accordion-bg)] text-[var(--accordion-fg)];
+}
+
+.accordion-border {
+  @apply border border-[var(--accordion-border)] [&>div:last-of-type]:border-b-0;
+}
+
+.accordion-item {
+  @apply border-neutral-transparent;
+}
+
+.accordion-item-border {
+  @apply border-b border-[var(--accordion-border)];
+}
+
+.accordion-trigger {
+  @apply text-base-strong flex w-full items-center justify-between p-4 text-left transition-all [&>svg]:shrink-0 [&>svg]:transition-transform [&>svg]:duration-75 [&[data-state=open]>svg]:rotate-180;
+}
+
+.accordion-trigger-align-left {
+  @apply justify-start [&>svg:first-of-type]:mr-2;
+}
+
+.accordion-content-box {
+  @apply data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-base-normal overflow-hidden transition-all;
+}
+
+.accordion-content {
+  @apply p-4;
+}
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.alert {
+  --alert-fg: var(--fg-neutral-primary);
+  --alert-description-fg: var(--fg-neutral-secondary);
+  --alert-fg-warning: var(--fg-tint-orange);
+  --alert-fg-success: var(--fg-tint-green);
+  --alert-fg-error: var(--fg-tint-red);
+  --alert-fg-informative: var(--fg-tint-blue);
+  --alert-border: var(--border-neutral-tertiary);
+  --alert-border-warning: var(--border-tint-orange);
+  --alert-border-success: var(--border-tint-green);
+  --alert-border-error: var(--border-tint-red);
+  --alert-border-informative: var(--border-tint-blue);
+  --alert-bg: var(--bg-neutral-primary);
+
+  @apply relative inline-flex min-w-[356px] items-center space-x-2 border bg-[var(--alert-bg)] px-5 py-4;
+
+  /* default */
+  @apply alert-radius-medium alert-default;
+}
+
+.alert-icon {
+  @apply relative mb-auto box-content w-5 flex-shrink-0 p-1;
+
+  /* default */
+  @apply alert-icon-default;
+}
+
+.alert-loader {
+  @apply flex scale-100;
+}
+
+.alert-content {
+  @apply flex flex-1 items-center space-x-2;
+}
+
+.alert-text-container {
+  @apply flex flex-1 flex-col items-start justify-center;
+}
+
+.alert-title {
+  @apply text-title-h5 flex flex-1 flex-col text-[var(--alert-fg)];
+}
+
+.alert-description {
+  @apply text-base-normal text-[var(--alert-description-fg)];
+}
+
+.alert-button {
+  @apply flex-shrink-0;
+}
+
+.alert-close {
+  @apply flex-shrink-0;
+}
@@ -0,0 +1,67 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.badge {
+  --badge-bold-fg: var(--fg-neutral-inverse);
+  --badge-bold-fg-blue: var(--fg-neutral-inverse);
+  --badge-bold-fg-orange: var(--fg-neutral-inverse);
+  --badge-bold-fg-red: var(--fg-neutral-inverse);
+  --badge-bold-fg-green: var(--fg-neutral-inverse);
+  --badge-bold-border: var(--border-neutral-transparent);
+  --badge-bold-border-blue: var(--border-neutral-transparent);
+  --badge-bold-border-orange: var(--border-neutral-transparent);
+  --badge-bold-border-red: var(--border-neutral-transparent);
+  --badge-bold-border-green: var(--border-neutral-transparent);
+  --badge-bold-bg: var(--bg-neutral-inverse);
+  --badge-bold-bg-blue: var(--bg-tint-blue-bold);
+  --badge-bold-bg-orange: var(--bg-tint-orange-bold);
+  --badge-bold-bg-red: var(--bg-tint-red-bold);
+  --badge-bold-bg-green: var(--bg-tint-green-bold);
+  --badge-subtle-fg: var(--fg-neutral-primary);
+  --badge-subtle-fg-blue: var(--fg-tint-blue);
+  --badge-subtle-fg-orange: var(--fg-tint-orange);
+  --badge-subtle-fg-red: var(--fg-tint-red);
+  --badge-subtle-fg-green: var(--fg-tint-green);
+  --badge-subtle-border: var(--border-neutral-transparent);
+  --badge-subtle-border-blue: var(--border-neutral-transparent);
+  --badge-subtle-border-orange: var(--border-neutral-transparent);
+  --badge-subtle-border-red: var(--border-neutral-transparent);
+  --badge-subtle-border-green: var(--border-neutral-transparent);
+  --badge-subtle-bg: var(--bg-neutral-tertiary);
+  --badge-subtle-bg-blue: var(--bg-tint-blue-subtle);
+  --badge-subtle-bg-orange: var(--bg-tint-orange-subtle);
+  --badge-subtle-bg-red: var(--bg-tint-red-subtle);
+  --badge-subtle-bg-green: var(--bg-tint-green-subtle);
+  --badge-outline-fg: var(--fg-neutral-primary);
+  --badge-outline-fg-blue: var(--fg-tint-blue);
+  --badge-outline-fg-orange: var(--fg-tint-orange);
+  --badge-outline-fg-red: var(--fg-tint-red);
+  --badge-outline-fg-green: var(--fg-tint-green);
+  --badge-outline-border: var(--border-neutral-tertiary);
+  --badge-outline-border-blue: var(--border-tint-blue);
+  --badge-outline-border-orange: var(--border-tint-orange);
+  --badge-outline-border-red: var(--border-tint-red);
+  --badge-outline-border-green: var(--border-tint-green);
+  --badge-outline-bg: var(--bg-neutral-primary);
+  --badge-outline-bg-blue: var(--bg-neutral-primary);
+  --badge-outline-bg-orange: var(--bg-neutral-primary);
+  --badge-outline-bg-red: var(--bg-neutral-primary);
+  --badge-outline-bg-green: var(--bg-neutral-primary);
+
+  @apply text-small-strong inline-flex whitespace-nowrap px-2 py-0.5;
+
+  /* default */
+  @apply badge-bold-default badge-radius-medium;
+}
@@ -0,0 +1,46 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.button {
+  --button-primary-fg: var(--fg-neutral-inverse);
+  --button-secondary-fg: var(--fg-neutral-primary);
+  --button-destructive-fg: var(--fg-neutral-inverse);
+  --button-ghost-fg: var(--fg-neutral-primary);
+  --button-outline-fg: var(--tint, var(--fg-neutral-primary));
+  --button-primary-border: var(--border-neutral-transparent);
+  --button-secondary-border: var(--border-neutral-transparent);
+  --button-destructive-border: var(--border-neutral-transparent);
+  --button-ghost-border: var(--border-neutral-transparent);
+  --button-outline-border: var(--border-neutral-tertiary);
+  --button-primary-bg: var(--tint, var(--bg-neutral-inverse));
+  --button-secondary-bg: var(--bg-neutral-tertiary);
+  --button-destructive-bg: var(--bg-tint-red-bold);
+  --button-ghost-bg: var(--bg-neutral-transparent);
+  --button-ghost-bg-hover: var(--bg-neutral-secondary);
+  --button-outline-bg: var(--bg-neutral-transparent);
+  --button-outline-bg-hover: var(--tint-subtle, var(--bg-neutral-secondary));
+
+  @apply relative inline-flex h-fit cursor-pointer items-center justify-center transition-opacity disabled:cursor-not-allowed disabled:opacity-50 [&:not(:disabled)]:hover:opacity-80;
+
+  /* default */
+  @apply button-small button-radius-medium button-primary;
+}
+
+.button-loading {
+  @apply absolute-center pointer-events-none flex shadow-none;
+
+  /* default */
+  @apply button-loading-primary;
+}
@@ -0,0 +1,107 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.calendar {
+  --calendar-fg-default: var(--fg-neutral-primary);
+  --calendar-fg-pressed: var(--fg-neutral-inverse);
+  --calendar-week-fg: var(--fg-neutral-tertiary);
+  --calendar-border: var(--border-neutral-tertiary);
+  --calendar-bg: var(--bg-neutral-primary);
+  --calendar-bg-pressed: var(--tint, var(--bg-neutral-inverse));
+  --calendar-bg-hover: var(--bg-neutral-tertiary);
+  --calendar-bg-range: var(--bg-neutral-tertiary);
+
+  @apply rounded-8 relative box-content w-fit border border-[var(--calendar-border)] bg-[var(--calendar-bg)] p-2 shadow-sm;
+}
+
+.calendar-months {
+  @apply flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0;
+}
+
+.calendar-month {
+  @apply min-w-[15.75rem] space-y-4;
+}
+
+.calendar-caption {
+  @apply relative flex items-center justify-center pt-1;
+}
+
+.calendar-caption-label {
+  @apply text-base-strong text-[var(--calendar-fg-default)];
+}
+
+.calendar-nav {
+  @apply flex items-center;
+}
+
+.calendar-nav-button {
+  @apply flex p-2.5 hover:opacity-50;
+}
+
+.calendar-nav-button-previous {
+  @apply absolute left-0;
+}
+
+.calendar-nav-button-next {
+  @apply absolute right-0;
+}
+
+.calendar-table {
+  @apply !mt-4 w-full border-collapse;
+}
+
+.calendar-head-row {
+  @apply flex;
+}
+
+.calendar-head-cell {
+  @apply text-small-normal flex-1 px-2 py-0.5 font-normal text-[var(--calendar-week-fg)];
+}
+
+.calendar-row {
+  @apply mt-0.5 flex w-full;
+}
+
+.calendar-cell {
+  @apply [&:has([aria-selected].day-range-end)]:rounded-r-8 first:[&:has([aria-selected])]:rounded-l-8 last:[&:has([aria-selected])]:rounded-r-8 [&:has(.calendar-day-range-start)]:rounded-l-8 [&:has(.calendar-day-range-end)]:rounded-r-8 text-base-normal relative aspect-square flex-1 p-0 text-center focus-within:relative focus-within:z-20 [&:has(.calendar-day-range-end)]:bg-[var(--calendar-bg-hover)] [&:has(.calendar-day-range-start)]:bg-[var(--calendar-bg-hover)];
+}
+
+.calendar-day {
+  @apply rounded-8 text-base-normal relative flex h-full w-full items-center justify-center overflow-hidden p-0 transition-colors aria-selected:opacity-100 [&:not(.calendar-day-selected)]:hover:bg-[var(--calendar-bg-hover)];
+}
+
+.calendar-day-selected:not(.calendar-day-outside) {
+  @apply bg-[var(--calendar-bg-pressed)] text-[--calendar-fg-pressed];
+}
+
+.calendar-day-today {
+  @apply before:absolute before:left-1/2 before:top-0 before:flex before:h-1 before:w-1 before:-translate-x-1/2 before:rounded-full before:bg-[var(--calendar-bg-pressed)];
+}
+
+.calendar-day-outside {
+  @apply pointer-events-none !opacity-50;
+}
+
+.calendar-day-disabled {
+  @apply opacity-50;
+}
+
+.calendar-day-range-middle {
+  @apply rounded-0 aria-selected:bg-[var(--calendar-bg-hover)] aria-selected:text-[var(--calendar-fg-default)];
+}
+
+.calendar-day-hidden {
+  @apply invisible;
+}
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.caption {
+  --caption-fg: var(--fg-neutral-tertiary);
+  --caption-fg-success: var(--fg-tint-green);
+  --caption-fg-error: var(--fg-tint-red);
+
+  @apply text-base-normal flex items-center gap-1;
+
+  /* default */
+  @apply caption-default;
+}
+
+.caption-icon {
+  @apply flex-shrink-0;
+}
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.checkbox {
+  --checkbox-fg: var(--fg-neutral-primary);
+  --checkbox-fg-checked: var(--fg-neutral-primary);
+  --checkbox-fg-indeterminate: var(--fg-neutral-primary);
+  --checkbox-icon: var(--fg-neutral-inverse);
+  --checkbox-icon-checked: var(--fg-neutral-inverse);
+  --checkbox-border-default: var(--border-neutral-secondary);
+  --checkbox-bg: var(--bg-neutral-primary);
+  --checkbox-bg-checked: var(--tint, var(--bg-neutral-inverse));
+
+  @apply inline-flex cursor-pointer items-center text-[var(--checkbox-fg)] transition-opacity disabled:cursor-not-allowed disabled:opacity-50 [&:not(:disabled)]:hover:opacity-80;
+
+  /* default */
+  @apply checkbox-small;
+}
+
+.check {
+  @apply before:rounded-4 relative mr-2 flex items-center justify-center text-[var(--checkbox-icon)] before:absolute before:inset-0 before:flex before:border before:border-[var(--checkbox-border-default)];
+
+  /* default */
+  @apply check-small;
+}
+
+.checkbox-icon {
+  @apply rounded-4 absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[var(--checkbox-bg-checked)] text-[var(--checkbox-icon-checked)];
+}
@@ -0,0 +1,76 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.combobox-content {
+  --combobox-fg: var(--fg-neutral-primary);
+  --combobox-fg-empty: var(--fg-neutral-secondary);
+  --combobox-fg-placeholder: var(--fg-neutral-tertiary);
+  --combobox-shortcut-fg: var(--fg-neutral-tertiary);
+  --combobox-bg: var(--bg-neutral-primary);
+  --combobox-bg-hover: var(--bg-neutral-tertiary);
+  --combobox-border: var(--border-neutral-tertiary);
+
+  @apply flex h-full min-w-[--radix-popover-trigger-width] flex-col overflow-hidden p-1 text-[var(--combobox-fg)];
+}
+
+.combobox-empty {
+  @apply text-base-normal flex items-center justify-center p-6 text-center text-[var(--combobox-fg-empty)];
+}
+
+.combobox-item {
+  @apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center p-2 outline-none transition-colors hover:bg-[var(--combobox-bg-hover)] data-[selected=true]:bg-[var(--combobox-bg-hover)];
+}
+
+.combobox-item ~ .combobox-item {
+  @apply mt-1;
+}
+
+.combobox-check {
+  @apply mr-2;
+}
+
+.combobox-caption {
+  @apply text-small-normal ml-auto tracking-widest text-[var(--combobox-shortcut-fg)];
+}
+
+.combobox-separator {
+  @apply -mx-1 my-1 h-px bg-[var(--combobox-border)];
+}
+
+.combobox-group {
+  @apply [&_[cmdk-group-heading]]:text-base-strong overflow-hidden p-[1px] text-[var(--combobox-fg)] [&_[cmdk-group-heading]]:p-2;
+}
+
+.combobox-list {
+  @apply pt-1;
+}
+
+.combobox-input-box {
+  @apply relative flex items-center justify-center border-b border-b-[var(--combobox-border)] bg-[var(--combobox-bg)] [&>svg]:ml-2 [&>svg]:shrink-0 [&>svg]:opacity-50;
+}
+
+.combobox-input {
+  @apply text-base-normal min-w-0 flex-1 bg-[transparent] p-2 text-[var(--combobox-fg)] outline-none placeholder:text-[var(--combobox-fg-placeholder)];
+}
+
+.combobox-trigger {
+  --combobox-border-error: var(--border-tint-red);
+
+  @apply [&>svg:last-of-type]:!ml-auto;
+}
+
+.combobox-trigger[aria-invalid='true'] {
+  @apply !border-2 !border-[var(--combobox-border-error)];
+}
@@ -0,0 +1,65 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.dialog {
+  --dialog-bg: var(--bg-neutral-primary);
+  --dialog-border: var(--border-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--alpha-black800)];
+}
+
+.dialog-content {
+  --dialog-bg: var(--bg-neutral-primary);
+  --dialog-border: var(--border-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-y-5 space-y-2 border border-[var(--dialog-border)] bg-[var(--dialog-bg)] p-5 duration-200;
+
+  /* default */
+  @apply dialog-content-radius-medium;
+}
+
+.dialog-header {
+  @apply flex flex-col gap-1 text-left;
+}
+
+.dialog-icon {
+  @apply p-1;
+
+  /* default */
+  @apply dialog-icon-default;
+}
+
+.dialog-title {
+  @apply text-title-h4 text-[var(--fg-neutral-primary)];
+}
+
+.dialog-description {
+  @apply text-base-normal text-[var(--fg-neutral-secondary)];
+}
+
+.dialog-body {
+  @apply space-y-3;
+}
+
+.dialog-footer {
+  @apply flex flex-wrap gap-2;
+
+  /* default */
+  @apply dialog-footer-right;
+}
+
+.dialog-close {
+  @apply !absolute right-2 top-2 !m-0;
+}
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.divider {
+  --divider-border-bold: var(--border-neutral-primary);
+  --divider-border-subtle: var(--border-neutral-tertiary);
+
+  @apply shrink-0;
+
+  /* default */
+  @apply [&:not(.divider-vertical)]:divider-horizontal divider-bold;
+}
@@ -0,0 +1,94 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.dropdown-content {
+  --dropdown-fg: var(--fg-neutral-primary);
+  --dropdown-fg-pressed: var(--tint, var(--fg-neutral-primary));
+  --dropdown-fg-empty: var(--fg-neutral-secondary);
+  --dropdown-shortcut-fg: var(--fg-neutral-tertiary);
+  --dropdown-bg: var(--bg-neutral-primary);
+  --dropdown-bg-hover: var(--bg-neutral-tertiary);
+  --dropdown-bg-pressed: var(--bg-neutral-tertiary);
+  --dropdown-border: var(--border-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
+  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  @apply rounded-8 z-50 min-w-[--radix-dropdown-menu-trigger-width] overflow-hidden border p-1 shadow-md;
+  @apply border-[var(--dropdown-border)] bg-[var(--dropdown-bg)] text-[var(--dropdown-fg)];
+}
+
+.dropdown-sub-trigger {
+  @apply rounded-6 text-base-normal flex cursor-pointer select-none items-center p-2 outline-none focus:bg-[var(--dropdown-bg-hover)] data-[state=open]:bg-[var(--dropdown-bg-pressed)] data-[state=open]:text-[var(--dropdown-fg-pressed)];
+}
+
+.dropdown-sub-content {
+  --dropdown-fg: var(--fg-neutral-primary);
+  --dropdown-fg-pressed: var(--tint, var(--fg-neutral-primary));
+  --dropdown-fg-empty: var(--fg-neutral-secondary);
+  --dropdown-shortcut-fg: var(--fg-neutral-tertiary);
+  --dropdown-bg: var(--bg-neutral-primary);
+  --dropdown-bg-hover: var(--bg-neutral-tertiary);
+  --dropdown-bg-pressed: var(--bg-neutral-tertiary);
+  --dropdown-border: var(--border-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
+  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  @apply data-[side=bottom]:mt-1 data-[side=left]:mr-1 data-[side=right]:ml-1 data-[side=top]:mb-1;
+  @apply rounded-8 z-50 min-w-[--radix-dropdown-menu-trigger-width] overflow-hidden border p-1 shadow-lg;
+  @apply border-[var(--dropdown-border)] bg-[var(--dropdown-bg)] text-[var(--dropdown-fg)];
+}
+
+.dropdown-item {
+  @apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center p-2 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[state=on]:bg-[var(--dropdown-bg-pressed)] data-[state=on]:text-[var(--dropdown-fg-pressed)] data-[disabled]:opacity-50;
+  @apply [&>svg]:h-4 [&>svg]:w-4;
+}
+
+.dropdown-checkbox {
+  @apply rounded-8 text-base-normal relative flex cursor-pointer select-none items-center py-2 pl-8 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+.dropdown-checkbox-icon {
+  @apply absolute left-2 flex h-4 w-4 items-center justify-center;
+}
+
+.dropdown-radio {
+  @apply rounded-8 text-base-normal relative flex cursor-pointer select-none items-center py-2 pl-8 outline-none transition-colors focus:bg-[var(--dropdown-bg-hover)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+.dropdown-radio-icon {
+  @apply absolute left-3.5 flex h-2 w-2 items-center justify-center;
+}
+
+.dropdown-item ~ .dropdown-item {
+  @apply mt-1;
+}
+
+.dropdown-label {
+  @apply text-base-strong space-x-2 p-2;
+}
+
+.dropdown-caption {
+  @apply text-small-normal ml-auto tracking-widest text-[var(--dropdown-shortcut-fg)];
+}
+
+.dropdown-separator {
+  @apply -mx-1 my-1 h-px bg-[var(--dropdown-border)];
+}
+
+.dropdown-empty {
+  @apply text-base-normal flex items-center justify-center p-6 text-[var(--dropdown-fg-empty)];
+}
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.icon {
+  @apply pointer-events-none inline-flex text-inherit;
+}
+
+.icon-clickable {
+  @apply pointer-events-auto cursor-pointer;
+}
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.input-field {
+  --input-fg: var(--fg-neutral-tertiary);
+  --input-fg-typing: var(--fg-neutral-primary);
+  --input-fg-filled: var(--fg-neutral-primary);
+  --input-border: var(--border-neutral-tertiary);
+  --input-border-typing: var(--tint, var(--border-neutral-primary));
+  --input-border-filled: var(--border-neutral-tertiary);
+  --input-border-error: var(--border-tint-red);
+  --input-bg: var(--bg-neutral-primary);
+  --input-bg-typing: var(--bg-neutral-tertiary);
+  --input-bg-filled: var(--bg-neutral-primary);
+
+  @apply flex flex-col gap-1.5;
+}
+
+.input-box {
+  @apply relative;
+  @apply [&:has(.input-button)>.input-large]:!pr-12 [&:has(.input-button)>.input-medium]:!pr-10 [&:has(.input-button)>.input-small]:!pr-8;
+  @apply [&:has(.input-icon)>.input-large]:!pl-12 [&:has(.input-icon)>.input-medium]:!pl-10 [&:has(.input-icon)>.input-small]:!pl-8;
+}
+
+.input {
+  @apply text-[var(--input-fg-filled)] placeholder:text-[var(--input-fg)] placeholder-shown:text-[var(--input-fg)] focus-visible:text-[var(--input-fg-typing)];
+  @apply border border-[var(--input-border-filled)] placeholder-shown:border placeholder-shown:border-[var(--input-border)] focus-visible:border-2 focus-visible:border-[var(--input-border-typing)];
+  @apply bg-[var(--input-bg-filled)] placeholder-shown:bg-[var(--input-bg)] focus-visible:bg-[var(--input-bg-typing)];
+
+  @apply w-full outline-none;
+  @apply disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-search-cancel-button]:hidden;
+
+  /* default */
+  @apply input-small input-radius-medium;
+}
+.input[aria-invalid='true'] {
+  @apply !border-2 !border-[var(--input-border-error)] !bg-[var(--input-bg-error)];
+}
+
+.input-button {
+  @apply absolute-y-center flex flex-shrink-0 items-center justify-center disabled:cursor-not-allowed disabled:opacity-50;
+
+  /* default */
+  @apply input-button-small;
+}
+
+.input-button.show-only-on-focus-and-has-value {
+  @apply hidden;
+}
+
+.input-box:focus-within
+  .input:not(:placeholder-shown)
+  ~ .input-button.show-only-on-focus-and-has-value {
+  @apply flex;
+}
+
+.input-icon {
+  @apply absolute-y-center flex;
+
+  /* default */
+  @apply input-icon-small;
+}
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.label {
+  --label-fg: var(--fg-neutral-primary);
+  --label-fg-error: var(--fg-tint-red);
+
+  @apply text-base-normal font-normal text-[var(--label-fg)] data-[error=true]:text-[var(--label-fg-error)];
+}
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.menu {
+  --menu-fg: var(--fg-neutral-tertiary);
+  --menu-fg-hover: var(--fg-neutral-tertiary);
+  --menu-fg-pressed: var(--fg-neutral-primary);
+  --menu-bg-hover: var(--bg-neutral-tertiary);
+  --menu-bg-pressed: var(--bg-neutral-tertiary);
+
+  @apply rounded-8 inline-flex px-2 py-3;
+
+  /* default */
+  @apply [&:not(.menu-vertical)]:menu-horizontal;
+}
+
+.menu-item {
+  @apply rounded-8 relative flex w-full cursor-pointer select-none items-center gap-2 text-left text-[var(--menu-fg)] outline-none hover:bg-[var(--menu-bg-hover)] hover:text-[var(--menu-fg-hover)] hover:opacity-100 data-[disabled]:pointer-events-none data-[state=on]:bg-[var(--menu-bg-pressed)] data-[state=open]:!bg-[var(--menu-bg-pressed)] data-[state=on]:text-[var(--menu-fg-pressed)] data-[state=open]:text-[var(--menu-fg-pressed)] data-[disabled]:opacity-50 [&>svg]:flex-shrink-0;
+
+  /* default */
+  @apply menu-item-small;
+}
+
+.menu-dropdown-item {
+  @apply !p-0;
+}
+
+.menu-dropdown-item ~ .menu-dropdown-item {
+  @apply mt-1;
+}
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+/* todo remove */
+.navbar {
+  @apply border-b-neutral-tertiary bg-neutral-primary flex h-14 items-center border-b px-6 py-2.5;
+}
+
+.navbar-menu {
+  @apply !p-0;
+}
+
+.navbar-logo {
+  @apply flex p-1.5;
+}
+
+.navbar-divider {
+  @apply mx-1;
+}
+
+.navbar-dropdown {
+  @apply ml-auto;
+}
+
+.navbar-dropdown ~ .navbar-button {
+  @apply ml-3;
+}
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.pagination {
+  @apply mx-auto flex w-full justify-center;
+}
+
+.pagination-content {
+  @apply flex flex-row items-center space-x-1;
+}
+
+.pagination-item {
+  @apply flex-shrink-0;
+}
@@ -0,0 +1,21 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.popover {
+  @apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
+  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  @apply rounded-8 z-50 min-w-32 overflow-hidden border border-[var(--border-neutral-tertiary)] bg-[var(--bg-neutral-primary)] shadow-md;
+}
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')('./src/components/tailwind.config.js'),
+  ],
+};
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.radio-card-group {
+  --radio-card-text-title: var(--fg-neutral-primary);
+  --radio-card-text-description: var(--fg-neutral-tertiary);
+  --radio-card-border-default: var(--border-neutral-tertiary);
+  --radio-card-border-selected: var(--tint, var(--border-neutral-primary));
+  --radio-card-fg-default: var(--bg-neutral-primary);
+  --radio-card-fg-hover: var(--bg-neutral-tertiary);
+
+  @apply inline-flex;
+
+  /* default */
+  @apply [&:not(.radio-card-group-vertical)]:radio-card-group-horizontal;
+}
+
+.radio-card {
+  @apply relative inline-flex border border-[var(--radio-card-border-default)] bg-[var(--radio-card-fg-default)] transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-2 data-[state=checked]:border-[var(--radio-card-border-selected)] [&:not(:disabled)]:hover:bg-[var(--radio-card-fg-hover)];
+
+  /* default */
+  @apply [&:not(.radio-card-horizontal)]:radio-card-vertical radio-card-radius-medium;
+}
+
+.radio-card-text {
+  @apply block text-inherit;
+}
+
+.radio-card-title {
+  @apply text-base-strong block text-[var(--radio-card-text-title)];
+}
+
+.radio-card-description {
+  @apply text-base-normal block text-[var(--radio-card-text-description)];
+}
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.radio-group {
+  --radio-fg: var(--fg-neutral-primary);
+  --radio-border: var(--border-neutral-tertiary);
+  --radio-bg: var(--bg-neutral-primary);
+  --radio-bg-select: var(--tint, var(--bg-neutral-inverse));
+
+  @apply flex;
+
+  /* default */
+  @apply [&:not(.radio-group-vertical)]:radio-group-horizontal;
+}
+
+.radio-item {
+  @apply text-base-normal flex items-center py-2 text-[var(--radio-fg)] disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+.radio {
+  @apply relative mr-2 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[var(--radio-bg)] before:absolute before:inset-0 before:flex before:rounded-full before:border before:border-[var(--radio-border)];
+}
+
+.radio-indicator {
+  @apply absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-full bg-[var(--radio-bg-select)] text-[var(--radio-bg)] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+}
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.scroll-area {
+  --scroll-area-bg: var(--bg-neutral-transparent);
+  --scroll-area-thumb-bg: var(--bg-neutral-tertiary);
+
+  @apply relative overflow-hidden bg-[var(--scroll-area-bg)];
+}
+
+.scroll-area-viewport {
+  @apply h-full w-full rounded-[inherit] has-[.scroll-bar-horizontal]:pb-2 has-[.scroll-bar-vertical]:pr-2;
+}
+
+.scroll-bar {
+  @apply flex touch-none select-none transition-colors;
+
+  /* default */
+  @apply [&:not(.scroll-bar-horizontal)]:scroll-bar-vertical;
+}
+
+.scroll-thumb {
+  @apply relative flex-1 rounded-full bg-[var(--scroll-area-thumb-bg)];
+}
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+.select {
+  /* default */
+  @apply select-small;
+}
+
+.select-trigger {
+  --select-fg: var(--fg-neutral-tertiary);
+  --select-fg-pressed: var(--fg-neutral-primary);
+  --select-fg-filled: var(--fg-neutral-primary);
+  --select-border: var(--border-neutral-tertiary);
+  --select-border-pressed: var(--tint, var(--border-neutral-primary));
+  --select-border-error: var(--border-tint-red);
+  --select-bg: var(--bg-neutral-primary);
+  --select-bg-pressed: var(--bg-neutral-tertiary);
+
+  @apply relative flex w-full items-center justify-start bg-[var(--select-bg)] text-left text-[var(--select-fg-filled)] transition-transform before:absolute before:inset-0 before:flex before:border before:border-[var(--select-border)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-[var(--select-fg)] data-[state=open]:text-[var(--select-fg-pressed)] data-[state=open]:before:border-2 data-[state=open]:before:border-[var(--select-border-pressed)] [&>span]:flex [&>span]:flex-1 [&>span]:items-center [&>span]:overflow-hidden [&>svg:last-of-type]:data-[state=open]:rotate-180;
+
+  /* default */
+  @apply select-trigger-medium select-trigger-radius-medium;
+}
+
+.select-trigger[aria-invalid='true'] {
+  @apply before:!border-2 before:!border-[var(--select-border-error)];
+}
+
+.select-content {
+  --select-fg: var(--fg-neutral-tertiary);
+  --select-fg-pressed: var(--fg-neutral-primary);
+  --select-fg-filled: var(--fg-neutral-primary);
+  --select-border: var(--border-neutral-tertiary);
+  --select-border-pressed: var(--tint, var(--border-neutral-primary));
+  --select-border-error: var(--border-tint-red);
+  --select-bg: var(--bg-neutral-primary);
+  --select-bg-pressed: var(--bg-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
+  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:mt-1 data-[side=top]:mb-1;
+  @apply rounded-8 relative z-50 !min-w-[var(--radix-select-trigger-width,_var(--radix-popper-anchor-width))] overflow-hidden border border-[var(--select-border)] bg-[var(--select-bg)] p-1 text-[var(--select-fg-filled)] shadow-md;
+}
+
+.select-viewport {
+  @apply p-px;
+}
+
+.select-group-label {
+  @apply text-base-strong p-2;
+}
+
+.select-item {
+  @apply rounded-6 text-base-normal relative flex cursor-pointer select-none items-center py-2 outline-none transition-colors hover:bg-[var(--select-bg-pressed)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+
+  /* default */
+  @apply [&:not(.select-item-right)]:select-item-left;
+}
+
+.select-item-check {
+  @apply absolute flex h-4 w-4 items-center justify-center;
+
+  /* default */
+  @apply [&:not(.select-item-check-right)]:select-item-check-left;
+}
+
+.select-separator {
+  @apply -mx-1 my-1 h-px bg-[var(--select-border)];
+}
+
+.select-tag {
+  @apply mr-2.5 !gap-0;
+}
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.sheet-overlay {
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-dim fixed inset-0 z-50;
+}
+
+.sheet {
+  --sheet-border: var(--border-neutral-tertiary);
+
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out bg-neutral-primary text-neutral-primary fixed z-50 flex flex-col space-y-5 border-[var(--sheet-border)] p-5 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500;
+
+  /* default */
+  @apply sheet-radius-small [&:not([class*=sheet-side])]:sheet-side-right;
+}
+
+.sheet-close {
+  @apply !absolute right-2 top-2 !m-0;
+}
+
+.sheet-header {
+  @apply flex flex-shrink-0 flex-col gap-1 text-left;
+}
+
+.sheet-footer {
+  @apply flex flex-shrink-0 justify-end gap-2;
+}
+
+.sheet-icon {
+  @apply flex p-1;
+}
+
+.sheet-title {
+  @apply text-xlarge-strong;
+}
+
+.sheet-description {
+  @apply text-neutral-secondary text-base-normal;
+}
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.spinner {
+  @apply inline-flex animate-[spin_1s_cubic-bezier(0.4,0,0.2,1)_infinite];
+}
+
+.spinner-small {
+  @apply w-4 h-4;
+}
+
+.spinner-medium {
+  @apply w-5 h-5;
+}
+
+.spinner-large {
+  @apply w-6 h-6;
+}
+
+.spinner {
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.25' fill-rule='evenodd' clip-rule='evenodd' d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.47715 2 2 6.47715 2 12C2 12.5523 1.55228 13 1 13C0.447715 13 0 12.5523 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 12.5523 23.5523 13 23 13C22.4477 13 22 12.5523 22 12C22 6.47715 17.5228 2 12 2Z' fill='black'/%3E%3C/svg%3E%0A");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  background-color: currentcolor;
+}
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.switch {
+  --switch-fg: var(--fg-neutral-primary);
+  --switch-handle-bg: var(--bg-neutral-primary);
+  --switch-bg: var(--bg-neutral-inverse);
+  --switch-bg-blue: var(--bg-tint-blue-bold);
+  --switch-bg-orange: var(--bg-tint-orange-bold);
+  --switch-bg-red: var(--bg-tint-red-bold);
+  --switch-bg-green: var(--bg-tint-green-bold);
+  --switch-bg-off: var(--bg-neutral-secondary);
+
+  @apply text-base-normal relative inline-flex h-6 cursor-pointer items-center gap-2 text-[var(--switch-fg)] before:box-content before:flex before:h-5 before:w-10 before:rounded-full before:p-0.5 before:transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:before:bg-[var(--switch-bg-off)];
+
+  /* default */
+  @apply switch-default;
+}
+
+.switch-thumb {
+  @apply absolute left-0.5 top-0.5 flex h-5 w-5 translate-x-0 rounded-full bg-[var(--switch-handle-bg)] transition-transform data-[state=checked]:translate-x-full;
+}
@@ -0,0 +1,58 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.table {
+  --table-header-fg: var(--fg-neutral-tertiary);
+  --table-cell-fg: var(--fg-neutral-primary);
+  --table-border: var(--border-neutral-tertiary);
+  --table-bg: var(--bg-neutral-primary);
+  --table-bg-hover: var(--bg-neutral-tertiary);
+
+  @apply w-full caption-bottom border-[var(--table-border)];
+}
+
+.table-header {
+  @apply [&_th]:border-b [&_th]:border-b-[var(--table-border)];
+}
+
+.table-body {
+  @apply [&_td]:border-b [&_td]:border-b-[var(--table-border)] [&_tr:last-child_td]:border-0;
+}
+
+.table-footer {
+  @apply border-t border-t-[var(--table-border)] bg-[var(--table-bg-hover)] [&>tr]:last:border-b-0;
+}
+
+.table-row {
+  @apply border-b border-b-[var(--table-border)] transition-colors hover:bg-[var(--table-bg-hover)] data-[state=selected]:bg-[var(--table-bg-hover)];
+}
+
+.table-head {
+  @apply text-base-normal h-12 px-4 align-middle font-normal text-[var(--table-header-fg)] [&:has([role=checkbox])]:pr-0 [&>.badge]:mr-1 [&>svg]:mr-1 [&>svg]:text-[var(--table-header-fg)];
+
+  /* default */
+  @apply table-head-left;
+}
+
+.table-cell {
+  @apply text-base-normal px-4 py-3 align-middle text-[var(--table-cell-fg)] [&:has([role=checkbox])]:pr-0 [&>.badge]:mr-1 [&>svg]:text-[var(--table-cell-fg)];
+
+  /* default */
+  @apply table-cell-left;
+}
+
+.table-caption {
+  @apply text-small-normal mt-1 text-[--table-header-fg];
+}
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.tabs {
+  --tabs-fg-unselected: var(--fg-neutral-tertiary);
+  --tabs-fg-selected: var(--fg-neutral-primary);
+  --tabs-bg-unselected: var(--bg-neutral-tertiary);
+  --tabs-bg-selected: var(--bg-neutral-primary);
+}
+
+.tabs-list {
+  @apply rounded-8 h-9.5 inline-flex items-center justify-center bg-[var(--tabs-bg-unselected)] p-1 text-[var(--tabs-fg-selected)];
+}
+
+.tabs-trigger {
+  @apply rounded-6 data-[state=active]:shadow-default text-base-normal inline-flex items-center justify-center whitespace-nowrap px-3 py-1 font-medium text-[var(--tabs-fg-unselected)] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[var(--tabs-bg-selected)] data-[state=active]:text-[var(--tabs-fg-selected)] [&>svg]:h-4 [&>svg]:w-4;
+}
+
+.tabs-content {
+  @apply mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+}
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.tag {
+  --tag-primary-fg: var(--fg-neutral-inverse);
+  --tag-secondary-fg: var(--fg-neutral-primary);
+  --tag-destructive-fg: var(--fg-neutral-inverse);
+  --tag-outline-fg: var(--tint, var(--fg-neutral-primary));
+  --tag-outline-border: var(--border-neutral-tertiary);
+  --tag-primary-bg: var(--tint, var(--bg-neutral-inverse));
+  --tag-secondary-bg: var(--bg-neutral-tertiary);
+  --tag-destructive-bg: var(--bg-tint-red-bold);
+  --tag-outline-bg: var(--bg-neutral-transparent);
+  --tag-outline-bg-hover: var(--tint-subtle, var(--bg-neutral-secondary));
+
+  @apply inline-flex items-center whitespace-nowrap hover:opacity-80 [&>svg]:flex-shrink-0;
+
+  /* default */
+  @apply tag-small tag-radius-medium tag-primary;
+}
@@ -0,0 +1,213 @@
+const plugin = require("tailwindcss/plugin");
+
+function filterDefault(values) {
+  return Object.fromEntries(
+    Object.entries(values).filter(([key]) => key !== "DEFAULT"),
+  );
+}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  content: [{ raw: "" }],
+  theme: require("../theme"),
+  plugins: [
+    plugin(
+      ({ addUtilities, matchUtilities, theme }) => {
+        addUtilities({
+          "@keyframes enter": theme("keyframes.enter"),
+          "@keyframes exit": theme("keyframes.exit"),
+          ".animate-in": {
+            animationName: "enter",
+            animationDuration: theme("animationDuration.DEFAULT"),
+            "--tw-enter-opacity": "initial",
+            "--tw-enter-scale": "initial",
+            "--tw-enter-rotate": "initial",
+            "--tw-enter-translate-x": "initial",
+            "--tw-enter-translate-y": "initial",
+          },
+          ".animate-out": {
+            animationName: "exit",
+            animationDuration: theme("animationDuration.DEFAULT"),
+            "--tw-exit-opacity": "initial",
+            "--tw-exit-scale": "initial",
+            "--tw-exit-rotate": "initial",
+            "--tw-exit-translate-x": "initial",
+            "--tw-exit-translate-y": "initial",
+          },
+        });
+
+        matchUtilities(
+          {
+            "fade-in": (value) => ({ "--tw-enter-opacity": value }),
+            "fade-out": (value) => ({ "--tw-exit-opacity": value }),
+          },
+          { values: theme("animationOpacity") },
+        );
+
+        matchUtilities(
+          {
+            "zoom-in": (value) => ({ "--tw-enter-scale": value }),
+            "zoom-out": (value) => ({ "--tw-exit-scale": value }),
+          },
+          { values: theme("animationScale") },
+        );
+
+        matchUtilities(
+          {
+            "spin-in": (value) => ({ "--tw-enter-rotate": value }),
+            "spin-out": (value) => ({ "--tw-exit-rotate": value }),
+          },
+          { values: theme("animationRotate") },
+        );
+
+        matchUtilities(
+          {
+            "slide-in-from-top": (value) => ({
+              "--tw-enter-translate-y": `-${value}`,
+            }),
+            "slide-in-from-bottom": (value) => ({
+              "--tw-enter-translate-y": value,
+            }),
+            "slide-in-from-left": (value) => ({
+              "--tw-enter-translate-x": `-${value}`,
+            }),
+            "slide-in-from-right": (value) => ({
+              "--tw-enter-translate-x": value,
+            }),
+            "slide-out-to-top": (value) => ({
+              "--tw-exit-translate-y": `-${value}`,
+            }),
+            "slide-out-to-bottom": (value) => ({
+              "--tw-exit-translate-y": value,
+            }),
+            "slide-out-to-left": (value) => ({
+              "--tw-exit-translate-x": `-${value}`,
+            }),
+            "slide-out-to-right": (value) => ({
+              "--tw-exit-translate-x": value,
+            }),
+          },
+          { values: theme("animationTranslate") },
+        );
+
+        matchUtilities(
+          { duration: (value) => ({ animationDuration: value }) },
+          { values: filterDefault(theme("animationDuration")) },
+        );
+
+        matchUtilities(
+          { delay: (value) => ({ animationDelay: value }) },
+          { values: theme("animationDelay") },
+        );
+
+        matchUtilities(
+          { ease: (value) => ({ animationTimingFunction: value }) },
+          { values: filterDefault(theme("animationTimingFunction")) },
+        );
+
+        addUtilities({
+          ".running": { animationPlayState: "running" },
+          ".paused": { animationPlayState: "paused" },
+        });
+
+        matchUtilities(
+          { "fill-mode": (value) => ({ animationFillMode: value }) },
+          { values: theme("animationFillMode") },
+        );
+
+        matchUtilities(
+          { direction: (value) => ({ animationDirection: value }) },
+          { values: theme("animationDirection") },
+        );
+
+        matchUtilities(
+          { repeat: (value) => ({ animationIterationCount: value }) },
+          { values: theme("animationRepeat") },
+        );
+      },
+      {
+        theme: {
+          extend: {
+            animationDelay: ({ theme }) => ({
+              ...theme("transitionDelay"),
+            }),
+            animationDuration: ({ theme }) => ({
+              0: "0ms",
+              ...theme("transitionDuration"),
+            }),
+            animationTimingFunction: ({ theme }) => ({
+              ...theme("transitionTimingFunction"),
+            }),
+            animationFillMode: {
+              none: "none",
+              forwards: "forwards",
+              backwards: "backwards",
+              both: "both",
+            },
+            animationDirection: {
+              normal: "normal",
+              reverse: "reverse",
+              alternate: "alternate",
+              "alternate-reverse": "alternate-reverse",
+            },
+            animationOpacity: ({ theme }) => ({
+              DEFAULT: 0,
+              ...theme("opacity"),
+            }),
+            animationTranslate: ({ theme }) => ({
+              DEFAULT: "100%",
+              ...theme("translate"),
+            }),
+            animationScale: ({ theme }) => ({
+              DEFAULT: 0,
+              ...theme("scale"),
+            }),
+            animationRotate: ({ theme }) => ({
+              DEFAULT: "30deg",
+              ...theme("rotate"),
+            }),
+            animationRepeat: {
+              0: "0",
+              1: "1",
+              infinite: "infinite",
+            },
+            animation: {
+              in: "enter 0.15s ease-in-out",
+              out: "exit 0.15s ease-in-out",
+              "accordion-down": "accordion-down 0.2s ease-out",
+              "accordion-up": "accordion-up 0.2s ease-out",
+            },
+            keyframes: {
+              enter: {
+                from: {
+                  opacity: "var(--tw-enter-opacity, 1)",
+                  transform:
+                    "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
+                },
+              },
+              exit: {
+                to: {
+                  opacity: "var(--tw-exit-opacity, 1)",
+                  transform:
+                    "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
+                },
+              },
+              "accordion-down": {
+                from: { height: "0" },
+                to: { height: "var(--radix-accordion-content-height)" },
+              },
+              "accordion-up": {
+                from: { height: "var(--radix-accordion-content-height)" },
+                to: { height: "0" },
+              },
+            },
+          },
+        },
+      },
+    ),
+    plugin(({ addBase, addUtilities }) => {
+      addBase(require("../../dist/base"));
+      addUtilities(require("../../dist/utilities"));
+    }),
+  ],
+};
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.textarea {
+  --textarea-fg: var(--fg-neutral-tertiary);
+  --textarea-fg-typing: var(--fg-neutral-primary);
+  --textarea-fg-filled: var(--fg-neutral-primary);
+  --textarea-border: var(--border-neutral-tertiary);
+  --textarea-border-typing: var(--tint, var(--border-neutral-primary));
+  --textarea-border-filled: var(--border-neutral-tertiary);
+  --textarea-bg: var(--bg-neutral-primary);
+  --textarea-bg-typing: var(--bg-neutral-primary);
+  --textarea-bg-filled: var(--bg-neutral-primary);
+
+  @apply text-[var(--textarea-fg-filled)] placeholder:text-[var(--textarea-fg)] placeholder-shown:text-[var(--textarea-fg)] focus-visible:text-[var(--textarea-fg-typing)];
+  @apply border-[var(--textarea-border-filled)] placeholder-shown:border-[var(--textarea-border)] focus-visible:border-[var(--textarea-border-typing)];
+  @apply bg-[var(--textarea-bg-filled)] placeholder-shown:bg-[var(--textarea-bg)] focus-visible:bg-[var(--textarea-bg-typing)];
+
+  @apply rounded-8 text-base-normal flex min-h-20 w-full border px-3 py-2 outline-none;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+}
@@ -0,0 +1,68 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.toaster {
+}
+
+.toast {
+  --toast-fg: var(--fg-neutral-primary);
+  --toast-fg-secondary: var(--fg-neutral-secondary);
+  --toast-fg-warning: var(--fg-tint-orange);
+  --toast-fg-success: var(--fg-tint-green);
+  --toast-fg-error: var(--fg-tint-red);
+  --toast-fg-informative: var(--fg-tint-blue);
+  --toast-border: var(--border-neutral-tertiary);
+  --toast-border-warning: var(--border-tint-orange);
+  --toast-border-success: var(--border-tint-green);
+  --toast-border-error: var(--border-tint-red);
+  --toast-border-informative: var(--border-tint-blue);
+  --toast-bg: var(--bg-neutral-primary);
+
+  @apply !absolute !left-0 inline-flex min-w-[356px] items-center space-x-2 border bg-[var(--toast-bg)] px-5 py-4;
+
+  /* default */
+  @apply toast-radius-medium toast-default;
+}
+
+.toast-content {
+  @apply flex flex-1 flex-col items-start justify-center;
+}
+
+.toast-title {
+  @apply text-title-h5 flex flex-1 flex-col text-[var(--toast-fg)];
+}
+
+.toast-description {
+  @apply text-base-normal text-[var(--toast-fg-secondary)];
+}
+
+.toast-button {
+  @apply flex-shrink-0;
+}
+
+.toast-close {
+  @apply order-1 flex-shrink-0 !px-0;
+}
+
+.toast-icon {
+  @apply relative mb-auto box-content flex h-5 w-5 flex-shrink-0 p-1;
+
+  /* default */
+  @apply toast-icon-default;
+}
+
+.toast-loader {
+  @apply flex scale-100;
+}
@@ -0,0 +1,47 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.toggle-group {
+  --toggle-group-fg: var(--fg-neutral-primary);
+  --toggle-group-fg-hover: var(--fg-neutral-primary);
+  --toggle-group-fg-pressed: var(--tint, var(--fg-neutral-primary));
+  --toggle-group-border: var(--border-neutral-tertiary);
+  --toggle-group-border-hover: var(--border-neutral-tertiary);
+  --toggle-group-border-pressed: var(--border-neutral-tertiary);
+  --toggle-group-bg: var(--bg-neutral-primary);
+  --toggle-group-bg-hover: var(--bg-neutral-tertiary);
+  --toggle-group-bg-pressed: var(--bg-neutral-tertiary);
+
+  @apply relative inline-flex items-center justify-center;
+}
+
+.toggle-group-item {
+  @apply inline-flex cursor-pointer items-center justify-center gap-1 border border-[var(--toggle-group-border)] bg-[var(--toggle-group-bg)] text-[var(--toggle-group-fg)] transition-colors disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:border-[var(--toggle-group-border-pressed)] data-[state=on]:bg-[var(--toggle-group-bg-pressed)] data-[state=on]:text-[var(--toggle-group-fg-pressed)] [&:not(:disabled)]:hover:border-[var(--toggle-group-border-hover)] [&:not(:disabled)]:hover:bg-[var(--toggle-group-bg-hover)] [&:not(:disabled)]:hover:text-[var(--toggle-group-fg-hover)] data-[state=on]:[&:not(:disabled)]:hover:border-[var(--toggle-group-border-hover)] data-[state=on]:[&:not(:disabled)]:hover:bg-[var(--toggle-group-bg-hover)] data-[state=on]:[&:not(:disabled)]:hover:text-[var(--toggle-group-fg-hover)];
+
+  /* default */
+  @apply toggle-group-item-small toggle-group-item-radius-medium;
+
+  ~ .toggle-group-item {
+    @apply -ml-px;
+  }
+}
+
+.toggle-group-icon {
+  @apply pointer-events-none;
+}
+
+.toggle-group-input {
+  @apply absolute m-0 block h-0 w-0 overflow-hidden p-0;
+}
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2025 LY Corporation
+ *
+ * LY Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+.tooltip {
+  --tooltip-fg: var(--fg-neutral-primary);
+  --tooltip-border: var(--border-neutral-tertiary);
+  --tooltip-bg: var(--bg-neutral-primary);
+
+  @apply rounded-8 animate-in fade-in-0 zoom-in-95;
+  @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  @apply text-base-normal z-50 flex flex-col overflow-hidden whitespace-pre-wrap border border-[var(--tooltip-border)] bg-[var(--tooltip-bg)] px-3 py-1 text-[var(--tooltip-fg)] shadow-md;
+
+  /* default */
+  @apply tooltip-text-center;
+}
+
+.tooltip-arrow-border {
+  @apply fill-current text-[var(--tooltip-border)];
+}
+
+.tooltip-arrow {
+  @apply fill-current text-[var(--tooltip-bg)];
+}
+
+[data-side="top"].tooltip .tooltip-arrow {
+  @apply -translate-y-px translate-x-px;
+}
+
+[data-side="right"].tooltip .tooltip-arrow {
+  @apply -translate-y-px translate-x-[0.5px];
+}
+
+[data-side="bottom"].tooltip .tooltip-arrow {
+  @apply -translate-x-px -translate-y-px;
+}
+
+[data-side="left"].tooltip .tooltip-arrow {
+  @apply -translate-x-[0.5px] -translate-y-px;
+}
+
+.tooltip-title {
+  @apply text-base-strong mb-1;
+}