@deriv-web-design/ui 0.1.20 → 0.1.23

package/dist/index.css

@@ -2002,6 +2002,11 @@
   flex-shrink: 0;
   object-fit: contain;
 }
+.fc-platformLink-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 .fc-platformLink-label {
   font-family: var(--typography-body-sm-font-family);
   font-size: var(--typography-body-sm-font-size);
@@ -11305,4 +11310,1277 @@
     grid-template-columns: 2fr 1fr;
   }
 }
+
+/* templates/OptionsTypes/OptionsTypes.css */
+:root {
+  --ot-section-bg: var(--color-slate-75);
+  --ot-card-bg: var(--color-slate-75);
+  --ot-text: var(--text-primary);
+  --ot-muted-text: var(--text-secondary);
+  --ot-control-bg: var(--color-slate-50);
+  --ot-control-color: var(--color-slate-1200);
+  --ot-platform-bg: var(--color-coral-700);
+  --ot-platform-color: var(--color-slate-50);
+  --ot-focus: var(--border-focus);
+  --ot-card-radius: var(--radius-2xl);
+  --ot-card-aspect: 1312 / 854;
+  --ot-scrim: rgb(0 0 0 / 10%);
+}
+.ot {
+  --ot-stack-gap: var(--spacing-24);
+  width: 100%;
+  background: var(--ot-section-bg);
+  color: var(--ot-text);
+}
+.ot__inner {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: var(--content-width-1280);
+  flex-direction: column;
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  gap: var(--ot-stack-gap);
+}
+.ot__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ot-stack-gap);
+  text-align: center;
+}
+.ot__heading {
+  max-width: var(--content-width-846);
+  margin: 0;
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--ot-text);
+}
+.ot__tabs {
+  justify-content: center;
+}
+.ot__panels > [role=tabpanel]:focus-visible {
+  outline: 2px solid var(--ot-focus);
+  outline-offset: var(--spacing-4);
+}
+.ot__option {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--ot-stack-gap);
+}
+.ot__description {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  color: var(--ot-text);
+}
+.ot__description h3 {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+}
+.ot__description p {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+}
+.ot__option--stacked .ot__description {
+  max-width: var(--content-width-846);
+  margin-inline: auto;
+  text-align: center;
+}
+.ot__option--split .ot__option-side {
+  display: contents;
+}
+.ot__option--split .ot__description {
+  order: 1;
+}
+.ot__option--split .ot__animations {
+  order: 2;
+}
+.ot__option--split .ot__metadata {
+  order: 3;
+}
+.ot__animations {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-24);
+  min-width: 0;
+}
+.ot__animation-card {
+  position: relative;
+  isolation: isolate;
+  min-width: 0;
+  aspect-ratio: var(--ot-card-aspect);
+  overflow: hidden;
+  border-radius: var(--ot-card-radius);
+  background: var(--ot-card-bg);
+}
+.ot__animation-media {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+}
+.ot__animation-media canvas {
+  width: 100%;
+  height: 100%;
+}
+.ot__animation-media img,
+.ot__animation-poster {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ot__animation-poster {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+}
+.ot__playback-toggle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  inset: 0;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  background: var(--ot-scrim);
+  cursor: pointer;
+}
+.ot__playback-toggle--playing {
+  background: transparent;
+}
+.ot__playback-toggle:focus-visible {
+  outline: 2px solid var(--ot-focus);
+  outline-offset: -4px;
+}
+.ot__control-icon {
+  width: 64px;
+  height: 64px;
+  transition: opacity 150ms ease;
+}
+.ot__playback-toggle--playing .ot__control-icon {
+  opacity: 0;
+}
+.ot__playback-toggle--playing:hover .ot__control-icon,
+.ot__playback-toggle--playing:focus-visible .ot__control-icon {
+  opacity: 1;
+}
+.ot__control-disc {
+  fill: var(--ot-control-bg);
+  fill-opacity: 0.88;
+}
+.ot__control-glyph {
+  fill: var(--ot-control-color);
+}
+.ot__metadata {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-24);
+}
+.ot__meta-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.ot__meta-group h4 {
+  margin: 0;
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+}
+.ot__meta-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-16);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ot__meta-list li > span,
+.ot__meta-list a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  color: var(--ot-text);
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  text-decoration: none;
+}
+.ot__meta-list a:hover {
+  text-decoration: underline;
+}
+.ot__meta-list a:focus-visible {
+  border-radius: var(--radius-sm);
+  outline: 2px solid var(--ot-focus);
+  outline-offset: 2px;
+}
+.ot__meta-icon,
+.ot__meta-image {
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+.ot__platform-icon {
+  display: inline-grid;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--ot-platform-bg);
+  color: var(--ot-platform-color);
+  font-size: 9px;
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+}
+.ot__disclaimer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  margin: 0;
+  color: var(--ot-muted-text);
+  font-family: var(--typography-body-xs-font-family);
+  font-size: var(--typography-body-xs-font-size);
+  font-weight: var(--typography-body-xs-font-weight);
+  line-height: var(--typography-body-xs-line-height);
+  text-align: center;
+}
+.ot__disclaimer-icon {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+.ot--toggle {
+  --ot-toggle-card-bg: var(--background-surface);
+  --ot-toggle-switch-bg: var(--color-opacity-slate-4);
+  --ot-toggle-switch-radius: var(--radius-md);
+  --ot-toggle-switch-padding: var(--spacing-4);
+  --ot-toggle-option-width: var(--spacing-40);
+  --ot-toggle-option-height: var(--spacing-32);
+  --ot-toggle-option-radius: 0.25rem;
+  --ot-toggle-icon-size: 1.375rem;
+  --ot-toggle-card-max-width: 24.06rem;
+  --ot-toggle-column-gap: var(--spacing-16);
+  --ot-toggle-media-padding: var(--spacing-16);
+  --ot-toggle-copy-padding-inline: var(--spacing-24);
+  --ot-toggle-switch-offset: var(--spacing-16);
+}
+.ot__option--toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: var(--ot-toggle-card-max-width);
+  margin-inline: auto;
+  background: var(--ot-toggle-card-bg);
+  border-radius: var(--ot-card-radius);
+  overflow: visible;
+}
+.ot__toggle-media {
+  min-width: 0;
+  padding: var(--ot-toggle-media-padding);
+}
+.ot__toggle-pane {
+  min-width: 0;
+}
+.ot__toggle-pane[hidden] {
+  display: none;
+}
+.ot__toggle-side {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  padding-block: var(--spacing-16) var(--spacing-32);
+  padding-inline: var(--ot-toggle-copy-padding-inline);
+}
+.ot__toggle-switch {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  margin-bottom: var(--ot-toggle-switch-offset);
+  padding: var(--ot-toggle-switch-padding);
+  background: var(--ot-toggle-switch-bg);
+  border-radius: var(--ot-toggle-switch-radius);
+}
+.ot__toggle-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ot-toggle-option-width);
+  height: var(--ot-toggle-option-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ot-toggle-option-radius);
+  background: transparent;
+  color: var(--ot-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ot__toggle-option--active {
+  background: var(--ot-toggle-card-bg);
+}
+.ot__toggle-option:focus-visible {
+  outline: 2px solid var(--ot-focus);
+  outline-offset: 2px;
+}
+.ot__toggle-icon {
+  display: block;
+  width: var(--ot-toggle-icon-size);
+  height: var(--ot-toggle-icon-size);
+  object-fit: contain;
+}
+.ot__toggle-option:has(.ot__toggle-option-label) {
+  width: auto;
+  min-width: var(--ot-toggle-option-width);
+  padding-inline: var(--spacing-16);
+}
+.ot__toggle-option-label {
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--typography-body-sm-line-height);
+  white-space: nowrap;
+}
+.ot__toggle-title {
+  margin: 0;
+  color: var(--ot-text);
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+}
+.ot__option--toggle .ot__metadata {
+  margin-top: var(--spacing-24);
+}
+@media (min-width: 480px) {
+  .ot {
+    --ot-stack-gap: var(--spacing-32);
+  }
+  .ot__metadata {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-24) var(--spacing-48);
+  }
+}
+@media (min-width: 768px) {
+  .ot__inner {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+  .ot__animations--2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-16);
+  }
+}
+@media (min-width: 992px) {
+  .ot {
+    --ot-stack-gap: var(--spacing-48);
+  }
+  .ot__inner {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+  .ot__option--split {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-72);
+  }
+  .ot__option--split .ot__description,
+  .ot__option--split .ot__animations,
+  .ot__option--split .ot__metadata {
+    order: 0;
+  }
+  .ot__option--split .ot__animations {
+    width: 100%;
+    max-width: 504px;
+  }
+  .ot__option--split .ot__option-side {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: var(--spacing-24);
+  }
+  .ot__option--split .ot__metadata {
+    width: 100%;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-48);
+  }
+  .ot--toggle {
+    --ot-toggle-switch-offset: var(--spacing-32);
+  }
+  .ot__option--toggle {
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--ot-toggle-column-gap);
+    max-width: none;
+    overflow: hidden;
+  }
+  .ot__toggle-media {
+    flex: 1 1 0;
+    padding: 0;
+  }
+  .ot__toggle-side {
+    flex: 1 1 0;
+    padding: var(--spacing-48);
+  }
+  .ot__toggle-switch {
+    align-self: flex-start;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ot__control-icon {
+    transition: none;
+  }
+}
+
+/* templates/EntityInfoSection/EntityInfoSection.css */
+:root {
+  --eis-text-color: var(--text-primary);
+  --eis-link-color: var(--color-coral-700);
+  --eis-max-width: 1280px;
+  --eis-padding-block-end: var(--spacing-56);
+  --eis-padding-inline: var(--spacing-16);
+  --eis-content-gap: var(--spacing-24);
+  --eis-links-gap: var(--spacing-16);
+  --eis-name-tracking: -0.02rem;
+}
+.eis {
+  display: block;
+  width: 100%;
+}
+.eis__inner {
+  max-width: var(--eis-max-width);
+  margin: 0 auto;
+  padding: 0 var(--eis-padding-inline) var(--eis-padding-block-end);
+  box-sizing: border-box;
+}
+.eis__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--eis-content-gap);
+}
+.eis__name {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+  letter-spacing: var(--eis-name-tracking);
+  color: var(--eis-text-color);
+}
+.eis__description {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--eis-text-color);
+}
+.eis__bullets {
+  margin: 0;
+  padding-inline-start: var(--spacing-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.eis__bullets-item {
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--eis-text-color);
+}
+.eis__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--eis-links-gap);
+}
+.eis__links-item {
+  display: flex;
+  max-width: 100%;
+}
+.eis__link {
+  white-space: normal;
+  align-items: flex-start;
+  text-align: left;
+}
+@media (min-width: 768px) {
+  :root {
+    --eis-padding-inline: var(--spacing-24);
+    --eis-links-gap: var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --eis-padding-block-end: var(--spacing-112);
+  }
+}
+
+/* templates/CountryLinkGrid/CountryLinkGrid.css */
+:root {
+  --clg-text-color: var(--text-primary);
+  --clg-max-width: 1280px;
+  --clg-padding-block: var(--spacing-56);
+  --clg-padding-inline: var(--spacing-16);
+  --clg-layout-gap: var(--spacing-48);
+  --clg-layout-columns: 1fr;
+  --clg-header-gap: var(--spacing-16);
+  --clg-grid-columns: 2;
+  --clg-grid-gap: var(--spacing-24);
+  --clg-item-gap: var(--spacing-8);
+  --clg-flag-width: 36px;
+  --clg-flag-height: 24px;
+  --clg-item-hover-opacity: 0.72;
+  --clg-focus-ring-color: var(--color-coral-700);
+  --clg-focus-ring-radius: var(--radius-xs);
+  --clg-title-tracking: -0.02rem;
+}
+.clg {
+  display: block;
+  width: 100%;
+}
+.clg__inner {
+  max-width: var(--clg-max-width);
+  margin: 0 auto;
+  padding: var(--clg-padding-block) var(--clg-padding-inline);
+  box-sizing: border-box;
+}
+.clg__layout {
+  display: grid;
+  grid-template-columns: var(--clg-layout-columns);
+  align-items: start;
+  gap: var(--clg-layout-gap);
+}
+.clg__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  gap: var(--clg-header-gap);
+}
+.clg__title {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+  letter-spacing: var(--clg-title-tracking);
+  color: var(--clg-text-color);
+}
+.clg__description {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--clg-text-color);
+}
+.clg__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--clg-grid-columns), minmax(0, 1fr));
+  gap: var(--clg-grid-gap);
+}
+.clg__item {
+  display: flex;
+  min-width: 0;
+}
+.clg__link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--clg-item-gap);
+  width: 100%;
+  min-width: 0;
+  text-decoration: none;
+  color: var(--clg-text-color);
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  transition: opacity 0.2s ease;
+}
+.clg__link:hover {
+  opacity: var(--clg-item-hover-opacity);
+}
+.clg__link:focus-visible {
+  outline: 2px solid var(--clg-focus-ring-color);
+  outline-offset: 2px;
+  border-radius: var(--clg-focus-ring-radius);
+}
+.clg__flag {
+  flex-shrink: 0;
+  width: var(--clg-flag-width);
+  height: var(--clg-flag-height);
+  object-fit: contain;
+  display: block;
+}
+.clg__text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+@media (min-width: 560px) {
+  :root {
+    --clg-grid-columns: 3;
+  }
+}
+@media (min-width: 768px) {
+  :root {
+    --clg-padding-inline: var(--spacing-24);
+    --clg-grid-columns: 4;
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --clg-padding-block: var(--spacing-112);
+    --clg-layout-gap: var(--spacing-80);
+    --clg-layout-columns: 1fr 1fr;
+    --clg-grid-columns: 2;
+  }
+}
+@media (min-width: 1200px) {
+  :root {
+    --clg-grid-columns: 3;
+  }
+}
+
+/* templates/DocumentChips/DocumentChips.css */
+:root {
+  --dch-background: var(--background-surface-secondary);
+  --dch-text-color: var(--text-primary);
+  --dch-max-width: 1280px;
+  --dch-padding-block: var(--spacing-56);
+  --dch-padding-inline: var(--spacing-16);
+  --dch-header-gap: var(--spacing-32);
+  --dch-header-content-gap: var(--spacing-16);
+  --dch-docs-columns: 1;
+  --dch-docs-column-gap: var(--spacing-8);
+  --dch-docs-row-gap: var(--spacing-16);
+  --dch-doc-background: var(--background-surface);
+  --dch-doc-radius: var(--radius-2xl);
+  --dch-doc-padding-block: var(--spacing-16);
+  --dch-doc-padding-inline: var(--spacing-16);
+  --dch-doc-gap: var(--spacing-8);
+  --dch-doc-icon-gap: var(--spacing-8);
+  --dch-doc-icon-size: var(--spacing-24);
+  --dch-doc-action-indent: var(--spacing-56);
+  --dch-focus-ring-color: var(--border-focus);
+  --dch-title-tracking: -0.02rem;
+}
+.dch {
+  display: block;
+  width: 100%;
+  background-color: var(--dch-background);
+}
+.dch__inner {
+  max-width: var(--dch-max-width);
+  margin: 0 auto;
+  padding: var(--dch-padding-block) var(--dch-padding-inline);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dch-header-gap);
+}
+.dch__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--dch-header-content-gap);
+}
+.dch__title {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+  letter-spacing: var(--dch-title-tracking);
+  color: var(--dch-text-color);
+}
+.dch__description {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--dch-text-color);
+}
+.dch__groups {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.dch .dch__group {
+  max-width: none;
+}
+.dch__docs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--dch-docs-columns), minmax(0, 1fr));
+  column-gap: var(--dch-docs-column-gap);
+  row-gap: var(--dch-docs-row-gap);
+}
+.dch__doc-item {
+  display: flex;
+  min-width: 0;
+}
+.dch__doc {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--dch-doc-gap);
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--dch-doc-padding-block) var(--dch-doc-padding-inline);
+  border-radius: var(--dch-doc-radius);
+  background-color: var(--dch-doc-background);
+  color: var(--dch-text-color);
+}
+.dch__doc-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dch-doc-icon-gap);
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+}
+.dch__doc-link:focus-visible {
+  outline: 2px solid var(--dch-focus-ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+.dch__doc-link:hover .dch__doc-title {
+  text-decoration: underline;
+}
+.dch__doc-icon {
+  display: block;
+  flex-shrink: 0;
+  width: var(--dch-doc-icon-size);
+  height: var(--dch-doc-icon-size);
+  object-fit: contain;
+}
+.dch__doc-title {
+  min-width: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--typography-body-md-line-height);
+  overflow-wrap: anywhere;
+}
+.dch__doc-action {
+  display: flex;
+  flex-shrink: 0;
+  padding-inline-start: var(--dch-doc-action-indent);
+}
+@media (min-width: 768px) {
+  :root {
+    --dch-padding-inline: var(--spacing-24);
+    --dch-doc-padding-inline: var(--spacing-24);
+    --dch-doc-radius: var(--radius-full);
+    --dch-doc-action-indent: var(--spacing-0);
+  }
+  .dch__doc {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --dch-padding-block: var(--spacing-112);
+    --dch-header-gap: var(--spacing-48);
+    --dch-docs-columns: 2;
+  }
+}
+
+/* components/LinkModal/LinkModal.css */
+:root {
+  --lm-scrim-color: var(--overlay-strong);
+  --lm-scrim-blur: 4px;
+  --lm-z-index: 9999;
+  --lm-panel-background: var(--background-surface);
+  --lm-panel-radius: var(--radius-xl);
+  --lm-panel-shadow: var(--elevation-modal);
+  --lm-panel-max-width: var(--content-width-846);
+  --lm-panel-padding-block: var(--spacing-40);
+  --lm-panel-padding-inline: var(--spacing-24);
+  --lm-panel-gap: var(--spacing-24);
+  --lm-panel-margin: var(--spacing-16);
+  --lm-title-color: var(--text-primary);
+  --lm-close-inset: var(--spacing-8);
+  --lm-close-size: var(--spacing-48);
+  --lm-close-glyph-size: var(--spacing-24);
+  --lm-close-icon-color: var(--icon-primary);
+  --lm-close-hover-background: var(--color-opacity-slate-8);
+  --lm-close-active-background: var(--color-opacity-slate-16);
+  --lm-focus-ring-color: var(--border-focus);
+}
+.lm {
+  position: fixed;
+  inset: 0;
+  z-index: var(--lm-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--lm-panel-margin);
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.lm__scrim {
+  position: fixed;
+  inset: 0;
+  background-color: var(--lm-scrim-color);
+  -webkit-backdrop-filter: blur(var(--lm-scrim-blur));
+  backdrop-filter: blur(var(--lm-scrim-blur));
+}
+.lm__panel {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--lm-panel-max-width);
+  max-height: calc(100dvh - (var(--lm-panel-margin) * 2));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--lm-panel-gap);
+  padding: var(--lm-panel-padding-block) var(--lm-panel-padding-inline);
+  border-radius: var(--lm-panel-radius);
+  background-color: var(--lm-panel-background);
+  box-shadow: var(--lm-panel-shadow);
+  outline: none;
+}
+.lm__panel:focus-visible {
+  outline: 2px solid var(--lm-focus-ring-color);
+  outline-offset: 2px;
+}
+.lm__close {
+  position: absolute;
+  top: var(--lm-close-inset);
+  right: var(--lm-close-inset);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lm-close-size);
+  height: var(--lm-close-size);
+  box-sizing: border-box;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-full);
+  background: none;
+  color: var(--lm-close-icon-color);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 100ms ease;
+}
+.lm__close:hover {
+  background-color: var(--lm-close-hover-background);
+}
+.lm__close:active {
+  background-color: var(--lm-close-active-background);
+}
+.lm__close:focus-visible {
+  outline: 2px solid var(--lm-focus-ring-color);
+  outline-offset: 2px;
+}
+.lm__close svg {
+  width: var(--lm-close-glyph-size);
+  height: var(--lm-close-glyph-size);
+}
+.lm__title {
+  margin: 0;
+  padding-inline: var(--lm-close-size);
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+  letter-spacing: var(--typography-h5-letter-spacing);
+  color: var(--lm-title-color);
+  text-align: center;
+}
+.lm__body {
+  width: 100%;
+  min-height: 0;
+  overflow-y: auto;
+}
+@media (min-width: 768px) {
+  :root {
+    --lm-panel-padding-inline: var(--spacing-32);
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --lm-panel-padding-block: var(--spacing-80);
+    --lm-panel-padding-inline: var(--spacing-96);
+    --lm-panel-gap: var(--spacing-40);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lm__close {
+    transition: none;
+  }
+}
+
+/* templates/LanguageSelectModal/LanguageSelectModal.css */
+:root {
+  --lsm-grid-columns: 2;
+  --lsm-grid-column-gap: var(--spacing-32);
+  --lsm-grid-row-gap: var(--spacing-16);
+  --lsm-option-gap: var(--spacing-8);
+  --lsm-option-color: var(--text-primary);
+  --lsm-flag-width: var(--spacing-24);
+  --lsm-focus-ring-color: var(--border-focus);
+}
+.lsm__grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(var(--lsm-grid-columns), minmax(0, 1fr));
+  column-gap: var(--lsm-grid-column-gap);
+  row-gap: var(--lsm-grid-row-gap);
+  justify-content: center;
+}
+.lsm__grid-item {
+  display: flex;
+  min-width: 0;
+}
+.lsm__option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--lsm-option-gap);
+  min-width: 0;
+  color: var(--lsm-option-color);
+  text-decoration: none;
+}
+.lsm__option:hover .lsm__option-label,
+.lsm__option:active .lsm__option-label {
+  text-decoration: underline;
+}
+.lsm__option:focus-visible {
+  outline: 2px solid var(--lsm-focus-ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+.lsm__flag {
+  display: block;
+  flex-shrink: 0;
+  width: var(--lsm-flag-width);
+  height: auto;
+}
+.lsm__option-label {
+  min-width: 0;
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  overflow-wrap: anywhere;
+}
+@media (min-width: 768px) {
+  :root {
+    --lsm-grid-columns: 3;
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --lsm-grid-column-gap: var(--spacing-80);
+  }
+}
+
+/* templates/AffiliatesSlider/AffiliatesSlider.css */
+:root {
+  --afs-background: var(--background-surface);
+  --afs-text-color: var(--text-primary);
+  --afs-max-width: 1280px;
+  --afs-padding-block: var(--spacing-56);
+  --afs-padding-inline: var(--spacing-16);
+  --afs-header-gap: var(--spacing-16);
+  --afs-header-max-width: 40rem;
+  --afs-controls-gap: var(--spacing-24);
+  --afs-side-width: 12.5rem;
+  --afs-side-padding: var(--spacing-24);
+  --afs-slider-max-width: 25.5rem;
+  --afs-track-height: var(--spacing-4);
+  --afs-track-background: var(--color-slate-300);
+  --afs-fill-background: var(--button-primary-background);
+  --afs-handle-size: var(--spacing-24);
+  --afs-handle-background: var(--button-primary-background);
+  --afs-handle-shadow: 1px 1px 12px rgb(0 0 0 / 0.2);
+  --afs-track-gradient-start: var(--color-slate-300);
+  --afs-track-gradient-end: var(--color-slate-100);
+  --afs-tick-padding-top: var(--spacing-20);
+  --afs-disclaimer-background: color-mix(in srgb, var(--color-blue-600) 8%, transparent);
+  --afs-disclaimer-radius: var(--radius-xl);
+  --afs-disclaimer-padding: var(--spacing-16);
+  --afs-disclaimer-gap: var(--spacing-8);
+  --afs-disclaimer-icon-size: var(--spacing-24);
+  --afs-disclaimer-max-width: 40rem;
+  --afs-focus-ring-color: var(--border-focus);
+}
+.afs {
+  display: block;
+  width: 100%;
+  background-color: var(--afs-background);
+}
+.afs__inner {
+  max-width: var(--afs-max-width);
+  margin: 0 auto;
+  padding: var(--afs-padding-block) var(--afs-padding-inline);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--afs-controls-gap);
+}
+.afs__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--afs-header-gap);
+  max-width: var(--afs-header-max-width);
+  text-align: center;
+}
+.afs__title {
+  margin: 0;
+  font-family: var(--typography-h4-font-family);
+  font-size: var(--typography-h4-font-size);
+  font-weight: var(--typography-h4-font-weight);
+  line-height: var(--typography-h4-line-height);
+  color: var(--afs-text-color);
+}
+.afs__description {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--afs-text-color);
+}
+.afs__form {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.afs__controls {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: var(--spacing-16);
+  row-gap: var(--spacing-16);
+  align-items: center;
+}
+.afs__referrals,
+.afs__income {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  min-width: 0;
+}
+.afs__referrals {
+  grid-column: 1;
+  grid-row: 1;
+  align-items: flex-start;
+}
+.afs__arrow {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--afs-text-color);
+}
+.afs__income {
+  grid-column: 3;
+  grid-row: 1;
+  align-items: flex-end;
+}
+.afs__metric {
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--afs-text-color);
+}
+.afs__income-value {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-4);
+}
+.afs__metric-label {
+  margin: 0;
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  color: var(--afs-text-color);
+  text-align: left;
+}
+.afs__metric-label--right {
+  text-align: right;
+}
+.afs__slider-block {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  width: 100%;
+  max-width: none;
+}
+.afs__track-gradient {
+  display: block;
+  width: 100%;
+  height: 3rem;
+}
+.afs__track-wrap {
+  margin-top: calc(var(--spacing-8) * -1);
+}
+.afs__track {
+  position: relative;
+  height: var(--afs-track-height);
+  border-radius: var(--radius-full);
+  background-color: var(--afs-track-background);
+}
+.afs__fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  border-radius: var(--radius-full);
+  background-color: var(--afs-fill-background);
+  pointer-events: none;
+}
+.afs__handle {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  width: var(--afs-handle-size);
+  height: var(--afs-handle-size);
+  border-radius: var(--radius-full);
+  background-color: var(--afs-handle-background);
+  box-shadow: var(--afs-handle-shadow);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.afs__input {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: calc(var(--afs-handle-size) + var(--spacing-16));
+  margin: calc(var(--spacing-8) * -1) 0;
+  opacity: 0;
+  cursor: grab;
+}
+.afs__track:focus-within {
+  outline: 2px solid var(--afs-focus-ring-color);
+  outline-offset: 4px;
+}
+.afs__ticks {
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--afs-tick-padding-top);
+}
+.afs__tick {
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  color: var(--afs-text-color);
+}
+.afs__disclaimer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--afs-disclaimer-gap);
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--afs-disclaimer-max-width);
+  padding: var(--afs-disclaimer-padding);
+  border-radius: var(--afs-disclaimer-radius);
+  background-color: var(--afs-disclaimer-background);
+}
+.afs__disclaimer-icon {
+  flex-shrink: 0;
+  width: var(--afs-disclaimer-icon-size);
+  height: var(--afs-disclaimer-icon-size);
+  margin-block-start: -0.125rem;
+}
+.afs__disclaimer-text {
+  margin: 0;
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--typography-body-sm-font-weight);
+  line-height: var(--typography-body-sm-line-height);
+  color: var(--afs-text-color);
+}
+@media (min-width: 768px) {
+  :root {
+    --afs-padding-inline: var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --afs-padding-block: var(--spacing-112);
+  }
+  .afs__controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+  .afs__referrals,
+  .afs__arrow,
+  .afs__income,
+  .afs__slider-block {
+    grid-column: unset;
+    grid-row: unset;
+  }
+  .afs__referrals {
+    width: var(--afs-side-width);
+    padding-inline-end: var(--afs-side-padding);
+  }
+  .afs__income {
+    width: var(--afs-side-width);
+    padding-inline-start: var(--afs-side-padding);
+  }
+  .afs__slider-block {
+    flex: 0 1 var(--afs-slider-max-width);
+    max-width: var(--afs-slider-max-width);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .afs__input {
+    cursor: pointer;
+  }
+}
 /*# sourceMappingURL=index.css.map */