@deriv-web-design/ui 0.0.22 → 0.0.24

package/dist/index.css

@@ -370,14 +370,14 @@
   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);
@@ -391,31 +391,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__focus-ring {
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.titleWrapper {
+.accordion__title-wrapper {
   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;
@@ -425,21 +425,21 @@
   color: var(--accordion-chevron-color);
   transition: transform 200ms ease;
 }
-.chevronRotated {
+.accordion__chevron--rotated {
   transform: rotate(180deg);
 }
-.bodyWrapper {
+.accordion__body-wrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms ease;
 }
-.bodyWrapperOpen {
+.accordion__body-wrapper--open {
   grid-template-rows: 1fr;
 }
-.bodyInner {
+.accordion__body-inner {
   overflow: hidden;
 }
-.body {
+.accordion__body {
   padding-bottom: var(--spacing-24);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
@@ -1548,17 +1548,17 @@
   font-weight: var(--font-weight-regular);
 }
 
-/* templates/FaqAccordion/FaqAccordion.module.css */
-.section {
+/* templates/FaqAccordion/FaqAccordion.css */
+.faq-accordion {
   width: 100%;
 }
-.section--white {
+.faq-accordion--white {
   background-color: var(--color-slate-50);
 }
-.section--slate {
+.faq-accordion--slate {
   background-color: var(--color-slate-75);
 }
-.container {
+.faq-accordion__container {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
@@ -1569,12 +1569,12 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .container {
+  .faq-accordion__container {
     gap: var(--spacing-48);
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.header {
+.faq-accordion__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1582,12 +1582,12 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .header {
+  .faq-accordion__header {
     align-items: center;
     gap: var(--spacing-24);
   }
 }
-.title {
+.faq-accordion__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -1597,16 +1597,16 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .title {
+  .faq-accordion__title {
     text-align: center;
   }
 }
-.list {
+.faq-accordion__list {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.list > * {
+.faq-accordion__list > * {
   max-width: 100%;
 }
 
@@ -1979,12 +1979,12 @@
   }
 }
 
-/* templates/FeatureBullets/FeatureBullets.module.css */
-.section {
+/* templates/FeatureBullets/FeatureBullets.css */
+.feature-bullets {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.container {
+.feature-bullets__container {
   display: flex;
   flex-direction: column;
   max-width: var(--content-width-1280);
@@ -1994,11 +1994,11 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .container {
+  .feature-bullets__container {
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.split {
+.feature-bullets__split {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2006,16 +2006,16 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .split {
+  .feature-bullets__split {
     flex-direction: row;
     align-items: center;
     gap: 8rem;
   }
-  .split--image-left {
+  .feature-bullets__split--image-left {
     flex-direction: row-reverse;
   }
 }
-.content {
+.feature-bullets__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -2023,13 +2023,13 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .content {
+  .feature-bullets__content {
     gap: var(--spacing-32);
     width: 540px;
     flex-shrink: 0;
   }
 }
-.title {
+.feature-bullets__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -2037,26 +2037,26 @@
   color: var(--text-primary);
   margin: 0;
 }
-.bulletList {
+.feature-bullets__bullet-list {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.bulletItem {
+.feature-bullets__bullet-item {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-16);
   padding: var(--spacing-16) 0;
   border-bottom: 1px solid var(--color-slate-100);
 }
-.bulletItem:first-child {
+.feature-bullets__bullet-item:first-child {
   padding-top: 0;
 }
-.bulletItem:last-child {
+.feature-bullets__bullet-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }
-.iconWrapper {
+.feature-bullets__icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2066,12 +2066,12 @@
   color: var(--color-slate-1200);
   margin-top: 2px;
 }
-.icon {
+.feature-bullets__icon {
   width: 100%;
   height: 100%;
   display: block;
 }
-.bulletText {
+.feature-bullets__bullet-text {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -2079,7 +2079,7 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.imageWrapper {
+.feature-bullets__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-2xl);
@@ -2089,13 +2089,13 @@
   background-color: transparent;
 }
 @media (min-width: 992px) {
-  .imageWrapper {
+  .feature-bullets__image-wrapper {
     flex: 1 0 0;
     width: auto;
     border-radius: 2rem;
   }
 }
-.image {
+.feature-bullets__image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -6277,12 +6277,12 @@
   }
 }
 
-/* templates/Leaders/Leaders.module.css */
-.section {
+/* templates/Leaders/Leaders.css */
+.leaders {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.container {
+.leaders__container {
   display: flex;
   flex-direction: column;
   max-width: var(--content-width-1280);
@@ -6294,12 +6294,12 @@
   gap: var(--spacing-48);
 }
 @media (min-width: 992px) {
-  .container {
+  .leaders__container {
     padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-80);
   }
 }
-.header {
+.leaders__header {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6307,7 +6307,7 @@
   width: 100%;
   max-width: var(--content-width-846);
 }
-.title {
+.leaders__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -6315,38 +6315,38 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.gridWrapper {
+.leaders__grid-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.grid {
+.leaders__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-24);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .grid {
+  .leaders__grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .grid {
+  .leaders__grid {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--spacing-32);
   }
 }
-.extraCards {
+.leaders__extra-cards {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   width: 100%;
 }
-.extraCardsOpen {
+.leaders__extra-cards--open {
   grid-template-rows: 1fr;
 }
-.extraGrid {
+.leaders__extra-grid {
   min-height: 0;
   overflow: hidden;
   display: grid;
@@ -6355,27 +6355,27 @@
   padding-top: var(--spacing-24);
 }
 @media (min-width: 768px) {
-  .extraGrid {
+  .leaders__extra-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .extraGrid {
+  .leaders__extra-grid {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--spacing-32);
     padding-top: var(--spacing-32);
   }
 }
-.extraCard {
+.leaders__extra-card {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.extraCardVisible {
+.leaders__extra-card--visible {
   opacity: 1;
   transform: translateY(0);
 }
-.card {
+.leaders__card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -6384,7 +6384,7 @@
   border-radius: var(--radius-2xl);
   width: 100%;
 }
-.imageWrapper {
+.leaders__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-2xl);
@@ -6392,7 +6392,7 @@
   position: relative;
   background-color: var(--color-slate-100);
 }
-.image {
+.leaders__image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -6401,14 +6401,14 @@
   object-position: center;
   display: block;
 }
-.content {
+.leaders__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-8);
   width: 100%;
 }
-.name {
+.leaders__name {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -6416,7 +6416,7 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.role {
+.leaders__role {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -6424,16 +6424,16 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.link {
+.leaders__link {
   margin-top: calc(var(--spacing-8) * -1);
 }
-.link :global(.icon) {
+.leaders__link .icon {
   color: #0072B1 !important;
 }
-.link:hover :global(.icon) {
+.leaders__link:hover .icon {
   color: #005582 !important;
 }
-.actions {
+.leaders__actions {
   display: flex;
   justify-content: center;
   width: 100%;