@ivds/core 0.1.1

package/lib/components/all.css

@@ -0,0 +1,3005 @@
+@charset "UTF-8";
+/* All components bundle*/
+/* This file imports all component styles for the IVDS Core package*/
+/* Form components*/
+@keyframes ivds-button-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+.ivds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--borderWidth-1, 1px) solid transparent;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+.ivds-button:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-button:disabled, .ivds-button[aria-disabled=true] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ivds-button {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-6, 1.5rem);
+  font-size: var(--fontSize-base, 1rem);
+  min-height: 44px;
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-button .ivds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-button__icon svg {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+}
+.ivds-button__text {
+  flex: 1;
+}
+.ivds-button--loading {
+  position: relative;
+  color: transparent !important;
+}
+.ivds-button--loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: ivds-button-spin 0.8s linear infinite;
+}
+.ivds-button--full-width {
+  width: 100%;
+  justify-content: center;
+}
+.ivds-button--icon-only {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+}
+.ivds-button--icon-only .ivds-button__icon {
+  margin: 0;
+}
+.ivds-button--icon-only.ivds-button--small {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.ivds-button--icon-only.ivds-button--small .ivds-button__icon {
+  margin: 0;
+}
+.ivds-button--icon-only.ivds-button--large {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+}
+.ivds-button--icon-only.ivds-button--large .ivds-button__icon {
+  margin: 0;
+}
+.ivds-button--primary {
+  background-color: var(--color-brand-primary-500, #f97316);
+  color: var(--color-semantic-neutral-50, #fafafa);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-button--primary:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-brand-primary-600, #ea580c);
+  border-color: var(--color-brand-primary-600, #ea580c);
+}
+.ivds-button--primary:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--secondary {
+  background-color: transparent;
+  color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-brand-primary-50, #fff7ed);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-button--secondary:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--tertiary {
+  background-color: transparent;
+  color: var(--color-brand-primary-500, #f97316);
+  border-color: transparent;
+}
+.ivds-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-button--tertiary:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--success {
+  background-color: var(--color-semantic-success-500, #10b981);
+  color: var(--color-semantic-neutral-50, #fcfcfd);
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-button--success:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-semantic-success-600, #059669);
+  border-color: var(--color-semantic-success-600, #059669);
+}
+.ivds-button--success:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--warning {
+  background-color: var(--color-semantic-warning-500, #f59e0b);
+  color: var(--color-semantic-neutral-50, #fcfcfd);
+  border-color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-button--warning:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-semantic-warning-600, #d97706);
+  border-color: var(--color-semantic-warning-600, #d97706);
+}
+.ivds-button--warning:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--danger {
+  background-color: var(--color-semantic-error-500, #ef4444);
+  color: var(--color-semantic-neutral-50, #fcfcfd);
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-button--danger:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-semantic-error-600, #dc2626);
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-button--danger:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--info {
+  background-color: var(--color-semantic-info-500, #3b82f6);
+  color: var(--color-semantic-neutral-50, #fcfcfd);
+  border-color: var(--color-semantic-info-500, #3b82f6);
+}
+.ivds-button--info:hover:not(:disabled, [aria-disabled=true]) {
+  background-color: var(--color-semantic-info-600, #2563eb);
+  border-color: var(--color-semantic-info-600, #2563eb);
+}
+.ivds-button--info:active:not(:disabled, [aria-disabled=true]) {
+  transform: translateY(1px);
+}
+.ivds-button--small {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  min-height: 32px;
+}
+.ivds-button--large {
+  padding: var(--spacing-4, 1rem) var(--spacing-8, 2rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+  min-height: 56px;
+}
+.ivds-button-group {
+  display: inline-flex;
+}
+.ivds-button-group--vertical {
+  flex-direction: column;
+}
+.ivds-text-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-text-input {
+  display: block;
+  width: 100%;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  line-height: var(--lineHeight-normal, 1.5);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.ivds-text-input::-moz-placeholder {
+  color: var(--color-semantic-neutral-500, #64748b);
+}
+.ivds-text-input::placeholder {
+  color: var(--color-semantic-neutral-500, #64748b);
+}
+.ivds-text-input:focus {
+  outline: none;
+  border-color: var(--color-brand-primary-500, #f97316);
+  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+}
+.ivds-text-input:disabled {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  color: var(--color-semantic-neutral-500, #64748b);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ivds-text-input {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-base, 1rem);
+  min-height: 44px;
+}
+.ivds-text-input__label {
+  display: block;
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--color-semantic-neutral-700, #374151);
+  margin-bottom: var(--spacing-1, 0.25rem);
+}
+.ivds-text-input__label--required::after {
+  content: " *";
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-text-input__helper {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-top: var(--spacing-1, 0.25rem);
+}
+.ivds-text-input__error {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+  margin-top: var(--spacing-1, 0.25rem);
+}
+.ivds-text-input__error::before {
+  content: "⚠ ";
+  margin-right: var(--spacing-1, 0.25rem);
+}
+.ivds-text-input--small {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  min-height: 32px;
+}
+.ivds-text-input--large {
+  padding: var(--spacing-4, 1rem) var(--spacing-4, 1rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+  min-height: 56px;
+}
+.ivds-text-input--error {
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-text-input--error:focus {
+  border-color: var(--color-semantic-error-500, #ef4444);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+.ivds-text-input--success {
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-text-input--success:focus {
+  border-color: var(--color-semantic-success-500, #10b981);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+}
+.ivds-text-input--warning {
+  border-color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-text-input--warning:focus {
+  border-color: var(--color-semantic-warning-500, #f59e0b);
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+}
+.ivds-text-input-wrapper--icon-left {
+  position: relative;
+}
+.ivds-text-input-wrapper--icon-left .ivds-text-input {
+  padding-left: 2.5rem;
+}
+.ivds-text-input-wrapper--icon-left .ivds-text-input__icon {
+  position: absolute;
+  top: 50%;
+  left: var(--spacing-3, 0.75rem);
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  color: var(--color-semantic-neutral-500, #64748b);
+  pointer-events: none;
+}
+.ivds-text-input-wrapper--icon-left .ivds-text-input__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-text-input-wrapper--icon-right {
+  position: relative;
+}
+.ivds-text-input-wrapper--icon-right .ivds-text-input {
+  padding-right: 2.5rem;
+}
+.ivds-text-input-wrapper--icon-right .ivds-text-input__icon {
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-3, 0.75rem);
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  color: var(--color-semantic-neutral-500, #64748b);
+  pointer-events: none;
+}
+.ivds-text-input-wrapper--icon-right .ivds-text-input__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-text-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-text-input__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-text-input-group {
+  display: flex;
+  align-items: stretch;
+}
+.ivds-text-input-group .ivds-text-input {
+  flex: 1;
+  border-radius: 0;
+}
+.ivds-text-input-group .ivds-text-input:first-child {
+  border-top-left-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+}
+.ivds-text-input-group .ivds-text-input:last-child {
+  border-top-right-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+}
+.ivds-text-input-group .ivds-text-input:not(:first-child) {
+  border-left: 0;
+}
+.ivds-text-input-group .ivds-text-input__addon {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-3, 0.75rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  font-size: var(--fontSize-sm, 0.875rem);
+  white-space: nowrap;
+}
+.ivds-text-input-group .ivds-text-input__addon:first-child {
+  border-top-left-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+  border-right: 0;
+}
+.ivds-text-input-group .ivds-text-input__addon:last-child {
+  border-top-right-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+  border-left: 0;
+}
+.ivds-text-input--filled {
+  background-color: var(--color-semantic-neutral-100, #f5f5f5);
+  border-color: transparent;
+}
+.ivds-text-input--filled:focus {
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-text-input--filled:disabled {
+  background-color: var(--color-semantic-neutral-200, #e5e5e5);
+}
+.ivds-text-input--borderless {
+  border-color: transparent;
+  background-color: transparent;
+}
+.ivds-text-input--borderless:focus {
+  border-color: var(--color-brand-primary-500, #f97316);
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+}
+.ivds-text-input--textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+.ivds-text-input--textarea--no-resize {
+  resize: none;
+}
+.ivds-text-input--textarea--auto-resize {
+  resize: none;
+  overflow: hidden;
+}
+.ivds-text-input--full-width {
+  width: 100%;
+}
+.ivds-text-input[readonly] {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  cursor: default;
+}
+.ivds-text-input[readonly]:focus {
+  box-shadow: none;
+  border-color: var(--color-semantic-neutral-300, #d4d4d4);
+}
+.ivds-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-checkbox:hover .ivds-checkbox__box {
+  border-color: var(--color-brand-primary-400, #fb923c);
+}
+.ivds-checkbox__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+}
+.ivds-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-checkbox__input:checked + .ivds-checkbox__box::after {
+  border-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: rotate(-45deg) scale(1);
+}
+.ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-checkbox__input:indeterminate + .ivds-checkbox__box {
+  background-color: var(--color-brand-primary-500, #f97316);
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+.ivds-checkbox__input:indeterminate + .ivds-checkbox__box::after {
+  content: "";
+  width: 8px;
+  height: 2px;
+  border: none;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: none;
+  border-radius: 1px;
+}
+.ivds-checkbox__label {
+  margin-left: var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-base, 1rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-checkbox__description {
+  margin-top: var(--spacing-1, 0.25rem);
+  margin-left: calc(18px + var(--spacing-3, 0.75rem));
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ivds-checkbox--disabled .ivds-checkbox__box {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}
+.ivds-checkbox--disabled .ivds-checkbox__label {
+  color: var(--color-semantic-neutral-500, #64748b);
+  cursor: not-allowed;
+}
+.ivds-checkbox--error .ivds-checkbox__box {
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox--error:hover .ivds-checkbox__box {
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-checkbox--error .ivds-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-semantic-error-500, #ef4444);
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox--error .ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox--success .ivds-checkbox__box {
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-checkbox--success:hover .ivds-checkbox__box {
+  border-color: var(--color-semantic-success-600, #059669);
+}
+.ivds-checkbox--success .ivds-checkbox__input:checked + .ivds-checkbox__box {
+  background-color: var(--color-semantic-success-500, #10b981);
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-checkbox--success .ivds-checkbox__input:focus + .ivds-checkbox__box {
+  outline-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-checkbox--small .ivds-checkbox__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox--small .ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox--small .ivds-checkbox__box::after {
+  width: 7px;
+  height: 4px;
+}
+.ivds-checkbox--small .ivds-checkbox__label {
+  margin-left: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-checkbox--large .ivds-checkbox__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: var(--borderRadius-sm, 0.125rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox--large .ivds-checkbox__box::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 6px;
+  border: 2px solid transparent;
+  border-top: none;
+  border-right: none;
+  transform: rotate(-45deg) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+.ivds-checkbox--large .ivds-checkbox__box::after {
+  width: 12px;
+  height: 8px;
+}
+.ivds-checkbox--large .ivds-checkbox__label {
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group--horizontal--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-checkbox-group__label {
+  display: block;
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group__label--required::after {
+  content: " *";
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-checkbox-group__description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-checkbox-group__error {
+  margin-top: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-checkbox-group__error::before {
+  content: "⚠ ";
+  margin-right: var(--spacing-1, 0.25rem);
+}
+.ivds-checkbox--card {
+  padding: var(--spacing-4, 1rem);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-checkbox--card:hover {
+  border-color: var(--color-brand-primary-300, #fdba74);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-checkbox__input:checked ~ .ivds-checkbox--card {
+  border-color: var(--color-brand-primary-500, #f97316);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-checkbox__input:focus ~ .ivds-checkbox--card {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-radio-button:hover .ivds-radio-button__circle {
+  border-color: var(--color-brand-primary-400, #38bdf8);
+}
+.ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  overflow: hidden;
+}
+.ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-brand-primary-500, #0ea5e9);
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio-button__input:checked + .ivds-radio-button__circle::after {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transform: scale(1);
+}
+.ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-radio-button__label {
+  margin-left: var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-base, 1rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-radio-button__description {
+  margin-top: var(--spacing-1, 0.25rem);
+  margin-left: calc(18px + var(--spacing-3, 0.75rem));
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-radio-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.ivds-radio-button--disabled .ivds-radio-button__circle {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}
+.ivds-radio-button--disabled .ivds-radio-button__label {
+  color: var(--color-semantic-neutral-500, #64748b);
+  cursor: not-allowed;
+}
+.ivds-radio-button--error .ivds-radio-button__circle {
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button--error:hover .ivds-radio-button__circle {
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-radio-button--error .ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-semantic-error-500, #ef4444);
+  border-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button--error .ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button--success .ivds-radio-button__circle {
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-radio-button--success:hover .ivds-radio-button__circle {
+  border-color: var(--color-semantic-success-600, #059669);
+}
+.ivds-radio-button--success .ivds-radio-button__input:checked + .ivds-radio-button__circle {
+  background-color: var(--color-semantic-success-500, #10b981);
+  border-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-radio-button--success .ivds-radio-button__input:focus + .ivds-radio-button__circle {
+  outline-color: var(--color-semantic-success-500, #10b981);
+}
+.ivds-radio-button--small .ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--small .ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button--small .ivds-radio-button__label {
+  margin-left: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-radio-button--large .ivds-radio-button__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--large .ivds-radio-button__circle::after {
+  content: "";
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background-color: transparent;
+  transform: scale(0);
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-radio-button--large .ivds-radio-button__label {
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-lg, 1.125rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-radio-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group--horizontal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group--horizontal--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-6, 1.5rem);
+}
+.ivds-radio-button-group__label {
+  display: block;
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group__label--required::after {
+  content: " *";
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-radio-button-group__description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+.ivds-radio-button-group__error {
+  margin-top: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-radio-button-group__error::before {
+  content: "⚠ ";
+  margin-right: var(--spacing-1, 0.25rem);
+}
+.ivds-radio-button--card {
+  padding: var(--spacing-4, 1rem);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-radio-button--card:hover {
+  border-color: var(--color-brand-primary-300, #7dd3fc);
+  background-color: var(--color-brand-primary-50, #eff6ff);
+}
+.ivds-radio-button__input:checked ~ .ivds-radio-button--card {
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+  background-color: var(--color-brand-primary-50, #eff6ff);
+}
+.ivds-radio-button__input:focus ~ .ivds-radio-button--card {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+.ivds-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+}
+.ivds-radio__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: 50%;
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  transition: all 0.2s ease-in-out;
+}
+.ivds-radio__label {
+  margin-left: var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-base, 1rem);
+  color: var(--color-semantic-neutral-900, #0f172a);
+}
+.ivds-radio__input:checked + .ivds-radio__button {
+  border-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio__input:checked + .ivds-radio__button::after {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--color-brand-primary-500, #0ea5e9);
+}
+.ivds-radio__input:focus + .ivds-radio__button {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-radio__input:disabled + .ivds-radio__button {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-color: var(--color-semantic-neutral-200, #e2e8f0);
+  cursor: not-allowed;
+}
+/* Content and layout components*/
+.ivds-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border-radius: var(--borderRadius-xl, 0.75rem);
+  overflow: hidden;
+  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
+  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+.ivds-card__header {
+  padding: var(--spacing-6, 1.5rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card__body {
+  padding: var(--spacing-6, 1.5rem);
+  flex: 1;
+}
+.ivds-card__footer {
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card__media {
+  position: relative;
+  overflow: hidden;
+}
+.ivds-card__media img,
+.ivds-card__media video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.ivds-card__title {
+  margin: 0 0 var(--spacing-2, 0.5rem) 0;
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-card__subtitle {
+  margin: 0 0 var(--spacing-3, 0.75rem) 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-card__content {
+  margin: 0;
+  color: var(--color-semantic-neutral-700, #334155);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-card__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-4, 1rem);
+}
+.ivds-card__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.ivds-card__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--spacing-6, 1.5rem);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-card__overlay .ivds-card__title,
+.ivds-card__overlay .ivds-card__subtitle,
+.ivds-card__overlay .ivds-card__content {
+  color: inherit;
+}
+.ivds-card--flat {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  box-shadow: none;
+}
+.ivds-card--bordered {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  box-shadow: none;
+}
+.ivds-card--elevated {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
+}
+.ivds-card--floating {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+}
+.ivds-card--interactive {
+  cursor: pointer;
+}
+.ivds-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+}
+.ivds-card--interactive:active {
+  transform: translateY(0);
+}
+.ivds-card--interactive:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-card--compact .ivds-card__header {
+  padding: var(--spacing-4, 1rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--compact .ivds-card__body {
+  padding: var(--spacing-4, 1rem);
+  flex: 1;
+}
+.ivds-card--compact .ivds-card__footer {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--spacious .ivds-card__header {
+  padding: var(--spacing-8, 2rem);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--spacious .ivds-card__body {
+  padding: var(--spacing-8, 2rem);
+  flex: 1;
+}
+.ivds-card--spacious .ivds-card__footer {
+  padding: var(--spacing-6, 1.5rem) var(--spacing-8, 2rem);
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-card--horizontal {
+  flex-direction: row;
+}
+.ivds-card--horizontal .ivds-card__media {
+  flex-shrink: 0;
+  width: 200px;
+}
+.ivds-card--horizontal .ivds-card__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.ivds-card--overlay {
+  position: relative;
+}
+.ivds-card--overlay .ivds-card__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: var(--spacing-6, 1.5rem);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-card--overlay .ivds-card__overlay .ivds-card__title,
+.ivds-card--overlay .ivds-card__overlay .ivds-card__subtitle,
+.ivds-card--overlay .ivds-card__overlay .ivds-card__content {
+  color: inherit;
+}
+.ivds-card--success {
+  background-color: var(--color-semantic-success-50, #ecfdf5);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-success-200, #bbf7d0);
+}
+.ivds-card--success .ivds-card__title {
+  color: var(--color-semantic-success-800, #166534);
+}
+.ivds-card--success .ivds-card__content {
+  color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-card--warning {
+  background-color: var(--color-semantic-warning-50, #fffbeb);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-warning-200, #fed7aa);
+}
+.ivds-card--warning .ivds-card__title {
+  color: var(--color-semantic-warning-800, #92400e);
+}
+.ivds-card--warning .ivds-card__content {
+  color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-card--error {
+  background-color: var(--color-semantic-error-50, #fef2f2);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-error-200, #fecaca);
+}
+.ivds-card--error .ivds-card__title {
+  color: var(--color-semantic-error-800, #991b1b);
+}
+.ivds-card--error .ivds-card__content {
+  color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-card--info {
+  background-color: var(--color-semantic-info-50, #eff6ff);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-info-200, #bfdbfe);
+}
+.ivds-card--info .ivds-card__title {
+  color: var(--color-semantic-info-800, #1e40af);
+}
+.ivds-card--info .ivds-card__content {
+  color: var(--color-semantic-info-700, #1d4ed8);
+}
+@keyframes ivds-notification-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes ivds-notification-slide-out {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+@keyframes ivds-notification-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes ivds-notification-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.ivds-notification {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--spacing-4, 1rem);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  border-left: var(--borderWidth-4, 4px) solid;
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  position: relative;
+  transition: all 0.15s ease-in-out;
+}
+.ivds-notification__icon {
+  flex-shrink: 0;
+  margin-right: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-1, 0.25rem);
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-notification__content {
+  flex: 1;
+  min-width: 0;
+}
+.ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-base, 1rem);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification__actions {
+  display: flex;
+  gap: var(--spacing-2, 0.5rem);
+  margin-top: var(--spacing-3, 0.75rem);
+  align-items: center;
+}
+.ivds-notification__dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.ivds-notification__dismiss svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentcolor;
+}
+.ivds-notification--success {
+  background-color: var(--color-semantic-success-50, #f0fdf4);
+  border-left-color: var(--color-semantic-success-500, #22c55e);
+}
+.ivds-notification--success .ivds-notification__title {
+  color: var(--color-semantic-success-800, #166534);
+}
+.ivds-notification--success .ivds-notification__message {
+  color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-notification--success .ivds-notification__icon {
+  color: var(--color-semantic-success-500, #22c55e);
+}
+.ivds-notification--warning {
+  background-color: var(--color-semantic-warning-50, #fffbeb);
+  border-left-color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-notification--warning .ivds-notification__title {
+  color: var(--color-semantic-warning-800, #92400e);
+}
+.ivds-notification--warning .ivds-notification__message {
+  color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-notification--warning .ivds-notification__icon {
+  color: var(--color-semantic-warning-500, #f59e0b);
+}
+.ivds-notification--error {
+  background-color: var(--color-semantic-error-50, #fef2f2);
+  border-left-color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-notification--error .ivds-notification__title {
+  color: var(--color-semantic-error-800, #991b1b);
+}
+.ivds-notification--error .ivds-notification__message {
+  color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-notification--error .ivds-notification__icon {
+  color: var(--color-semantic-error-500, #ef4444);
+}
+.ivds-notification--info {
+  background-color: var(--color-semantic-info-50, #eff6ff);
+  border-left-color: var(--color-semantic-info-500, #3b82f6);
+}
+.ivds-notification--info .ivds-notification__title {
+  color: var(--color-semantic-info-800, #1e40af);
+}
+.ivds-notification--info .ivds-notification__message {
+  color: var(--color-semantic-info-700, #1d4ed8);
+}
+.ivds-notification--info .ivds-notification__icon {
+  color: var(--color-semantic-info-500, #3b82f6);
+}
+.ivds-notification--dismissible {
+  padding-right: var(--spacing-12, 3rem);
+}
+.ivds-notification--dismissible .ivds-notification__dismiss {
+  position: absolute;
+  top: var(--spacing-3, 0.75rem);
+  right: var(--spacing-3, 0.75rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-1, 0.25rem);
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+  opacity: 1;
+}
+.ivds-notification--dismissible .ivds-notification__dismiss:active {
+  transform: scale(0.95);
+}
+.ivds-notification--compact {
+  padding: var(--spacing-3, 0.75rem);
+}
+.ivds-notification--compact .ivds-notification__icon {
+  margin-right: var(--spacing-2, 0.5rem);
+  width: 1rem;
+  height: 1rem;
+}
+.ivds-notification--compact .ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-notification--compact .ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-xs, 0.75rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification--compact.ivds-notification--dismissible {
+  padding-right: var(--spacing-10, 2.5rem);
+}
+.ivds-notification--compact.ivds-notification--dismissible .ivds-notification__dismiss {
+  top: var(--spacing-2, 0.5rem);
+  right: var(--spacing-2, 0.5rem);
+}
+.ivds-notification--spacious {
+  padding: var(--spacing-6, 1.5rem);
+}
+.ivds-notification--spacious .ivds-notification__icon {
+  margin-right: var(--spacing-4, 1rem);
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.ivds-notification--spacious .ivds-notification__title {
+  margin: 0 0 var(--spacing-1, 0.25rem) 0;
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  line-height: var(--lineHeight-tight, 1.25);
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+.ivds-notification--spacious .ivds-notification__message {
+  margin: 0;
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-notification--spacious.ivds-notification--dismissible {
+  padding-right: var(--spacing-14, 3.5rem);
+}
+.ivds-notification--spacious.ivds-notification--dismissible .ivds-notification__dismiss {
+  top: var(--spacing-4, 1rem);
+  right: var(--spacing-4, 1rem);
+}
+.ivds-notification--with-actions .ivds-notification__content {
+  padding-bottom: var(--spacing-1, 0.25rem);
+}
+.ivds-notification--slide-in {
+  animation: ivds-notification-slide-in 0.3s ease-out;
+}
+.ivds-notification--slide-out {
+  animation: ivds-notification-slide-out 0.2s ease-in forwards;
+}
+.ivds-notification--fade-in {
+  animation: ivds-notification-fade-in 0.3s ease-out;
+}
+.ivds-notification--fade-out {
+  animation: ivds-notification-fade-out 0.2s ease-in forwards;
+}
+.ivds-tag {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-tag:focus-within {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-tag {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  min-height: 24px;
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-tag .ivds-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag .ivds-tag__icon svg {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+}
+.ivds-tag {
+  background-color: var(--color-semantic-neutral-100, #f1f5f9);
+  color: var(--color-semantic-neutral-700, #334155);
+  border-color: transparent;
+}
+.ivds-tag:hover {
+  background-color: var(--color-semantic-neutral-200, #e2e8f0);
+}
+.ivds-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag__icon svg {
+  width: 1em;
+  height: 1em;
+  fill: currentcolor;
+}
+.ivds-tag__text {
+  flex: 1;
+}
+.ivds-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ivds-tag__remove svg {
+  width: 0.875em;
+  height: 0.875em;
+  fill: currentcolor;
+}
+.ivds-tag--primary {
+  background-color: var(--color-brand-primary-100, #ffedd5);
+  color: var(--color-brand-primary-700, #c2410c);
+  border-color: transparent;
+}
+.ivds-tag--primary:hover {
+  background-color: var(--color-brand-primary-200, #fed7aa);
+}
+.ivds-tag--success {
+  background-color: var(--color-semantic-success-100, #dcfce7);
+  color: var(--color-semantic-success-700, #15803d);
+  border-color: transparent;
+}
+.ivds-tag--success:hover {
+  background-color: var(--color-semantic-success-200, #bbf7d0);
+}
+.ivds-tag--warning {
+  background-color: var(--color-semantic-warning-100, #fef3c7);
+  color: var(--color-semantic-warning-700, #b45309);
+  border-color: transparent;
+}
+.ivds-tag--warning:hover {
+  background-color: var(--color-semantic-warning-200, #fed7aa);
+}
+.ivds-tag--error {
+  background-color: var(--color-semantic-error-100, #fee2e2);
+  color: var(--color-semantic-error-700, #b91c1c);
+  border-color: transparent;
+}
+.ivds-tag--error:hover {
+  background-color: var(--color-semantic-error-200, #fecaca);
+}
+.ivds-tag--info {
+  background-color: var(--color-semantic-info-100, #dbeafe);
+  color: var(--color-semantic-info-700, #1d4ed8);
+  border-color: transparent;
+}
+.ivds-tag--info:hover {
+  background-color: var(--color-semantic-info-200, #bfdbfe);
+}
+.ivds-tag--outlined.ivds-tag {
+  background-color: transparent;
+  border-color: var(--color-semantic-neutral-300, #cbd5e1);
+  color: var(--color-semantic-neutral-700, #334155);
+}
+.ivds-tag--outlined.ivds-tag:hover {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-tag--outlined.ivds-tag--primary {
+  background-color: transparent;
+  border-color: var(--color-brand-primary-300, #fdba74);
+  color: var(--color-brand-primary-700, #c2410c);
+}
+.ivds-tag--outlined.ivds-tag--primary:hover {
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-tag--outlined.ivds-tag--success {
+  background-color: transparent;
+  border-color: var(--color-semantic-success-300, #86efac);
+  color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-tag--outlined.ivds-tag--success:hover {
+  background-color: var(--color-semantic-success-50, #f0fdf4);
+}
+.ivds-tag--outlined.ivds-tag--warning {
+  background-color: transparent;
+  border-color: var(--color-semantic-warning-300, #fcd34d);
+  color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-tag--outlined.ivds-tag--warning:hover {
+  background-color: var(--color-semantic-warning-50, #fffbeb);
+}
+.ivds-tag--outlined.ivds-tag--error {
+  background-color: transparent;
+  border-color: var(--color-semantic-error-300, #fca5a5);
+  color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-tag--outlined.ivds-tag--error:hover {
+  background-color: var(--color-semantic-error-50, #fef2f2);
+}
+.ivds-tag--outlined.ivds-tag--info {
+  background-color: transparent;
+  border-color: var(--color-semantic-info-300, #93c5fd);
+  color: var(--color-semantic-info-700, #1d4ed8);
+}
+.ivds-tag--outlined.ivds-tag--info:hover {
+  background-color: var(--color-semantic-info-50, #eff6ff);
+}
+.ivds-tag--solid.ivds-tag {
+  background-color: var(--color-semantic-neutral-600, #475569);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-neutral-600, #475569);
+}
+.ivds-tag--solid.ivds-tag:hover {
+  background-color: var(--color-semantic-neutral-700, #334155);
+  border-color: var(--color-semantic-neutral-700, #334155);
+}
+.ivds-tag--solid.ivds-tag--primary {
+  background-color: var(--color-brand-primary-600, #ea580c);
+  color: var(--color-semantic-neutral-50, #fafafa);
+  border-color: var(--color-brand-primary-600, #ea580c);
+}
+.ivds-tag--solid.ivds-tag--primary:hover {
+  background-color: var(--color-brand-primary-700, #c2410c);
+  border-color: var(--color-brand-primary-700, #c2410c);
+}
+.ivds-tag--solid.ivds-tag--success {
+  background-color: var(--color-semantic-success-600, #16a34a);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-success-600, #16a34a);
+}
+.ivds-tag--solid.ivds-tag--success:hover {
+  background-color: var(--color-semantic-success-700, #15803d);
+  border-color: var(--color-semantic-success-700, #15803d);
+}
+.ivds-tag--solid.ivds-tag--warning {
+  background-color: var(--color-semantic-warning-600, #d97706);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-warning-600, #d97706);
+}
+.ivds-tag--solid.ivds-tag--warning:hover {
+  background-color: var(--color-semantic-warning-700, #b45309);
+  border-color: var(--color-semantic-warning-700, #b45309);
+}
+.ivds-tag--solid.ivds-tag--error {
+  background-color: var(--color-semantic-error-600, #dc2626);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-error-600, #dc2626);
+}
+.ivds-tag--solid.ivds-tag--error:hover {
+  background-color: var(--color-semantic-error-700, #b91c1c);
+  border-color: var(--color-semantic-error-700, #b91c1c);
+}
+.ivds-tag--solid.ivds-tag--info {
+  background-color: var(--color-semantic-info-600, #2563eb);
+  color: var(--color-semantic-neutral-50, #f8fafc);
+  border-color: var(--color-semantic-info-600, #2563eb);
+}
+.ivds-tag--solid.ivds-tag--info:hover {
+  background-color: var(--color-semantic-info-700, #1d4ed8);
+  border-color: var(--color-semantic-info-700, #1d4ed8);
+}
+.ivds-tag--small {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-xs, 0.75rem);
+  min-height: 20px;
+}
+.ivds-tag--small .ivds-tag__icon svg {
+  width: 0.875em;
+  height: 0.875em;
+}
+.ivds-tag--small.ivds-tag--removable .ivds-tag__remove {
+  margin-left: var(--spacing-1, 0.25rem);
+  padding: 2px;
+}
+.ivds-tag--small.ivds-tag--removable .ivds-tag__remove svg {
+  width: 0.75em;
+  height: 0.75em;
+}
+.ivds-tag--large {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  font-size: var(--fontSize-base, 1rem);
+  min-height: 32px;
+}
+.ivds-tag--large .ivds-tag__icon svg {
+  width: 1.125em;
+  height: 1.125em;
+}
+.ivds-tag--large.ivds-tag--removable .ivds-tag__remove {
+  margin-left: var(--spacing-3, 0.75rem);
+  padding: var(--spacing-1, 0.25rem);
+}
+.ivds-tag--large.ivds-tag--removable .ivds-tag__remove svg {
+  width: 1em;
+  height: 1em;
+}
+.ivds-tag--removable {
+  padding-right: var(--spacing-1, 0.25rem);
+}
+.ivds-tag--removable .ivds-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-1, 0.25rem);
+  background: transparent;
+  border: none;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+.ivds-tag--removable .ivds-tag__remove:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.ivds-tag--removable .ivds-tag__remove:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 1px;
+  opacity: 1;
+}
+.ivds-tag--removable .ivds-tag__remove:active {
+  transform: scale(0.95);
+}
+.ivds-tag--removable .ivds-tag__remove svg {
+  width: 0.875em;
+  height: 0.875em;
+  fill: currentcolor;
+}
+.ivds-tag--link {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ivds-tag--link:hover {
+  text-decoration: none;
+}
+.ivds-tag--link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+  outline-offset: 2px;
+}
+.ivds-tag--link:active {
+  transform: translateY(1px);
+}
+.ivds-tag--interactive {
+  cursor: pointer;
+}
+.ivds-tag--interactive:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+.ivds-tag--interactive:active {
+  transform: translateY(0);
+}
+.ivds-tag--new {
+  position: relative;
+}
+.ivds-tag--new::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-semantic-success-500, #22c55e);
+  border-radius: 50%;
+  border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-tag--updated {
+  position: relative;
+}
+.ivds-tag--updated::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-semantic-info-500, #3b82f6);
+  border-radius: 50%;
+  border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-tag--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ivds-tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 0.5rem);
+  align-items: center;
+}
+.ivds-tag-group--compact {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1, 0.25rem);
+  align-items: center;
+}
+.ivds-tag-group--spacious {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-3, 0.75rem);
+  align-items: center;
+}
+/* Navigation components*/
+.ivds-breadcrumb {
+  --separator-content: "/";
+  --separator-spacing: var(--spacing-2, 0.5rem);
+  --link-color: var(--color-brand-primary-500, #f97316);
+  --link-color-hover: var(--color-brand-primary-600, #ea580c);
+  --current-color: var(--color-semantic-neutral-700, #404040);
+  --separator-color: var(--color-semantic-neutral-500, #737373);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-normal, 1.5);
+}
+.ivds-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+.ivds-breadcrumb__item {
+  display: flex;
+  align-items: center;
+}
+.ivds-breadcrumb__item:not(:last-child)::after {
+  content: var(--separator-content);
+  margin: 0 var(--separator-spacing);
+  color: var(--separator-color);
+  font-weight: var(--fontWeight-normal, 400);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+.ivds-breadcrumb__link {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: all 0.15s ease-in-out;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+}
+.ivds-breadcrumb__link:hover {
+  color: var(--link-color-hover);
+  text-decoration: underline;
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-breadcrumb__link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  text-decoration: none;
+}
+.ivds-breadcrumb__link:active {
+  background-color: var(--color-brand-primary-100, #ffedd5);
+}
+.ivds-breadcrumb__current {
+  color: var(--current-color);
+  font-weight: var(--fontWeight-medium, 500);
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  margin: calc(-1 * var(--spacing-1, 0.25rem)) calc(-1 * var(--spacing-2, 0.5rem));
+}
+.ivds-breadcrumb--small {
+  --separator-spacing: var(--spacing-1, 0.25rem);
+  font-size: var(--fontSize-xs, 0.75rem);
+}
+.ivds-breadcrumb--large {
+  --separator-spacing: var(--spacing-3, 0.75rem);
+  font-size: var(--fontSize-base, 1rem);
+}
+.ivds-breadcrumb--separator-arrow {
+  --separator-content: "→";
+}
+.ivds-breadcrumb--separator-chevron {
+  --separator-content: "›";
+}
+.ivds-breadcrumb--separator-bullet {
+  --separator-content: "•";
+}
+.ivds-breadcrumb--theme-dark {
+  --link-color: var(--color-brand-primary-400, #fb923c);
+  --link-color-hover: var(--color-brand-primary-300, #fdba74);
+  --current-color: var(--color-semantic-neutral-200, #e5e5e5);
+  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
+}
+.ivds-breadcrumb--theme-muted {
+  --link-color: var(--color-semantic-neutral-600, #525252);
+  --link-color-hover: var(--color-semantic-neutral-700, #404040);
+  --current-color: var(--color-semantic-neutral-800, #262626);
+  --separator-color: var(--color-semantic-neutral-400, #a3a3a3);
+}
+.ivds-breadcrumb--with-icons .ivds-breadcrumb__link,
+.ivds-breadcrumb--with-icons .ivds-breadcrumb__current {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1, 0.25rem);
+}
+.ivds-breadcrumb--with-icons .ivds-breadcrumb__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+@media (max-width: 640px) {
+  .ivds-breadcrumb--responsive .ivds-breadcrumb__list {
+    flex-wrap: wrap;
+  }
+  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:nth-last-child(2)::after {
+    content: "...";
+    margin: 0 var(--separator-spacing);
+    color: var(--separator-color);
+  }
+  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child, :nth-last-child(2))::after {
+    display: none;
+  }
+  .ivds-breadcrumb--responsive .ivds-breadcrumb__item:not(:last-child, :nth-last-child(2)) {
+    display: none;
+  }
+}
+.ivds-breadcrumb--truncate .ivds-breadcrumb__link,
+.ivds-breadcrumb--truncate .ivds-breadcrumb__current {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ivds-navigation {
+  --nav-link-color: var(--color-semantic-neutral-700, #404040);
+  --nav-link-color-hover: var(--color-brand-primary-600, #ea580c);
+  --nav-link-color-active: var(--color-brand-primary-600, #ea580c);
+  --nav-link-bg-hover: var(--color-brand-primary-50, #fff7ed);
+  --nav-link-bg-active: var(--color-brand-primary-100, #ffedd5);
+  --nav-spacing-x: var(--spacing-4, 1rem);
+  --nav-spacing-y: var(--spacing-3, 0.75rem);
+  display: flex;
+  align-items: center;
+}
+.ivds-navigation__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+.ivds-navigation__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.ivds-navigation__link {
+  display: flex;
+  align-items: center;
+  padding: var(--nav-spacing-y) var(--nav-spacing-x);
+  color: var(--nav-link-color);
+  text-decoration: none;
+  font-weight: var(--fontWeight-medium, 500);
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-tight, 1.25);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+}
+.ivds-navigation__link:hover {
+  color: var(--nav-link-color-hover);
+  background-color: var(--nav-link-bg-hover);
+}
+.ivds-navigation__link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  text-decoration: none;
+}
+.ivds-navigation__link:active {
+  background-color: var(--nav-link-bg-active);
+}
+.ivds-navigation__link--active {
+  color: var(--nav-link-color-active);
+  background-color: var(--nav-link-bg-active);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+.ivds-navigation__link--active::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 2px;
+  background-color: var(--color-brand-primary-500, #f97316);
+  border-radius: var(--borderRadius-full, 9999px);
+}
+.ivds-navigation--horizontal .ivds-navigation__list {
+  flex-direction: row;
+  align-items: center;
+}
+.ivds-navigation--horizontal .ivds-navigation__link--active::after {
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80%;
+  height: 2px;
+}
+.ivds-navigation--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ivds-navigation--vertical .ivds-navigation__list {
+  flex-direction: column;
+  align-items: stretch;
+}
+.ivds-navigation--vertical .ivds-navigation__item {
+  width: 100%;
+}
+.ivds-navigation--vertical .ivds-navigation__link {
+  width: 100%;
+  justify-content: flex-start;
+}
+.ivds-navigation--vertical .ivds-navigation__link--active::after {
+  top: 50%;
+  left: -2px;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 80%;
+}
+.ivds-navigation--compact {
+  --nav-spacing-x: var(--spacing-3, 0.75rem);
+  --nav-spacing-y: var(--spacing-2, 0.5rem);
+}
+.ivds-navigation--compact .ivds-navigation__link {
+  font-size: var(--fontSize-sm, 0.875rem);
+}
+.ivds-navigation--spacious {
+  --nav-spacing-x: var(--spacing-6, 1.5rem);
+  --nav-spacing-y: var(--spacing-4, 1rem);
+}
+.ivds-navigation--spacious .ivds-navigation__link {
+  font-size: var(--fontSize-lg, 1.125rem);
+}
+.ivds-navigation--theme-dark {
+  --nav-link-color: var(--color-semantic-neutral-200, #e5e5e5);
+  --nav-link-color-hover: var(--color-brand-primary-300, #fdba74);
+  --nav-link-color-active: var(--color-brand-primary-400, #fb923c);
+  --nav-link-bg-hover: rgba(249, 115, 22, 0.1);
+  --nav-link-bg-active: rgba(249, 115, 22, 0.2);
+}
+.ivds-navigation--theme-minimal {
+  --nav-link-bg-hover: transparent;
+  --nav-link-bg-active: transparent;
+}
+.ivds-navigation--theme-minimal .ivds-navigation__link:hover {
+  text-decoration: underline;
+}
+.ivds-navigation--theme-minimal .ivds-navigation__link--active {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+.ivds-navigation--theme-minimal .ivds-navigation__link--active::after {
+  display: none;
+}
+.ivds-navigation--with-icons .ivds-navigation__link {
+  gap: var(--spacing-2, 0.5rem);
+}
+.ivds-navigation--with-icons .ivds-navigation__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.ivds-navigation--with-icons .ivds-navigation__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e5e5e5);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.15s ease-in-out;
+  z-index: 50;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__list {
+  flex-direction: column;
+  padding: var(--spacing-2, 0.5rem);
+}
+.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link {
+  width: 100%;
+  justify-content: flex-start;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__dropdown .ivds-navigation__link--active::after {
+  display: none;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown {
+  position: relative;
+}
+.ivds-navigation--with-dropdown .ivds-navigation__item--has-dropdown:hover .ivds-navigation__dropdown {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.ivds-navigation--breadcrumb .ivds-navigation__list {
+  flex-wrap: wrap;
+}
+.ivds-navigation--breadcrumb .ivds-navigation__item:not(:last-child)::after {
+  content: "/";
+  margin: 0 var(--spacing-2, 0.5rem);
+  color: var(--color-semantic-neutral-500, #737373);
+  font-weight: var(--fontWeight-normal, 400);
+}
+.ivds-navigation--breadcrumb .ivds-navigation__link {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+}
+.ivds-navigation--breadcrumb .ivds-navigation__link--active {
+  background-color: transparent;
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: default;
+}
+.ivds-navigation--breadcrumb .ivds-navigation__link--active::after {
+  display: none;
+}
+.ivds-pagination {
+  --pagination-item-size: 2.5rem;
+  --pagination-item-size-small: 2rem;
+  --pagination-item-size-large: 3rem;
+  --pagination-gap: var(--spacing-1, 0.25rem);
+  --pagination-color: var(--color-semantic-neutral-700, #404040);
+  --pagination-color-hover: var(--color-brand-primary-600, #ea580c);
+  --pagination-color-active: var(--color-semantic-neutral-50, #fafafa);
+  --pagination-bg-hover: var(--color-brand-primary-50, #fff7ed);
+  --pagination-bg-active: var(--color-brand-primary-500, #f97316);
+  --pagination-border-color: var(--color-semantic-neutral-300, #d4d4d4);
+  --pagination-border-color-hover: var(--color-brand-primary-500, #f97316);
+  --pagination-border-color-active: var(--color-brand-primary-500, #f97316);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ivds-pagination__list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: var(--pagination-gap);
+}
+.ivds-pagination__item {
+  display: flex;
+}
+.ivds-pagination__link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  padding: var(--spacing-2, 0.5rem);
+  color: var(--pagination-color);
+  text-decoration: none;
+  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-weight: var(--fontWeight-medium, 500);
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-tight, 1.25);
+  transition: all 0.15s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-pagination__link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  text-decoration: none;
+}
+.ivds-pagination__link:hover:not(.ivds-pagination__link--disabled) {
+  background-color: var(--pagination-bg-hover);
+  border-color: var(--pagination-border-color-hover);
+  color: var(--pagination-color-hover);
+}
+.ivds-pagination__link:active:not(.ivds-pagination__link--disabled) {
+  transform: translateY(1px);
+}
+.ivds-pagination__link--active {
+  background-color: var(--pagination-bg-active);
+  border-color: var(--pagination-border-color-active);
+  color: var(--pagination-color-active);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+.ivds-pagination__link--active:hover {
+  background-color: var(--color-brand-primary-600, #ea580c);
+  border-color: var(--color-brand-primary-600, #ea580c);
+  color: var(--pagination-color-active);
+}
+.ivds-pagination__link--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ivds-pagination__link--disabled:hover {
+  background-color: transparent;
+  border-color: var(--pagination-border-color);
+  color: var(--pagination-color);
+}
+.ivds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pagination-item-size);
+  height: var(--pagination-item-size);
+  color: var(--color-semantic-neutral-500, #737373);
+  font-weight: var(--fontWeight-medium, 500);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ivds-pagination--small {
+  --pagination-item-size: var(--pagination-item-size-small);
+}
+.ivds-pagination--small .ivds-pagination__link {
+  font-size: var(--fontSize-xs, 0.75rem);
+  padding: var(--spacing-1, 0.25rem);
+}
+.ivds-pagination--large {
+  --pagination-item-size: var(--pagination-item-size-large);
+}
+.ivds-pagination--large .ivds-pagination__link {
+  font-size: var(--fontSize-base, 1rem);
+  padding: var(--spacing-3, 0.75rem);
+}
+.ivds-pagination--compact {
+  --pagination-gap: 0;
+}
+.ivds-pagination--compact .ivds-pagination__link {
+  border-radius: 0;
+  border-right-width: 0;
+}
+.ivds-pagination--compact .ivds-pagination__link:first-child {
+  border-top-left-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+}
+.ivds-pagination--compact .ivds-pagination__link:last-child {
+  border-top-right-radius: var(--borderRadius-md, 0.375rem);
+  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+  border-right-width: var(--borderWidth-1, 1px);
+}
+.ivds-pagination--rounded .ivds-pagination__link {
+  border-radius: var(--borderRadius-full, 9999px);
+}
+.ivds-pagination--theme-minimal {
+  --pagination-border-color: transparent;
+  --pagination-border-color-hover: transparent;
+  --pagination-border-color-active: transparent;
+  --pagination-bg-hover: var(--color-semantic-neutral-100, #f5f5f5);
+}
+.ivds-pagination--theme-minimal .ivds-pagination__link:hover:not(.ivds-pagination__link--disabled) {
+  text-decoration: underline;
+}
+.ivds-pagination--theme-minimal .ivds-pagination__link--active {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+}
+.ivds-pagination--theme-dark {
+  --pagination-color: var(--color-semantic-neutral-200, #e5e5e5);
+  --pagination-color-hover: var(--color-brand-primary-300, #fdba74);
+  --pagination-color-active: var(--color-semantic-neutral-900, #171717);
+  --pagination-bg-hover: rgba(249, 115, 22, 0.1);
+  --pagination-bg-active: var(--color-brand-primary-400, #fb923c);
+  --pagination-border-color: var(--color-semantic-neutral-600, #525252);
+  --pagination-border-color-hover: var(--color-brand-primary-400, #fb923c);
+  --pagination-border-color-active: var(--color-brand-primary-400, #fb923c);
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev, .ivds-pagination--with-icons .ivds-pagination__link--next {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon, .ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.ivds-pagination--with-icons .ivds-pagination__link--prev .ivds-pagination__icon svg, .ivds-pagination--with-icons .ivds-pagination__link--next .ivds-pagination__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+}
+.ivds-pagination--with-info .ivds-pagination__info {
+  margin: 0 var(--spacing-4, 1rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #525252);
+  white-space: nowrap;
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  margin-left: var(--spacing-4, 1rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #525252);
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper input {
+  width: 3rem;
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  border: var(--borderWidth-1, 1px) solid var(--pagination-border-color);
+  border-radius: var(--borderRadius-sm, 0.25rem);
+  font-size: inherit;
+  text-align: center;
+}
+.ivds-pagination--with-jumper .ivds-pagination__jumper input:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+@media (max-width: 640px) {
+  .ivds-pagination--responsive .ivds-pagination__item:not(:first-child, :last-child, .ivds-pagination__item--active) {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__item--ellipsis {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__info {
+    display: none;
+  }
+  .ivds-pagination--responsive .ivds-pagination__jumper {
+    display: none;
+  }
+}
+/* Structural components*/
+.ivds-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  min-height: 64px;
+  position: relative;
+  z-index: 10;
+  justify-content: space-between;
+  gap: var(--spacing-6, 1.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-header {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+.ivds-header__brand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.ivds-header__brand-logo {
+  height: 2rem;
+  width: auto;
+  margin-right: var(--spacing-3, 0.75rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__brand-logo {
+    height: calc(2rem * 0.875);
+    margin-right: var(--spacing-2, 0.5rem);
+  }
+}
+.ivds-header__brand-text {
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-bold, 700);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  text-decoration: none;
+  line-height: var(--lineHeight-tight, 1.25);
+}
+.ivds-header__brand-text:hover {
+  color: var(--color-brand-primary-600, #ea580c);
+}
+.ivds-header__brand-text:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__brand-text {
+    font-size: var(--fontSize-base, 1rem);
+  }
+}
+.ivds-header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6, 1.5rem);
+  flex: 1;
+  justify-content: center;
+}
+@media (max-width: 768px) {
+  .ivds-header__nav {
+    display: none;
+  }
+  .ivds-header__nav--mobile-visible {
+    display: flex;
+    flex-basis: 100%;
+    order: 3;
+    justify-content: flex-start;
+    margin-top: var(--spacing-3, 0.75rem);
+    padding-top: var(--spacing-3, 0.75rem);
+    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    gap: var(--spacing-4, 1rem);
+  }
+}
+.ivds-header__nav a {
+  color: var(--color-semantic-neutral-700, #374151);
+  text-decoration: none;
+  font-weight: var(--fontWeight-medium, 500);
+  font-size: var(--fontSize-sm, 0.875rem);
+  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  transition: all 0.15s ease-in-out;
+}
+.ivds-header__nav a:hover {
+  color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-primary-50, #fff7ed);
+}
+.ivds-header__nav a:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-header__nav a[aria-current=page] {
+  color: var(--color-brand-primary-600, #ea580c);
+  background-color: var(--color-brand-primary-100, #fed7aa);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+.ivds-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 0.75rem);
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .ivds-header__actions {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+.ivds-header__mobile-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-2, 0.5rem);
+  cursor: pointer;
+  color: var(--color-semantic-neutral-700, #374151);
+  border-radius: var(--borderRadius-md, 0.375rem);
+}
+.ivds-header__mobile-toggle:hover {
+  background-color: var(--color-semantic-neutral-100, #f3f4f6);
+}
+.ivds-header__mobile-toggle:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+@media (max-width: 768px) {
+  .ivds-header__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.ivds-header__mobile-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.ivds-header__search {
+  flex: 1;
+  max-width: 400px;
+  margin: 0 var(--spacing-4, 1rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__search {
+    display: none;
+  }
+  .ivds-header__search--mobile-visible {
+    display: block;
+    flex-basis: 100%;
+    order: 2;
+    margin: var(--spacing-3, 0.75rem) 0 0 0;
+    max-width: none;
+  }
+}
+.ivds-header__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--spacing-6, 1.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-header__container {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+.ivds-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  backdrop-filter: blur(8px);
+  background-color: rgba(252, 252, 253, 0.95);
+}
+@supports not (backdrop-filter: blur(8px)) {
+  .ivds-header--sticky {
+    background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  }
+}
+.ivds-header--dark {
+  background-color: var(--color-semantic-neutral-900, #0f172a);
+  border-bottom-color: var(--color-semantic-neutral-700, #374151);
+}
+.ivds-header--dark .ivds-header__brand-text {
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-header--dark .ivds-header__nav a {
+  color: var(--color-semantic-neutral-50, #f8fafc);
+}
+.ivds-header--dark .ivds-header__nav a:hover {
+  background-color: rgba(var(--color-semantic-neutral-50, #f8fafc), 0.1);
+}
+.ivds-header--transparent {
+  background-color: transparent;
+  border-bottom: none;
+  backdrop-filter: none;
+}
+.ivds-header--transparent.ivds-header--sticky {
+  background-color: rgba(252, 252, 253, 0.95);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  backdrop-filter: blur(8px);
+}
+.ivds-header--compact {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  min-height: 48px;
+}
+.ivds-header--compact .ivds-header__brand-logo {
+  height: 1.5rem;
+  margin-right: var(--spacing-2, 0.5rem);
+}
+.ivds-header--compact .ivds-header__brand-text {
+  font-size: var(--fontSize-base, 1rem);
+}
+.ivds-header--compact .ivds-header__nav {
+  gap: var(--spacing-4, 1rem);
+}
+.ivds-header--compact .ivds-header__nav a {
+  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+  font-size: var(--fontSize-xs, 0.75rem);
+}
+.ivds-header--compact .ivds-header__actions {
+  gap: var(--spacing-2, 0.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-header--mobile-nav-open .ivds-header__nav {
+    display: flex;
+    flex-basis: 100%;
+    order: 3;
+    justify-content: flex-start;
+    margin-top: var(--spacing-3, 0.75rem);
+    padding-top: var(--spacing-3, 0.75rem);
+    border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    gap: var(--spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+}
+@media (max-width: 768px) {
+  .ivds-header--mobile-nav-open .ivds-header__search--mobile-visible {
+    display: block;
+    flex-basis: 100%;
+    order: 2;
+    margin: var(--spacing-3, 0.75rem) 0 0 0;
+    max-width: none;
+  }
+}
+.ivds-footer {
+  padding: var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-900, #0f172a);
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+@media (max-width: 768px) {
+  .ivds-footer .ivds-footer__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+  }
+}
+@media (max-width: 480px) {
+  .ivds-footer .ivds-footer__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+  .ivds-footer .ivds-footer__section {
+    text-align: center;
+  }
+  .ivds-footer .ivds-footer__section:first-child {
+    text-align: left;
+  }
+}
+.ivds-footer__content {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+.ivds-footer__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: var(--spacing-8, 2rem);
+  gap: var(--spacing-8, 2rem);
+  margin-bottom: var(--spacing-8, 2rem);
+}
+@media (max-width: 1024px) {
+  .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+}
+@media (max-width: 768px) {
+  .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+@media (max-width: 480px) {
+  .ivds-footer__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+.ivds-footer__section-title {
+  margin: 0 0 var(--spacing-4, 1rem) 0;
+  font-size: var(--fontSize-lg, 1.125rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  line-height: var(--lineHeight-tight, 1.25);
+}
+@media (max-width: 768px) {
+  .ivds-footer__section-title {
+    font-size: var(--fontSize-base, 1rem);
+    margin-bottom: var(--spacing-3, 0.75rem);
+  }
+}
+.ivds-footer__section-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ivds-footer__section-item {
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+.ivds-footer__section-item:last-child {
+  margin-bottom: 0;
+}
+.ivds-footer__section-link {
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  text-decoration: none;
+  font-size: var(--fontSize-sm, 0.875rem);
+  transition: color 0.2s ease-in-out;
+  display: inline-flex;
+  align-items: center;
+}
+.ivds-footer__section-link:hover {
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+}
+.ivds-footer__section-link:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+}
+.ivds-footer__section-link svg {
+  margin-right: var(--spacing-2, 0.5rem);
+  flex-shrink: 0;
+}
+.ivds-footer__bottom {
+  padding-top: var(--spacing-8, 2rem);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-700, #374151);
+  text-align: center;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+}
+@media (max-width: 768px) {
+  .ivds-footer__bottom {
+    padding-top: var(--spacing-6, 1.5rem);
+    text-align: left;
+  }
+}
+.ivds-footer__bottom a {
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  text-decoration: none;
+}
+.ivds-footer__bottom a:hover {
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  text-decoration: underline;
+}
+.ivds-footer__bottom a:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+}
+.ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, 1rem);
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
+    justify-content: flex-start;
+    gap: var(--spacing-3, 0.75rem);
+  }
+}
+.ivds-footer__brand-logo {
+  height: 2rem;
+  width: auto;
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+@media (max-width: 768px) {
+  .ivds-footer__brand-logo {
+    height: calc(2rem * 0.875);
+  }
+}
+.ivds-footer__brand-name {
+  font-size: var(--fontSize-xl, 1.25rem);
+  font-weight: var(--fontWeight-bold, 700);
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+@media (max-width: 768px) {
+  .ivds-footer__brand-name {
+    font-size: var(--fontSize-lg, 1.125rem);
+  }
+}
+.ivds-footer__brand-description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+  line-height: var(--lineHeight-relaxed, 1.625);
+  margin-bottom: var(--spacing-4, 1rem);
+}
+.ivds-footer__social {
+  display: flex;
+  gap: var(--spacing-3, 0.75rem);
+  margin-top: var(--spacing-4, 1rem);
+}
+@media (max-width: 768px) {
+  .ivds-footer__social {
+    justify-content: center;
+    margin-top: var(--spacing-3, 0.75rem);
+  }
+}
+.ivds-footer__social a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  background-color: var(--color-semantic-neutral-800, #1e293b);
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  transition: all 0.2s ease-in-out;
+}
+.ivds-footer__social a:hover {
+  background-color: var(--color-brand-primary-500, #f97316);
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  transform: translateY(-2px);
+}
+.ivds-footer__social a:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+.ivds-footer__social a svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+}
+.ivds-footer__newsletter-form {
+  display: flex;
+  gap: var(--spacing-2, 0.5rem);
+  margin-top: var(--spacing-3, 0.75rem);
+}
+@media (max-width: 480px) {
+  .ivds-footer__newsletter-form {
+    flex-direction: column;
+  }
+}
+.ivds-footer__newsletter-input {
+  flex: 1;
+  padding: var(--spacing-3, 0.75rem);
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-600, #475569);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  background-color: var(--color-semantic-neutral-800, #1e293b);
+  color: var(--color-semantic-neutral-100, #f1f5f9);
+  font-size: var(--fontSize-sm, 0.875rem);
+}
+.ivds-footer__newsletter-input::-moz-placeholder {
+  color: var(--color-semantic-neutral-500, #64748b);
+}
+.ivds-footer__newsletter-input::placeholder {
+  color: var(--color-semantic-neutral-500, #64748b);
+}
+.ivds-footer__newsletter-input:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-color: var(--color-brand-primary-500, #f97316);
+}
+@media (max-width: 480px) {
+  .ivds-footer__newsletter-input {
+    width: 100%;
+  }
+}
+.ivds-footer__newsletter-button {
+  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+  background-color: var(--color-brand-primary-500, #f97316);
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  border: none;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  white-space: nowrap;
+}
+.ivds-footer__newsletter-button:hover {
+  background-color: var(--color-brand-primary-600, #ea580c);
+}
+.ivds-footer__newsletter-button:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+}
+@media (max-width: 480px) {
+  .ivds-footer__newsletter-button {
+    width: 100%;
+  }
+}
+.ivds-footer__newsletter-description {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+  margin-bottom: var(--spacing-3, 0.75rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-footer address {
+  font-style: normal;
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-footer address p {
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+.ivds-footer address p:last-child {
+  margin-bottom: 0;
+}
+.ivds-footer address strong {
+  color: var(--color-semantic-neutral-200, #e2e8f0);
+  font-weight: var(--fontWeight-medium, 500);
+}
+.ivds-footer--light {
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  color: var(--color-semantic-neutral-600, #475569);
+}
+.ivds-footer--light .ivds-footer__section-title {
+  color: var(--color-semantic-neutral-900, #0f172a);
+}
+.ivds-footer--light .ivds-footer__section-link {
+  color: var(--color-semantic-neutral-600, #475569);
+}
+.ivds-footer--light .ivds-footer__section-link:hover {
+  color: var(--color-semantic-neutral-900, #0f172a);
+}
+.ivds-footer--light .ivds-footer__bottom {
+  border-top-color: var(--color-semantic-neutral-200, #e2e8f0);
+  color: rgba(var(--color-semantic-neutral-600, #475569), 0.8);
+}
+.ivds-footer--minimal {
+  padding: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+  text-align: center;
+}
+.ivds-footer--minimal .ivds-footer__bottom {
+  padding-top: 0;
+  border-top: none;
+}
+@media (max-width: 768px) {
+  .ivds-footer--minimal {
+    padding: var(--spacing-4, 1rem);
+  }
+}
+.ivds-footer--two-columns .ivds-footer__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: var(--spacing-8, 2rem);
+  gap: var(--spacing-8, 2rem);
+  margin-bottom: var(--spacing-8, 2rem);
+}
+@media (max-width: 1024px) {
+  .ivds-footer--two-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+}
+@media (max-width: 768px) {
+  .ivds-footer--two-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+@media (max-width: 480px) {
+  .ivds-footer--two-columns .ivds-footer__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+.ivds-footer--three-columns .ivds-footer__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: var(--spacing-8, 2rem);
+  gap: var(--spacing-8, 2rem);
+  margin-bottom: var(--spacing-8, 2rem);
+}
+@media (max-width: 1024px) {
+  .ivds-footer--three-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+}
+@media (max-width: 768px) {
+  .ivds-footer--three-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+@media (max-width: 480px) {
+  .ivds-footer--three-columns .ivds-footer__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+.ivds-footer--five-columns .ivds-footer__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: var(--spacing-6, 1.5rem);
+  gap: var(--spacing-6, 1.5rem);
+  margin-bottom: var(--spacing-8, 2rem);
+}
+@media (max-width: 1024px) {
+  .ivds-footer--five-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+}
+@media (max-width: 768px) {
+  .ivds-footer--five-columns .ivds-footer__grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+@media (max-width: 480px) {
+  .ivds-footer--five-columns .ivds-footer__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+.ivds-footer--bottom-inline .ivds-footer__bottom {
+  padding-top: var(--spacing-8, 2rem);
+  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-700, #374151);
+  text-align: center;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+}
+@media (max-width: 768px) {
+  .ivds-footer--bottom-inline .ivds-footer__bottom {
+    padding-top: var(--spacing-6, 1.5rem);
+    text-align: left;
+  }
+}
+.ivds-footer--bottom-inline .ivds-footer__bottom a {
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  text-decoration: none;
+}
+.ivds-footer--bottom-inline .ivds-footer__bottom a:hover {
+  color: var(--color-semantic-neutral-25, #fcfcfd);
+  text-decoration: underline;
+}
+.ivds-footer--bottom-inline .ivds-footer__bottom a:focus {
+  outline: 2px solid var(--color-brand-primary-500, #f97316);
+  outline-offset: 2px;
+  border-radius: var(--borderRadius-sm, 0.25rem);
+}
+.ivds-footer--bottom-inline .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, 1rem);
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .ivds-footer--bottom-inline .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
+    justify-content: flex-start;
+    gap: var(--spacing-3, 0.75rem);
+  }
+}