@deriv-web-design/ui 0.0.2 → 0.0.3

package/dist/index.css

@@ -1,4 +1,4 @@
-/* primitives/Button/Button.module.css */
+/* primitives/Button/Button.css */
 .button {
   position: relative;
   display: inline-flex;
@@ -24,21 +24,21 @@
     border-color 100ms ease,
     opacity 100ms ease;
 }
-.fullWidth {
+.button.fullWidth {
   width: 100%;
 }
-.iconOnly {
+.button.iconOnly {
   padding: calc(var(--spacing-16) - 2px);
   min-width: unset;
   width: var(--spacing-48);
   height: var(--spacing-48);
 }
-.label {
+.button .label {
   flex: 1 0 0;
   min-width: 1px;
   min-height: 1px;
 }
-.icon {
+.button .icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +46,7 @@
   height: var(--spacing-16);
   flex-shrink: 0;
 }
-.focusRing {
+.button .focusRing {
   position: absolute;
   inset: -2px;
   border-radius: var(--radius-full);
@@ -149,7 +149,7 @@
   cursor: not-allowed;
 }
 
-/* primitives/Link/Link.module.css */
+/* primitives/Link/Link.css */
 .link {
   display: inline-flex;
   align-items: center;
@@ -172,12 +172,12 @@
   outline-offset: 2px;
   border-radius: var(--radius-xs);
 }
-.disabled {
+.link.disabled {
   opacity: var(--link-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
-.icon {
+.link .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -185,7 +185,7 @@
   height: var(--spacing-16);
   flex-shrink: 0;
 }
-.chevron {
+.link .chevron {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -194,29 +194,29 @@
   height: var(--spacing-16);
   transition: transform 150ms ease;
 }
-.label {
+.link .label {
   text-decoration-skip-ink: none;
 }
-.withChevron:hover,
-.withChevron:active {
+.link.withChevron:hover,
+.link.withChevron:active {
   gap: var(--spacing-16);
 }
-.withIcon:hover .label,
-.withIcon:active .label {
+.link.withIcon:hover .label,
+.link.withIcon:active .label {
   text-decoration: underline;
   text-decoration-style: solid;
 }
-.coral {
+.link.coral {
   color: var(--link-coral-color);
 }
-.black {
+.link.black {
   color: var(--link-black-color);
 }
-.white {
+.link.white {
   color: var(--link-white-color);
 }
 
-/* primitives/Chip/Chip.module.css */
+/* primitives/Chip/Chip.css */
 .chip {
   position: relative;
   display: inline-flex;
@@ -238,19 +238,19 @@
     border-color 100ms ease;
   user-select: none;
 }
-.sm {
+.chip.sm {
   height: var(--spacing-24);
   padding: 0 var(--spacing-12);
   gap: 6px;
   font-size: var(--font-size-xs);
 }
-.md {
+.chip.md {
   height: var(--spacing-32);
   padding: 0 var(--spacing-16);
   gap: var(--spacing-8);
   font-size: var(--font-size-sm);
 }
-.lg {
+.chip.lg {
   height: var(--spacing-48);
   padding: 0 var(--spacing-24);
   gap: var(--spacing-12);
@@ -262,7 +262,7 @@
 .chip:active:not(:disabled):not(.selected) {
   background-color: var(--chip-active-background);
 }
-.selected {
+.chip.selected {
   background-color: var(--chip-selected-background);
   border-color: var(--chip-selected-background);
   color: var(--chip-selected-text);
@@ -271,7 +271,7 @@
   color: var(--chip-disabled-text);
   cursor: not-allowed;
 }
-.icon {
+.chip .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -279,21 +279,21 @@
   width: 1em;
   height: 1em;
 }
-.label {
+.chip .label {
   flex-shrink: 0;
 }
-.tag {
+.chip .tag {
   font-weight: var(--font-weight-extra-bold);
   flex-shrink: 0;
 }
-.focusRing {
+.chip .focusRing {
   position: absolute;
   inset: -3px;
   border-radius: var(--radius-full);
   border: 2px solid var(--chip-focus-ring-color);
   pointer-events: none;
 }
-.selected .focusRing {
+.chip.selected .focusRing {
   inset: -2px;
 }
 .chip:focus-visible::after {
@@ -304,11 +304,11 @@
   border: 2px solid var(--chip-focus-ring-color);
   pointer-events: none;
 }
-.selected:focus-visible::after {
+.chip.selected:focus-visible::after {
   inset: -2px;
 }
 
-/* primitives/Tag/Tag.module.css */
+/* primitives/Tag/Tag.css */
 .tag {
   display: inline-flex;
   align-items: center;
@@ -320,43 +320,43 @@
   color: var(--tag-text-color);
   border-radius: var(--radius-full);
 }
-.fill {
+.tag.fill {
   background-color: var(--tag-fill-background);
 }
-.outline {
+.tag.outline {
   border: 1px solid var(--tag-outline-border);
 }
-.xs {
+.tag.xs {
   height: 22px;
   padding: 0 var(--spacing-4);
   gap: var(--spacing-4);
   font-size: var(--font-size-xs);
 }
-.sm {
+.tag.sm {
   height: var(--spacing-24);
   padding: 0 var(--spacing-8);
   gap: var(--spacing-8);
   font-size: var(--font-size-xs);
 }
-.md {
+.tag.md {
   height: var(--spacing-32);
   padding: 0 var(--spacing-12);
   gap: var(--spacing-12);
   font-size: var(--font-size-sm);
 }
-.lg {
+.tag.lg {
   height: var(--spacing-48);
   padding: 0 var(--spacing-16);
   gap: var(--spacing-16);
   font-size: var(--font-size-md);
 }
-.regular {
+.tag.regular {
   font-weight: var(--font-weight-regular);
 }
-.bold {
+.tag.bold {
   font-weight: var(--font-weight-semi-bold);
 }
-.icon {
+.tag .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -364,18 +364,18 @@
   width: 1em;
   height: 1em;
 }
-.label {
+.tag .label {
   flex-shrink: 0;
 }
 
-/* primitives/Accordion/Accordion.module.css */
+/* primitives/Accordion/Accordion.css */
 .accordion {
   position: relative;
   width: 100%;
   max-width: 846px;
   box-sizing: border-box;
 }
-.header {
+.accordion .header {
   display: flex;
   align-items: center;
   gap: var(--spacing-24);
@@ -389,31 +389,31 @@
   text-align: left;
   box-sizing: border-box;
 }
-.header:focus-visible::after {
+.accordion .header:focus-visible::after {
   content: "";
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.focusRing {
+.accordion .focusRing {
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.titleWrapper {
+.accordion .titleWrapper {
   flex: 1 0 0;
   min-width: 1px;
 }
-.title {
+.accordion .title {
   font-family: var(--font-family-base);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semi-bold);
   line-height: var(--line-height-normal);
   color: var(--accordion-title-color);
 }
-.chevron {
+.accordion .chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -423,21 +423,21 @@
   color: var(--accordion-chevron-color);
   transition: transform 200ms ease;
 }
-.chevronRotated {
+.accordion .chevronRotated {
   transform: rotate(180deg);
 }
-.bodyWrapper {
+.accordion .bodyWrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms ease;
 }
-.bodyWrapperOpen {
+.accordion .bodyWrapperOpen {
   grid-template-rows: 1fr;
 }
-.bodyInner {
+.accordion .bodyInner {
   overflow: hidden;
 }
-.body {
+.accordion .body {
   padding-bottom: var(--spacing-24);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
@@ -446,8 +446,8 @@
   color: var(--accordion-body-color);
 }
 
-/* primitives/TextField/TextField.module.css */
-.wrapper {
+/* primitives/TextField/TextField.css */
+.tf-wrapper {
   display: flex;
   align-items: center;
   height: var(--spacing-56);
@@ -459,67 +459,67 @@
   cursor: text;
   transition: background-color 100ms ease, border-color 100ms ease;
 }
-.outline {
+.tf-wrapper.outline {
   background: var(--field-surface-outline);
   border-color: var(--field-border-default);
 }
-.fill {
+.tf-wrapper.fill {
   background: var(--field-surface-fill);
 }
-.neutral.outline:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.neutral.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-hover);
 }
-.neutral.fill:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.neutral.fill:hover:not([data-disabled]):not(:focus-within) {
   background: var(--field-surface-fill-hover);
 }
-.neutral.outline:focus-within:not([data-disabled]) {
+.tf-wrapper.neutral.outline:focus-within:not([data-disabled]) {
   border-color: var(--field-border-focus);
 }
-.neutral.fill:focus-within:not([data-disabled]) {
+.tf-wrapper.neutral.fill:focus-within:not([data-disabled]) {
   border-color: var(--field-border-focus);
 }
-.fail.outline {
+.tf-wrapper.fail.outline {
   border-color: var(--field-border-fail-default);
 }
-.fail.outline:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.fail.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-fail-hover);
 }
-.fail.outline:focus-within:not([data-disabled]) {
+.tf-wrapper.fail.outline:focus-within:not([data-disabled]) {
   border-color: var(--field-border-fail-focus);
 }
-.fail.fill {
+.tf-wrapper.fail.fill {
   background: var(--field-surface-fail);
 }
-.fail.fill:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.fail.fill:hover:not([data-disabled]):not(:focus-within) {
   background: var(--field-surface-fail-hover);
 }
-.fail.fill:focus-within:not([data-disabled]) {
+.tf-wrapper.fail.fill:focus-within:not([data-disabled]) {
   background: var(--field-surface-fail);
   border-color: var(--field-border-fail-focus);
 }
-.success.outline {
+.tf-wrapper.success.outline {
   border-color: var(--field-border-success-default);
 }
-.success.outline:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.success.outline:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-success-hover);
 }
-.success.outline:focus-within:not([data-disabled]) {
+.tf-wrapper.success.outline:focus-within:not([data-disabled]) {
   border-color: var(--field-border-success-focus);
 }
-.success.fill {
+.tf-wrapper.success.fill {
   background: var(--field-surface-success);
 }
-.success.fill:hover:not([data-disabled]):not(:focus-within) {
+.tf-wrapper.success.fill:hover:not([data-disabled]):not(:focus-within) {
   background: var(--field-surface-success-hover);
 }
-.success.fill:focus-within:not([data-disabled]) {
+.tf-wrapper.success.fill:focus-within:not([data-disabled]) {
   background: var(--field-surface-success);
   border-color: var(--field-border-success-focus);
 }
-.wrapper[data-disabled] {
+.tf-wrapper[data-disabled] {
   cursor: not-allowed;
 }
-.iconSlot {
+.tf-wrapper .iconSlot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -528,16 +528,16 @@
   height: var(--spacing-24);
   color: var(--field-icon-default);
 }
-.wrapper[data-disabled] .iconSlot {
+.tf-wrapper[data-disabled] .iconSlot {
   color: var(--field-icon-disabled);
 }
-.iconSuccess {
+.tf-wrapper .iconSuccess {
   color: var(--field-text-success);
 }
-.iconFail {
+.tf-wrapper .iconFail {
   color: var(--field-text-fail);
 }
-.input {
+.tf-wrapper .tf-input {
   flex: 1 0 0;
   min-width: 1px;
   border: none;
@@ -551,22 +551,22 @@
   caret-color: var(--field-border-focus);
   padding: 0;
 }
-.input::placeholder {
+.tf-wrapper .tf-input::placeholder {
   color: var(--field-text-placeholder);
 }
-.input:focus {
+.tf-wrapper .tf-input:focus {
   color: var(--field-text-focus);
 }
-.input:disabled {
+.tf-wrapper .tf-input:disabled {
   cursor: not-allowed;
   color: var(--field-text-disabled);
 }
-.input:disabled::placeholder {
+.tf-wrapper .tf-input:disabled::placeholder {
   color: var(--field-text-disabled);
 }
 
-/* primitives/SearchField/SearchField.module.css */
-.wrapper {
+/* primitives/SearchField/SearchField.css */
+.sf-wrapper {
   display: flex;
   align-items: center;
   height: var(--spacing-56);
@@ -580,34 +580,34 @@
   cursor: text;
   transition: background-color 100ms ease, border-color 100ms ease;
 }
-.neutral:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.neutral:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-hover);
 }
-.neutral:focus-within:not([data-disabled]) {
+.sf-wrapper.neutral:focus-within:not([data-disabled]) {
   border-color: var(--field-border-focus);
 }
-.fail {
+.sf-wrapper.fail {
   border-color: var(--field-border-fail-default);
 }
-.fail:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.fail:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-fail-hover);
 }
-.fail:focus-within:not([data-disabled]) {
+.sf-wrapper.fail:focus-within:not([data-disabled]) {
   border-color: var(--field-border-fail-focus);
 }
-.success {
+.sf-wrapper.success {
   border-color: var(--field-border-success-default);
 }
-.success:hover:not([data-disabled]):not(:focus-within) {
+.sf-wrapper.success:hover:not([data-disabled]):not(:focus-within) {
   border-color: var(--field-border-success-hover);
 }
-.success:focus-within:not([data-disabled]) {
+.sf-wrapper.success:focus-within:not([data-disabled]) {
   border-color: var(--field-border-success-focus);
 }
-.wrapper[data-disabled] {
+.sf-wrapper[data-disabled] {
   cursor: not-allowed;
 }
-.iconSlot {
+.sf-wrapper .iconSlot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -616,16 +616,16 @@
   height: var(--spacing-24);
   color: var(--field-icon-default);
 }
-.wrapper[data-disabled] .iconSlot {
+.sf-wrapper[data-disabled] .iconSlot {
   color: var(--field-icon-disabled);
 }
-.iconSuccess {
+.sf-wrapper .iconSuccess {
   color: var(--field-text-success);
 }
-.iconFail {
+.sf-wrapper .iconFail {
   color: var(--field-text-fail);
 }
-.input {
+.sf-wrapper .sf-input {
   flex: 1 0 0;
   min-width: 1px;
   border: none;
@@ -639,20 +639,20 @@
   caret-color: var(--field-border-focus);
   padding: 0;
 }
-.input::placeholder {
+.sf-wrapper .sf-input::placeholder {
   color: var(--field-text-placeholder);
 }
-.input:focus {
+.sf-wrapper .sf-input:focus {
   color: var(--field-text-focus);
 }
-.input:disabled {
+.sf-wrapper .sf-input:disabled {
   cursor: not-allowed;
   color: var(--field-text-disabled);
 }
-.input:disabled::placeholder {
+.sf-wrapper .sf-input:disabled::placeholder {
   color: var(--field-text-disabled);
 }
-.clearButton {
+.sf-wrapper .clearButton {
   appearance: none;
   display: inline-flex;
   align-items: center;
@@ -668,16 +668,16 @@
   border-radius: var(--radius-full);
   transition: color 100ms ease;
 }
-.clearButton:hover {
+.sf-wrapper .clearButton:hover {
   color: var(--field-text-default);
 }
-.clearButton:focus-visible {
+.sf-wrapper .clearButton:focus-visible {
   outline: 2px solid var(--field-border-focus);
   outline-offset: 2px;
 }
 
-/* primitives/Breadcrumb/Breadcrumb.module.css */
-.list {
+/* primitives/Breadcrumb/Breadcrumb.css */
+.bc-list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -688,45 +688,45 @@
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
 }
-.list.sm {
+.bc-list.sm {
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
-.list.md {
+.bc-list.md {
   font-size: var(--font-size-md);
   line-height: var(--line-height-normal);
 }
-.item,
-.middleItem,
-.ellipsisItem {
+.bc-item,
+.bc-middleItem,
+.bc-ellipsisItem {
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
 }
-.link {
+.bc-link {
   color: var(--breadcrumb-text-color);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   border-radius: var(--radius-sm);
 }
-.link:hover {
+.bc-link:hover {
   text-decoration: underline;
 }
-.link:active {
+.bc-link:active {
   color: var(--breadcrumb-text-current-color);
   text-decoration: underline;
 }
-.link:focus-visible {
+.bc-link:focus-visible {
   outline: 2px solid var(--breadcrumb-focus-ring-color);
   outline-offset: 2px;
   text-decoration: none;
 }
-.current {
+.bc-current {
   color: var(--breadcrumb-text-current-color);
   white-space: nowrap;
 }
-.separator {
+.bc-separator {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -735,7 +735,7 @@
   width: 1em;
   height: 1em;
 }
-.ellipsisButton {
+.bc-ellipsisButton {
   appearance: none;
   background: none;
   border: none;
@@ -746,49 +746,49 @@
   cursor: pointer;
   border-radius: var(--radius-sm);
 }
-.ellipsisButton:hover {
+.bc-ellipsisButton:hover {
   text-decoration: underline;
 }
-.ellipsisButton:focus-visible {
+.bc-ellipsisButton:focus-visible {
   outline: 2px solid var(--breadcrumb-focus-ring-color);
   outline-offset: 2px;
   text-decoration: none;
 }
-.ellipsisItem {
+.bc-ellipsisItem {
   display: none;
 }
-.middleItem {
+.bc-middleItem {
   display: flex;
 }
 @media (max-width: 639px) {
-  .list.collapsible {
+  .bc-list.collapsible {
     gap: var(--spacing-4);
   }
-  .list.collapsible .item,
-  .list.collapsible .middleItem,
-  .list.collapsible .ellipsisItem {
+  .bc-list.collapsible .bc-item,
+  .bc-list.collapsible .bc-middleItem,
+  .bc-list.collapsible .bc-ellipsisItem {
     gap: var(--spacing-4);
   }
-  .list.collapsible .ellipsisItem {
+  .bc-list.collapsible .bc-ellipsisItem {
     display: flex;
   }
-  .list.collapsible .middleItem {
+  .bc-list.collapsible .bc-middleItem {
     display: none;
   }
-  .list.collapsible.expanded .ellipsisItem {
+  .bc-list.collapsible.expanded .bc-ellipsisItem {
     display: none;
   }
-  .list.collapsible.expanded .middleItem {
+  .bc-list.collapsible.expanded .bc-middleItem {
     display: flex;
   }
 }
 
-/* primitives/ChipDropdown/ChipDropdown.module.css */
-.wrapper {
+/* primitives/ChipDropdown/ChipDropdown.css */
+.cd-wrapper {
   position: relative;
   display: inline-flex;
 }
-.trigger {
+.cd-trigger {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -808,39 +808,39 @@
     border-color 100ms ease;
   user-select: none;
 }
-.sm {
+.cd-trigger.sm {
   height: var(--spacing-24);
   padding-left: var(--spacing-12);
   padding-right: 6px;
   gap: 6px;
   font-size: var(--font-size-xs);
 }
-.md {
+.cd-trigger.md {
   height: var(--spacing-32);
   padding-left: var(--spacing-16);
   padding-right: var(--spacing-8);
   gap: var(--spacing-8);
   font-size: var(--font-size-sm);
 }
-.trigger:hover:not(:disabled):not(.selected) {
+.cd-trigger:hover:not(:disabled):not(.selected) {
   background-color: var(--chip-hover-background);
 }
-.trigger:active:not(:disabled) {
+.cd-trigger:active:not(:disabled) {
   background-color: var(--chip-active-background);
 }
-.expand:not(.selected):not(:disabled) {
+.cd-trigger.expand:not(.selected):not(:disabled) {
   background-color: var(--chip-hover-background);
 }
-.selected {
+.cd-trigger.selected {
   background-color: var(--chip-selected-background);
   border-color: var(--chip-selected-background);
   color: var(--chip-selected-text);
 }
-.trigger:disabled {
+.cd-trigger:disabled {
   color: var(--chip-disabled-text);
   cursor: not-allowed;
 }
-.icon {
+.cd-trigger .cd-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -848,14 +848,14 @@
   width: 1em;
   height: 1em;
 }
-.label {
+.cd-trigger .cd-label {
   flex-shrink: 0;
 }
-.tag {
+.cd-trigger .cd-tag {
   font-weight: var(--font-weight-extra-bold);
   flex-shrink: 0;
 }
-.chevron {
+.cd-trigger .cd-chevron {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -864,10 +864,10 @@
   height: 24px;
   transition: transform 200ms ease;
 }
-.chevronOpen {
+.cd-trigger .cd-chevron.chevronOpen {
   transform: rotate(180deg);
 }
-.trigger:focus-visible::after {
+.cd-trigger:focus-visible::after {
   content: "";
   position: absolute;
   inset: -3px;
@@ -875,7 +875,7 @@
   border: 2px solid var(--chip-focus-ring-color);
   pointer-events: none;
 }
-.list {
+.cd-list {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
@@ -892,7 +892,7 @@
   flex-direction: column;
   box-sizing: border-box;
 }
-.item {
+.cd-item {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -909,23 +909,23 @@
   transition: background-color 100ms ease;
   list-style: none;
 }
-.item:hover {
+.cd-item:hover {
   background-color: var(--chip-dropdown-item-hover-bg);
 }
-.item:active {
+.cd-item:active {
   background-color: var(--chip-dropdown-item-active-bg);
 }
-.itemLabel {
+.cd-itemLabel {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.itemSelected .itemLabel {
+.cd-item.itemSelected .cd-itemLabel {
   font-weight: var(--font-weight-semi-bold);
 }
-.itemCheck {
+.cd-itemCheck {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -933,8 +933,8 @@
   color: var(--chip-dropdown-item-selected-check);
 }
 
-/* components/Card/CardPrimaryVariant.module.css */
-.card {
+/* components/Card/CardPrimaryVariant.css */
+.card-primary {
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-2xl);
@@ -943,19 +943,19 @@
   position: relative;
   width: 100%;
 }
-.style--light {
+.card-primary.style--light {
   background-color: var(--color-slate-75);
 }
-.style--dark {
+.card-primary.style--dark {
   background-color: var(--color-slate-1200);
 }
-.style--brand {
+.card-primary.style--brand {
   background-color: var(--color-coral-500);
 }
-.style--image {
+.card-primary.style--image {
   background-color: transparent;
 }
-.content {
+.card-primary .cp-content {
   flex: 1 0 0;
   display: flex;
   flex-direction: column;
@@ -965,13 +965,13 @@
   z-index: 1;
   min-height: 0;
 }
-.textDefault {
+.card-primary .textDefault {
   color: var(--color-slate-1200);
 }
-.textInverse {
+.card-primary .textInverse {
   color: var(--color-slate-50);
 }
-.title {
+.card-primary .cp-title {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -979,7 +979,7 @@
   margin: 0;
   width: 100%;
 }
-.description {
+.card-primary .cp-description {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -987,37 +987,13 @@
   margin: 0;
   width: 100%;
 }
-.link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-tight);
-  text-decoration: none;
-  transition: opacity 150ms ease;
-}
-.link:hover {
-  opacity: 0.8;
-}
-.linkCoral {
-  color: var(--link-coral-color);
-}
-.linkInverse {
-  color: var(--link-white-color);
-}
-.imageSection {
+.card-primary .cp-imageSection {
   height: 17.5rem;
   flex-shrink: 0;
   position: relative;
   overflow: hidden;
 }
-.image {
+.card-primary .cp-image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1025,13 +1001,13 @@
   object-fit: cover;
   display: block;
 }
-.imageOverlay {
+.card-primary .cp-imageOverlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
 }
-.overlayImg {
+.card-primary .cp-overlayImg {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1039,7 +1015,7 @@
   object-fit: cover;
   display: block;
 }
-.gradient {
+.card-primary .cp-gradient {
   position: absolute;
   inset: 0;
   background:
@@ -1049,8 +1025,8 @@
       transparent 54%);
 }
 
-/* components/Card/CardSecondaryVariant.module.css */
-.card {
+/* components/Card/CardSecondaryVariant.css */
+.card-secondary {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
@@ -1061,7 +1037,7 @@
   width: 100%;
   box-sizing: border-box;
 }
-.icon {
+.card-secondary .cs-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1070,7 +1046,7 @@
   flex-shrink: 0;
   color: var(--color-slate-1200);
 }
-.title {
+.card-secondary .cs-title {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -1079,7 +1055,7 @@
   margin: 0;
   width: 100%;
 }
-.description {
+.card-secondary .cs-description {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1088,34 +1064,15 @@
   margin: 0;
   width: 100%;
 }
-.link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-tight);
-  color: var(--link-coral-color);
-  text-decoration: none;
-  transition: opacity 150ms ease;
-}
-.link:hover {
-  opacity: 0.8;
-}
 
-/* components/Card/CardThumbnailVariant.module.css */
-.card {
+/* components/Card/CardThumbnailVariant.css */
+.card-thumbnail {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
   width: 100%;
 }
-.thumbnailWrapper {
+.card-thumbnail .ct-thumbnailWrapper {
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 3;
@@ -1123,7 +1080,7 @@
   overflow: hidden;
   flex-shrink: 0;
 }
-.thumbnailImage {
+.card-thumbnail .ct-thumbnailImage {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1133,7 +1090,7 @@
   pointer-events: none;
   display: block;
 }
-.playButton {
+.card-thumbnail .ct-playButton {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1145,7 +1102,7 @@
   height: var(--spacing-80);
   pointer-events: none;
 }
-.avatar {
+.card-thumbnail .ct-avatar {
   position: absolute;
   bottom: var(--spacing-24);
   right: var(--spacing-24);
@@ -1155,13 +1112,13 @@
   object-fit: cover;
   display: block;
 }
-.content {
+.card-thumbnail .ct-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
   width: 100%;
 }
-.metaRow {
+.card-thumbnail .ct-metaRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1169,14 +1126,14 @@
   flex-wrap: wrap;
   gap: var(--spacing-12);
 }
-.tagsList {
+.card-thumbnail .ct-tagsList {
   display: flex;
   align-items: center;
   gap: var(--spacing-12);
   flex: 1 0 0;
   min-width: 0;
 }
-.copyLink {
+.card-thumbnail .ct-copyLink {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1192,10 +1149,10 @@
   flex-shrink: 0;
   transition: background-color 100ms ease;
 }
-.copyLink:hover {
+.card-thumbnail .ct-copyLink:hover {
   background-color: var(--tag-fill-background);
 }
-.title {
+.card-thumbnail .ct-title {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -1205,7 +1162,7 @@
   text-overflow: ellipsis;
   margin: 0;
 }
-.summary {
+.card-thumbnail .ct-summary {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1216,13 +1173,13 @@
   margin: 0;
 }
 
-/* primitives/Pagination/Pagination.module.css */
+/* primitives/Pagination/Pagination.css */
 .pagination {
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
 }
-.pageButton {
+.pagination .pageButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1244,17 +1201,17 @@
   outline: none;
   box-sizing: border-box;
 }
-.pageButton:focus-visible {
+.pagination .pageButton:focus-visible {
   outline: 2px solid var(--color-blue-600);
   outline-offset: 2px;
 }
-.pageButtonSelected {
+.pagination .pageButtonSelected {
   background: var(--pagination-page-selected-bg);
   color: var(--pagination-page-selected-text);
   border-radius: var(--pagination-page-radius);
   cursor: default;
 }
-.ellipsis {
+.pagination .ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1268,7 +1225,7 @@
   line-height: 1.375rem;
   user-select: none;
 }
-.navButton {
+.pagination .navButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1284,16 +1241,16 @@
   outline: none;
   box-sizing: border-box;
 }
-.navButton:focus-visible {
+.pagination .navButton:focus-visible {
   outline: 2px solid var(--color-blue-600);
   outline-offset: 2px;
   border-radius: var(--radius-md);
 }
-.navButtonDisabled {
+.pagination .navButtonDisabled {
   color: var(--pagination-nav-icon-disabled);
   cursor: not-allowed;
 }
-.navIcon {
+.pagination .navIcon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1301,4 +1258,71 @@
   height: var(--spacing-16);
   flex-shrink: 0;
 }
+
+/* templates/FeatureCards/FeatureCards.css */
+.fc-section {
+  width: 100%;
+  background-color: var(--color-slate-50);
+}
+.fc-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .fc-container {
+    padding: var(--spacing-112) var(--spacing-56);
+  }
+}
+.fc-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .fc-header {
+    align-items: center;
+    text-align: center;
+  }
+}
+.fc-sectionTitle {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-4xl);
+  color: var(--color-slate-1200);
+  margin: 0;
+}
+.fc-sectionDescription {
+  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(--color-slate-1200);
+  margin: 0;
+  max-width: 640px;
+}
+.fc-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .fc-grid {
+    flex-direction: row;
+    gap: var(--spacing-24);
+    align-items: stretch;
+  }
+  .fc-grid > * {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
 /*# sourceMappingURL=index.css.map */