mautourco-components 0.2.5 → 0.2.7

package/dist/components/atoms/Button/Button.css

@@ -559,15 +559,15 @@
   --border-radius-rounded-tr-none: 0px;
   --border-radius-rounded-tr-xl: 12px;
   --border-radius-rounded-xl: 12px;
-  --font-weight-font-black: 900px;
-  --font-weight-font-bold: 700px;
-  --font-weight-font-extrabold: 800px;
-  --font-weight-font-extralight: 200px;
-  --font-weight-font-light: 300px;
-  --font-weight-font-medium: 500px;
-  --font-weight-font-normal: 400px;
-  --font-weight-font-semibold: 600px;
-  --font-weight-font-thin: 100px;
+  --font-weight-font-black: 900;
+  --font-weight-font-bold: 700;
+  --font-weight-font-extrabold: 800;
+  --font-weight-font-extralight: 200;
+  --font-weight-font-light: 300;
+  --font-weight-font-medium: 500;
+  --font-weight-font-normal: 400;
+  --font-weight-font-semibold: 600;
+  --font-weight-font-thin: 100;
   --font-leading-leading-base: 16px;
   --font-leading-leading-xxs: 14px;
   --font-leading-leading-xxxs: 12px;
@@ -1092,116 +1092,116 @@
   --backdrop-blur-backdrop-blur-none: 0px;
   --backdrop-blur-backdrop-blur-sm: 4px;
   --backdrop-blur-backdrop-blur-xl: 24px;
-  --heading-3xl-light: 300px 72px/72px satoshi;
-  --heading-3xl-regular: 400px 72px/72px satoshi;
-  --heading-3xl-medium: 500px 72px/72px satoshi;
-  --heading-3xl-bold: 700px 72px/72px satoshi;
-  --heading-3xl-black: 900px 72px/72px satoshi;
-  --heading-2xl-light: 300px 60px/64px satoshi;
-  --heading-2xl-regular: 400px 60px/64px satoshi;
-  --heading-2xl-medium: 500px 60px/64px satoshi;
-  --heading-2xl-bold: 700px 60px/64px satoshi;
-  --heading-2xl-black: 900px 60px/64px satoshi;
-  --heading-xl-light: 300px 48px/52px satoshi;
-  --heading-xl-regular: 400px 48px/52px satoshi;
-  --heading-xl-medium: 500px 48px/52px satoshi;
-  --heading-xl-bold: 700px 48px/52px satoshi;
-  --heading-xl-black: 900px 48px/52px satoshi;
-  --heading-lg-light: 300px 36px/40px satoshi;
-  --heading-lg-regular: 400px 36px/40px satoshi;
-  --heading-lg-medium: 500px 36px/40px satoshi;
-  --heading-lg-bold: 700px 36px/40px satoshi;
-  --heading-lg-black: 900px 36px/40px satoshi;
-  --heading-md-light: 300px 30px/36px satoshi;
-  --heading-md-regular: 400px 30px/36px satoshi;
-  --heading-md-medium: 500px 30px/36px satoshi;
-  --heading-md-bold: 700px 30px/36px satoshi;
-  --heading-md-black: 900px 30px/36px satoshi;
-  --heading-md-leading-none-light: 300px 18px/32px satoshi;
-  --heading-md-leading-none-regular: 400px 18px/32px satoshi;
-  --heading-md-leading-none-medium: 500px 18px/32px satoshi;
-  --heading-md-leading-none-bold: 700px 18px/32px satoshi;
-  --heading-md-leading-none-black: 900px 18px/32px satoshi;
-  --heading-md-leading-6-light: 300px 18px/24px satoshi;
-  --heading-md-leading-6-regular: 400px 18px/24px satoshi;
-  --heading-md-leading-6-medium: 500px 18px/24px satoshi;
-  --heading-md-leading-6-bold: 700px 18px/24px satoshi;
-  --heading-md-leading-6-black: 900px 18px/24px satoshi;
-  --heading-md-leading-7-light: 300px 18px/28px satoshi;
-  --heading-md-leading-7-regular: 400px 18px/28px satoshi;
-  --heading-md-leading-7-medium: 500px 18px/28px satoshi;
-  --heading-md-leading-7-bold: 700px 18px/28px satoshi;
-  --heading-md-leading-7-black: 900px 18px/28px satoshi;
-  --heading-sm-light: 300px 24px/32px satoshi;
-  --heading-sm-regular: 400px 24px/32px satoshi;
-  --heading-sm-medium: 500px 24px/32px satoshi;
-  --heading-sm-bold: 700px 24px/32px satoshi;
-  --heading-sm-black: 900px 24px/32px satoshi;
-  --body-lg-leading-none-light: 300px 18px/18px satoshi;
-  --body-lg-leading-none-regular: 400px 18px/18px satoshi;
-  --body-lg-leading-none-medium: 500px 18px/18px satoshi;
-  --body-lg-leading-none-bold: 700px 18px/18px satoshi;
-  --body-lg-leading-none-black: 900px 18px/18px satoshi;
-  --body-lg-leading-6-light: 300px 18px/24px satoshi;
-  --body-lg-leading-6-regular: 400px 18px/24px satoshi;
-  --body-lg-leading-6-medium: 500px 18px/24px satoshi;
-  --body-lg-leading-6-bold: 700px 18px/24px satoshi;
-  --body-lg-leading-6-black: 900px 18px/24px satoshi;
-  --body-lg-leading-7-light: 300px 18px/28px satoshi;
-  --body-lg-leading-7-regular: 400px 18px/28px satoshi;
-  --body-lg-leading-7-medium: 500px 18px/28px satoshi;
-  --body-lg-leading-7-bold: 700px 18px/28px satoshi;
-  --body-lg-leading-7-black: 900px 18px/28px satoshi;
-  --body-md-leading-none-light: 300px 16px/16px satoshi;
-  --body-md-leading-none-regular: 400px 16px/16px satoshi;
-  --body-md-leading-none-medium: 500px 16px/16px satoshi;
-  --body-md-leading-none-bold: 700px 16px/16px satoshi;
-  --body-md-leading-none-black: 900px 16px/16px satoshi;
-  --body-md-leading-6-light: 300px 16px/24px satoshi;
-  --body-md-leading-6-regular: 400px 16px/24px satoshi;
-  --body-md-leading-6-medium: 500px 16px/24px satoshi;
-  --body-md-leading-6-bold: 700px 16px/24px satoshi;
-  --body-md-leading-6-black: 900px 16px/24px satoshi;
-  --body-md-leading-7-light: 300px 16px/28px satoshi;
-  --body-md-leading-7-regular: 400px 16px/28px satoshi;
-  --body-md-leading-7-medium: 500px 16px/28px satoshi;
-  --body-md-leading-7-bold: 700px 16px/28px satoshi;
-  --body-md-leading-7-black: 900px 16px/28px satoshi;
-  --heading-xs-light: 300px 24px/32px satoshi;
-  --heading-xs-regular: 400px 24px/32px satoshi;
-  --heading-xs-medium: 500px 24px/32px satoshi;
-  --heading-xs-bold: 700px 24px/32px satoshi;
-  --heading-xs-black: 900px 24px/32px satoshi;
-  --body-sm-leading-none-light: 300px 14px/14px satoshi;
-  --body-sm-leading-none-regular: 400px 14px/14px satoshi;
-  --body-sm-leading-none-medium: 500px 14px/14px satoshi;
-  --body-sm-leading-none-bold: 700px 14px/14px satoshi;
-  --body-sm-leading-none-black: 900px 14px/14px satoshi;
-  --body-sm-leading-5-light: 300px 14px/20px satoshi;
-  --body-sm-leading-5-regular: 400px 14px/20px satoshi;
-  --body-sm-leading-5-medium: 500px 14px/20px satoshi;
-  --body-sm-leading-5-bold: 700px 14px/20px satoshi;
-  --body-sm-leading-5-black: 900px 14px/20px satoshi;
-  --body-sm-leading-6-light: 300px 14px/24px satoshi;
-  --body-sm-leading-6-regular: 400px 14px/24px satoshi;
-  --body-sm-leading-6-medium: 500px 14px/24px satoshi;
-  --body-sm-leading-6-bold: 700px 14px/24px satoshi;
-  --body-sm-leading-6-black: 900px 14px/24px satoshi;
-  --body-xs-leading-none-light: 300px 12px/12px satoshi;
-  --body-xs-leading-none-regular: 400px 12px/12px satoshi;
-  --body-xs-leading-none-medium: 500px 12px/12px satoshi;
-  --body-xs-leading-none-bold: 700px 12px/12px satoshi;
-  --body-xs-leading-none-black: 900px 12px/12px satoshi;
-  --body-xs-leading-4-light: 300px 12px/16px satoshi;
-  --body-xs-leading-4-regular: 400px 12px/16px satoshi;
-  --body-xs-leading-4-medium: 500px 12px/16px satoshi;
-  --body-xs-leading-4-bold: 700px 12px/16px satoshi;
-  --body-xs-leading-4-black: 900px 12px/16px satoshi;
-  --body-xs-leading-5-light: 300px 12px/20px satoshi;
-  --body-xs-leading-5-regular: 400px 12px/20px satoshi;
-  --body-xs-leading-5-medium: 500px 12px/20px satoshi;
-  --body-xs-leading-5-bold: 700px 12px/20px satoshi;
-  --body-xs-leading-5-black: 900px 12px/20px satoshi;
+  --heading-3xl-light: [object Object];
+  --heading-3xl-regular: [object Object];
+  --heading-3xl-medium: [object Object];
+  --heading-3xl-bold: [object Object];
+  --heading-3xl-black: [object Object];
+  --heading-2xl-light: [object Object];
+  --heading-2xl-regular: [object Object];
+  --heading-2xl-medium: [object Object];
+  --heading-2xl-bold: [object Object];
+  --heading-2xl-black: [object Object];
+  --heading-xl-light: [object Object];
+  --heading-xl-regular: [object Object];
+  --heading-xl-medium: [object Object];
+  --heading-xl-bold: [object Object];
+  --heading-xl-black: [object Object];
+  --heading-lg-light: [object Object];
+  --heading-lg-regular: [object Object];
+  --heading-lg-medium: [object Object];
+  --heading-lg-bold: [object Object];
+  --heading-lg-black: [object Object];
+  --heading-md-light: [object Object];
+  --heading-md-regular: [object Object];
+  --heading-md-medium: [object Object];
+  --heading-md-bold: [object Object];
+  --heading-md-black: [object Object];
+  --heading-md-leading-none-light: [object Object];
+  --heading-md-leading-none-regular: [object Object];
+  --heading-md-leading-none-medium: [object Object];
+  --heading-md-leading-none-bold: [object Object];
+  --heading-md-leading-none-black: [object Object];
+  --heading-md-leading-6-light: [object Object];
+  --heading-md-leading-6-regular: [object Object];
+  --heading-md-leading-6-medium: [object Object];
+  --heading-md-leading-6-bold: [object Object];
+  --heading-md-leading-6-black: [object Object];
+  --heading-md-leading-7-light: [object Object];
+  --heading-md-leading-7-regular: [object Object];
+  --heading-md-leading-7-medium: [object Object];
+  --heading-md-leading-7-bold: [object Object];
+  --heading-md-leading-7-black: [object Object];
+  --heading-sm-light: [object Object];
+  --heading-sm-regular: [object Object];
+  --heading-sm-medium: [object Object];
+  --heading-sm-bold: [object Object];
+  --heading-sm-black: [object Object];
+  --body-lg-leading-none-light: [object Object];
+  --body-lg-leading-none-regular: [object Object];
+  --body-lg-leading-none-medium: [object Object];
+  --body-lg-leading-none-bold: [object Object];
+  --body-lg-leading-none-black: [object Object];
+  --body-lg-leading-6-light: [object Object];
+  --body-lg-leading-6-regular: [object Object];
+  --body-lg-leading-6-medium: [object Object];
+  --body-lg-leading-6-bold: [object Object];
+  --body-lg-leading-6-black: [object Object];
+  --body-lg-leading-7-light: [object Object];
+  --body-lg-leading-7-regular: [object Object];
+  --body-lg-leading-7-medium: [object Object];
+  --body-lg-leading-7-bold: [object Object];
+  --body-lg-leading-7-black: [object Object];
+  --body-md-leading-none-light: [object Object];
+  --body-md-leading-none-regular: [object Object];
+  --body-md-leading-none-medium: [object Object];
+  --body-md-leading-none-bold: [object Object];
+  --body-md-leading-none-black: [object Object];
+  --body-md-leading-6-light: [object Object];
+  --body-md-leading-6-regular: [object Object];
+  --body-md-leading-6-medium: [object Object];
+  --body-md-leading-6-bold: [object Object];
+  --body-md-leading-6-black: [object Object];
+  --body-md-leading-7-light: [object Object];
+  --body-md-leading-7-regular: [object Object];
+  --body-md-leading-7-medium: [object Object];
+  --body-md-leading-7-bold: [object Object];
+  --body-md-leading-7-black: [object Object];
+  --heading-xs-light: [object Object];
+  --heading-xs-regular: [object Object];
+  --heading-xs-medium: [object Object];
+  --heading-xs-bold: [object Object];
+  --heading-xs-black: [object Object];
+  --body-sm-leading-none-light: [object Object];
+  --body-sm-leading-none-regular: [object Object];
+  --body-sm-leading-none-medium: [object Object];
+  --body-sm-leading-none-bold: [object Object];
+  --body-sm-leading-none-black: [object Object];
+  --body-sm-leading-5-light: [object Object];
+  --body-sm-leading-5-regular: [object Object];
+  --body-sm-leading-5-medium: [object Object];
+  --body-sm-leading-5-bold: [object Object];
+  --body-sm-leading-5-black: [object Object];
+  --body-sm-leading-6-light: [object Object];
+  --body-sm-leading-6-regular: [object Object];
+  --body-sm-leading-6-medium: [object Object];
+  --body-sm-leading-6-bold: [object Object];
+  --body-sm-leading-6-black: [object Object];
+  --body-xs-leading-none-light: [object Object];
+  --body-xs-leading-none-regular: [object Object];
+  --body-xs-leading-none-medium: [object Object];
+  --body-xs-leading-none-bold: [object Object];
+  --body-xs-leading-none-black: [object Object];
+  --body-xs-leading-4-light: [object Object];
+  --body-xs-leading-4-regular: [object Object];
+  --body-xs-leading-4-medium: [object Object];
+  --body-xs-leading-4-bold: [object Object];
+  --body-xs-leading-4-black: [object Object];
+  --body-xs-leading-5-light: [object Object];
+  --body-xs-leading-5-regular: [object Object];
+  --body-xs-leading-5-medium: [object Object];
+  --body-xs-leading-5-bold: [object Object];
+  --body-xs-leading-5-black: [object Object];
   --radii-input: 8px;
   --radii-date-input: 12px;
   --radii-button: 9999px;
@@ -2075,204 +2075,204 @@
 }
 
 
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--component-button-spacing-sm-gap, 4rem);
-  padding: 0;
-  border: none;
-  border-radius: var(--border-radius-rounded-full, 9999rem);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  -webkit-user-select: none;
-          user-select: none;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-  font-weight: var(--font-weight-font-bold, 700);
-  font-size: var(--font-size-text-sm, 14rem);
-  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
-  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out,
-    transform 0.15s ease-in-out,
-    opacity 0.2s ease-in-out;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-.button--sm {
-  padding: var(--component-button-spacing-sm-padding-y, 8rem)
-    var(--component-button-spacing-sm-padding-x, 12rem);
-  gap: var(--component-button-spacing-sm-gap, 4rem);
-  font-size: var(--font-size-text-sm, 14rem);
-  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
-}
-
-.button--md {
-  padding: var(--component-button-spacing-md-padding-y, 10rem)
-    var(--component-button-spacing-md-padding-x, 14rem);
-  gap: var(--component-button-spacing-md-gap, 10rem);
-  font-size: var(--font-size-text-base, 16rem);
-  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
-  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
-}
-
-.button--lg {
-  padding: var(--component-button-spacing-lg-padding-y, 10rem)
-    var(--component-button-spacing-lg-padding-x, 64rem);
-  gap: var(--component-button-spacing-lg-gap, 6rem);
-  font-size: var(--font-size-text-lg, 18rem);
-  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
-  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
-}
-
-.button--xl {
-  padding: var(--component-button-spacing-xl-padding-y, 12rem)
-    var(--component-button-spacing-xl-padding-x, 16rem);
-  gap: var(--component-button-spacing-xl-gap, 6rem);
-  font-size: var(--font-size-text-base, 16rem);
-  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
-  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
-}
-
-.button__label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.button__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-
-.button--primary {
-  background-color: var(--color-button-brand-background-primary-default, #fe8839);
-  color: var(--color-button-brand-foreground-primary-default, #ffffff);
-}
-
-.button--primary:hover:not(:disabled) {
-  background-color: var(--color-button-brand-background-primary-hover, #fc6613);
-}
-
-.button--primary:active:not(:disabled) {
-  background-color: var(--color-button-brand-background-primary-pressed, #ed4c09);
-}
-
-.button--primary:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2rem
-    var(--color-button-brand-background-primary-focused, #ed4c09);
-}
-
-.button--primary:disabled {
-  background-color: var(--color-button-brand-background-primary-disabled, #f5f5f5);
-  color: var(--color-button-brand-foreground-primary-disabled, #a3a3a3);
-}
-
-.button--secondary {
-  background-color: var(--color-button-brand-background-secondary-default, #0d9394);
-  color: var(--color-button-brand-foreground-secondary-default, #ffffff);
-}
-
-.button--outline-primary {
-  background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
-  color: var(--component-button-color-outline-primary-foreground-default, #fe8839);
-  border: var(--border-width-input, 1rem) solid
-    var(--component-button-color-outline-primary-border-default, #fe8839);
-}
-
-.button--outline-primary:hover:not(:disabled) {
-  background-color: var(--component-button-color-outline-primary-background-hover, #fff6ed);
-  border-color: var(--component-button-color-outline-primary-border-hover, #fc6613);
-}
-
-.button--outline-primary:active:not(:disabled) {
-  background-color: var(--component-button-color-outline-primary-background-pressed, #ffebd4);
-  border-color: var(--component-button-color-outline-primary-border-pressed, #ed4c09);
-}
-
-.button--outline-primary:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2rem
-    var(--component-button-color-outline-primary-background-focused, #ffebd4);
-}
-
-.button--outline-primary:disabled {
-  background-color: var(--component-button-color-outline-primary-background-disabled, #ffffff);
-  color: var(--component-button-color-outline-primary-foreground-disabled, #a3a3a3);
-  border-color: var(--component-button-color-outline-primary-border-default, #fe8839);
-}
-
-.button--outline-secondary {
-  background-color: var(--component-button-color-outline-secondary-background-default, #ffffff);
-  color: var(--component-button-color-outline-secondary-foreground-default, #0d9394);
-  border: var(--border-width-input, 1rem) solid
-    var(
-      --component-button-color-outline-secondary-border-default,
-      var(--component-button-color-outline-secondary-foreground-default, #0d9394)
-    );
-}
-
-.button--outline-secondary:hover:not(:disabled) {
-  background-color: var(
-    --component-button-color-outline-secondary-background-hover,
-    var(--button-color-outline-secondary-background-hover, #f0fdfb)
-  );
-  border-color: var(
-    --component-button-color-outline-secondary-border-hover,
-    #0f7173
-  );
-}
-
-.button--outline-secondary:active:not(:disabled) {
-  background-color: var(
-    --component-button-color-outline-secondary-background-pressed,
-    var(--button-color-outline-secondary-background-pressed, #ccfbf6)
-  );
-  border-color: var(
-    --component-button-color-outline-secondary-border-pressed,
-    #115b5e
-  );
-}
-
-.button--outline-secondary:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2rem
-    var(--component-button-color-outline-secondary-background-focused, #ffffff);
-}
-
-.button--outline-secondary:disabled {
-  background-color: var(--component-button-color-outline-secondary-background-disabled, #ffffff);
-  color: var(--component-button-color-outline-secondary-foreground-disabled, #a3a3a3);
-  border-color: var(--component-button-color-outline-secondary-border-default, var(--component-button-color-outline-secondary-foreground-default, #0d9394));
-}
-
-.button--secondary:hover:not(:disabled) {
-  background-color: var(--color-button-brand-background-secondary-hover, #0f7173);
-}
-
-.button--secondary:active:not(:disabled) {
-  background-color: var(--color-button-brand-background-secondary-pressed, #042c2f);
-}
-
-.button--secondary:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2rem
-    var(--color-button-brand-background-secondary-focused, #042c2f);
-}
-
-.button--secondary:disabled {
-  background-color: var(--color-button-brand-background-secondary-disabled, #f5f5f5);
-  color: var(--color-button-brand-foreground-secondary-disabled, #a3a3a3);
-}
-
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--component-button-spacing-sm-gap, 4rem);
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-rounded-full, 9999rem);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-user-select: none;
+          user-select: none;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.15s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.button--sm {
+  padding: var(--component-button-spacing-sm-padding-y, 8rem)
+    var(--component-button-spacing-sm-padding-x, 12rem);
+  gap: var(--component-button-spacing-sm-gap, 4rem);
+  font-size: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+}
+
+.button--md {
+  padding: var(--component-button-spacing-md-padding-y, 10rem)
+    var(--component-button-spacing-md-padding-x, 14rem);
+  gap: var(--component-button-spacing-md-gap, 10rem);
+  font-size: var(--font-size-text-base, 16rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button--lg {
+  padding: var(--component-button-spacing-lg-padding-y, 10rem)
+    var(--component-button-spacing-lg-padding-x, 64rem);
+  gap: var(--component-button-spacing-lg-gap, 6rem);
+  font-size: var(--font-size-text-lg, 18rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button--xl {
+  padding: var(--component-button-spacing-xl-padding-y, 12rem)
+    var(--component-button-spacing-xl-padding-x, 16rem);
+  gap: var(--component-button-spacing-xl-gap, 6rem);
+  font-size: var(--font-size-text-base, 16rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.button--primary {
+  background-color: var(--color-button-brand-background-primary-default, #fe8839);
+  color: var(--color-button-brand-foreground-primary-default, #ffffff);
+}
+
+.button--primary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-hover, #fc6613);
+}
+
+.button--primary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-pressed, #ed4c09);
+}
+
+.button--primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--color-button-brand-background-primary-focused, #ed4c09);
+}
+
+.button--primary:disabled {
+  background-color: var(--color-button-brand-background-primary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-primary-disabled, #a3a3a3);
+}
+
+.button--secondary {
+  background-color: var(--color-button-brand-background-secondary-default, #0d9394);
+  color: var(--color-button-brand-foreground-secondary-default, #ffffff);
+}
+
+.button--outline-primary {
+  background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-default, #fe8839);
+  border: var(--border-width-input, 1rem) solid
+    var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-primary:hover:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-hover, #fff6ed);
+  border-color: var(--component-button-color-outline-primary-border-hover, #fc6613);
+}
+
+.button--outline-primary:active:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-pressed, #ffebd4);
+  border-color: var(--component-button-color-outline-primary-border-pressed, #ed4c09);
+}
+
+.button--outline-primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--component-button-color-outline-primary-background-focused, #ffebd4);
+}
+
+.button--outline-primary:disabled {
+  background-color: var(--component-button-color-outline-primary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-secondary {
+  background-color: var(--component-button-color-outline-secondary-background-default, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-default, #0d9394);
+  border: var(--border-width-input, 1rem) solid
+    var(
+      --component-button-color-outline-secondary-border-default,
+      var(--component-button-color-outline-secondary-foreground-default, #0d9394)
+    );
+}
+
+.button--outline-secondary:hover:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-hover,
+    var(--button-color-outline-secondary-background-hover, #f0fdfb)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-hover,
+    #0f7173
+  );
+}
+
+.button--outline-secondary:active:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-pressed,
+    var(--button-color-outline-secondary-background-pressed, #ccfbf6)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-pressed,
+    #115b5e
+  );
+}
+
+.button--outline-secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--component-button-color-outline-secondary-background-focused, #ffffff);
+}
+
+.button--outline-secondary:disabled {
+  background-color: var(--component-button-color-outline-secondary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-secondary-border-default, var(--component-button-color-outline-secondary-foreground-default, #0d9394));
+}
+
+.button--secondary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-hover, #0f7173);
+}
+
+.button--secondary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-pressed, #042c2f);
+}
+
+.button--secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--color-button-brand-background-secondary-focused, #042c2f);
+}
+
+.button--secondary:disabled {
+  background-color: var(--color-button-brand-background-secondary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-secondary-disabled, #a3a3a3);
+}
+