@wf-financing/ui 3.12.2 → 3.13.1

package/dist/ui.css

@@ -1 +1 @@
-:root,:host{--app-theme-key: wayflyer;--defaults-borderRadius: 8px;--defaults-button-borderRadius: 8px;--defaults-button-sizes-normal: 40px;--defaults-button-sizes-small: 32px;--defaults-modal-large-width-lg: 900px;--defaults-modal-large-width-md: 900px;--defaults-modal-normal-width-lg: 600px;--defaults-modal-normal-width-md: 504px;--defaults-page-width: 968px;--effects-blur: blur(6px);--effects-focus: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 2px #5A61B2;--effects-shadow: 0px 2px 20px rgba(22, 21, 23, .08);--extendedPalette-chart-background: #fff;--extendedPalette-chart-boxShadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--extendedPalette-chart-color: fade(@black, 85%);--extendedPalette-chart-colors-deselectedColor: #C0C0C0;--extendedPalette-chart-colors-gridColor: #E8E8E8;--extendedPalette-chart-colors-primaryColor: #54C4FC;--extendedPalette-chart-colors-primaryLabelColor: #262626;--extendedPalette-chart-colors-secondaryColor: #FCB779;--extendedPalette-chart-colors-secondaryColorPaler: #ada8ae;--extendedPalette-chart-colors-secondaryLabelColor: #8c8c8c;--extendedPalette-chart-delta-negative: #AD0000;--extendedPalette-chart-delta-positive: #0D610C;--extendedPalette-chart-multichartColors-chart1: #6B7280;--extendedPalette-chart-multichartColors-chart10: #6366F1;--extendedPalette-chart-multichartColors-chart11: #8B5CF6;--extendedPalette-chart-multichartColors-chart12: #EC4899;--extendedPalette-chart-multichartColors-chart13: #F43F5E;--extendedPalette-chart-multichartColors-chart2: #EF4444;--extendedPalette-chart-multichartColors-chart3: #F97316;--extendedPalette-chart-multichartColors-chart4: #F59E0B;--extendedPalette-chart-multichartColors-chart5: #0D610C;--extendedPalette-chart-multichartColors-chart6: #14B8A6;--extendedPalette-chart-multichartColors-chart7: #06B6D4;--extendedPalette-chart-multichartColors-chart8: #0EA5E9;--extendedPalette-chart-multichartColors-chart9: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-bar-color1: #A7F3D0;--extendedPalette-chart-multiLineBarChartColors-bar-color2: #34D399;--extendedPalette-chart-multiLineBarChartColors-bar-color3: #059669;--extendedPalette-chart-multiLineBarChartColors-bar-color4: #06B6D4;--extendedPalette-chart-multiLineBarChartColors-bar-color5: #0EA5E9;--extendedPalette-chart-multiLineBarChartColors-bar-color6: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-line-color1: #F59E0B;--extendedPalette-chart-multiLineBarChartColors-line-color2: #6366F1;--extendedPalette-chart-multiLineBarChartColors-line-color3: #EF4444;--extendedPalette-chart-multiLineBarChartColors-line-color4: #10B981;--extendedPalette-chart-multiLineBarChartColors-line-color5: #EC4899;--extendedPalette-chart-multiLineBarChartColors-line-color6: #F43F5E;--extendedPalette-chart-shadowColor: rgba(0, 0, 0, .15);--extendedPalette-pinnedMetrics-borderColor-default: #FFFFFF;--extendedPalette-pinnedMetrics-borderColor-sorted: #1D44CE;--extendedPalette-pinnedMetrics-borderColor-summary: #0D610C;--extendedPalette-pinnedMetrics-borderStyle: solid;--extendedPalette-pinnedMetrics-borderWidth: 2;--extendedPalette-scaler-iconColor: #ffffff;--extendedPalette-task-completed: #059669;--extendedPalette-task-pending: #faad14;--palette-advancesBalance-surface-default: #ffffff;--palette-advancesBalance-surface-stats: #f5f5fa;--palette-bnkgCreditCard-text-frozen: #686c94;--palette-buttons-critical-primary-contents-default: #ffffff;--palette-buttons-critical-primary-contents-disabled: #f27a8c;--palette-buttons-critical-primary-contents-hovered: #ffffff;--palette-buttons-critical-primary-surface-default: #c62547;--palette-buttons-critical-primary-surface-disabled: #f6e6e9;--palette-buttons-critical-primary-surface-hovered: #b72948;--palette-buttons-critical-secondary-border-default: #c62547;--palette-buttons-critical-secondary-border-disabled: #f6e6e9;--palette-buttons-critical-secondary-border-hovered: #f27a8c;--palette-buttons-critical-secondary-contents-default: #c62547;--palette-buttons-critical-secondary-contents-disabled: #f27a8c;--palette-buttons-critical-secondary-contents-hovered: #b72948;--palette-buttons-critical-secondary-surface-default: #ffffff;--palette-buttons-critical-secondary-surface-disabled: #ffffff;--palette-buttons-critical-secondary-surface-hovered: #f6e6e9;--palette-buttons-critical-tertiary-contents-default: #c62547;--palette-buttons-critical-tertiary-contents-disabled: #f27a8c;--palette-buttons-critical-tertiary-contents-hovered: #b72948;--palette-buttons-critical-tertiary-surface-default: #f6e6e9;--palette-buttons-primary-contents-default: #ffffff;--palette-buttons-primary-contents-disabled: #ada8ae;--palette-buttons-primary-surface-default: #313347;--palette-buttons-primary-surface-disabled: #f9f7fa;--palette-buttons-primary-surface-hovered: #5b5f83;--palette-buttons-primaryOnDark-contents-default: #161517;--palette-buttons-primaryOnDark-contents-disabled: #ada8ae;--palette-buttons-primaryOnDark-contents-hovered: #161517;--palette-buttons-primaryOnDark-surface-default: #ffffff;--palette-buttons-primaryOnDark-surface-disabled: #ddd9de;--palette-buttons-primaryOnDark-surface-hover: #f5f5fe;--palette-buttons-secondary-border-active: #d7daf9;--palette-buttons-secondary-border-default: #8d90be;--palette-buttons-secondary-border-disabled: #cdc9ce;--palette-buttons-secondary-border-hovered: #7478a4;--palette-buttons-secondary-contents-default: #353a71;--palette-buttons-secondary-contents-disabled: #ada8ae;--palette-buttons-secondary-surface-active: #e8eaf9;--palette-buttons-secondary-surface-default: #f5f5fe;--palette-buttons-secondary-surface-disabled: #ffffff;--palette-buttons-secondary-surface-hovered: #f2f3ff;--palette-buttons-secondaryOnDark-border-default: #ffffff;--palette-buttons-secondaryOnDark-border-disabled: #ede9ee;--palette-buttons-secondaryOnDark-border-hover: #daddff;--palette-buttons-secondaryOnDark-contents-default: #ffffff;--palette-buttons-secondaryOnDark-contents-disabled: #ada8ae;--palette-buttons-secondaryOnDark-contents-hovered: #d7daf9;--palette-buttons-tertiary-border-hovered: #f5f5fa;--palette-buttons-tertiary-contents-default: #6e6a70;--palette-buttons-tertiary-contents-disabled: #ada8ae;--palette-buttons-tertiary-contents-hovered: #161517;--palette-buttons-tertiary-surface-hovered: #ffffff;--palette-buttons-tertiaryAccent-border-hovered: #f5f5fa;--palette-buttons-tertiaryAccent-contents-default: #5a61b2;--palette-buttons-tertiaryAccent-contents-disabled: #ada8ae;--palette-buttons-tertiaryAccent-contents-hovered: #0b0c17;--palette-buttons-tertiaryAccent-surface-hovered: #ffffff;--palette-buttons-tertiaryOnDark-border-hovered: #f5f5fa;--palette-buttons-tertiaryOnDark-contents-default: #ffffff;--palette-buttons-tertiaryOnDark-contents-disabled: #ada8ae;--palette-buttons-tertiaryOnDark-contents-hovered: #f5f5fa;--palette-card-border-active: #222547;--palette-card-border-default: #cdc9ce;--palette-card-border-hovered: #6e6a70;--palette-card-border-subdued: #ddd9de;--palette-card-surface-default: #ffffff;--palette-card-surface-hovered: #ffffff;--palette-connection-pageSurface: #212330;--palette-connection-surface-default: #f5f5fa;--palette-connection-surface-hovered: #e8eaf9;--palette-connections-surface-connectedInfo: #fcfcff;--palette-connections-surface-default: #ffffff;--palette-dataViz-axisLines: #f4f1f5;--palette-dataViz-pinBorder: #ffffff;--palette-dataViz-pinFill: #4de2f5;--palette-dataViz-stem: #ffffff;--palette-datePicker-content-active: #5a61b2;--palette-datePicker-content-default: #ffffff;--palette-datePicker-content-hovered: #e8eaf9;--palette-datePicker-numbers-active: #e8eaf9;--palette-datePicker-numbers-default: #ffffff;--palette-datePicker-surface-default: #ffffff;--palette-datePicker-surface-selected: #dfece3;--palette-dialog-border: #e8eaf9;--palette-dialog-surface: #ffffff;--palette-dropdown-border-default: #e8eaf9;--palette-dropdown-surface-default: #ffffff;--palette-dropdown-surface-hovered: #f9f9ff;--palette-dropdown-surface-selected: #f2f3ff;--palette-icon-active: #161517;--palette-icon-default: #79757b;--palette-icon-disabled: #ada8ae;--palette-icon-error-strong: #c62547;--palette-icon-info-strong: #0c5ba1;--palette-icon-onDark: #ffffff;--palette-icon-success-strong: #087644;--palette-icon-warning-strong: #d96623;--palette-input-border-active: #b4b8e4;--palette-input-border-checked: #5a61b2;--palette-input-border-default: #8d90be;--palette-input-border-disabled: #cdc9ce;--palette-input-border-error: #c62547;--palette-input-border-hovered: #686c94;--palette-input-border-readonly: #cdc9ce;--palette-input-border-success-strong: #087644;--palette-input-border-success-weak: #dfece3;--palette-input-stem-active: #161517;--palette-input-stem-disabled: #908c92;--palette-input-stem-readonly: #cdc9ce;--palette-input-surface-active: #ffffff;--palette-input-surface-checked-default: #5a61b2;--palette-input-surface-checked-disabled: #908c92;--palette-input-surface-checked-readonly: #161517;--palette-input-surface-default: #fcfcff;--palette-input-surface-disabled: #fbfafb;--palette-input-surface-hovered: #fafafe;--palette-input-surface-readonly: #fbfafb;--palette-input-surface-success-strong: #087644;--palette-input-surface-success-weak: #dfece3;--palette-layout-containerSurface: #ffffff;--palette-layout-pageSurface: #212330;--palette-listItems-border-default: #fcfcff;--palette-listItems-border-hovered: #e8eaf9;--palette-listItems-surface-default: #fcfcff;--palette-listItems-surface-hovered: #ffffff;--palette-modal-border: #e8eaf9;--palette-modal-surface: #ffffff;--palette-multiStepper-indicator-active: #f0f0fa;--palette-multiStepper-indicator-completed: #353a71;--palette-multiStepper-indicator-incomplete: #d7daf9;--palette-multiStepper-text-default: #353a71;--palette-multiStepper-text-onDark: #ffffff;--palette-navigableTableRow-border-default: #d7daf9;--palette-navigableTableRow-surface-default: #ffffff;--palette-navigableTableRow-surface-hovered: #fcfcff;--palette-navItem-contents: #ffffff;--palette-navItem-default: #212330;--palette-navItem-hovered: #313347;--palette-navItem-notification: #4de2f5;--palette-navItem-selected: #40425d;--palette-navPopover-border: #40425d;--palette-navPopover-surface: #212330;--palette-popover-border-default: #e8eaf9;--palette-popover-contents-critical: #c62547;--palette-popover-contents-default: #161517;--palette-popover-contents-disabled: #c3bfc5;--palette-popover-contents-hovered: #2c305d;--palette-popover-surface-default: #ffffff;--palette-popover-surface-hovered: #f9f9ff;--palette-progressBar-surface-empty: #d7f5f9;--palette-progressBar-surface-filled: #4de2f5;--palette-progressBar-surface-processing: #029db2;--palette-revealTableRow-border-default: #d7daf9;--palette-revealTableRow-border-hovered: #c7caf1;--palette-revealTableRow-surface-active: #ffffff;--palette-revealTableRow-surface-hovered: #fcfcff;--palette-segment-border-default: #e8eaf9;--palette-segment-surface-active: #5a61b2;--palette-segment-surface-default: #fafafe;--palette-segment-surface-hover: #ffffff;--palette-sheet-border: #e8eaf9;--palette-sheet-surface: #ffffff;--palette-slider-defaultRail-active: #c7caf1;--palette-slider-defaultRail-default: #e8eaf9;--palette-slider-defaultRail-disabled: #f4f1f5;--palette-slider-defaultRail-hovered: #d7daf9;--palette-slider-handle-active: #212330;--palette-slider-handle-default: #313347;--palette-slider-handle-disabled: #6e6a70;--palette-slider-handle-hovered: #5b5f83;--palette-slider-selectedRail-active: #212330;--palette-slider-selectedRail-default: #313347;--palette-slider-selectedRail-disabled: #6e6a70;--palette-slider-selectedRail-hovered: #5b5f83;--palette-staticTableRow-border-default: #d7daf9;--palette-staticTableRow-contents-default: #161517;--palette-staticTableRow-surface-header: #f5f5fa;--palette-staticTableRow-surface-row: #ffffff;--palette-status-error-strong: #c62547;--palette-status-error-weak: #f6e6e9;--palette-status-info-strong: #0c5ba1;--palette-status-info-weak: #d8f1fa;--palette-status-neutral-strong: #908c92;--palette-status-neutral-weak: #f4f1f5;--palette-status-success-strong: #087644;--palette-status-success-weak: #dfece3;--palette-status-warning-strong: #d96623;--palette-status-warning-weak: #fbebdd;--palette-stepper-border-default: #908c92;--palette-stepper-surface-default: #f9f9ff;--palette-stepper-text-active: #161517;--palette-stepper-text-default: #6e6a70;--palette-switch-surface-active: #087644;--palette-switch-surface-default: #c3bfc5;--palette-switch-surface-disabled: #ede9ee;--palette-switch-track: #ffffff;--palette-table-background-default: #ffffff;--palette-table-background-header: #f4f4f5;--palette-table-background-hovered: #f9f9ff;--palette-table-background-selected: #ebf5ee;--palette-table-border-default: #e8e5ea;--palette-table-border-hovered: #686c94;--palette-table-border-selected: #027e46;--palette-table-border-strong: #c7caf1;--palette-table-border-weak: #f5f5fa;--palette-tableCell-border-default: #fcfcff;--palette-tableCell-border-hovered: #e8eaf9;--palette-tableCell-progressBar-empty: #e8eaf9;--palette-tableCell-progressBar-filled: #75ecfc;--palette-tableCell-progressBar-processing: #029db2;--palette-tableCell-surface-default: #fcfcff;--palette-tableCell-surface-hovered: #ffffff;--palette-tableCell-surface-hoveredAlt: #fcfcff;--palette-tableCell-thumb-brand: #75ecfc;--palette-tableCell-thumb-grey: #ede9ee;--palette-tableCell-thumb-white: #ffffff;--palette-tabs-border-active: #5a61b2;--palette-tabs-border-default: #c7caf1;--palette-tabs-border-hovered: #484e94;--palette-tabs-contents-active: #5a61b2;--palette-tabs-contents-default: #686c94;--palette-tabs-contents-disabled: #cdc9ce;--palette-tabs-contents-hovered: #484e94;--palette-text-default: #161517;--palette-text-disabled: #ada8ae;--palette-text-error: #c62547;--palette-text-heading: #161517;--palette-text-hovered: #2c305d;--palette-text-info: #0c5ba1;--palette-text-label: #161517;--palette-text-onAccent: #ffffff;--palette-text-onDark: #ffffff;--palette-text-placeholder: #6e6a70;--palette-text-readonly: #464247;--palette-text-success-strong: #087644;--palette-text-success-weak: #dfece3;--palette-text-warning: #d96623;--palette-tooltip-surface: #353a71;--palette-utility-divider: #ddd9de;--palette-utility-error-strong: #c62547;--palette-utility-error-weak: #f6e6e9;--palette-utility-focus: #5a61b2;--palette-utility-info-strong: #0c5ba1;--palette-utility-info-weak: #d8f1fa;--palette-utility-neutral-strong: #908c92;--palette-utility-neutral-weak: #f4f1f5;--palette-utility-overlay: #11142b;--palette-utility-primaryBrand: #4de2f5;--palette-utility-secondaryBrand: #052b30;--palette-utility-success-strong: #087644;--palette-utility-success-weak: #dfece3;--palette-utility-surface: #ffffff;--palette-utility-surfaceDarker: #f9f7fa;--palette-utility-tertiaryBrand: #e6fcff;--palette-utility-warning-strong: #d96623;--palette-utility-warning-weak: #fbebdd;--sizes-blur-050: 6;--sizes-blur-100: 12;--sizes-breakpoint-lg: 1280px;--sizes-breakpoint-md: 1024px;--sizes-breakpoint-sm: 768px;--sizes-breakpoint-xl: 1536px;--sizes-breakpoint-xs: 640px;--sizes-breakpoint-xxl: 1920px;--sizes-breakpoint-xxs: 375px;--sizes-breakpoint-xxxl: 2560px;--sizes-breakpoint-xxxs: 320px;--sizes-radius-0: 0;--sizes-radius-circle: 50%;--sizes-radius-lg: 12px;--sizes-radius-md: 8px;--sizes-radius-sm: 4px;--sizes-radius-xl: 16px;--sizes-radius-xs: 2px;--sizes-radius-xxl: 24px;--sizes-spacing--0-5: -2px;--sizes-spacing--1: -4px;--sizes-spacing--1-5: -6px;--sizes-spacing--10: -40px;--sizes-spacing--11: -44px;--sizes-spacing--12: -48px;--sizes-spacing--13: -52px;--sizes-spacing--14: -56px;--sizes-spacing--15: -60px;--sizes-spacing--16: -64px;--sizes-spacing--17: -68px;--sizes-spacing--18: -72px;--sizes-spacing--19: -76px;--sizes-spacing--2: -8px;--sizes-spacing--20: -80px;--sizes-spacing--24: -96px;--sizes-spacing--3: -12px;--sizes-spacing--32: -128px;--sizes-spacing--4: -16px;--sizes-spacing--5: -20px;--sizes-spacing--6: -24px;--sizes-spacing--7: -28px;--sizes-spacing--8: -32px;--sizes-spacing--9: -36px;--sizes-spacing-0: 0;--sizes-spacing-0-5: 2px;--sizes-spacing-1: 4px;--sizes-spacing-1-5: 6px;--sizes-spacing-10: 40px;--sizes-spacing-11: 44px;--sizes-spacing-12: 48px;--sizes-spacing-13: 52px;--sizes-spacing-14: 56px;--sizes-spacing-15: 60px;--sizes-spacing-16: 64px;--sizes-spacing-17: 68px;--sizes-spacing-18: 72px;--sizes-spacing-19: 76px;--sizes-spacing-2: 8px;--sizes-spacing-20: 80px;--sizes-spacing-24: 96px;--sizes-spacing-3: 12px;--sizes-spacing-32: 128px;--sizes-spacing-4: 16px;--sizes-spacing-5: 20px;--sizes-spacing-6: 24px;--sizes-spacing-7: 28px;--sizes-spacing-7-5: 30px;--sizes-spacing-8: 32px;--sizes-spacing-9: 36px;--sizes-spacing-auto: auto;--sizes-stroke-default: 1;--sizes-stroke-focusRing: 2;--sizes-stroke-strong: 2;--typography-fontFamily-body: Inter, sans-serif;--typography-fontFamily-heading: Inter, sans-serif;--typography-fontSize-2xl: 22px;--typography-fontSize-3xl: 24px;--typography-fontSize-4xl: 28px;--typography-fontSize-5xl: 32px;--typography-fontSize-6xl: 40px;--typography-fontSize-base: 16px;--typography-fontSize-lg: 18px;--typography-fontSize-sm: 14px;--typography-fontSize-xl: 20px;--typography-fontSize-xs: 12px;--typography-fontWeight-bold: 700;--typography-fontWeight-light: 300;--typography-fontWeight-medium: 500;--typography-fontWeight-normal: 400;--typography-fontWeight-semiBold: 600;--typography-lineHeight-loose: 1.5;--typography-lineHeight-none: 1;--typography-lineHeight-normal: 1.4;--typography-lineHeight-tight: 1.2}
+:root,:host{--app-theme-key: wayflyer;--defaults-borderRadius: 8px;--defaults-button-borderRadius: 8px;--defaults-button-sizes-normal: 40px;--defaults-button-sizes-small: 32px;--defaults-modal-large-width-lg: 900px;--defaults-modal-large-width-md: 900px;--defaults-modal-normal-width-lg: 600px;--defaults-modal-normal-width-md: 504px;--defaults-page-width: 968px;--sizes-spacing-0: 0px;--sizes-spacing-0-5: 2px;--sizes-spacing-1: 4px;--sizes-spacing-1-5: 6px;--sizes-spacing-2: 8px;--sizes-spacing-3: 12px;--sizes-spacing-4: 16px;--sizes-spacing-5: 20px;--sizes-spacing-6: 24px;--sizes-spacing-7: 28px;--sizes-spacing-8: 32px;--sizes-spacing-9: 36px;--sizes-spacing-10: 40px;--sizes-spacing-11: 44px;--sizes-spacing-12: 48px;--sizes-spacing-13: 52px;--sizes-spacing-14: 56px;--sizes-spacing-15: 60px;--sizes-spacing-16: 64px;--sizes-spacing-17: 68px;--sizes-spacing-18: 72px;--sizes-spacing-19: 76px;--sizes-spacing-20: 80px;--sizes-spacing-24: 96px;--sizes-spacing-32: 128px;--sizes-spacing-auto: auto;--cta-content: "default";--cta-surface: "brand";--effects-blur: blur(6px);--effects-focus: 0px 0px 0px 1px #FFFFFF, 0px 0px 0px 2px var(--palette-border-interactive-focusRingOuter);--effects-shadow: 0px 2px 20px rgba(22, 21, 23, .08);--palette-bg-accent-strong: #001eff;--palette-bg-accent-subtle: #e4edff;--palette-bg-interactive-active: #000000;--palette-bg-interactive-activeInverse: #ffffff;--palette-bg-interactive-activeSubtle: #000000;--palette-bg-interactive-activeSubtleInverse: #ffffff;--palette-bg-interactive-hover: #000000;--palette-bg-interactive-hoverInverse: #ffffff;--palette-bg-interactive-hoverSubtle: #000000;--palette-bg-interactive-hoverSubtleInverse: #ffffff;--palette-bg-neutral-base: #ffffff;--palette-bg-neutral-inverse: #333333;--palette-bg-neutral-overlay: #000000;--palette-bg-neutral-strong: #d9d9d9;--palette-bg-neutral-subtle: #f5f5f5;--palette-bg-status-critical: #fde4e4;--palette-bg-status-criticalStrong: #cf2048;--palette-bg-status-info: #dcf0fe;--palette-bg-status-neutral: #ededed;--palette-bg-status-positive: #d8f3d8;--palette-bg-status-warning: #ffe4d7;--palette-border-accent-strong: #001eff;--palette-border-interactive-active: #000000;--palette-border-interactive-activeInverse: #ffffff;--palette-border-interactive-focusRingInner: #ffffff;--palette-border-interactive-focusRingInnerInverse: #333333;--palette-border-interactive-focusRingOuter: #001eff;--palette-border-interactive-focusRingOuterInverse: #f0f5ff;--palette-border-interactive-hover: #000000;--palette-border-interactive-hoverInverse: #ffffff;--palette-border-neutral-inverse: #333333;--palette-border-neutral-onInverse: #ffffff;--palette-border-neutral-strong: #8d8d8d;--palette-border-neutral-subtle: #d9d9d9;--palette-border-status-critical: #cf2048;--palette-border-status-info: #3090c7;--palette-border-status-neutral: #8d8d8d;--palette-border-status-positive: #4e9655;--palette-border-status-warning: #eb5029;--palette-content-accent-onAccent: #ffffff;--palette-content-accent-strong: #001eff;--palette-content-interactive-active: #000000;--palette-content-interactive-activeInverse: #ffffff;--palette-content-interactive-hover: #000000;--palette-content-interactive-hoverInverse: #ffffff;--palette-content-neutral-onInverse: #ffffff;--palette-content-neutral-strong: #333333;--palette-content-neutral-subtle: #737373;--palette-content-status-critical: #cf2048;--palette-content-status-info: #3090c7;--palette-content-status-neutral: #333333;--palette-content-status-onCritical: #ffffff;--palette-content-status-positive: #4e9655;--palette-content-status-warning: #eb5029;--palette-datavis-accent: #001eff;--palette-datavis-accentStrong: #000b6a;--palette-datavis-accentSubtle: #82aaff;--sizes-blur-100: 12px;--sizes-breakpoint-lg: 1280px;--sizes-breakpoint-md: 1024px;--sizes-breakpoint-sm: 768px;--sizes-breakpoint-xl: 1536px;--sizes-breakpoint-xs: 640px;--sizes-breakpoint-xxl: 1920px;--sizes-breakpoint-xxs: 375px;--sizes-breakpoint-xxxl: 2560px;--sizes-breakpoint-xxxs: 320px;--sizes-radius-2xl: 24px;--sizes-radius-full: 9999px;--sizes-radius-lg: 12px;--sizes-radius-md: 8px;--sizes-radius-none: 0px;--sizes-radius-sm: 4px;--sizes-radius-xl: 16px;--sizes-stroke-default: 1px;--sizes-stroke-focusRing: 2px;--sizes-stroke-strong: 2px;--typography-fontFamily-primaryTypeface: Inter;--typography-fontFamily-secondaryTypeface: Inter;--typography-fontSize-2xl: 22px;--typography-fontSize-3xl: 24px;--typography-fontSize-4xl: 28px;--typography-fontSize-5xl: 32px;--typography-fontSize-6xl: 36px;--typography-fontSize-lg: 18px;--typography-fontSize-md: 16px;--typography-fontSize-sm: 14px;--typography-fontSize-xl: 20px;--typography-fontSize-xs: 12px;--typography-fontWeight-medium: 500;--typography-fontWeight-mediumItalic: 500;--typography-fontWeight-regular: 400;--typography-fontWeight-regularItalic: 400;--typography-fontWeight-semibold: 600;--typography-fontWeight-semiboldItalic: 600;--typography-lineHeight-loose: 1.5;--typography-lineHeight-none: 1;--typography-lineHeight-normal: 1.4;--typography-lineHeight-tight: 1.2;--extendedPalette-chart-background: #fff;--extendedPalette-chart-boxShadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);--extendedPalette-chart-color: fade(@black, 85%);--extendedPalette-chart-colors-deselectedColor: #C0C0C0;--extendedPalette-chart-colors-gridColor: #E8E8E8;--extendedPalette-chart-colors-primaryColor: #54C4FC;--extendedPalette-chart-colors-primaryLabelColor: #262626;--extendedPalette-chart-colors-secondaryColor: #FCB779;--extendedPalette-chart-colors-secondaryColorPaler: #ada8ae;--extendedPalette-chart-colors-secondaryLabelColor: #8c8c8c;--extendedPalette-chart-delta-negative: #AD0000;--extendedPalette-chart-delta-positive: #0D610C;--extendedPalette-chart-multichartColors-chart1: #6B7280;--extendedPalette-chart-multichartColors-chart10: #6366F1;--extendedPalette-chart-multichartColors-chart11: #8B5CF6;--extendedPalette-chart-multichartColors-chart12: #EC4899;--extendedPalette-chart-multichartColors-chart13: #F43F5E;--extendedPalette-chart-multichartColors-chart2: #EF4444;--extendedPalette-chart-multichartColors-chart3: #F97316;--extendedPalette-chart-multichartColors-chart4: #F59E0B;--extendedPalette-chart-multichartColors-chart5: #0D610C;--extendedPalette-chart-multichartColors-chart6: #14B8A6;--extendedPalette-chart-multichartColors-chart7: #06B6D4;--extendedPalette-chart-multichartColors-chart8: #0EA5E9;--extendedPalette-chart-multichartColors-chart9: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-bar-color1: #A7F3D0;--extendedPalette-chart-multiLineBarChartColors-bar-color2: #34D399;--extendedPalette-chart-multiLineBarChartColors-bar-color3: #059669;--extendedPalette-chart-multiLineBarChartColors-bar-color4: #06B6D4;--extendedPalette-chart-multiLineBarChartColors-bar-color5: #0EA5E9;--extendedPalette-chart-multiLineBarChartColors-bar-color6: #3B82F6;--extendedPalette-chart-multiLineBarChartColors-line-color1: #F59E0B;--extendedPalette-chart-multiLineBarChartColors-line-color2: #6366F1;--extendedPalette-chart-multiLineBarChartColors-line-color3: #EF4444;--extendedPalette-chart-multiLineBarChartColors-line-color4: #10B981;--extendedPalette-chart-multiLineBarChartColors-line-color5: #EC4899;--extendedPalette-chart-multiLineBarChartColors-line-color6: #F43F5E;--extendedPalette-chart-shadowColor: rgba(0, 0, 0, .15);--extendedPalette-pinnedMetrics-borderColor-default: #FFFFFF;--extendedPalette-pinnedMetrics-borderColor-sorted: #1D44CE;--extendedPalette-pinnedMetrics-borderColor-summary: #0D610C;--extendedPalette-pinnedMetrics-borderStyle: solid;--extendedPalette-pinnedMetrics-borderWidth: 2;--extendedPalette-scaler-iconColor: #ffffff;--extendedPalette-task-completed: #059669;--extendedPalette-task-pending: #faad14}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.12.2",
+  "version": "3.13.1",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -38,7 +38,7 @@
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
     "@wf-financing/embedded-types": "0.7.0",
-    "@wf-financing/ui-assets": "0.3.0",
+    "@wf-financing/ui-assets": "0.3.1",
     "@wf-financing/logger": "1.1.1"
   },
   "publishConfig": {

package/src/CtaWidget.tsx

@@ -12,7 +12,7 @@ export const CtaWidget = () => {
   const { isLoading, data: cta } = useCtaBanner();
   const { data: copy } = useCopy();
   const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
-  const [skipAnimation] = useState(() => !!options?.skipAnimations);
+  const [skipAnimation] = useState(() => !!options?.skipAnimations || !isLoading);
   const { mutate: continueHostedApplicationMutaion } = useContinueHostedApplication();
   const [isModalOpen, setIsModalOpen] = useState(false);
 

package/src/components/banner/BannerActions.tsx

@@ -11,14 +11,14 @@ export const BannerActions = ({ isOnDarkTheme, buttonAction, buttonText }: Banne
 
   if (isMobile)
     return (
-      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={buttonAction}>
+      <Button variant={isOnDarkTheme ? 'PrimaryOnInverse' : 'Primary'} fullWidth onClick={buttonAction}>
         {buttonText}
       </Button>
     );
 
   return (
     <Flex gap="4">
-      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={buttonAction}>
+      <Button variant={isOnDarkTheme ? 'PrimaryOnInverse' : 'Primary'} fullWidth onClick={buttonAction}>
         {buttonText}
       </Button>
     </Flex>

package/src/components/banner/BulletList.tsx

@@ -15,7 +15,7 @@ export const BulletList = ({ isOnDarkTheme, bulletPoints }: BulletListProps) =>
         <Flex gap="4">
           {bulletPoints.map((bulletPoint: string) => (
             <Flex key={bulletPoint} gap="1" align="center">
-              <Icon color={isOnDarkTheme ? 'onDark' : 'default'}>
+              <Icon color={isOnDarkTheme ? 'white' : 'default'}>
                 <IconCheck12Line />
               </Icon>
               <Text

package/src/components/banner/CloseButton.tsx

@@ -28,7 +28,7 @@ export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   if (isMobile) {
     return (
       <MobileCloseContainer>
-        <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnDark' : 'Tertiary'}>
+        <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnInverse' : 'Tertiary'}>
           <Flex padding="2">
             <IconX16Line />
           </Flex>
@@ -38,7 +38,7 @@ export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   }
 
   return (
-    <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnDark' : 'Tertiary'}>
+    <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnInverse' : 'Tertiary'}>
       <Flex padding="2">
         <IconX16Line />
       </Flex>

package/src/components/banner/CtaBanner.tsx

@@ -1,33 +1,30 @@
-import { Flex, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
+import { Flex, useDetectDeviceSize } from '@wayflyer/flyui';
+import { getThemeFlags, type ThemeOverrides } from '@wayflyer/flyui-tokens';
 import { motion, MotionProps } from 'framer-motion';
 import { css, styled } from 'styled-components';
 
 import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
-import { usePreloadImage } from '../../hooks';
+import { usePartnerContext, usePreloadImage } from '../../hooks';
 import { BannerActions } from './BannerActions';
 import { CtaMainText } from './CtaMainText';
 import { CloseButton } from './CloseButton';
 import type { BannerConfig } from '../../utils';
 import { BulletList } from './BulletList.tsx';
 
-const ON_DARK_THEMES = ['athena'];
-const LIGHT_BG_THEMES = ['conjura', 'rocketFuel'];
-const TERTIARY_THEMES = ['reveni'];
-
-const BannerContainer = styled(motion.aside)<{ $isLightBgTheme: boolean; $isTertiaryTheme: boolean }>`
+const BannerContainer = styled(motion.aside)<{ $bgVariant: ThemeOverrides['cta']['surface'] }>`
   padding: var(--sizes-spacing-4) var(--sizes-spacing-4) var(--sizes-spacing-4) var(--sizes-spacing-6);
   box-shadow: var(--effects-shadow);
   border-radius: var(--sizes-radius-md);
   display: flex;
 
-  border: ${({ $isLightBgTheme }) => ($isLightBgTheme ? css`1px solid var(--palette-utility-divider)` : 'none')};
+  border: ${({ $bgVariant }) =>
+    $bgVariant === 'light' ? css`1px solid var(--palette-border-neutral-subtle)` : 'none'};
 
-  background-color: ${({ $isLightBgTheme, $isTertiaryTheme }) => {
-    if ($isTertiaryTheme) {
-      return css`var(--palette-utility-tertiaryBrand)`;
+  background-color: ${({ $bgVariant }) => {
+    if ($bgVariant === 'brand') {
+      return css`var(--palette-bg-accent-strong)`;
     }
-
-    return $isLightBgTheme ? css`var(--palette-layout-containerSurface)` : css`var(--palette-utility-primaryBrand)`;
+    return $bgVariant === 'light' ? css`var(--palette-bg-neutral-base)` : css`var(--palette-bg-accent-subtle)`;
   }};
 
   transform-origin: top center;
@@ -68,18 +65,17 @@ type Props = {
 export const CtaBanner = ({ bannerConfig, skipAnimation }: Props) => {
   const { isMobile } = useDetectDeviceSize();
   const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
-  const { themeName } = useTheme();
-  const isOnDarkTheme = ON_DARK_THEMES.includes(themeName);
-  const isLightBgTheme = LIGHT_BG_THEMES.includes(themeName);
-  const isTertiaryTheme = TERTIARY_THEMES.includes(themeName);
   usePreloadImage(logoImageUrl);
+  const { portalContainer } = usePartnerContext();
+  const { cta: themeFlags } = getThemeFlags({ rootElement: portalContainer });
 
   const { buttonAction, buttonText, mainText, bulletPoints } = bannerConfig;
 
+  const isOnDarkTheme = themeFlags.content === 'onDark';
+
   return (
     <BannerContainer
-      $isLightBgTheme={isLightBgTheme}
-      $isTertiaryTheme={isTertiaryTheme}
+      $bgVariant={themeFlags.surface}
       {...bannerAnimationProps}
       initial={skipAnimation ? bannerAnimationProps.animate : bannerAnimationProps.initial}
     >

package/src/components/modal/modalEnhancements.ts

@@ -9,17 +9,17 @@ export const small = { transform: 'scale(0.7)', opacity: 0 };
 export const fullSize = { transform: 'scale(1)', opacity: 1 };
 export const transparent = { backgroundColor: 'rgba(0, 0, 0, 0)' };
 export const opaque = {
-  backgroundColor: 'var(--palette-utility-overlay)',
+  backgroundColor: 'var(--palette-bg-neutral-overlay)',
   backdropFilter: 'blur(var(--effects-blur))',
   opacity: 0.6,
 };
 
 export const DialogBody = styled.div`
   scrollbar-width: thin;
-  scrollbar-color: var(--palette-modal-border);
+  scrollbar-color: var(--palette-border-neutral-subtle);
   flex-shrink: 1;
   overflow-y: auto;
-  background-color: var(--palette-modal-surface);
+  background-color: var(--palette-bg-neutral-base);
   border-radius: var(--sizes-radius-md);
   max-height: 80vh;
   padding-bottom: 10px;
@@ -33,7 +33,7 @@ export const DialogBody = styled.div`
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: var(--palette-modal-border);
-    border-radius: var(--sizes-radius-xs);
+    background-color: var(--palette-border-neutral-subtle);
+    border-radius: var(--sizes-radius-sm);
   }
 `;

package/src/main.tsx

@@ -6,7 +6,7 @@ import { StyleSheetManager } from 'styled-components';
 import { MotionGlobalConfig } from 'framer-motion';
 import { App } from './App';
 import { PartnerTheme } from './config';
-import { applyFont, applyStyles, createRoots } from './utils';
+import { applyStyles, createRoots } from './utils';
 
 let root: ReactDOM.Root | undefined;
 let savedTargetId: string | undefined;
@@ -31,10 +31,8 @@ export const mountToTarget = async (
 
   const shadow = hostEl.shadowRoot ?? (hostEl.attachShadow({ mode: 'open' }) as ShadowRoot);
 
-  // TODO: remove font loading from SDK
   try {
     applyStyles({ shadow });
-    await applyFont(shadow, partnerTheme);
   } catch (error) {
     console.error(error);
   }

package/src/utils/replacePlaceholdersForMainText.ts

@@ -11,17 +11,19 @@ export const replacePlaceholdersForMainText = (currency: string, amount: number,
   const currencyWithIcon = currencies.find(({ code }) => currency === code);
 
   const getConvertedAmount = () => {
-    if (!currencyWithIcon) return `${amount}${currency}`;
+    const convertedAmount = Number(amount).toLocaleString();
+
+    if (!currencyWithIcon) return `${convertedAmount}${currency}`;
 
     const { position, icon } = currencyWithIcon;
 
     switch (position) {
       case 'before':
-        return `${icon}${amount}`;
+        return `${icon}${convertedAmount}`;
       case 'after':
-        return `${amount}${icon}`;
+        return `${convertedAmount}${icon}`;
       default:
-        return `${icon}${amount}`;
+        return `${icon}${convertedAmount}`;
     }
   };