@moto-nrw/design-system 0.2.3 → 0.3.0

package/dist/index.css

@@ -1,1550 +0,0 @@
-/* src/components/Accordion/Accordion.module.css */
-.accordion {
-  border-top: 1px solid var(--semantic-color-border-default);
-}
-.trigger {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border: none;
-  background: none;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-secondary);
-  cursor: pointer;
-  transition: color 150ms ease;
-}
-.trigger:hover {
-  color: var(--semantic-color-text-default);
-}
-.label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.badge {
-  display: inline-flex;
-}
-.chevron {
-  flex-shrink: 0;
-  color: var(--semantic-color-text-muted);
-  transition: transform 200ms ease;
-}
-.chevronOpen {
-  transform: rotate(180deg);
-}
-.content {
-  display: grid;
-  transition: grid-template-rows 200ms ease;
-}
-.contentOpen {
-  grid-template-rows: 1fr;
-}
-.contentClosed {
-  grid-template-rows: 0fr;
-}
-.contentInner {
-  overflow: hidden;
-}
-
-/* src/components/Alert/Alert.module.css */
-.alert {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  border-radius: var(--radius-md);
-  border: 1px solid transparent;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.icon {
-  flex-shrink: 0;
-  display: flex;
-}
-.error {
-  background-color: var(--semantic-color-feedback-error-light);
-  color: var(--color-red-600);
-  border-color: var(--color-red-400);
-}
-.success {
-  background-color: var(--semantic-color-brand-primary-light);
-  color: var(--color-sage-700);
-  border-color: var(--color-sage-300);
-}
-.warning {
-  background-color: var(--semantic-color-brand-secondary-light);
-  color: var(--color-warm-700);
-  border-color: var(--color-warm-300);
-}
-.info {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--color-steel-700);
-  border-color: var(--color-steel-300);
-}
-
-/* src/components/Avatar/Avatar.module.css */
-.avatar {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: 9999px;
-  background:
-    linear-gradient(
-      135deg,
-      var(--color-steel-800),
-      var(--color-steel-500));
-  color: var(--semantic-color-text-inverse);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-semibold);
-}
-.sm {
-  width: 32px;
-  height: 32px;
-  font-size: var(--font-size-sm);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  outline: 2px solid white;
-  outline-offset: -2px;
-}
-.md {
-  width: 44px;
-  height: 44px;
-  font-size: var(--font-size-base);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.lg {
-  width: 64px;
-  height: 64px;
-  font-size: var(--font-size-xl);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.initials {
-  user-select: none;
-}
-
-/* src/components/Badge/Badge.module.css */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  border: 1px solid var(--semantic-color-border-default);
-  background-color: var(--semantic-color-bg-subtle);
-  font-family: var(--font-family-sans);
-}
-.sm {
-  padding: 6px 8px;
-  gap: 6px;
-}
-.md {
-  padding: 6px 12px;
-  gap: 8px;
-}
-.icon {
-  display: flex;
-  color: var(--semantic-color-text-muted);
-}
-.count {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  color: var(--semantic-color-text-default);
-}
-.label {
-  font-size: var(--font-size-xs);
-  color: var(--semantic-color-text-muted);
-}
-
-/* src/components/Button/Button.module.css */
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease,
-    color 150ms ease,
-    transform 150ms ease;
-}
-.button:focus-visible {
-  outline: none;
-}
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.primary {
-  background-color: var(--color-steel-900);
-  color: var(--semantic-color-text-inverse);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-.primary:hover:not(:disabled) {
-  background-color: var(--color-steel-700);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.secondary {
-  background-color: var(--color-steel-200);
-  color: var(--color-steel-800);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-.secondary:hover:not(:disabled) {
-  background-color: var(--color-steel-300);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.outline {
-  background-color: transparent;
-  color: var(--color-steel-700);
-  border-color: var(--semantic-color-border-strong);
-}
-.outline:hover:not(:disabled) {
-  background-color: var(--semantic-color-bg-subtle);
-  border-color: var(--color-steel-400);
-}
-.outline_danger {
-  background-color: var(--color-red-50);
-  color: var(--color-red-600);
-  border-color: var(--color-red-400);
-}
-.outline_danger:hover:not(:disabled) {
-  background-color: var(--semantic-color-feedback-error-light);
-  border-color: var(--color-red-500);
-}
-.danger {
-  background-color: var(--color-red-600);
-  color: var(--semantic-color-text-inverse);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-.danger:hover:not(:disabled) {
-  background-color: var(--color-red-500);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.success {
-  background-color: var(--semantic-color-brand-primary);
-  color: var(--semantic-color-text-inverse);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-.success:hover:not(:disabled) {
-  background-color: var(--semantic-color-brand-primary-hover);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.success:active:not(:disabled) {
-  transform: scale(0.95);
-}
-.ghost {
-  background-color: transparent;
-  color: var(--semantic-color-text-default);
-}
-.ghost:hover:not(:disabled) {
-  background-color: var(--semantic-color-bg-muted);
-}
-.sm {
-  padding: var(--spacing-1) var(--spacing-3);
-  font-size: var(--font-size-sm);
-  line-height: var(--font-line-height-normal);
-}
-.md {
-  padding: var(--spacing-2) var(--spacing-5);
-  font-size: var(--font-size-base);
-  line-height: var(--font-line-height-normal);
-}
-.lg {
-  padding: var(--spacing-3) var(--spacing-5);
-  font-size: var(--font-size-lg);
-  line-height: var(--font-line-height-normal);
-}
-.xl {
-  padding: var(--spacing-3) var(--spacing-6);
-  font-size: var(--font-size-xl);
-  line-height: var(--font-line-height-normal);
-}
-
-/* src/components/Card/Card.module.css */
-.card {
-  position: relative;
-  overflow: hidden;
-  border-radius: 24px;
-  background-color: var(--semantic-color-bg-default);
-  transition:
-    transform 150ms ease,
-    box-shadow 150ms ease,
-    border-color 150ms ease,
-    background-color 150ms ease;
-}
-.default {
-  border: 1px solid var(--semantic-color-border-default);
-}
-.elevated {
-  border: 1px solid rgb(0 0 0 / 0.05);
-  background-color: rgb(255 255 255 / 0.9);
-  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-  backdrop-filter: blur(12px);
-}
-.glass {
-  background-color: rgb(255 255 255 / 0.8);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  backdrop-filter: blur(12px);
-}
-.hoverable {
-  cursor: pointer;
-  border: 1px solid rgb(0 0 0 / 0.05);
-  background-color: rgb(255 255 255 / 0.9);
-  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
-  backdrop-filter: blur(12px);
-}
-.hoverable:hover {
-  transform: translateY(-2px);
-  border-color: rgb(148 163 184 / 0.5);
-  background-color: rgb(255 255 255);
-  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
-}
-.hoverable:active {
-  transform: scale(0.98);
-}
-.gradientOverlay {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background:
-    linear-gradient(
-      to bottom right,
-      rgb(248 250 252 / 0.8),
-      rgb(241 245 249 / 0.8));
-  opacity: 0.03;
-  pointer-events: none;
-}
-.innerGlow {
-  position: absolute;
-  inset: 1px;
-  border-radius: 24px;
-  background:
-    linear-gradient(
-      to bottom right,
-      rgb(255 255 255 / 0.8),
-      rgb(255 255 255 / 0.2));
-  pointer-events: none;
-}
-.ringHighlight {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
-  transition: box-shadow 150ms ease;
-  pointer-events: none;
-}
-.hoverable:hover .ringHighlight {
-  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.4);
-}
-.glowBorder {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background:
-    linear-gradient(
-      to right,
-      transparent,
-      rgb(148 163 184 / 0.2),
-      transparent);
-  opacity: 0;
-  transition: opacity 150ms ease;
-  pointer-events: none;
-}
-.hoverable:hover .glowBorder {
-  opacity: 1;
-}
-.cardContent {
-  position: relative;
-}
-.padding-sm {
-  padding: var(--spacing-4);
-}
-.padding-md {
-  padding: var(--spacing-6);
-}
-.padding-lg {
-  padding: var(--spacing-10);
-}
-
-/* src/components/Checkbox/Checkbox.module.css */
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 8px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.wrapper:hover {
-  background-color: var(--semantic-color-bg-subtle);
-}
-.input {
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--semantic-color-border-strong);
-  accent-color: var(--color-steel-900);
-  cursor: pointer;
-}
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-default);
-  user-select: none;
-}
-
-/* src/components/Divider/Divider.module.css */
-.divider {
-  border: none;
-  border-top: 1px solid var(--semantic-color-border-default);
-}
-.labeled {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.line {
-  flex: 1;
-  border: none;
-  border-top: 1px solid var(--semantic-color-border-default);
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-muted);
-  white-space: nowrap;
-}
-.sm {
-  margin: var(--spacing-2) 0;
-}
-.md {
-  margin: var(--spacing-4) 0;
-}
-.lg {
-  margin: var(--spacing-8) 0;
-}
-
-/* src/components/DropdownMenu/DropdownMenu.module.css */
-.trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: none;
-  color: var(--semantic-color-text-muted);
-  cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
-}
-.trigger:hover {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--semantic-color-text-secondary);
-}
-.dotsIcon {
-  width: 20px;
-  height: 20px;
-}
-.menu {
-  position: fixed;
-  z-index: 9999;
-  width: 144px;
-  padding: 4px;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: var(--radius-md);
-  background-color: var(--semantic-color-bg-default);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-}
-.menuItem {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 6px 12px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: none;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--color-steel-700);
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.menuItem:hover {
-  background-color: var(--semantic-color-bg-muted);
-}
-.menuItemDanger {
-  color: var(--color-red-600);
-}
-.menuItemDanger:hover {
-  background-color: var(--semantic-color-feedback-error-light);
-}
-
-/* src/components/FilterChips/FilterChips.module.css */
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  border-radius: 9999px;
-  background-color: var(--semantic-color-brand-primary-light);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-sage-900);
-}
-.removeButton {
-  display: flex;
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  cursor: pointer;
-  transition: color 150ms ease;
-}
-.removeButton:hover {
-  color: var(--color-sage-700);
-}
-.clearAll {
-  padding: 0;
-  border: none;
-  background: none;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-brand-primary);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: color 150ms ease;
-}
-.clearAll:hover {
-  color: var(--semantic-color-brand-primary-hover);
-}
-
-/* src/components/Input/Input.module.css */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-default);
-}
-.container {
-  position: relative;
-}
-.input {
-  display: block;
-  width: 100%;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: var(--radius-md);
-  background-color: var(--semantic-color-bg-default);
-  padding: var(--spacing-3) var(--spacing-4);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  color: var(--semantic-color-text-default);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-.input::placeholder {
-  color: var(--semantic-color-text-muted);
-}
-.input:focus {
-  outline: none;
-  border-color: var(--semantic-color-border-strong);
-}
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background-color: var(--semantic-color-bg-subtle);
-}
-.input.hasToggle {
-  padding-right: var(--spacing-10);
-}
-.input.error {
-  border-color: var(--color-red-500);
-}
-.toggle {
-  position: absolute;
-  top: 50%;
-  right: var(--spacing-3);
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--semantic-color-text-muted);
-  cursor: pointer;
-  transition: color 150ms ease;
-}
-.toggle:hover {
-  color: var(--semantic-color-text-default);
-}
-.errorText {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  color: var(--color-red-600);
-  margin: 0;
-}
-
-/* src/components/Modal/Modal.module.css */
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.backdrop {
-  position: absolute;
-  inset: 0;
-  border: none;
-  padding: 0;
-  cursor: default;
-  background-color: rgb(0 0 0 / 0);
-  transition: background-color 150ms ease-out;
-}
-.backdropVisible {
-  background-color: rgb(0 0 0 / 0.4);
-}
-.dialog {
-  position: relative;
-  width: calc(100% - 2rem);
-  max-width: 32rem;
-  max-height: calc(100vh - 4rem);
-  margin: 0 1rem;
-  overflow: hidden;
-  border-radius: var(--radius-xl);
-  border: 1px solid var(--semantic-color-border-default);
-  background:
-    linear-gradient(
-      135deg,
-      rgb(255 255 255 / 0.95) 0%,
-      rgb(248 250 252 / 0.98) 100%);
-  backdrop-filter: blur(20px);
-  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 8px 16px -8px rgb(0 0 0 / 0.1);
-}
-.dialogEnter {
-  animation: modalEnter 250ms ease-out both;
-}
-.dialogExit {
-  animation: modalExit 200ms ease-in both;
-}
-@keyframes modalEnter {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-@keyframes modalExit {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(8px);
-  }
-}
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-4) var(--spacing-6);
-  border-bottom: 1px solid var(--color-steel-100);
-}
-.title {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--semantic-color-text-default);
-  margin: 0;
-  padding-right: var(--spacing-4);
-}
-.closeAbsolute {
-  position: absolute;
-  top: var(--spacing-4);
-  right: var(--spacing-4);
-  z-index: 10;
-}
-.closeButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-lg);
-  background: none;
-  color: var(--semantic-color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    color 150ms ease,
-    transform 150ms ease;
-}
-.closeButton:hover {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--semantic-color-text-default);
-  transform: scale(1.05);
-}
-.closeButton:active {
-  transform: scale(0.95);
-}
-.closeIcon {
-  transition: transform 150ms ease;
-}
-.closeButton:hover .closeIcon {
-  transform: rotate(90deg);
-}
-.content {
-  padding: var(--spacing-4) var(--spacing-6);
-  overflow-y: auto;
-  max-height: calc(100vh - 8rem);
-  color: var(--semantic-color-text-default);
-  font-family: var(--font-family-sans);
-  line-height: 1.6;
-  opacity: 0;
-}
-.contentVisible {
-  animation: contentReveal 300ms ease-out 50ms both;
-}
-@keyframes contentReveal {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-6);
-  border-top: 1px solid var(--color-steel-100);
-  background-color: rgb(249 250 251 / 0.5);
-}
-.cancelButton {
-  flex: 1;
-  padding: var(--spacing-2) var(--spacing-4);
-  border: 1px solid var(--semantic-color-border-strong);
-  border-radius: var(--radius-md);
-  background: none;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-steel-700);
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    transform 150ms ease,
-    box-shadow 150ms ease;
-}
-.cancelButton:hover {
-  background-color: var(--semantic-color-bg-subtle);
-  border-color: var(--color-steel-400);
-  transform: scale(1.05);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-.cancelButton:active {
-  transform: scale(1);
-}
-.confirmButton {
-  flex: 1;
-  padding: var(--spacing-2) var(--spacing-4);
-  border: none;
-  border-radius: var(--radius-md);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-inverse);
-  white-space: nowrap;
-  cursor: pointer;
-  transition: transform 150ms ease, box-shadow 150ms ease;
-}
-.confirmButton:hover:not(:disabled) {
-  transform: scale(1.05);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-}
-.confirmButton:active:not(:disabled) {
-  transform: scale(1);
-}
-.confirmButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.confirmButton:disabled:hover {
-  transform: none;
-}
-.confirmPrimary {
-  background-color: var(--color-steel-900);
-}
-.confirmDanger {
-  background-color: var(--color-red-600);
-}
-.confirmLoading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2);
-}
-.confirmSpinner {
-  width: 16px;
-  height: 16px;
-  animation: spin 0.7s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* src/components/Pill/Pill.module.css */
-.pill {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-weight-bold);
-  white-space: nowrap;
-}
-.sm {
-  padding: 2px 8px;
-  font-size: 11px;
-}
-.md {
-  padding: 6px 12px;
-  font-size: var(--font-size-xs);
-}
-.lg {
-  padding: 8px 16px;
-  font-size: var(--font-size-sm);
-}
-.dot {
-  border-radius: 9999px;
-  background-color: currentColor;
-  opacity: 0.8;
-}
-.dot-sm {
-  width: 4px;
-  height: 4px;
-  margin-right: 6px;
-}
-.dot-md {
-  width: 6px;
-  height: 6px;
-  margin-right: 8px;
-}
-.dot-lg {
-  width: 8px;
-  height: 8px;
-  margin-right: 10px;
-}
-.solid-red {
-  background-color: var(--color-red-450);
-  color: var(--semantic-color-text-inverse);
-}
-.solid-green {
-  background-color: var(--semantic-color-brand-primary);
-  color: var(--semantic-color-text-inverse);
-}
-.solid-blue {
-  background-color: var(--color-steel-600);
-  color: var(--semantic-color-text-inverse);
-}
-.solid-orange {
-  background-color: var(--color-warm-400);
-  color: var(--semantic-color-text-inverse);
-}
-.solid-purple {
-  background-color: var(--color-steel-500);
-  color: var(--semantic-color-text-inverse);
-}
-.solid-gray {
-  background-color: var(--color-steel-400);
-  color: var(--semantic-color-text-inverse);
-}
-.subtle-red {
-  background-color: var(--semantic-color-feedback-error-light);
-  color: var(--color-red-600);
-}
-.subtle-green {
-  background-color: var(--semantic-color-brand-primary-light);
-  color: var(--color-sage-700);
-}
-.subtle-blue {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--color-steel-700);
-}
-.subtle-orange {
-  background-color: var(--semantic-color-brand-secondary-light);
-  color: var(--color-warm-700);
-}
-.subtle-purple {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--color-steel-600);
-}
-.subtle-gray {
-  background-color: var(--semantic-color-bg-muted);
-  color: var(--semantic-color-text-secondary);
-}
-
-/* src/components/Radio/Radio.module.css */
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.wrapper:hover {
-  background-color: var(--semantic-color-bg-subtle);
-}
-.input {
-  width: 16px;
-  height: 16px;
-  border-radius: 9999px;
-  border: 1px solid var(--semantic-color-border-strong);
-  accent-color: var(--color-steel-900);
-  cursor: pointer;
-}
-.input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-default);
-  user-select: none;
-}
-
-/* src/components/SearchBar/SearchBar.module.css */
-.wrapper {
-  position: relative;
-}
-.searchIcon {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  transform: translateY(-50%);
-  color: var(--semantic-color-text-muted);
-}
-.icon-sm {
-  width: 16px;
-  height: 16px;
-}
-.icon-md {
-  width: 16px;
-  height: 16px;
-}
-.icon-lg {
-  width: 20px;
-  height: 20px;
-}
-.input {
-  width: 100%;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: 16px;
-  background-color: var(--semantic-color-bg-default);
-  color: var(--semantic-color-text-default);
-  font-family: var(--font-family-sans);
-  transition: border-color 150ms ease;
-}
-.input::placeholder {
-  color: var(--semantic-color-text-muted);
-}
-.input:focus {
-  outline: none;
-  border-color: var(--semantic-color-border-strong);
-}
-.sm {
-  padding: 8px 12px 8px 36px;
-  font-size: var(--font-size-sm);
-}
-.md {
-  padding: 10px 40px 10px 36px;
-  font-size: var(--font-size-sm);
-}
-.lg {
-  padding: 12px 40px 12px 40px;
-  font-size: var(--font-size-base);
-}
-.clearButton {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border: none;
-  border-radius: 9999px;
-  background: none;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.clearButton:hover {
-  background-color: var(--semantic-color-bg-muted);
-}
-.clearIcon {
-  color: var(--semantic-color-text-muted);
-}
-
-/* src/components/Select/Select.module.css */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-default);
-}
-.container {
-  position: relative;
-}
-.select {
-  width: 100%;
-  appearance: none;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: var(--radius-md);
-  background-color: var(--semantic-color-bg-default);
-  padding: var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-3);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  color: var(--semantic-color-text-default);
-  cursor: pointer;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
-}
-.select:focus {
-  outline: none;
-  border-color: var(--semantic-color-border-strong);
-}
-.select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.chevron {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  padding-right: var(--spacing-3);
-  color: var(--semantic-color-text-muted);
-  pointer-events: none;
-}
-
-/* src/components/Skeleton/Skeleton.module.css */
-.skeleton {
-  background:
-    linear-gradient(
-      90deg,
-      var(--semantic-color-bg-muted) 25%,
-      var(--semantic-color-bg-subtle) 50%,
-      var(--semantic-color-bg-muted) 75%);
-  background-size: 200% 100%;
-  animation: wave 1.5s ease-in-out infinite;
-}
-.group {
-  display: flex;
-  flex-direction: column;
-}
-@keyframes wave {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* src/components/Spinner/Spinner.module.css */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-3);
-}
-.svg {
-  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-muted);
-  margin: 0;
-}
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* src/components/StatusDot/StatusDot.module.css */
-.dot {
-  flex-shrink: 0;
-  border-radius: 9999px;
-}
-.sm {
-  width: 10px;
-  height: 10px;
-}
-.md {
-  width: 12px;
-  height: 12px;
-}
-.green {
-  background-color: var(--semantic-color-brand-primary);
-}
-.yellow {
-  background-color: var(--color-warm-400);
-}
-.red {
-  background-color: var(--color-red-500);
-}
-.gray {
-  background-color: var(--color-steel-400);
-}
-.pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* src/components/Tabs/Tabs.module.css */
-.wrapper {
-  position: relative;
-}
-.tabsContainer {
-  position: relative;
-}
-.hiddenMobile {
-  display: none;
-}
-@media (min-width: 768px) {
-  .hiddenMobile {
-    display: block;
-  }
-}
-.scrollable {
-  position: relative;
-  display: flex;
-  gap: 32px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.scrollable::-webkit-scrollbar {
-  display: none;
-}
-.tab {
-  position: relative;
-  padding: 0 0 12px;
-  border: none;
-  background: none;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: color 150ms ease;
-  white-space: nowrap;
-}
-.tabActive {
-  color: var(--semantic-color-text-default);
-  font-weight: var(--font-weight-semibold);
-}
-.tabInactive {
-  color: var(--semantic-color-text-muted);
-}
-.tabInactive:hover {
-  color: var(--color-steel-700);
-}
-.tabLabel {
-  white-space: nowrap;
-}
-.indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  border-radius: 9999px;
-  background-color: var(--color-steel-900);
-  transition: left 300ms ease-out, width 300ms ease-out;
-}
-.fadeLeft {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  width: 24px;
-  background:
-    linear-gradient(
-      to right,
-      white,
-      transparent);
-  pointer-events: none;
-}
-.fadeRight {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  width: 24px;
-  background:
-    linear-gradient(
-      to left,
-      white,
-      transparent);
-  pointer-events: none;
-}
-.mobileDropdown {
-  position: relative;
-}
-@media (min-width: 768px) {
-  .mobileDropdown {
-    display: none;
-  }
-}
-.mobileToggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: none;
-  border-radius: var(--radius-lg);
-  background-color: var(--semantic-color-bg-default);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--semantic-color-text-default);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.mobileToggleOpen {
-  background-color: var(--semantic-color-bg-subtle);
-}
-.mobileChevron {
-  flex-shrink: 0;
-  color: var(--semantic-color-text-muted);
-  transition: transform 150ms ease;
-}
-.mobileChevronOpen {
-  transform: rotate(180deg);
-}
-.mobileMenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 50;
-  margin-top: 4px;
-  min-width: 192px;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: var(--radius-lg);
-  background-color: var(--semantic-color-bg-default);
-  padding: 4px 0;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-}
-.mobileMenuItem {
-  display: block;
-  width: 100%;
-  padding: 10px 16px;
-  border: none;
-  background: none;
-  text-align: left;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  color: var(--semantic-color-text-secondary);
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-.mobileMenuItem:hover {
-  background-color: var(--semantic-color-bg-subtle);
-}
-.mobileMenuItemActive {
-  background-color: var(--semantic-color-bg-subtle);
-  font-weight: var(--font-weight-semibold);
-  color: var(--semantic-color-text-default);
-}
-
-/* src/components/Textarea/Textarea.module.css */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--semantic-color-text-default);
-}
-.textarea {
-  display: block;
-  width: 100%;
-  resize: vertical;
-  border: 1px solid var(--semantic-color-border-default);
-  border-radius: var(--radius-md);
-  background-color: var(--semantic-color-bg-default);
-  padding: var(--spacing-2) var(--spacing-3);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-default);
-  transition: border-color 150ms ease;
-}
-.textarea::placeholder {
-  color: var(--semantic-color-text-muted);
-}
-.textarea:focus {
-  outline: none;
-  border-color: var(--semantic-color-border-strong);
-}
-.textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background-color: var(--semantic-color-bg-subtle);
-}
-.textarea.error {
-  border-color: var(--color-red-500);
-}
-.errorText {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  color: var(--color-red-600);
-  margin: 0;
-}
-
-/* src/components/Toast/Toast.module.css */
-.container {
-  position: fixed;
-  top: 24px;
-  right: 24px;
-  z-index: 99999;
-  pointer-events: none;
-}
-.toast {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  border-radius: var(--radius-lg);
-  background-color: var(--semantic-color-bg-default);
-  border: 1px solid var(--semantic-color-border-default);
-  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-default);
-  pointer-events: auto;
-  max-width: 400px;
-}
-.enter {
-  animation: slideIn 200ms ease-out both;
-}
-.exit {
-  animation: slideOut 200ms ease-in both;
-}
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes slideOut {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-.icon {
-  display: flex;
-  flex-shrink: 0;
-}
-.message {
-  flex: 1;
-  line-height: 1.4;
-}
-.close {
-  display: flex;
-  flex-shrink: 0;
-  padding: 2px;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--semantic-color-text-muted);
-  cursor: pointer;
-  transition: color 150ms ease;
-}
-.close:hover {
-  color: var(--semantic-color-text-default);
-}
-.success {
-  border-left: 3px solid var(--semantic-color-brand-primary);
-}
-.success .icon {
-  color: var(--semantic-color-brand-primary);
-}
-.error {
-  border-left: 3px solid var(--color-red-500);
-}
-.error .icon {
-  color: var(--color-red-500);
-}
-.warning {
-  border-left: 3px solid var(--color-warm-400);
-}
-.warning .icon {
-  color: var(--color-warm-400);
-}
-.info {
-  border-left: 3px solid var(--color-steel-400);
-}
-.info .icon {
-  color: var(--color-steel-400);
-}
-
-/* src/components/Toggle/Toggle.module.css */
-.wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-}
-.input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-}
-.track {
-  position: relative;
-  border-radius: 9999px;
-  background-color: var(--color-steel-300);
-  transition: background-color 150ms ease;
-}
-.sm {
-  width: 36px;
-  height: 20px;
-}
-.md {
-  width: 44px;
-  height: 24px;
-}
-.thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 9999px;
-  background-color: var(--semantic-color-bg-default);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-  transition: transform 150ms ease, width 150ms ease;
-}
-.sm .thumb {
-  width: 16px;
-  height: 16px;
-}
-.md .thumb {
-  width: 20px;
-  height: 20px;
-}
-.input:checked + .track {
-  background-color: var(--semantic-color-brand-primary);
-}
-.input:checked + .sm .thumb {
-  transform: translateX(16px);
-}
-.input:checked + .md .thumb {
-  transform: translateX(20px);
-}
-.input:disabled + .track {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.label {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  color: var(--semantic-color-text-default);
-  user-select: none;
-}
-/*# sourceMappingURL=index.css.map */