@cobre-npm/ds-v3 0.5.0 → 0.6.0

package/dist/tokens/_components.scss

@@ -1,1219 +1,829 @@
+// DS
+
 /**
- * HEADER
- */
+* INPUT
+*/
 
- :root {
-    --cobre-header-bg: var(--cobre-primary-5);
-    --cobre-header-border-bottom: 1px solid #ebebeb;
-    --cobre-header-shadow: 0 0 0 1px var(--cobre-header-border-color);
-    --cobre-header-height: 56px;
-    --cobre-header-menu-bg: var(--cobre-white);
-    --cobre-header-icon-color: var(--cobre-primary-95);
-
-    // Item
-    --cobre-header-item-font-family: 'Inter', sans-serif;
-    --cobre-header-item-font-size: initial;
-    --cobre-header-item-bg: transparent;
-    --cobre-header-item-color: var(--cobre-primary-95);
-    --cobre-header-item-hover-bg: var(--cobre-primary-7);
-    --cobre-header-item-hover-color: var(--cobre-secondary);
-    --cobre-header-item-padding-x: 12px;
-    --cobre-header-item-min-width: initial;
-
-    // Active Item
-    --cobre-header-item-active-radius: 0px;
-    --cobre-header-item-active-bg: transparent;
-    --cobre-header-item-active-color: var(--cobre-secondary-50);
-
-    // Desktop Item
-    --cobre-header-desktop-item-bg: transparent;
-    --cobre-header-desktop-item-hover-bg: var(--cobre-primary-7);
-    --cobre-header-desktop-item-color: var(--cobre-primary-95);
-    --cobre-header-desktop-item-padding-x: 2px;
-
-    // Desktop Active Item
-    --cobre-header-desktop-item-active-radius: 8px;
-    --cobre-header-desktop-item-active-bg: transparent;
-    --cobre-header-desktop-item-active-color: var(--cobre-secondary-50);
-    --cobre-header-desktop-item-active-hover-color: var(--cobre-secondary-50);
-  }
-
-  /**
-   * BUTTONS
-   */
+:root {
+  --cobre-input-height: 32px;
+  --cobre-input-bg: transparent;
+  --cobre-input-color: var(--cobre-primary-95);
+  --cobre-input-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-input-placeholder-color: var(--cobre-primary-50);
+  --cobre-input-radius: var(--cobre-radius-XS);
+  --cobre-input-fs: var(--cobre-label-small-fs);
+  --cobre-optional-label-fs: var(--cobre-label-small-fs);
 
-  :root {
-    // Generals
-    --cobre-btn-radius: 8px;
-    --cobre-btn-font-family: 'Inter', sans-serif;
-    --cobre-btn-font-size: 14.22px;
-
-    // By Sizes
-    --cobre-btn-small-height: 40px;
-    --cobre-btn-small-min-width: 176px;
-
-    --cobre-btn-medium-height: 40px;
-    --cobre-btn-medium-min-width: 176px;
-
-    --cobre-btn-big-height: 52px;
-    --cobre-btn-big-min-width: 176px;
-
-    --cobre-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--cobre-secondary-50-rgba), .5);
-
-    // Primary
-    --cobre-btn-primary-bg: var(--cobre-primary-95);
-    --cobre-btn-primary-color: var(--cobre-white);
-    --cobre-btn-primary-hover-bg: var(--cobre-primary-80);
-    --cobre-btn-primary-active-bg: var(--cobre-primary-60);
-    --cobre-btn-primary-focus-bg: var(--cobre-primary-95);
-    --cobre-btn-primary-disabled-bg: var(--cobre-primary-20);
-
-    // Secondary
-    --cobre-btn-secondary-bg: transparent;
-    --cobre-btn-secondary-border: 1px solid var(--cobre-primary-20);
-    --cobre-btn-secondary-color: var(--cobre-primary-95);
-    --cobre-btn-secondary-hover-bg: var(--cobre-primary-10);
-    --cobre-btn-secondary-active-bg: var(--cobre-primary-20);
-    --cobre-btn-secondary-focus-bg: var(--cobre-white);
-    --cobre-btn-secondary-disabled-bg: var(--cobre-white);
-    --cobre-btn-secondary-disabled-color: var(--cobre-primary-30);
-
-    // Single
-    --cobre-btn-single-bg: transparent;
-    --cobre-btn-single-color: var(--cobre-secondary-50);
-    --cobre-btn-single-hover-bg: var(--cobre-header-item-hover-bg);
-    --cobre-btn-single-hover-color: var(--cobre-secondary-80);
-    --cobre-btn-single-disabled-bg: none;
-    --cobre-btn-single-disabled-color: var(--cobre-primary-20);
-    --cobre-btn-single-padding-x: 8px;
-    --cobre-btn-single-padding-y: 2px;
-
-    // Ghost
-    --cobre-btn-ghost-bg: transparent;
-    --cobre-btn-ghost-color: var(--cobre-secondary-50);
-    --cobre-btn-ghost-hover-bg: transparent;
-    --cobre-btn-ghost-hover-color: var(--cobre-secondary-80);
-    --cobre-btn-ghost-active-color: var(--cobre-secondary-70);
-    --cobre-btn-ghost-focus-color: var(--cobre-secondary-50);
-    --cobre-btn-ghost-disabled-color: var(--cobre-primary-20);
-
-    // Link
-    --cobre-btn-link-bg: transparent;
-    --cobre-btn-link-color: var(--cobre-secondary-50);
-    --cobre-btn-link-fw: 600;
-    --cobre-btn-link-hover-bg: transparent;
-    --cobre-btn-link-hover-color: var(--cobre-secondary-80);
-    --cobre-btn-link-active-color: var(--cobre-secondary-70);
-    --cobre-btn-link-focus-color: var(--cobre-secondary-50);
-    --cobre-btn-link-disabled-color: var(--cobre-primary-20);
-  }
-
-  /**
-   * BUTTONS V3
-   */
+  --cobre-input-error-border: var(--cobre-border-stroke-M) solid var(--cobre-red-50);
+  --cobre-input-error-color: var(--cobre-red-50);
+  --cobre-input-error-fs: var(--cobre-label-small-fs);
 
-   :root {
-    // Generals
-    --cobre-btn-v3-radius: 999px;
-    --cobre-btn-v3-font-family: 'Inter', sans-serif;
-    --cobre-btn-v3-font-size: 14px;
-    --cobre-btn-v3-small-font-size: 12px;
-    --cobre-btn-v3-padding: 0 8px;
-
-    // By Sizes
-    --cobre-btn-v3-small-height: 32px;
-
-    --cobre-btn-v3-medium-height: 32px;
-
-    --cobre-btn-v3-big-height: 52px;
-
-     --cobre-btn-v3-icon-small: 16px;
-
-     --cobre-btn-v3-icon-medium: 20px;
-
-    // Primary
-    --cobre-btn-v3-primary-bg: var(--cobre-primary-95);
-    --cobre-btn-v3-primary-color: var(--cobre-white);
-    --cobre-btn-v3-primary-hover-bg: var(--cobre-primary-80);
-    --cobre-btn-v3-primary-active-bg: var(--cobre-primary-60);
-    --cobre-btn-v3-primary-focus-bg: var(--cobre-primary-95);
-    --cobre-btn-v3-primary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-primary-disabled-bg: var(--cobre-primary-20);
-
-    // Secondary
-    --cobre-btn-v3-secondary-bg: transparent;
-    --cobre-btn-v3-secondary-border: 0.5px solid var(--cobre-primary-20);
-    --cobre-btn-v3-secondary-color: var(--cobre-primary-95);
-    --cobre-btn-v3-secondary-hover-bg: var(--cobre-primary-10);
-    --cobre-btn-v3-secondary-active-bg: var(--cobre-primary-20);
-    --cobre-btn-v3-secondary-active-border: 1px solid var(--cobre-primary-95);
-    --cobre-btn-v3-secondary-focus-border: 1px solid var(--cobre-brand);
-    --cobre-btn-v3-secondary-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-secondary-disabled-color: var(--cobre-primary-30);
-    --cobre-btn-v3-secondary-disabled-border: 0.5px solid var(--cobre-primary-20);
-
-    // Secondary Cloudy
-    --cobre-btn-v3-secondary-cloudy-bg: transparent;
-    --cobre-btn-v3-secondary-cloudy-border: 0.5px solid var(--cobre-primary-20);
-    --cobre-btn-v3-secondary-cloudy-color: var(--cobre-primary-95);
-    --cobre-btn-v3-secondary-cloudy-hover-bg: var(--cobre-primary-30);
-    --cobre-btn-v3-secondary-cloudy-active-bg: var(--cobre-primary-20);
-    --cobre-btn-v3-secondary-cloudy-active-border: 1px solid var(--cobre-primary-95);
-    --cobre-btn-v3-secondary-cloudy-focus-border: 1px solid var(--cobre-brand);
-    --cobre-btn-v3-secondary-cloudy-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-30);
-    --cobre-btn-v3-secondary-cloudy-disabled-border: 0.5px solid var(--cobre-primary-20);
-
-    // Ghost
-    --cobre-btn-v3-ghost-bg: transparent;
-    --cobre-btn-v3-ghost-color: var(--cobre-primary-95);
-    --cobre-btn-v3-ghost-hover-bg: transparent;
-    --cobre-btn-v3-ghost-hover-color: var(--cobre-secondary-50);
-    --cobre-btn-v3-ghost-active-color: var(--cobre-secondary-70);
-    --cobre-btn-v3-ghost-focus-color: var(--cobre-secondary-50);
-    --cobre-btn-v3-ghost-focus-border: 1px solid var(--cobre-brand);
-    --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-ghost-disabled-color: var(--cobre-primary-20);
-
-    // Ghost Teal
-    --cobre-btn-v3-ghost-teal-bg: transparent;
-    --cobre-btn-v3-ghost-teal-color: var(--cobre-secondary-30);
-    --cobre-btn-v3-ghost-teal-hover-bg: transparent;
-    --cobre-btn-v3-ghost-teal-hover-color: var(--cobre-secondary-40);
-    --cobre-btn-v3-ghost-teal-active-color: var(--cobre-secondary-50);
-    --cobre-btn-v3-ghost-teal-focus-color: var(--cobre-primary-80);
-    --cobre-btn-v3-ghost-teal-focus-border: 1px solid var(--cobre-brand);
-    --cobre-btn-v3-ghost-teal-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-ghost-teal-disabled-color: var(--cobre-primary-60);
-
-    // Link
-    --cobre-btn-v3-link-bg: transparent;
-    --cobre-btn-v3-link-color: var(--cobre-primary-95);
-    --cobre-btn-v3-link-fw: 500;
-    --cobre-btn-v3-link-hover-bg: transparent;
-    --cobre-btn-v3-link-hover-color: var(--cobre-secondary-50);
-    --cobre-btn-v3-link-active-color: var(--cobre-secondary-70);
-    --cobre-btn-v3-link-focus-color: var(--cobre-secondary-50);
-    --cobre-btn-v3-link-focus-border: 1px solid var(--cobre-brand);
-    --cobre-btn-v3-link-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-    --cobre-btn-v3-link-disabled-color: var(--cobre-secondary-20);
-
-     // Filter
-     --cobre-btn-v3-filter-radius: var(--cobre-radius-XS);
-     --cobre-btn-v3-filter-bg: transparent;
-     --cobre-btn-v3-filter-color: var(--cobre-primary-80);
-     --cobre-btn-v3-filter-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
-     --cobre-btn-v3-filter-padding: 0 8px;
-     --cobre-btn-v3-filter-height: 24px;
-     --cobre-btn-v3-filter-fs: var(--cobre-label-small-fs);
-     --cobre-btn-v3-filter-lh: var(--cobre-label-small-lh);
-     --cobre-btn-v3-filter-hover-bg: var(--cobre-white);
-     --cobre-btn-v3-filter-active-bg: var(--cobre-primary-30);
-     --cobre-btn-v3-filter-focus-bg: var(--cobre-secondary-5);
-     --cobre-btn-v3-filter-focus-border-color: var(--cobre-secondary-50);
-     --cobre-btn-v3-filter-font-weight: 400;
-     --cobre-btn-v3-filter-width: fit-content;
-
-     // Chip
-     --cobre-btn-v3-chip-height: 20px;
-     --cobre-btn-v3-chip-radius: var(--cobre-radius-full);
-     --cobre-btn-v3-chip-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
-     --cobre-btn-v3-chip-bg: var(--cobre-white);
-     --cobre-btn-v3-chip-color: var(--cobre-primary-80);
-     --cobre-btn-v3-chip-padding: 0 4px;
-     --cobre-btn-v3-chip-fs: 12px;
-     --cobre-btn-v3-chip-fw: 400;
-     --cobre-btn-v3-chip-hover-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
-     --cobre-btn-v3-chip-hover-bg: var(--cobre-secondary-10);
-     --cobre-btn-v3-chip-disabled-bg: transparent;
-     --cobre-btn-v3-chip-disabled-color: var(--cobre-primary-60);
-
-     // Icon
-     --cobre-btn-v3-icon-fs: transparent;
-     --cobre-btn-v3-icon-bg: transparent;
-     --cobre-btn-v3-icon-color: var(--cobre-primary-95);
-     --cobre-btn-v3-icon-radius: var(--cobre-radius-full);
-     --cobre-btn-v3-icon-hover-bg: var(--cobre-primary-10);
-     --cobre-btn-v3-icon-active-bg: var(--cobre-primary-20);
-     --cobre-btn-v3-icon-focus-border: 1px solid var(--cobre-brand);
-     --cobre-btn-v3-icon-focus-box-shadow: 0 0 0 2px #A8C5C4;
-     --cobre-btn-v3-icon-disabled-color: var(--cobre-primary-50);
-
-     // Icon cloudy
-     --cobre-btn-v3-icon-cloudy-fs: transparent;
-     --cobre-btn-v3-icon-cloudy-bg: transparent;
-     --cobre-btn-v3-icon-cloudy-color: var(--cobre-primary-95);
-     --cobre-btn-v3-icon-cloudy-radius: var(--cobre-radius-full);
-     --cobre-btn-v3-icon-cloudy-hover-bg: var(--cobre-primary-20);
-     --cobre-btn-v3-icon-cloudy-active-bg: var(--cobre-primary-30);
-     --cobre-btn-v3-icon-cloudy-focus-border: 1px solid var(--cobre-brand);
-     --cobre-btn-v3-icon-cloudy-focus-box-shadow: 0 0 0 2px #A8C5C4;
-     --cobre-btn-v3-icon-cloudy-disabled-color: var(--cobre-primary-50);
-
-     // Search
-     --cobre-btn-v3-toolbar-radius: 4px;
-     --cobre-btn-v3-toolbar-fs: 12px;
-     --cobre-btn-v3-toolbar-bg: transparent;
-     --cobre-btn-v3-toolbar-color: var(--cobre-primary-80);
-     --cobre-btn-v3-toolbar-hover-bg:  var(--cobre-primary-10);
-     --cobre-btn-v3-toolbar-hover-color: var(--cobre-primary-80);
-
-
-     // Primary Warning
-     --cobre-btn-v3-primary-warning-bg: var(--cobre-red-50);
-     --cobre-btn-v3-primary-warning-color: var(--cobre-primary-5);
-     --cobre-btn-v3-primary-warning-hover-bg: var(--cobre-red-60);
-     --cobre-btn-v3-primary-warning-active-bg: var(--cobre-red-70);
-     --cobre-btn-v3-primary-warning-focus-bg: var(--cobre-red-50);
-     --cobre-btn-v3-primary-warning-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
-     --cobre-btn-v3-primary-warning-disabled-bg: var(--cobre-red-40);
-  }
-
-  /**
-   * CHIPS V3
-   */
+  --cobre-input-focus-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
+  --cobre-input-focus-shadow: 0 0 0 0.25rem var(--cobre-secondary-10);
+  --cobre-input-focus-color: var(--cobre-primary-95);
+  --cobre-input-focus-bg: transparent;
 
-  :root {
-    --cobre-chips-disabled-color: var(--cobre-primary-20);
-    --cobre-chips-divider-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
-    --cobre-chips-button-color: var(--cobre-primary-80);
-    --cobre-chips-button-disabled-color: var(--cobre-primary-20);
-  }
+  --cobre-input-hover-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
+  --cobre-input-hover-bg: var(--cobre-primary-10);
 
-  /**
-   * ACTION LIST
-   */
+  --cobre-input-disabled-color: var(--cobre-primary-50);
+  --cobre-input-disabled-bg: var(--cobre-white);
+  --cobre-input-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
 
-  :root {
-    --cobre-action-list-bg: var(--cobre-white);
-    --cobre-action-list-shadow: 0px 2px 15px rgba(40, 40, 43, 0.05), 0px 4px 20px rgba(40, 40, 43, 0.04);
-    --cobre-action-list-radius: 8px;
-    --cobre-action-list-width: 269px;
-    --cobre-action-list-border: none;
-    --cobre-action-list-header-padding: 12px;
-
-    // Item Icon
-    --cobre-action-list-icon-wrap-bg: var(--cobre-secondary-10);
-    --cobre-action-list-icon-wrap-radius: 8px;
-    --cobre-action-list-icon-wrap-padding: 4px;
-    --cobre-action-list-icon-wrap-size: 24px;
-    --cobre-action-list-icon-wrap-disabled-bg: var(--cobre-primary-10);
-    --cobre-action-list-icon-color: var(--cobre-brand);
-    --cobre-action-list-icon-disabled-color: var(--cobre-primary-30);
-
-    // Item
-    --cobre-action-list-item-bg: var(--cobre-white);
-    --cobre-action-list-item-color: initial;
-    --cobre-action-list-item-padding: 12px;
-    --cobre-action-list-item-margin: 0 0 8px 0;
-    --cobre-action-list-item-font-size: var(--cobre-body-large-fs);
-    --cobre-action-list-item-font-line-height: var(--cobre-body-large-lh);
-    --cobre-action-list-item-font-letter-spacing: var(--cobre-body-large-ls);
-    --cobre-action-list-item-font-weight: 400;
-    --cobre-action-list-item-font-color: initial;
-    --cobre-action-list-item-radius: 0;
-
-    // --cobre-action-list-item-hover-bg: var(--cobre-secondary-5);
-    --cobre-action-list-item-hover-color: initial;
-
-    --cobre-action-list-item-focus-bg: var(--cobre-secondary-10);
-    --cobre-action-list-item-focus-color: initial;
-
-    --cobre-action-list-item-active-bg: var(--cobre-secondary-20);
-    --cobre-action-list-item-active-color: initial;
-  }
-
-  /**
-   * BADGES
-   */
-
-  :root {
-    --cobre-badge-radius: 30px;
-    --cobre-badge-font-size: 12.64px;
-    --cobre-badge-padding-x: 8px;
-    --cobre-badge-padding-y: 2px;
-    --cobre-badge-height: 24px;
-    --cobre-badge-font-size: 14.22px;
-
-    --cobre-badge-neutral-bg: var(--cobre-primary-10);
-    --cobre-badge-neutral-color: var(--cobre-primary-80);
-
-    --cobre-badge-success-bg: var(--cobre-green-10);
-    --cobre-badge-success-border: none;
-    --cobre-badge-success-color: var(--cobre-primary-95);
-
-    --cobre-badge-info-bg: var(--cobre-blue-10);
-    --cobre-badge-info-border: none;
-    --cobre-badge-info-color:  var(--cobre-primary-95);
-
-    --cobre-badge-warning-bg: var(--cobre-yellow-10);
-    --cobre-badge-warning-border: none;
-    --cobre-badge-warning-color:  var(--cobre-primary-95);
-
-    --cobre-badge-error-bg: var(--cobre-red-10);
-    --cobre-badge-error-border: none;
-    --cobre-badge-error-color: var(--cobre-primary-95);
-
-    --cobre-badge-inactive-bg: var(--cobre-primary-10);
-    --cobre-badge-inactive-border: none;
-    --cobre-badge-inactive-color: var(--cobre-primary-95);
-
-    // Status
-    --cobre-badge-status-finished-bg: var(--cobre-green-10);
-    --cobre-badge-status-finished-color: var(--cobre-green-50);
-    --cobre-badge-status-finished-border: none;
-
-    --cobre-badge-status-progress-bg: var(--cobre-blue-10);
-    --cobre-badge-status-progress-color: var(--cobre-blue-50);
-    --cobre-badge-status-progress-border: none;
-
-    --cobre-badge-status-error-bg: var(--cobre-red-10);
-    --cobre-badge-status-error-color: var(--cobre-red-50);
-    --cobre-badge-status-error-border: none;
-
-    --cobre-badge-status-pending-bg: var(--cobre-yellow-10);
-    --cobre-badge-status-pending-color: var(--cobre-yellow-50);
-    --cobre-badge-status-pending-border: none;
-
-    --cobre-badge-status-inactive-bg: var(--cobre-primary-10);
-    --cobre-badge-status-inactive-color: var(--cobre-primary-50);
-    --cobre-badge-status-inactive-border: none;
-
-    --cobre-badge-filter-bg: transparent;
-    --cobre-badge-filter-color: var(--cobre-primary-95);
-    --cobre-badge-filter-border: var(--cobre-brand);
-    --cobre-badge-filter-label-color: var(--cobre-brand);
-    --cobre-badge-filter-hover-bg: var(--cobre-brand-light);
-
-    --cobre-badge-outline-bg: var(--cobre-white);
-    --cobre-badge-outline-border: var(--cobre-primary-20) 1px solid;
-    --cobre-badge-outline-color: var(--cobre-primary-95);
-
-    --cobre-badge-alert-bg: var(--cobre-yellow-5);
-    --cobre-badge-alert-color: var(--cobre-yellow-20);
-    --cobre-badge-alert-border: 1px solid var(--cobre-yellow-20);
-  }
-
-   /**
-   * TABS
-   */
-  
-   :root {
-    --cobre-tabs-bg: transparent !important;
-    --cobre-tabs-border: var(--cobre-border-stroke-L) solid transparent !important;
-    --cobre-tabs-color: var(--cobre-primary-80) !important;
-    --cobre-tabs-font-weight: 400 !important;
-    --cobre-tabs-font-size: var(--cobre-label-medium-fs) !important;
-    --cobre-tabs-radius: 0px !important;
-    --cobre-tabs-padding: 8px 0px !important;
-    --cobre-tabs-margin: 8px !important;
-    --cobre-tabs-height: auto !important;
-  
-    --cobre-tabs-hover-bg: transparent !important;
-    --cobre-tabs-hover-border: var(--cobre-border-stroke-L) solid var(--cobre-seconday-50) !important;
-    --cobre-tabs-hover-color: var(--cobre-secondary-50) !important;
-    --cobre-tabs-hover-radius: 0px !important;
-  
-    // Active (Selected)
-    --cobre-tabs-active-bg: transparent !important;
-    --cobre-tabs-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95) !important;
-    --cobre-tabs-active-color: var(--cobre-primary-95) !important;
-    --cobre-tabs-active-font-weight: 500 !important;
-    --cobre-tabs-active-radius: 0px !important;
-  
-    // Pressed (Selected)
-    --cobre-tabs-pressed-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-80);
-    --cobre-tabs-pressed-color: var(--cobre-secondary-80);
-  
-    // Disabled
-    --cobre-tabs-disabled-bg: transparent !important;
-    --cobre-tabs-disabled-border: none !important;
-    --cobre-tabs-disabled-color: var(--cobre-primary-40) !important;
-    --cobre-tabs-disabled-radius: 0px !important;
-  }
-
-  /**
-   * Select
-   */
-
-  :root {
-    --cobre-select-height: 38px;
-    --cobre-select-bg: var(--cobre-white);
-    --cobre-select-color: var(--cobre-primary-40);
-    --cobre-select-border: 1px solid #ebebeb;
-    --cobre-select-radius: 8px;
-    --cobre-select-arrow: 18px;
-    --cobre-select-border-radius: 8px;
-
-    --cobre-select-hover-bg: var(--cobre-primary-7);
-    --cobre-select-hover-color: var(--cobre-primary-95);
-    --cobre-select-hover-border-color: var(--cobre-primary-30);
-
-    --cobre-select-active-color: var(--cobre-primary-95);
-    --cobre-select-active-border-color: var(--cobre-secondary-50);
-
-    --cobre-select-active-focus-color: var(--cobre-primary-95);
-    --cobre-select-active-focus-shadow: none;
-
-    --cobre-select-disabled-border: var(--cobre-primary-95);
-    --cobre-select-disabled-bg: var(--cobre-primary-10);
-    --cobre-select-disabled-color: var(--cobre-primary-50);
-
-    --cobre-select-selected-bg: var(--cobre-secondary-20);
-    --cobre-select-selected-color: var(--cobre-white);
-    --cobre-select-selected-input-color: var(--cobre-primary-80);
-
-    --cobre-select-dropdown-border: var(--cobre-primary-10);
-    --cobre-select-dropdown-margin-top: 8px;
-    --cobre-select-dropdown-item-height: 37px;
-    --cobre-select-dropdown-item-font-size: 14px;
-    --cobre-select-dropdown-item-padding: 8px;
-    --cobre-select-dropdown-item-color: var(--cobre-primary-80);
-    --cobre-select-dropdown-item-disabled-bg: var(--cobre-primary-7);
-    --cobel-select-dropdown-item-disabled-color: var(--cobre-primary-40);
-    --cobre-select-dropdown-item-active-bg: var(--cobre-secondary-10);
-    --cobre-select-dropdown-item-margin: 0px;
-
-    --cobre-select-add-item-color: var(--cobre-secondary-50);
-
-    --cobre-select-badge-color: var(--cobre-primary-95);
-  }
-
-  /**
-   * Option Switch
-   */
+  --cobre-input-active-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-input-active-bg: var(--cobre-primary-10);
 
-  :root {
-    --cobre-option-switch-bg: var(--cobre-primary-5);
-    --cobre-option-switch-color: var(--cobre-primary-50);
-    --cobre-option-switch-radius: 12px;
-    --cobre-option-switch-height: 40px;
-    --cobre-option-switch-min-width: 110px;
-    --cobre-option-switch-font-size: 14.22px;
-    --cobre-option-switch-shadow: none;
+  --cobre-input-autofill-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
 
-    --cobre-option-switch-disabled-bg: var(--cobre-primary-10);
-    --cobre-option-switch-disabled-color: var(--cobre-primary-50);
+  --cobre-input-label-fw: 400;
+  --cobre-input-label-color: rgba(87, 86, 85, 0.8);
+  --cobre-input-label-disabled-color: var(--cobre-primary-50);
+  --cobre-input-label-fs: var(--cobre-label-small-fs);
 
-    --cobre-option-switch-selected-bg: var(--cobre-secondary-50);
-    --cobre-option-switch-selected-color: var(--cobre-white);
-    --cobre-option-switch-selected-fw: 400;
+  --cobre-input-url-top: calc(50% - 10px);
+  --cobre-input-url-padding-left: 48px;
+}
 
-    --cobre-option-switch-desktop-min-width: 160px;
-  }
 
-  /**
-   * Modal
-   */
+/**
+ * Input V3
+ */
 
-   :root {
-    --cobre-modal-border-radius: 8px;
-    --cobre-modal-padding: 16px;
-  }
+:root {
+  --cobre-input-v3-height: 32px;
+  --cobre-input-v3-color: var(--cobre-primary-95);
+  --cobre-input-v3-radius: 4px;
+  --cobre-input-v3-fw: 400;
+  --cobre-input-v3-fs: 12px;
+  --cobre-input-label-disabled-color: var(--cobre-primary-50);
 
-  /**
-   * Modal Step
-   */
+  --cobre-input-v3-placeholder-color: var(--cobre-primary-50);
+  --cobre-input-v3-placeholder-fw: 400 !important;
 
-  :root {
-    --cobre-modal-step-bg: var(--cobre-white);
-    --cobre-modal-step-header-bg: var(--cobre-white);
-    --cobre-modal-step-border-bottom: 1px solid var(--cobre-primary-10);
-    --cobre-modal-step-color: var(--cobre-primary-95);
-    --cobre-modal-step-close-btn-color: var(--cobre-primary-95);
-    --cobre-modal-step-footer-bg: var(--cobre-white);
-  }
-
-  /**
-   * OTP Form
-   */
+  --cobre-input-v3-focus-border: 0.5px solid var(--cobre-secondary-50);
+  --cobre-input-v3-autofill-border: 0.5px solid var(--cobre-secondary-50);
 
-   :root {
-    --cobre-otp-title-box-bg: transparent;
-    --cobre-otp-input-box-bg: transparent;
-    --cobre-otp-input-box-padding: 0px;
-  }
+  --cobre-input-v3-error-border: 0.5px solid var(--cobre-red-50);
+  --cobre-input-v3-error-color: var(--cobre-red-50);
 
-  /**
-   * Error Screen Paths
-   */
+  --cobre-input-v3-optional-label-fs: 12px;
+  --cobre-input-v3-optional-label-color: var(--cobre-primary-95);
+  --cobre-input-v3-optional-label-disabled-color: var(--cobre-primary-50);
 
-   :root {
-    --cobre-error-screen-path-radius: 8px;
-  }
+  // input search
+  --cobre-input-search-v3-color: var(--cobre-primary-80);
+  --cobre-input-search-v3-border: 0;
+  --cobre-input-search-v3-border-bottom: 1px solid var(--cobre-primary-95);
+  --cobre-input-search-v3-focus-border-bottom: 1px solid var(--cobre-secondary-50);
+  --cobre-input-search-v3-focus-search-color: var(--cobre-brand);
 
-  /**
-   * Radio
-   */
+  --cobre-input-v3-focus-bg: var(--cobre-white);
+  --cobre-input-v3-focus-border-bottom: 1px solid var(--cobre-brand);
+  --cobre-input-v3-focus-search-color: var(--cobre-brand);
+  --cobre-input-v3-focus-fw: 500;
 
-  :root {
-    --cobre-radio-size: 24px;
-    --cobre-radio-bg: var(--cobre-primary-10);
-    --cobre-radio-border: var(--cobre-primary-20);
-    --cobre-radio-disabled-color: var(--cobre-primary-10);
-    --cobre-radio-label-color: var(--cobre-primary-95);
-    --cobre-radio-label-fw: 600;
-    --cobre-radio-label-fs: var(--cobre-label-medium-fs);
-    --cobre-radio-description-color: var(--cobre-primary-80);
-    --cobre-radio-description-margin: 6px 32px;
-    --cobre-radio-description-fs: var(--cobre-label-medium-fs);
-
-    --cobre-radio-input-checked-bg: var(--cobre-secondary-70);
-    --cobre-radio-input-checked-border: 1px solid var(--cobre-secondary-70);
-    --cobre-radio-input-checked-hover-bg: var(--cobre-secondary-50);
-    --cobre-radio-input-checked-disabled-border: 1px solid var(--cobre-secondary-50);
-
-    --cobre-radio-input-hover-bg: var(--cobre-secondary-10);
-    --cobre-radio-input-hover-border: 1px solid var(--cobre-secondary-10);
-
-    --cobre-radio-input-disabled-bg: var(--cobre-primary-5);
-  }
-
-  /**
-   * Radio Box
-   */
+  // theme white
 
-  :root {
-    --cobre-radio-box-radius: 12px;
-    --cobre-radio-box-bg: var(--cobre-white);
-    --cobre-radio-box-border: 1px solid var(--cobre-primary-10);
+  --cobre-input-v3-white-bg: var(--cobre-white);
+  --cobre-input-v3-white-border: 0.5px solid var(--cobre-primary-20);
+  --cobre-input-v3-white-hover-border: 0.5px solid var(--cobre-primary-95);
+  --cobre-input-v3-white-hover-bg: var(--cobre-primary-5);
 
-    --cobre-radio-box-active-bg: var(--cobre-secondary-5);
-    --cobre-radio-box-active-border: 1px solid var(--cobre-secondary-50);
-  }
+  --cobre-input-v3-white-disabled-bg: var(--cobre-primary-10);
+  --cobre-input-v3-white-disabled-color: var(--cobre-primary-50);
+  --cobre-input-v3-white-disabled-border: none;
 
-  /**
-   * Uploader
-   */
+  --cobre-input-v3-white-active-bg: var(--cobre-white);
+  --cobre-input-v3-white-active-border: 1px solid var(--cobre-secondary-50);
+  --cobre-input-v3-white-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
 
-  :root {
-    --cobre-uploader-bg: var(--cobre-white);
-    --cobre-uploader-color: var(--cobre-primary-60);
-    --cobre-uploader-border: 1.5px dashed var(--cobre-primary-50);
-    --cobre-uploader-height: 240px;
-    --cobre-uploader-radius: 8px;
-    --cobre-uploader-disabled-color: var(--cobre-primary-30);
-
-    --cobre-uploader-icon-color: var(--cobre-primary-95);
-    --cobre-uploader-text-color: var(--cobre-primary-30);
-    --cobre-uploader-text-disabled-color: var(--cobre-primary-40);
-
-    --cobre-uploader-disabled-box-bg: var(--cobre-primary-7);
-    --cobre-uploader-active-drop-bg: var(--cobre-secondary-5);
-    --cobre-uploader-active-drop-color: var(--cobre-secondary-50);
-
-    --cobre-uploader-drag-area-active-bg: var(--cobre-secondary-5);
-    --cobre-uploader-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
-    --cobre-uploader-drag-area-disabled-bg: var(--cobre-primary-5);
-    --cobre-uploader-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
-
-    --cobre-uploader-selected-file-border: 1px solid var(--cobre-secondary-50);
-    --cobre-uploader-selected-file-bg: var(--cobre-primary-5);
-    --cobre-uploader-selected-file-color: var(--cobre-primary-95);
-  }
-
-  /**
-   * Checkbox
-   */
+  // theme cloudy
 
-  :root {
-    --cobre-checkbox-size-small: 20px;
-    --cobre-checkbox-size-medium: 24px;
-    --cobre-checkbox-radius-small: 6px;
-    --cobre-checkbox-radius-medium: 8px;
-    --cobre-checkbox-bg: var(--cobre-primary-10);
-    --cobre-checkbox-border: none;
-    --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+  --cobre-input-v3-cloudy-bg: var(--cobre-white);
+  --cobre-input-v3-cloudy-border: 0.5px solid var(--cobre-primary-40);
+  --cobre-input-v3-cloudy-hover-border: 0.5px solid var(--cobre-primary-95);
+  --cobre-input-v3-cloudy-hover-bg: var(--cobre-primary-10);
 
-    --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
-    --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
+  --cobre-input-v3-cloudy-disabled-bg: var(--cobre-primary-20);
+  --cobre-input-v3-cloudy-disabled-color: var(--cobre-primary-50);
+  --cobre-input-v3-cloudy-disabled-border: 0.5px solid var(--cobre-primary-60);
 
-    --cobre-checkbox-input-hover-bg: var(--cobre-secondary-10);
-    --cobre-checkbox-input-hover-box-shadow: 0 0 0 0.5px var(--cobre-secondary-50);
+  --cobre-input-v3-cloudy-active-bg: var(--cobre-white);
+  --cobre-input-v3-cloudy-active-border: 1px solid var(--cobre-secondary-50);
+  --cobre-input-v3-cloudy-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+}
 
-    --cobre-checkbox-input-disabled-bg: var(--cobre-secondary-30);
-  }
 
-  /**
-   * Stepper
-   */
+/**
+ * Avatar
+ */
 
-  :root {
-    --cobre-stepper-progress-bg: var(--cobre-primary-20);
-    --cobre-stepper-progress-height: 2px;
-
-    --cobre-stepper-progress-bar-bg: var(--cobre-secondary-50);
-
-    --cobre-stepper-item-color: var(--cobre-primary-20);
-    --cobre-stepper-item-counter-bg: var(--cobre-primary-10);
-    --cobre-stepper-item-counter-color: var(--cobre-primary-40);
-    --cobre-stepper-item-counter-radius: 100%;
-    --cobre-stepper-item-counter-size: 24px;
-
-    --cobre-stepper-item-success-color: var(--cobre-secondary-50);
-    --cobre-stepper-item-success-counter-border-color: var(--cobre-secondary-50);
-    --cobre-stepper-item-success-counter-bg: var(--cobre-secondary-50);
-    --cobre-stepper-item-success-counter-color: var(--cobre-white);
-
-    --cobre-stepper-item-current-item-title-color: var(--cobre-secondary-50);
-    --cobre-stepper-item-current-counter-border-color: var(--cobre-secondary-50);
-    --cobre-stepper-item-current-counter-bg: var(--cobre-secondary-50);
-    --cobre-stepper-item-current-counter-color: var(--cobre-white);
-    --cobre-stepper-item-current-counter-outline: 2px solid var(--cobre-secondary-20);
-    --cobre-stepper-item-current-counter-shadow: 0px 4px 4px var(--cobre-primary-20);
-  }
-
-  /**
-   * Switch
-   */
+:root {
+  --cobre-avatar-bg: var(--cobre-secondary-50);
+  --cobre-avatar-color: var(--cobre-white);
 
-  :root {
-    --cobre-switch-bg: var(--cobre-primary-40);
-    --cobre-switch-point-bg: var(--cobre-white);
-    --cobre-switch-hover-bg: var(--cobre-primary-60);
-    --cobre-switch-border-hover-color: var(--cobre-primary-60);
-    --cobre-switch-shadow: 0 0 8px rgba(99, 97, 95, 0.5);
-    --cobre-switch-border-color: var(--cobre-primary-40);
-
-    --cobre-switch-checked-bg: var(--cobre-secondary-50);
-    --cobre-switch-point-checked-bg: var(--cobre-white);
-    --cobre-switch-checked-disabled-bg: var(--cobre-secondary-30);
-    --cobre-switch-checked-disabled-border-color: var(--cobre-secondary-30);
-    --cobre-switch-checked-hover-bg: var(--cobre-secondary-70);
-    --cobre-switch-checked-border-hover-color: var(--cobre-secondary-70);
-    --cobre-switch-checked-shadow: 0 0 8px rgba(31, 93, 93, 0.5);
-    --cobre-switch-checked-border-color: var(--cobre-secondary-50);
-
-    --cobre-switch-disabled-bg: var(--cobre-primary-20);
-    --cobre-switch-point-disabled-bg: var(--cobre-white);
-    --cobre-switch-disabled-label-color: var(--cobre-primary-40);
-    --cobre-switch-disabled-border-color: var(--cobre-primary-20);
-  }
-
-  /**
-   * Calendar
-   */
+  --cobre-avatar-hover-outline: var(--cobre-border-stroke-XL) solid var(--cobre-secondary-30);
 
-  :root {
-    --cobre-calendar-day-today-color: var(--cobre-primary-95);
-    --cobre-calendar-day-today-selected-color: var(--cobre-primary-40);
-    --cobre-calendar-color: var(--cobre-brand);
-    --cobre-calendar-color-light: var(--cobre-brand-light);
-
-    --cobre-calendar-menu-padding: 10px;
-
-    --cobre-calendar-input-height: 40px;
-    --cobre-calendar-input-radius: 8px;
-    --cobre-calendar-input-border: 1px solid var(--cobre-primary-20);
-    --cobre-calendar-input-font-size: var(--cobre-label-medium-fs);
-    --cobre-calendar-input-readonly-bg: var(--cobre-primary-5);
-    --cobre-calendar-input-readonly-border-color: var(--cobre-primary-20);
-    --cobre-calendar-input-readonly-color: var(--cobre-primary-40);
-    --cobre-calendar-input-hover-border-color: var(--cobre-calendar-color);
-
-    --cobre-calendar-cell-font-size: 13px;
-    --cobre-calendar-cell-range-start-radius: 20px 0 0 20px;
-    --cobre-calendar-cell-range-start-bg: var(--cobre-calendar-color);
-    --cobre-calendar-cell-range-end-radius: 0 20px 20px 0;
-    --cobre-calendar-cell-range-end-bg: var(--cobre-calendar-color);
-    --cobre-calendar-cell-range-between-bg: var(--cobre-calendar-color-light);
-    --cobre-calendar-cell-active-bg: var(--cobre-calendar-color);
-    --cobre-calendar-cell-active-color: var(--cobre-white);
-    --cobre-calendar-cell-active-radius: 20px;
-    --cobre-calendar-cell-today-radius: 20px;
-    --cobre-calendar-cell-today-border-width: 2px;
-    --cobre-calendar-cell-today-color: var(--cobre-calendar-day-today-color);
-    --cobre-calendar-cell-today-border: 2px solid var(--cobre-calendar-color);
-    --cobre-calendar-range-end-today-color: var(--cobre-calendar-day-today-selected-color);
-
-    --cobre-calendar-disabled-bg: var(--cobre-primary-5);
-    --cobre-calendar-disabled-border-color: var(--cobre-primary-20);
-    --cobre-calendar-disabled-color: var(--cobre-primary-40);
-
-    --cobre-calendar-overlay-bg: var(--cobre-calendar-color);
-    --cobre-calendar-overlay-color: var(--cobre-white);
-  }
-
-  /**
-   * Alert
-   */
+  --cobre-avatar-small: 24px;
+  --cobre-avatar-medium: 32px;
+  --cobre-avatar-large: 40px;
+}
 
-  :root {
-    --cobre-alert-radius: 8px;
-    --cobre-alert-padding: 14px;
-    --cobre-alert-color: var(--cobre-primary-80);
+/**
+* BADGES
+*/
 
-    --cobre-alert-warning-bg: var(--cobre-yellow-10);
-    --cobre-alert-warning-icon-color: var(--cobre-yellow-50);
-    --cobre-alert-warning-border: 1px solid var(--cobre-yellow-10);
+:root {
+  --cobre-badge-radius: var(--cobre-radius-XS);
+  --cobre-badge-font-size: var(--cobre-label-small-fs);
+  --cobre-badge-padding-x: 4px;
+  --cobre-badge-padding-y: 0px;
+  --cobre-badge-height: 20px;
 
-    --cobre-alert-success-bg: var(--cobre-green-10);
-    --cobre-alert-success-icon-color: var(--cobre-green-50);
-    --cobre-alert-success-border: 1px solid var(--cobre-green-10);
+  --cobre-badge-neutral-bg: var(--cobre-primary-5);
+  --cobre-badge-neutral-color: var(--cobre-primary-80);
 
-    --cobre-alert-info-bg: var(--cobre-blue-10);
-    --cobre-alert-info-icon-color: var(--cobre-blue-50);
-    --cobre-alert-info-border: 1px solid var(--cobre-blue-10);
+  --cobre-badge-success-bg: var(--cobre-green-10);
+  --cobre-badge-success-border: none;
+  --cobre-badge-success-color: var(--cobre-green-50);
 
-    --cobre-alert-error-bg: var(--cobre-red-10);
-    --cobre-alert-error-icon-color: var(--cobre-red-50);
-    --cobre-alert-error-border: 1px solid var(--cobre-red-10);
+  --cobre-badge-info-bg: var(--cobre-blue-10);
+  --cobre-badge-info-border: none;
+  --cobre-badge-info-color: var(--cobre-blue-50);
 
-    --cobre-alert-transp-icon-color: var(--cobre-primary-50);
+  --cobre-badge-warning-bg: var(--cobre-yellow-10);
+  --cobre-badge-warning-border: none;
+  --cobre-badge-warning-color: var(--cobre-yellow-10);
 
+  --cobre-badge-error-bg: var(--cobre-red-10);
+  --cobre-badge-error-border: none;
+  --cobre-badge-error-color: var(--cobre-red-50);
 
-  }
+  --cobre-badge-outline-bg: var(--cobre-white);
+  --cobre-badge-outline-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-40);
+  --cobre-badge-outline-color: var(--cobre-primary-80);
+}
 
-  /**
-   * Input
+/**
+   * TABS
    */
 
-  :root {
-    --cobre-input-height: 40px;
-    --cobre-input-bg: var(--cobre-white);
-    --cobre-input-color: var(--cobre-primary-80);
-    --cobre-input-fw: 400;
-    --cobre-input-border: 1px solid var(--cobre-primary-20);
-    --cobre-input-placeholder-color: #bfbfc1;
-    --cobre-input-placeholder-fw: 400;
-    --cobre-input-radius: 8px;
-    --cobre-input-fs: 16px;
-    --cobre-optional-label-fs: 14.22px;
+:root {
+  --cobre-tabs-bg: transparent;
+  --cobre-tabs-border: var(--cobre-border-stroke-L) solid transparent;
+  --cobre-tabs-color: var(--cobre-primary-80);
+  --cobre-tabs-font-weight: 400;
+  --cobre-tabs-font-size: var(--cobre-label-medium-fs);
+  --cobre-tabs-radius: 0px;
+  --cobre-tabs-padding: 8px 0px;
+  --cobre-tabs-margin: 8px;
+  --cobre-tabs-height: auto;
+
+  --cobre-tabs-hover-bg: transparent;
+  --cobre-tabs-hover-border: var(--cobre-border-stroke-L) solid var(--cobre-seconday-50);
+  --cobre-tabs-hover-color: var(--cobre-secondary-50);
+  --cobre-tabs-hover-radius: 0px;
+  --cobre-tabs-counter-hover-bg: var(--cobre-secondary-70);
+  --cobre-tabs-counter-hover-color: var(--cobre-secondary-10);
+
+  // Active (Selected)
+  --cobre-tabs-active-bg: transparent;
+  --cobre-tabs-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
+  --cobre-tabs-active-color: var(--cobre-primary-95);
+  --cobre-tabs-active-font-weight: 500;
+  --cobre-tabs-active-radius: 0px;
+
+  // Pressed (Selected)
+  --cobre-tabs-pressed-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-80);
+  --cobre-tabs-pressed-color: var(--cobre-secondary-80);
+
+  // Disabled
+  --cobre-tabs-disabled-bg: transparent;
+  --cobre-tabs-disabled-border: none;
+  --cobre-tabs-disabled-color: var(--cobre-primary-40);
+  --cobre-tabs-disabled-radius: 0px;
+}
 
-    --cobre-input-error-border: 1px solid var(--cobre-red-60);
-    --cobre-input-error-color: var(--cobre-red-60);
-    --cobre-input-error-fs: 12.6px;
+/**
+ * ACTION LIST
+ */
 
-    --cobre-input-focus-border: 1px solid (--cobre-secondary-50);
-    --cobre-input-focus-shadow: 0 0 0 0.25rem #21212140;
-    --cobre-input-focus-color: #202223;
-    --cobre-input-focus-bg: var(--cobre-white);
+:root {
+  --cobre-action-list-bg: var(--cobre-white);
+  --cobre-action-list-shadow: 0px 4px 4px 0px rgba(40, 40, 43, 0.02);
+  --cobre-action-list-radius: 8px;
+  --cobre-action-list-width: 224px;
+  --cobre-action-list-header-padding: 12px 4px 0px 4px;
+  --cobre-action-list-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+
+
+  // Item Icon
+  --cobre-action-list-icon-wrap-bg: transparent;
+  --cobre-action-list-icon-wrap-radius: none;
+  --cobre-action-list-icon-wrap-padding: 0;
+  --cobre-action-list-icon-wrap-size: 20px;
+  --cobre-action-list-icon-wrap-disabled-bg: var(--cobre-primary-10);
+  --cobre-action-list-item-padding: 8px;
+  --cobre-action-list-item-margin: 4px;
+  --cobre-action-list-icon-color: var(--cobre-gray-95);
+  --cobre-action-list-icon-disabled-color: var(--cobre-gray-30);
+
+  // Item
+  --cobre-action-list-item-bg: var(--cobre-white);
+  --cobre-action-list-item-color: var(--cobre-primary-80);
+  --cobre-action-list-item-font-color: var(--cobre-primary-80);
+  --cobre-action-list-item-font-size: var(--cobre-body-medium-fs);
+  --cobre-action-list-item-font-line-height: var(--cobre-body-medium-lh);
+  --cobre-action-list-item-font-letter-spacing: var(--cobre-body-medium-ls);
+  --cobre-action-list-item-font-weight: 400;
+  --cobre-action-list-item-radius: 4px;
+
+  --cobre-row-hover-bg: var(--cobre-gray-10);
+  --cobre-action-list-item-hover-color: initial;
+
+  --cobre-action-list-item-focus-bg: var(--cobre-gray-30);
+  --cobre-action-list-item-focus-color: initial;
+
+  --cobre-action-list-item-active-bg: var(--cobre-gray-30);
+  --cobre-action-list-item-active-color: initial;
+}
 
-    --cobre-input-hover-border: 1px solid var(--cobre-primary-20);
-    --cobre-input-hover-bg: var(--cobre-white);
+/**
+ * Modal
+ */
 
-    --cobre-input-disabled-color: var(--cobre-primary-20);
-    --cobre-input-disabled-bg: var(--cobre-primary-7);
-    --cobre-input-disabled-border: 1px solid var(--cobre-primary-20);
+:root {
+  --cobre-modal-padding: 24px;
+}
 
-    --cobre-input-active-border: 1px solid var(--cobre-primary-20);
-    --cobre-input-active-bg: var(--cobre-white);
+/**
+ * Radio
+*/
 
-    --cobre-input-autofill-border: 1px solid var(--cobre-primary-20);
+:root {
+  --cobre-radio-label-fw: 500;
+  --cobre-radio-label-fs: var(--cobre-label-small-fs);
+  --cobre-radio-size: 14px;
+  --cobre-radio-bg: var(--cobre-white);
+  --cobre-radio-border: var(--cobre-primary-20);
+  --cobre-radio-description-fs: var(--cobre-label-small-fs);
+  --cobre-radio-description-color: var(--cobre-primary-80);
+  --cobre-radio-description-margin: 4px 23px;
+}
 
-    --cobre-input-label-fw: 400;
-    --cobre-input-label-color: var(--cobre-primary-40);
-    --cobre-input-label-disabled-color: var(--cobre-primary-60);
-    --cobre-input-label-fs: var(--cobre-body-medium-fs);
 
-    --cobre-input-url-top: calc(50% - 14px);
-    --cobre-input-url-padding-left: 59px;
+// V3
 
-  }
+/**
+* BUTTONS V3
+*/
+
+:root {
+  // Generals
+  --cobre-btn-v3-radius: 999px;
+  --cobre-btn-v3-font-family: 'Inter', sans-serif;
+  --cobre-btn-v3-font-size: 14px;
+  --cobre-btn-v3-small-font-size: 12px;
+  --cobre-btn-v3-padding: 0 8px;
+
+  // By Sizes
+  --cobre-btn-v3-small-height: 32px;
+  --cobre-btn-v3-medium-height: 32px;
+  --cobre-btn-v3-big-height: 52px;
+  --cobre-btn-v3-icon-small: 16px;
+  --cobre-btn-v3-icon-medium: 20px;
+
+  // Primary
+  --cobre-btn-v3-primary-bg: var(--cobre-primary-95);
+  --cobre-btn-v3-primary-color: var(--cobre-primary-10);
+  --cobre-btn-v3-primary-hover-bg: var(--cobre-primary-90);
+  --cobre-btn-v3-primary-active-bg: var(--cobre-primary-90);
+  --cobre-btn-v3-primary-focus-bg: var(--cobre-primary-95);
+  --cobre-btn-v3-primary-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-primary-disabled-bg: var(--cobre-primary-50);
+
+  // Secondary
+  --cobre-btn-v3-secondary-bg: transparent;
+  --cobre-btn-v3-secondary-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-color: var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-hover-bg: var(--cobre-primary-10);
+  --cobre-btn-v3-secondary-active-bg: var(--cobre-primary-20);
+  --cobre-btn-v3-secondary-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-btn-v3-secondary-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-secondary-disabled-color: var(--cobre-primary-50);
+  --cobre-btn-v3-secondary-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
+
+  // Secondary Cloudy
+  --cobre-btn-v3-secondary-cloudy-bg: transparent;
+  --cobre-btn-v3-secondary-cloudy-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-cloudy-color: var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-cloudy-hover-bg: var(--cobre-primary-20);
+  --cobre-btn-v3-secondary-cloudy-active-bg: var(--cobre-primary-30);
+  --cobre-btn-v3-secondary-cloudy-active-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-95);
+  --cobre-btn-v3-secondary-cloudy-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-btn-v3-secondary-cloudy-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-secondary-cloudy-disabled-color: var(--cobre-primary-50);
+  --cobre-btn-v3-secondary-cloudy-disabled-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-50);
+
+  // Ghost
+  --cobre-btn-v3-ghost-bg: transparent;
+  --cobre-btn-v3-ghost-color: var(--cobre-primary-80);
+  --cobre-btn-v3-ghost-hover-bg: transparent;
+  --cobre-btn-v3-ghost-hover-color: var(--cobre-secondary-50);
+  --cobre-btn-v3-ghost-active-color: var(--cobre-secondary-90);
+  --cobre-btn-v3-ghost-focus-color: var(--cobre-secondary-80);
+  --cobre-btn-v3-ghost-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-btn-v3-ghost-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-ghost-disabled-color: var(--cobre-secondary-50);
+
+  // Link
+  --cobre-btn-v3-link-bg: transparent;
+  --cobre-btn-v3-link-color: var(--cobre-secondary-50);
+  --cobre-btn-v3-link-fw: 500;
+  --cobre-btn-v3-link-hover-bg: transparent;
+  --cobre-btn-v3-link-hover-color: var(--cobre-secondary-80);
+  --cobre-btn-v3-link-active-color: var(--cobre-secondary-70);
+  --cobre-btn-v3-link-focus-color: var(--cobre-secondary-50);
+  --cobre-btn-v3-link-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-secondary-50);
+  --cobre-btn-v3-link-focus-box-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+  --cobre-btn-v3-link-disabled-color: var(--cobre-secondary-40);
+
+  // Filter
+  --cobre-btn-v3-filter-radius: var(--cobre-radius-XS);
+  --cobre-btn-v3-filter-bg: var(--cobre-white);
+  --cobre-btn-v3-filter-color: var(--cobre-primary-80);
+  --cobre-btn-v3-filter-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-btn-v3-filter-padding: 0 8px;
+  --cobre-btn-v3-filter-height: 24px;
+  --cobre-btn-v3-filter-fs: var(--cobre-label-small-fs);
+  --cobre-btn-v3-filter-lh: var(--cobre-label-small-lh);
+  --cobre-btn-v3-filter-hover-bg: var(--cobre-primary-10);
+  --cobre-btn-v3-filter-active-bg: var(--cobre-primary-30);
+  --cobre-btn-v3-filter-focus-bg: var(--cobre-secondary-5);
+  --cobre-btn-v3-filter-focus-border-color: var(--cobre-secondary-50);
+
+  // Icon
+  --cobre-btn-v3-icon-fs: transparent;
+  --cobre-btn-v3-icon-bg: transparent;
+  --cobre-btn-v3-icon-color: var(--cobre-primary-95);
+  --cobre-btn-v3-icon-radius: var(--cobre-radius-full);
+  --cobre-btn-v3-icon-hover-bg: var(--cobre-primary-10);
+  --cobre-btn-v3-icon-active-bg: var(--cobre-primary-20);
+  --cobre-btn-v3-icon-focus-border: 1px solid var(--cobre-brand);
+  --cobre-btn-v3-icon-focus-box-shadow: 0 0 0 2px #A8C5C4;
+  --cobre-btn-v3-icon-disabled-color: var(--cobre-primary-50);
+
+  // Icon cloudy
+  --cobre-btn-v3-icon-cloudy-fs: transparent;
+  --cobre-btn-v3-icon-cloudy-bg: transparent;
+  --cobre-btn-v3-icon-cloudy-color: var(--cobre-primary-95);
+  --cobre-btn-v3-icon-cloudy-radius: var(--cobre-radius-full);
+  --cobre-btn-v3-icon-cloudy-hover-bg: var(--cobre-primary-20);
+  --cobre-btn-v3-icon-cloudy-active-bg: var(--cobre-primary-30);
+  --cobre-btn-v3-icon-cloudy-focus-border: 1px solid var(--cobre-brand);
+  --cobre-btn-v3-icon-cloudy-focus-box-shadow: 0 0 0 2px var(--cobre-secondary-20);
+  --cobre-btn-v3-icon-cloudy-disabled-color: var(--cobre-primary-50);
+
+  // Search
+  --cobre-btn-v3-search-radius: 4px;
+  --cobre-btn-v3-search-fz: 12px;
+  --cobre-btn-v3-search-bg: transparent;
+  --cobre-btn-v3-search-color: var(--cobre-primary-80);
+  --cobre-btn-v3-search-hover-bg: var(--cobre-primary-10);
+  --cobre-btn-v3-search-hover-color: var(--cobre-primary-80);
+
+  // Primary Warning
+  --cobre-btn-v3-primary-warning-bg: var(--cobre-red-50);
+  --cobre-btn-v3-primary-warning-color: var(--cobre-gray-5);
+  --cobre-btn-v3-primary-warning-hover-bg: var(--cobre-red-60);
+  --cobre-btn-v3-primary-warning-active-bg: var(--cobre-red-70);
+  --cobre-btn-v3-primary-warning-focus-bg: var(--cobre-red-50);
+  --cobre-btn-v3-primary-warning-focus-box-shadow: 0 0 0 0.25rem #A8C5C4;
+  --cobre-btn-v3-primary-warning-disabled-bg: var(--cobre-red-40);
+}
 
-  /**
-   * Avatar
-   */
+/**
+ * CHIPS V3
+ */
 
-   :root {
-    --cobre-avatar-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
-    --cobre-avatar-color: var(--cobre-white);
+:root {
+  --cobre-chips-disabled-color: var(--cobre-primary-50);
+  --cobre-chips-divider-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-chips-button-color: var(--cobre-primary-80);
+  --cobre-chips-button-disabled-color: var(--cobre-primary-50);
+}
 
-    --cobre-avatar-disabled-bg: var(--cobre-primary-10);
-    --cobre-avatar-disabled-color:  var(--cobre-primary-40);
-    --cobre-avatar-disabled-border: 1px dashed var(--cobre-primary-20);
+/**
+* HEADER V3
+*/
 
-    --cobre-avatar-empty-bg: var(--cobre-primary-20);
-    --cobre-avatar-empty-color: var(--cobre-primary-40);
-    --cobre-avatar-empty-border: 1px dashed var(--cobre-primary-10);
+:root {
+  --cobre-header-v3-padding: 4px 0px 4px 0px;
+  --cobre-header-v3-background: var(--cobre-white);
+  --cobre-header-v3-height: 48px;
+}
 
-    --cobre-avatar-hover-outline: none;
+/**
+* SIDEMENU
+*/
+
+:root {
+  --cobre-side-menu-bg: var(--cobre-primary-95);
+  --cobre-side-menu-divider-color: var(--cobre-border-stroke-L) solid var(--cobre-primary-50);
+  --cobre-side-menu-color: var(--cobre-primary-30);
+  --cobre-side-menu-item-bg: var(--cobre-primary-95);
+  --cobre-side-menu-active-bg: var(--cobre-primary-90);
+  --cobre-side-menu-active-color: var(--cobre-primary-20);
+  --cobre-side-menu-focus-bg: var(--cobre-primary-90);
+  --cobre-side-menu-focus-color: var(--cobre-primary-20);
+  --cobre-side-menu-focus-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-20);
+  --cobre-side-menu-hover-bg: var(--cobre-primary-80);
+  --cobre-side-menu-hover-color: var(--cobre-primary-20);
+  --cobre-side-menu-disabled-color: var(--cobre-primary-50);
+  --cobre-side-menu-item-padding: 12px 8px;
+  --cobre-side-menu-item-width: 173px;
+  --cobre-side-menu-item-height: 40px;
+  --cobre-side-menu-item-radius: var(--cobre-radius-S);
+
+  --cobre-side-menu-option-bg: var(--cobre-gray-90);
+  --cobre-side-menu-option-color: var(--cobre-primary-5);
+  --cobre-side-menu-option-padding: 4px 8px;
+  --cobre-side-menu-option-height: 40px;
+  --cobre-side-menu-option-radius: 8px;
+
+  --cobre-side-menu-option-active-bg: var(--cobre-primary-80);
+  --cobre-side-menu-option-active-color: var(--cobre-gray-10);
+
+  --cobre-side-menu-option-hover-bg: var(--cobre-primary-80);
+  --cobre-side-menu-option-hover-color: var(--cobre-primary-10);
+  --cobre-side-menu-option-focus-border: 1px solid var(--cobre-secondary-20);
+}
 
-    --cobre-avatar-small: 24px;
-    --cobre-avatar-medium: 32px;
-    --cobre-avatar-large: 40px;
-  }
 
-  /**
-   * Avatar Group
-   */
+/**
+* Empty state
+*/
 
-  :root {
-    --cobre-avatar-group-first-bg: #9C3314; // TODO: Migrate to variable when new colors palette is ready
-    --cobre-avatar-group-second-bg: #9ECBEC; // TODO: Migrate to variable when new colors palette is ready
-  }
+:root {
+  --cobre-empty-state-v3-color: var(--cobre-gray-95);
+}
 
-  /**
-   * Timeline
-   */
+/**
+ * Calendar
+ */
 
-   :root {
-    --cobre-timeline-line-bg: var(--cobre-primary-20);
-  }
+:root {
+  --dp-font-family: var(--cobre-font-family);
+  --cobre-calendar-day-today-color: var(--cobre-gray-95);
+  --cobre-calendar-day-today-selected-color: var(--cobre-primary-40);
+  --cobre-calendar-color: var(--cobre-brand);
+  --cobre-calendar-color-light: var(--cobre-brand-light);
+
+  --cobre-calendar-menu-padding: 8px;
+
+  --cobre-calendar-input-height: 40px;
+  --cobre-calendar-input-radius: var(--cobre-radius-S);
+  --cobre-calendar-input-border: var(--cobre-border-stroke-L) solid var(--cobre-primary-20);
+  --cobre-calendar-input-font-size: var(--cobre-label-medium-fs);
+  --cobre-calendar-input-readonly-bg: var(--cobre-primary-5);
+  --cobre-calendar-input-readonly-border-color: var(--cobre-primary-20);
+  --cobre-calendar-input-readonly-color: var(--cobre-primary-40);
+  --cobre-calendar-input-hover-border-color: var(--cobre-calendar-color);
+
+  --cobre-calendar-cell-font-size: var(--cobre-label-small-fs);
+  --cobre-calendar-cell-range-start-radius: 20px 0 0 20px;
+  --cobre-calendar-cell-range-start-bg: var(--cobre-calendar-color);
+  --cobre-calendar-cell-range-end-radius: 0 20px 20px 0;
+  --cobre-calendar-cell-range-end-bg: var(--cobre-calendar-color);
+  --cobre-calendar-cell-range-between-bg: var(--cobre-calendar-color-light);
+  --cobre-calendar-cell-active-bg: var(--cobre-calendar-color);
+  --cobre-calendar-cell-active-color: var(--cobre-white);
+  --cobre-calendar-cell-active-radius: 20px;
+  --cobre-calendar-cell-today-radius: 20px;
+  --cobre-calendar-cell-today-border-width: 2px;
+  --cobre-calendar-cell-today-color: var(--cobre-calendar-day-today-color);
+  --cobre-calendar-cell-today-border: var(--cobre-border-stroke-XL) solid var(--cobre-calendar-color);
+  --cobre-calendar-range-end-today-color: var(--cobre-calendar-day-today-selected-color);
+
+  --cobre-calendar-disabled-bg: var(--cobre-primary-5);
+  --cobre-calendar-disabled-border-color: var(--cobre-primary-20);
+  --cobre-calendar-disabled-color: var(--cobre-primary-40);
+
+  --cobre-calendar-overlay-bg: var(--cobre-calendar-color);
+  --cobre-calendar-overlay-color: var(--cobre-white);
+}
 
-  /**
-   * Accordion
-   */
 
-  :root {
-    --cobre-accordion-border-radius: 8px;
-  }
+/**
+* Card v3
+*/
 
+:root {
+  --cobre-card-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-card-border-radius: var(--cobre-radius-S);
+  --cobre-card-padding: 24px;
 
-  /**
-   * SideMenu
-   */
+  --cobre-card-header-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-card-header-padding: 24px;
 
-   :root {
-    --cobre-side-menu-bg: var(--cobre-primary-95);
-    --cobre-side-menu-divider-color: 1px solid var(--cobre-primary-60);
-    --cobre-side-menu-color: var(--cobre-primary-30);
-    --cobre-side-menu-item-bg: var(--cobre-primary-95);
-    --cobre-side-menu-active-bg: var(--cobre-primary-90);
-    --cobre-side-menu-active-color: var(--cobre-primary-20);
-    --cobre-side-menu-focus-bg: var(--cobre-primary-90);
-    --cobre-side-menu-focus-color: var(--cobre-primary-20);
-    --cobre-side-menu-focus-border: 1px solid var(--cobre-primary-20);
-    --cobre-side-menu-hover-bg: var(--cobre-primary-40);
-    --cobre-side-menu-hover-color: var(--cobre-primary-20);
-    --cobre-side-menu-disabled-color: var(--cobre-primary-50);
-    --cobre-side-menu-item-padding: 12px 8px;
-    --cobre-side-menu-item-width: 173px;
-    --cobre-side-menu-item-height: 40px;
-    --cobre-side-menu-item-radius: 8px;
-
-     --cobre-side-menu-option-bg: var(--cobre-primary-90);
-     --cobre-side-menu-option-color: var(--cobre-primary-95);
-     --cobre-side-menu-option-padding: 4px 8px;
-     --cobre-side-menu-option-height: 40px;
-     --cobre-side-menu-option-radius: 8px;
-
-     --cobre-side-menu-option-active-bg: var(--cobre-primary-80);
-     --cobre-side-menu-option-active-color: var(--cobre-primary-10);
-
-     --cobre-side-menu-option-hover-bg: var(--cobre-primary-80);
-     --cobre-side-menu-option-hover-color: var(--cobre-primary-10);
-     --cobre-side-menu-option-focus-border: 1px solid var(--cobre-secondary-20);
-   }
-
-   /**
-   * Header V3
-   */
+  --cobre-card-content-padding: 24px 0 0 0;
+}
 
-   :root {
-    --cobre-header-v3-background: var(--cobre-white);
-    --cobre-header-v3-height: 48px;
-   }
+/**
+* Flow Result v3
+*/
 
+:root {
+  --cobre-flow-result-border-bottom: var(--cobre-gray-20);
 
-  /**
-  * Input V3
-  */
+  // Danger
+  --cobre-flow-result-danger-bg: var(--cobre-red-10);
+  --cobre-flow-result-danger-color: var(--cobre-red-50);
 
-  :root {
-    --cobre-input-v3-height: 32px;
-    --cobre-input-v3-color: var(--cobre-primary-95);
-    --cobre-input-v3-radius: 4px;
-    --cobre-input-v3-fw: 400;
-    --cobre-input-v3-fs: 12px;
+  // Success
+  --cobre-flow-result-success-bg: var(--cobre-green-10);
+  --cobre-flow-result-success-color: var(--cobre-green-50);
 
-    --cobre-input-v3-placeholder-color: var(--cobre-primary-50);
-    --cobre-input-v3-placeholder-fw: 400 !important;
+  // Info
+  --cobre-flow-result-info-bg: var(--cobre-blue-10);
+  --cobre-flow-result-info-color: var(--cobre-blue-50);
 
-    --cobre-input-v3-focus-border: 0.5px solid var(--cobre-secondary-50);
-    --cobre-input-v3-autofill-border: 0.5px solid var(--cobre-secondary-50);
+  // Warning
+  --cobre-flow-result-warning-bg: var(--cobre-yellow-10);
+  --cobre-flow-result-warning-color: var(--cobre-yellow-50);
 
-    --cobre-input-v3-error-border: 0.5px solid var(--cobre-red-50);
-    --cobre-input-v3-error-color: var(--cobre-red-50);
+  // Logout
+  --cobre-flow-result-logout-bg: var(--cobre-blue-10);
+  --cobre-flow-result-logout-color: var(--cobre-blue-50);
 
-    --cobre-input-v3-optional-label-fs: 12px;
-    --cobre-input-v3-optional-label-color: var(--cobre-primary-95);
-    --cobre-input-v3-optional-label-disabled-color: var(--cobre-primary-50);
+  // Otp
+  --cobre-flow-result-otp-bg: var(--cobre-blue-10);
+  --cobre-flow-result-otp-color: var(--cobre-blue-50);
+}
 
-    // input search
-    --cobre-input-search-v3-color: var(--cobre-primary-80);
-    --cobre-input-search-v3-border: 0;
-    --cobre-input-search-v3-border-bottom: 1px solid var(--cobre-primary-95);
-    --cobre-input-search-v3-focus-border-bottom: 1px solid var(--cobre-secondary-50);
-    --cobre-input-search-v3-focus-search-color: var(--cobre-brand);
+/**
+* Options Switch
+*/
 
-    --cobre-input-v3-focus-bg: var(--cobre-white);
-    --cobre-input-v3-focus-border-bottom: 1px solid var(--cobre-brand);
-    --cobre-input-v3-focus-search-color: var(--cobre-brand);
-    --cobre-input-v3-focus-fw: 500;
+:root {
+  --cobre-option-switch-bg: var(--cobre-gray-5);
+  --cobre-option-switch-color: var(--cobre-gray-80);
+  --cobre-option-switch-radius: 8px;
+  --cobre-option-switch-height: 32px;
+  --cobre-option-switch-min-width: 110px;
+  --cobre-option-switch-font-size: 12px;
+  --cobre-option-switch-shadow: none;
 
-    // theme white
+  --cobre-option-switch-selected-bg: var(--cobre-white);
+  --cobre-option-switch-selected-color: var(--cobre-gray-80);
+  --cobre-option-switch-selected-fw: 400;
 
-    --cobre-input-v3-white-bg: var(--cobre-white);
-    --cobre-input-v3-white-border: 0.5px solid var(--cobre-primary-20);
-    --cobre-input-v3-white-hover-border: 0.5px solid var(--cobre-primary-95);
-    --cobre-input-v3-white-hover-bg: var(--cobre-primary-5);
+  --cobre-option-switch-disabled-bg: var(--cobre-gray-10);
+  --cobre-option-switch-disabled-color: var(--cobre-gray-50);
 
-    --cobre-input-v3-white-disabled-bg: var(--cobre-primary-10);
-    --cobre-input-v3-white-disabled-color: var(--cobre-primary-50);
-    --cobre-input-v3-white-disabled-border: none;
+  --cobre-option-switch-desktop-min-width: 135px;
+}
 
-    --cobre-input-v3-white-active-bg: var(--cobre-white);
-    --cobre-input-v3-white-active-border: 1px solid var(--cobre-secondary-50);
-    --cobre-input-v3-white-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
+/**
+* Float Modal
+*/
 
-    // theme cloudy
+:root {
+  --cobre-float-modal-bg: var(--cobre-opacity-40);
+  --cobre-float-modal-bg-filter: blur(4px);
+  --cobre-float-modal-opacity: 1;
+  --cobre-float-modal-z-index: 15;
+}
 
-    --cobre-input-v3-cloudy-bg: var(--cobre-white);
-    --cobre-input-v3-cloudy-border: 0.5px solid var(--cobre-primary-40);
-    --cobre-input-v3-cloudy-hover-border: 0.5px solid var(--cobre-primary-95);
-    --cobre-input-v3-cloudy-hover-bg: var(--cobre-primary-10);
+/**
+* Toast Alert
+*/
 
-    --cobre-input-v3-cloudy-disabled-bg: var(--cobre-primary-20);
-    --cobre-input-v3-cloudy-disabled-color: var(--cobre-primary-50);
-    --cobre-input-v3-cloudy-disabled-border: 0.5px solid var(--cobre-primary-60);
+:root {
+  --cobre-toast-padding: 12px;
 
-    --cobre-input-v3-cloudy-active-bg: var(--cobre-white);
-    --cobre-input-v3-cloudy-active-border: 1px solid var(--cobre-secondary-50);
-    --cobre-input-v3-cloudy-active-shadow: 0 0 0 0.25rem var(--cobre-secondary-20);
-  }
+  --cobre-toast-title-font-weight: 600;
+  --cobre-toast-title-color: var(--cobre-primary-95);
 
-  /**
-  * Empty State v3
-  */
+  --cobre-toast-content-font-weight: 400;
+  --cobre-toast-content-color: var(--cobre-primary-85);
 
-  :root {
-    --cobre-empty-state-v3-color: var(--cobre-primary-95);
-  }
+  --cobre-toast-text-font-weight: 600;
 
-  /**
-  * RADIUS
-  */
+  --cobre-toast-description-font-size: 16px;
+  --cobre-toast-description-font-weight: 400;
 
-  :root {
-    --cobre-radius-full: 62.4375rem;
-    --cobre-radius-M: 1rem;
-    --cobre-radius-S: 0.5rem;
-    --cobre-radius-XS: 0.25rem;
-  }
+  --cobre-toast-icon-close-color: var(--cobre-primary-95);
+  --cobre-toast-icon-close-font-size: 16px;
+  --cobre-toast-icon-close-font-weight: 400;
+  --cobre-toast-icon-close-top: 1px;
 
-  /**
-  * BORDER
-  */
+  --cobre-toast-warning-bg: var(--cobre-white);
+  --cobre-toast-warning-border: var(--cobre-border-stroke-L) solid var(--cobre-yellow-50);
 
-  :root {
-    --cobre-border-stroke-XXXL: 0.1875rem;
-    --cobre-border-stroke-XL: 0.125rem;
-    --cobre-border-stroke-L: 0.0625rem;
-    --cobre-border-stroke-M: 0.03125rem;
+  --cobre-toast-danger-bg: var(--cobre-white);
+  --cobre-toast-danger-border: var(--cobre-border-stroke-L) solid var(--cobre-red-50);
 
-  }
+  --cobre-toast-success-bg: var(--cobre-white);
+  --cobre-toast-success-border: var(--cobre-border-stroke-L) solid var(--cobre-green-50);
 
-  /**
-  * Card v3
-  */
+  --cobre-toast-info-bg: var(--cobre-white);
+  --cobre-toast-info-border: var(--cobre-border-stroke-L) solid var(--cobre-blue-50);
 
-  :root {
-    --cobre-card-border: 0.5px solid var(--cobre-primary-20);
-    --cobre-card-border-radius: 8px;
-    --cobre-card-padding: 24px;
+  --cobre-toast-icon-padding: 3px;
+  --cobre-toast-icon-border-radius: 20px;
 
-    --cobre-card-header-border: 0.5px solid var(--cobre-primary-20);
-    --cobre-card-header-padding: 24px;
+  --cobre-toast-icon-warning-color: var(--cobre-yellow-50);
+  --cobre-toast-icon-warning-bg: var(--cobre-yellow-10);
 
-    --cobre-card-content-padding: 24px 0;
-  }
+  --cobre-toast-icon-danger-color: var(--cobre-red-50);
+  --cobre-toast-icon-danger-bg: var(--cobre-red-10);
 
-  /**
-  * Flow Result v3
-  */
+  --cobre-toast-icon-success-color: var(--cobre-green-50);
+  --cobre-toast-icon-success-bg: var(--cobre-green-10);
 
-  :root {
-    --cobre-flow-result-border: 0.5px solid var(--cobre-primary-20);
+  --cobre-toast-icon-info-color: var(--cobre-blue-50);
+  --cobre-toast-icon-info-bg: var(--cobre-blue-10);
+}
 
-    // Danger
-    --cobre-flow-result-danger-bg: var(--cobre-red-10);
-    --cobre-flow-result-danger-color: var(--cobre-red-50);
+/**
+ * Uploader V3
+ */
 
-    // Success
-    --cobre-flow-result-success-bg: var(--cobre-green-10);
-    --cobre-flow-result-success-color: var(--cobre-green-50);
+:root {
+  --cobre-uploader-v3-bg: var(--cobre-primary-5);
+  --cobre-uploader-v3-color: var(--cobre-primary-80);
+  --cobre-uploader-v3-border: var(--cobre-border-stroke-L) dashed var(--cobre-primary-20);
+  --cobre-uploader-v3-height: 174px;
+  --cobre-uploader-v3-radius: var(--cobre-radius-S);
+  --cobre-uploader-v3-disabled-color: var(--cobre-gray-30);
 
-  // Info
-    --cobre-flow-result-info-bg: var(--cobre-blue-10);
-    --cobre-flow-result-info-color: var(--cobre-blue-50);
+  --cobre-uploader-v3-title-color: var(--cobre-text-primary-light);
 
-    // Warning
-    --cobre-flow-result-warning-bg: var(--cobre-yellow-10);
-    --cobre-flow-result-warning-color: var(--cobre-yellow-50);
+  --cobre-uploader-v3-icon-color: var(--cobre-primary-80);
+  --cobre-uploader-v3-text-color: var(--cobre-primary-50);
 
-    // Logout
-    --cobre-flow-result-logout-bg: var(--cobre-blue-10);
-    --cobre-flow-result-logout-color: var(--cobre-blue-50);
+  --cobre-uploader-v3-active-drop-bg: var(--cobre-secondary-5);
+  --cobre-uploader-v3-active-drop-color: var(--cobre-secondary-50);
 
-    // Otp
-    --cobre-flow-result-otp-bg: var(--cobre-blue-10);
-    --cobre-flow-result-otp-color: var(--cobre-blue-50)
-  }
+  --cobre-uploader-v3-drag-area-active-bg: var(--cobre-secondary-5);
+  --cobre-uploader-v3-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
+  --cobre-uploader-v3-drag-area-disabled-bg: var(--cobre-primary-5);
+  --cobre-uploader-v3-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
 
-  /**
-  * Float Modal
-  */
+  --cobre-uploader-v3-selected-file-border: 1px solid var(--cobre-secondary-50);
+  --cobre-uploader-v3-selected-file-bg: var(--cobre-primary-5);
+  --cobre-uploader-v3-selected-file-color: var(--cobre-gray-95);
+}
 
-  :root {
-    --cobre-float-modal-bg: var(--cobre-primary-20);
-    --cobre-float-modal-bg-filter: none;
-    --cobre-float-modal-opacity: 0.3;
-    --cobre-float-modal-z-index: 2;
+/**
+* Loader
+*/
 
-    --cobre-float-modal-footer-border: 0.5px solid var(--cobre-primary-20);
-  }
+:root {
+  --cobre-loader-border-color: var(--cobre-primary-95) var(--cobre-primary-95) #0000 #0000
+}
 
+/**
+* Select
+*/
+
+:root {
+  --cobre-select-height: 32px;
+  --cobre-select-bg: var(--cobre-white);
+  --cobre-select-color: var(--cobre-primary-95);
+  --cobre-select-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-select-radius: 4px;
+  --cobre-select-arrow: 16px;
+  --cobre-select-border-radius: 4px;
+
+  --cobre-select-hover-bg: var(--cobre-primary-10);
+  --cobre-select-hover-color: var(--cobre-primary-95);
+  --cobre-select-hover-border-color: var(--cobre-primary-95);
+
+  --cobre-select-active-color: var(--cobre-primary-95);
+  --cobre-select-active-border-color: var(--cobre-teal-50);
+
+  --cobre-select-active-focus-color: var(--cobre-gray-95);
+  --cobre-select-active-focus-shadow: none;
+
+  --cobre-select-disabled-border: var(--cobre-gray-95);
+
+  --cobre-select-selected-bg: var(--cobre-primary-20);
+  --cobre-select-selected-color: var(--cobre-primary-95);
+  --cobre-select-selected-input-color: var(--cobre-gray-80);
+
+  --cobre-select-dropdown-border: var(--cobre-primary-10);
+  --cobre-select-dropdown-margin-top: 4px;
+  --cobre-select-dropdown-item-height: 28px;
+  --cobre-select-dropdown-item-font-size: 12px;
+  --cobre-select-dropdown-item-padding: 4px;
+  --cobre-select-dropdown-item-color: var(--cobre-primary-80);
+  --cobre-select-dropdown-item-disabled-bg: var(--cobre-white);
+  --cobre-select-dropdown-item-disabled-color: var(--cobre-primary-50);
+  --cobre-select-dropdown-item-active-bg: var(--cobre-primary-20);
+  --cobre-select-dropdown-item-margin: 4px;
+
+  --cobre-select-add-item-color: var(--cobre-primary-50);
+
+  --cobre-select-badge-color: var(--cobre-gray-95);
+}
 
-  /**
-  * Toast Alert
+/**
+  * Select V3
   */
 
-  :root {
-    --cobre-toast-padding: 12px 8px;
+:root {
 
-    --cobre-toast-title-font-weight: 600;
-    --cobre-toast-title-color: var(--cobre-primary-95);
+  --cobre-input-border-selected: var(--cobre-secondary-50);
 
-    --cobre-toast-content-font-weight: 400;
-    --cobre-toast-content-color: var(--cobre-primary-80);
+  --cobre-select-v3-hover-color: var(--cobre-primary-95);
+  --cobre-select-v3-hover-border-color: var(--cobre-primary-30);
 
-    --cobre-toast-text-font-weight: 600;
+  --cobre-select-v3-active-color: var(--cobre-primary-95);
 
-    --cobre-toast-description-font-size: 16px;
-    --cobre-toast-description-font-weight: 400;
+  --cobre-select-v3-active-focus-color: var(--cobre-primary-95);
+  --cobre-select-v3-active-focus-shadow: none;
 
-    --cobre-toast-icon-close-color: var(--cobre-primary-95);
-    --cobre-toast-icon-close-font-size: 24px;
-    --cobre-toast-icon-close-font-weight: 400;
-    --cobre-toast-icon-close-top: -12px;
+  --cobre-select-disabled-border: var(--cobre-primary-95);
 
-    --cobre-toast-warning-bg: var(--cobre-yellow-10);
-    --cobre-toast-warning-border: none;
+  --cobre-select-v3-selected-bg: var(--cobre-primary-20);
+  --cobre-select-v3-selected-color: var(--cobre-primary-95);
 
-    --cobre-toast-danger-bg: var(--cobre-red-10);
-    --cobre-toast-danger-border: none;
+  --cobre-select-v3-dropdown-item-margin: 4px;
+  --cobre-select-v3-dropdown-item-height: 28px;
 
-    --cobre-toast-success-bg: var(--cobre-green-10);
-    --cobre-toast-success-border: none;
+  /* z-index */
+  --vs-dropdown-z-index: 2 !important;
 
-    --cobre-toast-info-bg: var(--cobre-blue-10);
-    --cobre-toast-info-border: none;
+  /* Search Input */
+  --vs-search-input-bg: var(--cobre-input-bg) !important;
+  --vs-search-input-placeholder-color: var(--cobre-primary-50) !important;
 
-    --cobre-toast-icon-padding: 3px;
-    --cobre-toast-icon-border-radius: 20px;
+  /* Font */
+  --vs-font-size: var(--cobre-label-small-fs) !important;
 
-    --cobre-toast-icon-warning-color: var(--cobre-yellow-50);
-    --cobre-toast-icon-warning-bg: var(--cobre-yellow-10);
+  /* Disabled State */
+  --vs-disabled-bg: var(--cobre-primary-5) !important;
+  --vs-disabled-color: var(--cobre-primary-40) !important;
 
-    --cobre-toast-icon-danger-color: var(--cobre-red-50);
-    --cobre-toast-icon-danger-bg: var(--cobre-red-10);
+  /* Borders */
+  --vs-border-color: var(--cobre-primary-20) !important;
+  --vs-border-width: var(--cobre-border-stroke-M) !important;
+  --vs-border-radius: var(--cobre-radius-XS) !important;
 
-    --cobre-toast-icon-success-color: var(--cobre-green-50);
-    --cobre-toast-icon-success-bg: var(--cobre-green-10);
-
-    --cobre-toast-icon-info-color: var(--cobre-blue-50);
-    --cobre-toast-icon-info-bg: var(--cobre-blue-10);
-  }
-
-  /**
-   * Uploader V3
-   */
+  /* Actions: house the component controls */
+  --vs-actions-padding: 4px 6px 0 3px;
 
-   :root {
-    --cobre-uploader-v3-bg: var(--cobre-white);
-    --cobre-uploader-v3-color: var(--cobre-primary-60);
-    --cobre-uploader-v3-border: 1.5px dashed var(--cobre-primary-50);
-    --cobre-uploader-v3-height: auto;
-    --cobre-uploader-v3-radius: 8px;
-    --cobre-uploader-v3-disabled-color: var(--cobre-primary-30);
-    --cobre-uploader-v3-title-color: var(--cobre-primary-95);
+  /* Selected */
+  --vs-selected-bg: var(--cobre-input-bg) !important;
+  --vs-selected-color: var(--cobre-input-color) !important;
 
-    --cobre-uploader-v3-icon-color: var(--cobre-primary-95);
-    --cobre-uploader-v3-text-color: var(--cobre-primary-30);
-    --cobre-uploader-v3-text-disabled-color: var(--cobre-primary-40);
+  /* Dropdown */
+  --vs-dropdown-bg: var(--cobre-select-bg) !important;
 
-    --cobre-uploader-v3-disabled-box-bg: var(--cobre-primary-7);
-    --cobre-uploader-v3-active-drop-bg: var(--cobre-secondary-5);
-    --cobre-uploader-v3-active-drop-color: var(--cobre-secondary-50);
+  /* Options */
+  --vs-dropdown-option-color: var(--cobre-input-color) !important;
+  --vs-dropdown-option-padding: 4px !important;
 
-    --cobre-uploader-v3-drag-area-active-bg: var(--cobre-secondary-5);
-    --cobre-uploader-v3-drag-area-active-border: 1.5px dashed var(--cobre-secondary-50);
-    --cobre-uploader-v3-drag-area-disabled-bg: var(--cobre-primary-5);
-    --cobre-uploader-v3-drag-area-disabled-border: 1.5px dashed var(--cobre-primary-30);
+  /* Active State */
+  --vs-dropdown-option--active-bg: var(--cobre-select-v3-selected-bg) !important;
+  --vs-dropdown-option--active-color: var(--cobre-input-color) !important;
+}
 
-    --cobre-uploader-v3-selected-file-border: 1px solid var(--cobre-secondary-50);
-    --cobre-uploader-v3-selected-file-bg: var(--cobre-primary-5);
-    --cobre-uploader-v3-selected-file-color: var(--cobre-primary-95);
-  }
-
-
-  /**
-  * Loader
-  */
-
-  :root {
-    --cobre-loader-border-color: var(--cobre-brand) var(--cobre-brand) #0000 #0000
-  }
-
-  /**
-  * Select V3
-  */
-
-  :root {
-
-    --cobre-input-border-selected: var(--cobre-secondary-50);
-
-    --cobre-select-v3-hover-color: var(--cobre-primary-95);
-    --cobre-select-v3-hover-border-color: var(--cobre-primary-30);
-
-    --cobre-select-v3-active-color: var(--cobre-primary-95);
-
-    --cobre-select-v3-active-focus-color: var(--cobre-primary-95);
-    --cobre-select-v3-active-focus-shadow: none;
-
-    --cobre-select-disabled-border: var(--cobre-primary-95);
-
-    --cobre-select-v3-selected-bg: var(--cobre-primary-20);
-    --cobre-select-v3-selected-color: var(--cobre-primary-95);
-
-    --cobre-select-v3-dropdown-item-margin: 4px;
-    --cobre-select-v3-dropdown-item-height: 28px;
-
-    /* z-index */
-    --vs-dropdown-z-index: 2 !important;
-
-    /* Search Input */
-    --vs-search-input-bg: var(--cobre-input-bg) !important;
-    --vs-search-input-placeholder-color: var(--cobre-primary-50) !important;
-
-    /* Font */
-    --vs-font-size: var(--cobre-label-small-fs) !important;
-
-    /* Disabled State */
-    --vs-disabled-bg: var(--cobre-primary-5) !important;
-    --vs-disabled-color: var(--cobre-primary-40) !important;
-
-    /* Borders */
-    --vs-border-color: var(--cobre-primary-20) !important;
-    --vs-border-width: var(--cobre-border-stroke-M) !important;
-    --vs-border-radius: var(--cobre-radius-XS) !important;
-
-    /* Actions: house the component controls */
-    --vs-actions-padding: 4px 6px 0 3px;
-
-    /* Selected */
-    --vs-selected-bg: var(--cobre-input-bg) !important;
-    --vs-selected-color: var(--cobre-input-color) !important;
+/**
+* SnackBar
+*/
 
-    /* Dropdown */
-    --vs-dropdown-bg: var(--cobre-select-bg) !important;
+:root {
+  --toastify-toast-width: auto;
+  --toastify-toast-min-height: 40px;
+  --toastify-color-light: var(--cobre-primary-95);
+  --toastify-text-color-light: var(--cobre-primary-5);
+  --toastify-font-family: var(--cobre-font-family);
+  --cobre-select-badge-color: var(--cobre-gray-95);
+}
 
-    /* Options */
-    --vs-dropdown-option-color: var(--cobre-input-color) !important;
-    --vs-dropdown-option-padding: 4px !important;
 
-    /* Active State */
-    --vs-dropdown-option--active-bg: var(--cobre-select-v3-selected-bg) !important;
-    --vs-dropdown-option--active-color:  var(--cobre-input-color) !important;
-  }
+/**
+* CheckBox
+*/
+
+:root {
+  --cobre-checkbox-size-small: 16px;
+  --cobre-checkbox-size-medium: 24px;
+  --cobre-checkbox-radius-small: 4px;
+  --cobre-checkbox-radius-medium: 8px;
+  --cobre-checkbox-bg: var(--cobre-bg-primary);
+  --cobre-checkbox-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
+  --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+
+  --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
+  --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
+
+  --cobre-checkbox-input-hover-bg: var(--cobre-secondary-10);
+  --cobre-checkbox-input-hover-border: 1px solid var(--cobre-secondary-50);
+
+  --cobre-checkbox-input-disabled-bg: var(--cobre-secondary-30);
+}