@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/design-tokens/brands/bolt/tokens_bolt.theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_bolt.theme.d.ts","sourceRoot":"","sources":["../../../../design-tokens/brands/bolt/tokens_bolt.theme.ts"],"names":[],"mappings":"AAEC,QAAA,MAAM,IAAI,yBAyXV,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tokens_bolt.theme.d.ts","sourceRoot":"","sources":["../../../../design-tokens/brands/bolt/tokens_bolt.theme.ts"],"names":[],"mappings":"AAEC,QAAA,MAAM,IAAI,yBAgvBV,CAAC;AACF,eAAe,IAAI,CAAC"}

package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts

@@ -0,0 +1,3 @@
+declare const a2ui = "\n@font-face {\n\tfont-family: 'Plus Jakarta Sans';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tsrc: url('/assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2');\n\tfont-display: fallback;\n}\n\n@font-face {\n\tfont-family: 'Plus Jakarta Sans';\n\tfont-style: medium;\n\tfont-weight: 500;\n\tsrc: url('/assets/fonts/PlusJakartaSans-Medium.woff2') format('woff2');\n\tfont-display: fallback;\n}\n\n@font-face {\n\tfont-family: 'Plus Jakarta Sans';\n\tfont-style: medium;\n\tfont-weight: 600;\n\tsrc: url('/assets/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');\n\tfont-display: fallback;\n}\n\n@font-face {\n\tfont-family: 'Plus Jakarta Sans';\n\tfont-style: normal;\n\tfont-weight: 700;\n\tsrc: url('/assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');\n\tfont-display: fallback;\n}\n\n:root {\n  --cre8-desktop-menu-padding-vertical-padding: 1rem;\n  --cre8-desktop-menu-padding-horizontal-padding: 0.5rem;\n  --cre8-color-header-bg-default: #ffffff;\n  --cre8-color-header-inverse-bg-default: #3B82F6;\n  --cre8-color-header-menu-bg-default: #ffffff;\n  --cre8-color-header-menu-inverse-bg-default: #3B82F6;\n  --cre8-color-header-menu-bg-hover: #F8FAFC;\n  --cre8-color-header-menu-inverse-bg-hover: #2563EB;\n  --cre8-color-header-menu-bg-focus: #F8FAFC;\n  --cre8-color-header-menu-inverse-bg-focus: #2563EB;\n  --cre8-color-header-menu-bg-active: #E2E8F0;\n  --cre8-color-header-menu-inverse-bg-active: #1D4ED8;\n  --cre8-color-header-menu-bg-pressed: #E2E8F0;\n  --cre8-color-header-menu-inverse-bg-pressed: #1D4ED8;\n  --cre8-color-header-menu-bg-selected: #F8FAFC;\n  --cre8-color-header-menu-inverse-bg-selected: #2563EB;\n  --cre8-color-header-menu-content-default: #3B82F6;\n  --cre8-color-header-menu-inverse-content-default: #ffffff;\n  --cre8-color-header-menu-content-hover: #2563EB;\n  --cre8-color-header-menu-inverse-content-hover: #ffffff;\n  --cre8-color-header-menu-content-focus: #3B82F6;\n  --cre8-color-header-menu-inverse-content-focus: #ffffff;\n  --cre8-color-header-menu-content-active: #1D4ED8;\n  --cre8-color-header-menu-inverse-content-active: #ffffff;\n  --cre8-color-header-menu-content-pressed: #1D4ED8;\n  --cre8-color-header-menu-inverse-content-pressed: #ffffff;\n  --cre8-color-header-menu-content-selected: #2563EB;\n  --cre8-color-header-menu-inverse-content-selected: #ffffff;\n  --cre8-color-header-menu-border-default: rgba(15, 23, 42, 0.0);\n  --cre8-color-header-menu-inverse-border-default: rgba(15, 23, 42, 0.0);\n  --cre8-color-header-menu-border-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-header-menu-inverse-border-hover: #ffffff;\n  --cre8-color-header-menu-border-focus: #2563EB;\n  --cre8-color-header-menu-inverse-border-focus: #ffffff;\n  --cre8-color-header-menu-border-active: #3B82F6;\n  --cre8-color-header-menu-inverse-border-active: #ffffff;\n  --cre8-color-header-menu-border-pressed: #3B82F6;\n  --cre8-color-header-menu-inverse-border-pressed: #ffffff;\n  --cre8-color-header-menu-border-selected: #2563EB;\n  --cre8-color-header-menu-inverse-border-selected: #F8FAFC;\n  --cre8-color-header-submenu-bg-default: #ffffff;\n  --cre8-color-header-submenu-inverse-bg-default: #3B82F6;\n  --cre8-color-header-submenu-bg-hover: #F8FAFC;\n  --cre8-color-header-submenu-inverse-bg-hover: #2563EB;\n  --cre8-color-header-submenu-bg-focus: #ffffff;\n  --cre8-color-header-submenu-inverse-bg-focus: #3B82F6;\n  --cre8-color-header-submenu-bg-active: #E2E8F0;\n  --cre8-color-header-submenu-inverse-bg-active: #1D4ED8;\n  --cre8-color-header-submenu-bg-pressed: #E2E8F0;\n  --cre8-color-header-submenu-inverse-bg-pressed: #1D4ED8;\n  --cre8-color-header-submenu-bg-selected: #F8FAFC;\n  --cre8-color-header-submenu-inverse-bg-selected: #2563EB;\n  --cre8-color-header-submenu-content-default: #3B82F6;\n  --cre8-color-header-submenu-inverse-content-default: #ffffff;\n  --cre8-color-header-submenu-content-hover: #2563EB;\n  --cre8-color-header-submenu-inverse-content-hover: #ffffff;\n  --cre8-color-header-submenu-content-focus: #2563EB;\n  --cre8-color-header-submenu-inverse-content-focus: #ffffff;\n  --cre8-color-header-submenu-content-active: #1D4ED8;\n  --cre8-color-header-submenu-inverse-content-active: #ffffff;\n  --cre8-color-header-submenu-content-pressed: #1D4ED8;\n  --cre8-color-header-submenu-inverse-content-pressed: #ffffff;\n  --cre8-color-header-submenu-content-selected: #3B82F6;\n  --cre8-color-header-submenu-inverse-content-selected: #ffffff;\n  --cre8-color-header-submenu-border-default: #ffffff;\n  --cre8-color-header-submenu-inverse-border-default: #3B82F6;\n  --cre8-color-header-submenu-border-hover: #F8FAFC;\n  --cre8-color-header-submenu-inverse-border-hover: #2563EB;\n  --cre8-color-header-submenu-border-focus: #3B82F6;\n  --cre8-color-header-submenu-inverse-border-focus: #ffffff;\n  --cre8-color-header-submenu-border-active: #E2E8F0;\n  --cre8-color-header-submenu-inverse-border-active: #1D4ED8;\n  --cre8-color-header-submenu-border-pressed: #E2E8F0;\n  --cre8-color-header-submenu-inverse-border-pressed: #1D4ED8;\n  --cre8-color-header-submenu-border-selected: #2563EB;\n  --cre8-color-header-submenu-inverse-border-selected: #F8FAFC;\n  --cre8-color-header-bg-secondary: #3B82F6;\n  --cre8-color-header-inverse-bg-secondary: #ffffff;\n  --cre8-color-header-bg-tertiary: #3B82F6;\n  --cre8-color-header-inverse-bg-tertiary: #ffffff;\n  --cre8-color-footer-bg-default: #1E40AF;\n  --cre8-color-footer-bg-secondary: #F8FAFC;\n  --cre8-color-footer-content-secondary: #ffffff;\n  --cre8-color-footer-link-hover: #93C5FD;\n  --cre8-color-footer-link-default: #93C5FD;\n  --cre8-spacing-0: 0rem;\n  --cre8-spacing-2: 0.125rem;\n  --cre8-spacing-4: 0.25rem;\n  --cre8-spacing-6: 0.375rem;\n  --cre8-spacing-8: 0.5rem;\n  --cre8-spacing-12: 0.75rem;\n  --cre8-spacing-14: 0.875rem;\n  --cre8-spacing-16: 1rem;\n  --cre8-spacing-18: 1.125rem;\n  --cre8-spacing-24: 1.5rem;\n  --cre8-spacing-32: 2rem;\n  --cre8-spacing-40: 2.5rem;\n  --cre8-spacing-48: 3rem;\n  --cre8-spacing-64: 4rem;\n  --cre8-spacing-80: 5rem;\n  --cre8-spacing-96: 6rem;\n  --cre8-spacing-120: 7.5rem;\n  --cre8-spacing-160: 10rem;\n  --cre8-color-button-primary-bg: #3B82F6;\n  --cre8-color-button-primary-inverse-bg: #BFDBFE;\n  --cre8-color-button-primary-bg-hover: #2563EB;\n  --cre8-color-button-primary-inverse-bg-hover: #93C5FD;\n  --cre8-color-button-primary-bg-active: #1D4ED8;\n  --cre8-color-button-primary-inverse-bg-active: #60A5FA;\n  --cre8-color-button-primary-bg-disabled: #E2E8F0;\n  --cre8-color-button-primary-inverse-bg-disabled: #64748B;\n  --cre8-color-button-primary-content: #ffffff;\n  --cre8-color-button-primary-inverse-content: #1E40AF;\n  --cre8-color-button-primary-content-hover: #ffffff;\n  --cre8-color-button-primary-inverse-content-hover: #1E40AF;\n  --cre8-color-button-primary-content-active: #ffffff;\n  --cre8-color-button-primary-inverse-content-active: #1E40AF;\n  --cre8-color-button-primary-content-disabled: #475569;\n  --cre8-color-button-primary-inverse-content-disabled: #1E293B;\n  --cre8-color-button-primary-border: #3B82F6;\n  --cre8-color-button-primary-inverse-border: #BFDBFE;\n  --cre8-color-button-primary-border-hover: #2563EB;\n  --cre8-color-button-primary-inverse-border-hover: #93C5FD;\n  --cre8-color-button-primary-border-active: #1D4ED8;\n  --cre8-color-button-primary-inverse-border-active: #60A5FA;\n  --cre8-color-button-primary-border-disabled: #E2E8F0;\n  --cre8-color-button-primary-inverse-border-disabled: #64748B;\n  --cre8-color-button-primary-outline: #1D4ED8;\n  --cre8-color-button-primary-inverse-outline: #BFDBFE;\n  --cre8-color-button-primary-danger-bg: #EC4899;\n  --cre8-color-button-primary-danger-inverse-bg: #F9A8D4;\n  --cre8-color-button-primary-danger-bg-hover: #DB2777;\n  --cre8-color-button-primary-danger-inverse-bg-hover: #FBCFE8;\n  --cre8-color-button-primary-danger-bg-active: #BE185D;\n  --cre8-color-button-primary-danger-inverse-bg-active: #FCE7F3;\n  --cre8-color-button-primary-danger-bg-disabled: #E2E8F0;\n  --cre8-color-button-primary-danger-inverse-bg-disabled: #64748B;\n  --cre8-color-button-primary-danger-content: #ffffff;\n  --cre8-color-button-primary-danger-inverse-content: #0F172A;\n  --cre8-color-button-primary-danger-content-hover: #ffffff;\n  --cre8-color-button-primary-danger-inverse-content-hover: #0F172A;\n  --cre8-color-button-primary-danger-content-active: #ffffff;\n  --cre8-color-button-primary-danger-inverse-content-active: #0F172A;\n  --cre8-color-button-primary-danger-content-disabled: #475569;\n  --cre8-color-button-primary-danger-inverse-content-disabled: #1E293B;\n  --cre8-color-button-primary-danger-border: #EC4899;\n  --cre8-color-button-primary-danger-inverse-border: #F9A8D4;\n  --cre8-color-button-primary-danger-border-hover: #DB2777;\n  --cre8-color-button-primary-danger-inverse-border-hover: #FBCFE8;\n  --cre8-color-button-primary-danger-border-active: #BE185D;\n  --cre8-color-button-primary-danger-inverse-border-active: #FCE7F3;\n  --cre8-color-button-primary-danger-border-disabled: #E2E8F0;\n  --cre8-color-button-primary-danger-inverse-border-disabled: #64748B;\n  --cre8-color-button-primary-danger-outline: #1D4ED8;\n  --cre8-color-button-primary-danger-inverse-outline: #BFDBFE;\n  --cre8-color-button-secondary-neutral-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-neutral-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-neutral-content: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-content: #ffffff;\n  --cre8-color-button-secondary-neutral-border: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-border: #ffffff;\n  --cre8-color-button-secondary-neutral-bg-hover: rgba(15, 23, 42, 0.10);\n  --cre8-color-button-secondary-neutral-inverse-bg-hover: rgba(15, 23, 42, 0.20);\n  --cre8-color-button-secondary-neutral-content-hover: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-content-hover: #ffffff;\n  --cre8-color-button-secondary-neutral-border-hover: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-border-hover: #ffffff;\n  --cre8-color-button-secondary-neutral-border-active: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-border-active: #ffffff;\n  --cre8-color-button-secondary-neutral-bg-active: rgba(15, 23, 42, 0.20);\n  --cre8-color-button-secondary-neutral-inverse-bg-active: rgba(15, 23, 42, 0.50);\n  --cre8-color-button-secondary-neutral-content-active: #0F172A;\n  --cre8-color-button-secondary-neutral-inverse-content-active: #ffffff;\n  --cre8-color-button-secondary-neutral-bg-disabled: #E2E8F0;\n  --cre8-color-button-secondary-neutral-inverse-bg-disabled: #64748B;\n  --cre8-color-button-secondary-neutral-border-disabled: #E2E8F0;\n  --cre8-color-button-secondary-neutral-inverse-border-disabled: #64748B;\n  --cre8-color-button-secondary-neutral-content-disabled: #475569;\n  --cre8-color-button-secondary-neutral-inverse-content-disabled: #1E293B;\n  --cre8-color-button-secondary-neutral-outline: #1E3A8A;\n  --cre8-color-button-secondary-neutral-inverse-outline: #BFDBFE;\n  --cre8-color-button-secondary-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-bg-hover: #EFF6FF;\n  --cre8-color-button-secondary-inverse-bg-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-bg-active: #DBEAFE;\n  --cre8-color-button-secondary-inverse-bg-active: #1E3A8A;\n  --cre8-color-button-secondary-bg-disabled: #E2E8F0;\n  --cre8-color-button-secondary-inverse-bg-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-content: #3B82F6;\n  --cre8-color-button-secondary-inverse-content: #BFDBFE;\n  --cre8-color-button-secondary-content-hover: #2563EB;\n  --cre8-color-button-secondary-inverse-content-hover: #93C5FD;\n  --cre8-color-button-secondary-content-active: #1D4ED8;\n  --cre8-color-button-secondary-inverse-content-active: #60A5FA;\n  --cre8-color-button-secondary-content-disabled: #475569;\n  --cre8-color-button-secondary-inverse-content-disabled: #64748B;\n  --cre8-color-button-secondary-border: #3B82F6;\n  --cre8-color-button-secondary-inverse-border: #BFDBFE;\n  --cre8-color-button-secondary-border-hover: #2563EB;\n  --cre8-color-button-secondary-inverse-border-hover: #93C5FD;\n  --cre8-color-button-secondary-border-active: #1D4ED8;\n  --cre8-color-button-secondary-inverse-border-active: #60A5FA;\n  --cre8-color-button-secondary-border-disabled: #64748B;\n  --cre8-color-button-secondary-inverse-border-disabled: #64748B;\n  --cre8-color-button-secondary-outline: #1D4ED8;\n  --cre8-color-button-secondary-inverse-outline: #93C5FD;\n  --cre8-color-button-secondary-danger-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-danger-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-secondary-danger-bg-hover: #DB2777;\n  --cre8-color-button-secondary-danger-inverse-bg-hover: #FBCFE8;\n  --cre8-color-button-secondary-danger-bg-active: #BE185D;\n  --cre8-color-button-secondary-danger-inverse-bg-active: #FCE7F3;\n  --cre8-color-button-secondary-danger-bg-disabled: #E2E8F0;\n  --cre8-color-button-secondary-danger-inverse-bg-disabled: #64748B;\n  --cre8-color-button-secondary-danger-content: #EC4899;\n  --cre8-color-button-secondary-danger-inverse-content: #F472B6;\n  --cre8-color-button-secondary-danger-content-hover: #ffffff;\n  --cre8-color-button-secondary-danger-inverse-content-hover: #0F172A;\n  --cre8-color-button-secondary-danger-content-active: #ffffff;\n  --cre8-color-button-secondary-danger-inverse-content-active: #0F172A;\n  --cre8-color-button-secondary-danger-content-disabled: #475569;\n  --cre8-color-button-secondary-danger-inverse-content-disabled: #1E293B;\n  --cre8-color-button-secondary-danger-border: #EC4899;\n  --cre8-color-button-secondary-danger-inverse-border: #F472B6;\n  --cre8-color-button-secondary-danger-border-hover: #DB2777;\n  --cre8-color-button-secondary-danger-inverse-border-hover: #FBCFE8;\n  --cre8-color-button-secondary-danger-border-active: #BE185D;\n  --cre8-color-button-secondary-danger-inverse-border-active: #FCE7F3;\n  --cre8-color-button-secondary-danger-border-disabled: #E2E8F0;\n  --cre8-color-button-secondary-danger-inverse-border-disabled: #64748B;\n  --cre8-color-button-secondary-danger-outline: #1D4ED8;\n  --cre8-color-button-secondary-danger-inverse-outline: #BFDBFE;\n  --cre8-color-button-tertiary-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-bg-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-bg-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-bg-active: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-bg-active: #172554;\n  --cre8-color-button-tertiary-bg-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-bg-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-content: #3B82F6;\n  --cre8-color-button-tertiary-inverse-content: #BFDBFE;\n  --cre8-color-button-tertiary-content-hover: #2563EB;\n  --cre8-color-button-tertiary-inverse-content-hover: #93C5FD;\n  --cre8-color-button-tertiary-content-active: #1D4ED8;\n  --cre8-color-button-tertiary-inverse-content-active: #60A5FA;\n  --cre8-color-button-tertiary-content-disabled: #475569;\n  --cre8-color-button-tertiary-inverse-content-disabled: #64748B;\n  --cre8-color-button-tertiary-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-border-hover: #2563EB;\n  --cre8-color-button-tertiary-inverse-border-hover: #93C5FD;\n  --cre8-color-button-tertiary-border-active: #1D4ED8;\n  --cre8-color-button-tertiary-inverse-border-active: #60A5FA;\n  --cre8-color-button-tertiary-border-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-inverse-border-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-outline: #1D4ED8;\n  --cre8-color-button-tertiary-inverse-outline: #93C5FD;\n  --cre8-color-button-tertiary-neutral-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-content: #0F172A;\n  --cre8-color-button-tertiary-neutral-inverse-content: #ffffff;\n  --cre8-color-button-tertiary-neutral-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-bg-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-bg-hover: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-content-hover: #0F172A;\n  --cre8-color-button-tertiary-neutral-inverse-content-hover: #ffffff;\n  --cre8-color-button-tertiary-neutral-border-hover: #0F172A;\n  --cre8-color-button-tertiary-neutral-inverse-border-hover: #ffffff;\n  --cre8-color-button-tertiary-neutral-border-active: #0F172A;\n  --cre8-color-button-tertiary-neutral-inverse-border-active: #ffffff;\n  --cre8-color-button-tertiary-neutral-bg-active: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-bg-active: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-content-active: #0F172A;\n  --cre8-color-button-tertiary-neutral-inverse-content-active: #ffffff;\n  --cre8-color-button-tertiary-neutral-bg-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-bg-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-border-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-inverse-border-disabled: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-neutral-content-disabled: #475569;\n  --cre8-color-button-tertiary-neutral-inverse-content-disabled: #1E293B;\n  --cre8-color-button-tertiary-neutral-outline: #1E3A8A;\n  --cre8-color-button-tertiary-neutral-inverse-outline: #BFDBFE;\n  --cre8-color-button-tertiary-danger-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-danger-inverse-bg: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-danger-bg-hover: #DB2777;\n  --cre8-color-button-tertiary-danger-inverse-bg-hover: #FBCFE8;\n  --cre8-color-button-tertiary-danger-bg-active: #BE185D;\n  --cre8-color-button-tertiary-danger-inverse-bg-active: #FCE7F3;\n  --cre8-color-button-tertiary-danger-bg-disabled: #E2E8F0;\n  --cre8-color-button-tertiary-danger-inverse-bg-disabled: #64748B;\n  --cre8-color-button-tertiary-danger-content: #EC4899;\n  --cre8-color-button-tertiary-danger-inverse-content: #F472B6;\n  --cre8-color-button-tertiary-danger-content-hover: #ffffff;\n  --cre8-color-button-tertiary-danger-inverse-content-hover: #0F172A;\n  --cre8-color-button-tertiary-danger-content-active: #ffffff;\n  --cre8-color-button-tertiary-danger-inverse-content-active: #0F172A;\n  --cre8-color-button-tertiary-danger-content-disabled: #475569;\n  --cre8-color-button-tertiary-danger-inverse-content-disabled: #1E293B;\n  --cre8-color-button-tertiary-danger-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-danger-inverse-border: rgba(15, 23, 42, 0.0);\n  --cre8-color-button-tertiary-danger-border-hover: #DB2777;\n  --cre8-color-button-tertiary-danger-inverse-border-hover: #FBCFE8;\n  --cre8-color-button-tertiary-danger-border-active: #BE185D;\n  --cre8-color-button-tertiary-danger-inverse-border-active: #FCE7F3;\n  --cre8-color-button-tertiary-danger-border-disabled: #E2E8F0;\n  --cre8-color-button-tertiary-danger-inverse-border-disabled: #64748B;\n  --cre8-color-button-tertiary-danger-outline: #1D4ED8;\n  --cre8-color-button-tertiary-danger-inverse-outline: #BFDBFE;\n  --cre8-button-padding-vertical-small: 0.5rem;\n  --cre8-button-padding-vertical-medium: 0.75rem;\n  --cre8-button-padding-vertical-large: 1rem;\n  --cre8-button-padding-vertical-icon-only: 0.5rem;\n  --cre8-button-padding-vertical-small-icon-only: 0.5rem;\n  --cre8-button-padding-vertical-medium-icon-only: 1rem;\n  --cre8-button-padding-vertical-large-icon-only: 1rem;\n  --cre8-button-padding-horizontal-small: 1rem;\n  --cre8-button-padding-horizontal-medium: 1.5rem;\n  --cre8-button-padding-horizontal-large: 2rem;\n  --cre8-button-padding-horizontal-icon-only: 0.5rem;\n  --cre8-button-padding-horizontal-small-icon-only: 0.5rem;\n  --cre8-button-padding-horizontal-medium-icon-only: 1rem;\n  --cre8-button-padding-horizontal-large-icon-only: 1rem;\n  --cre8-color-bg-default: #ffffff;\n  --cre8-color-bg-default-hover: #F8FAFC;\n  --cre8-color-bg-default-active: #DBEAFE;\n  --cre8-color-bg-subtle: #F1F5F9;\n  --cre8-color-bg-moderate: #94A3B8;\n  --cre8-color-bg-inverse-moderate: #64748B;\n  --cre8-color-bg-strong: #1E293B;\n  --cre8-color-bg-disabled: #E2E8F0;\n  --cre8-color-bg-brand: #ffffff;\n  --cre8-color-bg-brand-active: #BFDBFE;\n  --cre8-color-bg-brand-hover: #DBEAFE;\n  --cre8-color-bg-brand-strong: #3B82F6;\n  --cre8-color-bg-brand-strong-hover: #2563EB;\n  --cre8-color-bg-brand-strong-active: #1D4ED8;\n  --cre8-color-bg-brand-xstrong: #1E40AF;\n  --cre8-color-bg-brand-xstrong-hover: #1D4ED8;\n  --cre8-color-bg-brand-xstrong-active: #1E3A8A;\n  --cre8-color-bg-success: #ECFEFF;\n  --cre8-color-bg-success-strong: #06B6D4;\n  --cre8-color-bg-error: #FDF2F8;\n  --cre8-color-bg-error-strong: #EC4899;\n  --cre8-color-bg-warning: #FFFBEB;\n  --cre8-color-bg-warning-strong: #F59E0B;\n  --cre8-color-bg-info: #EFF6FF;\n  --cre8-color-bg-info-strong: #3B82F6;\n  --cre8-color-bg-attention: #ffffff;\n  --cre8-color-bg-attention-strong: #60A5FA;\n  --cre8-color-bg-opacity-transparent: rgba(15, 23, 42, 0.0);\n  --cre8-color-bg-opacity-default: rgba(15, 23, 42, 0.50);\n  --cre8-color-bg-active: #0F172A;\n  --cre8-color-bg-inverse-active: #ffffff;\n  --cre8-color-content-default: #0F172A;\n  --cre8-color-content-subtle: #64748B;\n  --cre8-color-content-disabled: #94A3B8;\n  --cre8-color-content-knockout: #ffffff;\n  --cre8-color-content-brand: #3B82F6;\n  --cre8-color-content-brand-strong: #2563EB;\n  --cre8-color-content-brand-knockout: #ECFEFF;\n  --cre8-color-content-success: #0891B2;\n  --cre8-color-content-success-icon: #0891B2;\n  --cre8-color-content-error: #DB2777;\n  --cre8-color-content-error-icon: #DB2777;\n  --cre8-color-content-warning-icon: #D97706;\n  --cre8-color-content-info-icon: #3B82F6;\n  --cre8-color-content-attention-icon: #60A5FA;\n  --cre8-color-content-link: #3B82F6;\n  --cre8-color-content-inverse-link: #BFDBFE;\n  --cre8-color-content-link-hover: #2563EB;\n  --cre8-color-content-inverse-link-hover: #93C5FD;\n  --cre8-color-content-link-focus: #ffffff;\n  --cre8-color-content-inverse-link-focus: #0F172A;\n  --cre8-color-content-link-visited: #7C3AED;\n  --cre8-color-content-inverse-link-visited: #E9D5FF;\n  --cre8-color-content-link-disabled: #475569;\n  --cre8-color-content-inverse-link-disabled: #E2E8F0;\n  --cre8-color-content-link-active: #1D4ED8;\n  --cre8-color-content-inverse-link-active: #60A5FA;\n  --cre8-color-border-default: #E2E8F0;\n  --cre8-color-border-strong: #64748B;\n  --cre8-color-border-knockout: #ffffff;\n  --cre8-color-border-disabled: #CBD5E1;\n  --cre8-color-border-brand: #3B82F6;\n  --cre8-color-border-brand-subtle: #93C5FD;\n  --cre8-color-border-brand-strong: #2563EB;\n  --cre8-color-border-success: #22D3EE;\n  --cre8-color-border-error: #F472B6;\n  --cre8-color-border-warning: #FBBF24;\n  --cre8-color-border-info: #3B82F6;\n  --cre8-color-border-attention: #60A5FA;\n  --cre8-color-border-transparent: rgba(15, 23, 42, 0.0);\n  --cre8-color-border-active-outline: #2563EB;\n  --cre8-color-border-inverse-active-outline: #BFDBFE;\n  --cre8-font-size-0: 0.75rem;\n  --cre8-font-size-1: 0.875rem;\n  --cre8-font-size-2: 1rem;\n  --cre8-font-size-3: 1.125rem;\n  --cre8-font-size-4: 1.25rem;\n  --cre8-font-size-5: 1.5rem;\n  --cre8-font-size-6: 1.75rem;\n  --cre8-font-size-7: 2rem;\n  --cre8-font-size-8: 2.5rem;\n  --cre8-font-size-9: 3rem;\n  --cre8-font-size-10: 3.5rem;\n  --cre8-font-size-11: 4rem;\n  --cre8-font-size-12: 4.5rem;\n  --cre8-font-size-13: 5rem;\n  --cre8-letter-spacing-0: -1.5;\n  --cre8-letter-spacing-1: -1;\n  --cre8-letter-spacing-2: -0.5;\n  --cre8-letter-spacing-3: 0;\n  --cre8-letter-spacing-4: 2;\n  --cre8-letter-spacing-5: 1;\n  --cre8-letter-spacing-6: 1.5;\n  --cre8-paragraph-spacing-0: 0;\n  --cre8-text-case-none: none;\n  --cre8-text-case-uppercase: uppercase;\n  --cre8-text-decoration-none: none;\n  --cre8-text-decoration-underline: underline;\n  --cre8-paragraph-indent-0: 0px;\n  --cre8-border-radius-small: 12px;\n  --cre8-border-radius-default: 900px;\n  --cre8-border-radius-large: 24px;\n  --cre8-border-radius-round: 900px;\n  --cre8-border-radius-button: 900px;\n  --cre8-border-radius-badge: 900px;\n  --cre8-border-radius-tabs: 12px;\n  --cre8-border-radius-container: 24px;\n  --cre8-border-radius-field: 12px;\n  --cre8-border-radius-field-brand: 12px;\n  --cre8-border-radius-brand: 900px;\n  --cre8-border-radius-none: 0px;\n  --cre8-border-width-none: 0rem;\n  --cre8-border-width-default: 0.0625rem;\n  --cre8-border-width-focus: 0.125rem;\n  --cre8-border-width-large: 0.25rem;\n  --cre8-border-width-button-tertiary-outline-focus: 0.125rem;\n  --cre8-border-width-button-default: 0.125rem;\n  --cre8-border-width-tab-selected: 0.125rem;\n  --cre8-border-width-tab-default: 0.125rem;\n  --cre8-border-style-button-tertiary-outline-focus: solid;\n  --cre8-border-style-default: solid;\n  --cre8-shadow-default: 0 4px 12px 0 rgba(15,23,42,0.08);\n  --cre8-shadow-button: none;\n  --cre8-shadow-none: none;\n  --cre8-shadow-large: 0 8px 24px 0 rgba(15,23,42,0.12);\n  --cre8-shadow-small: 0 1px 3px 0 rgba(15,23,42,0.06);\n  --cre8-color-link-bg-active: #0F172A;\n  --cre8-font-families-inter: \"Plus Jakarta Sans\", sans-serif;\n  --cre8-font-weights-inter-0: 400;\n  --cre8-font-weights-inter-1: 500;\n  --cre8-font-weights-inter-2: 700;\n  --cre8-font-weights-inter-3: 600;\n  --cre8-line-heights-0: 1.25;\n  --cre8-line-heights-1: 1.12;\n  --cre8-line-heights-2: 1.1400000000000001;\n  --cre8-line-heights-3: 1.2;\n  --cre8-line-heights-4: 1.3;\n  --cre8-line-heights-5: 1.33;\n  --cre8-line-heights-6: 1.4000000000000001;\n  --cre8-line-heights-7: 1.5;\n  --cre8-line-heights-8: 1.43;\n  --cre8-line-heights-9: 1.11;\n  --cre8-line-heights-10: 1.1300000000000001;\n  --cre8-line-heights-11: 1.16;\n  --cre8-line-heights-12: 0.48;\n  --cre8-line-heights-13: 0.4;\n  --cre8-line-heights-14: 0.32;\n  --cre8-line-heights-15: 0.28;\n  --cre8-line-heights-16: 0.24;\n  --cre8-line-heights-17: 0.2;\n  --cre8-line-heights-18: 0.16;\n  --cre8-icon-size-small: 0.875rem;\n  --cre8-icon-size-default: 1rem;\n  --cre8-icon-size-large: 1.125rem;\n  --cre8-badge-padding-horizontal: 0.375rem;\n  --cre8-badge-padding-vertical: 0.125rem;\n  --cre8-progress-meter-height: 0.5rem;\n  --cre8-breakpoint-xsm: 375px;\n  --cre8-breakpoint-sm: 560px;\n  --cre8-breakpoint-md: 768px;\n  --cre8-breakpoint-lg: 960px;\n  --cre8-breakpoint-xl: 1200px;\n  --cre8-breakpoint-xxl: 1400px;\n}\n\n:root{--cre8-typography-body-xlarge-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-xlarge-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-body-xlarge-font-weight: var(--cre-8-font-weights-inter-0);\n      --cre8-typography-body-xlarge-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-xlarge-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-xlarge-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-xlarge-strong-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-xlarge-strong-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-body-xlarge-strong-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-xlarge-strong-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-xlarge-strong-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-xlarge-strong-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-xlarge-link-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-xlarge-link-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-body-xlarge-link-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-xlarge-link-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-xlarge-link-text-decoration: var(--cre-8-text-decoration-underline);\n      --cre8-typography-body-xlarge-link-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-large-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-body-large-font-weight: var(--cre-8-font-weights-inter-0);\n      --cre8-typography-body-large-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-large-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-large-strong-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-large-strong-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-body-large-strong-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-large-strong-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-large-strong-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-large-strong-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-default-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-body-default-font-weight: var(--cre-8-font-weights-inter-0);\n      --cre8-typography-body-default-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-default-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-default-strong-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-default-strong-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-body-default-strong-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-default-strong-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-default-strong-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-default-strong-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-small-font-size: var(--cre-8-font-size-1);\n      --cre8-typography-body-small-font-weight: var(--cre-8-font-weights-inter-0);\n      --cre8-typography-body-small-line-height: var(--cre-8-line-heights-8);\n      --cre8-typography-body-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-small-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-small-strong-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-small-strong-font-size: var(--cre-8-font-size-1);\n      --cre8-typography-body-small-strong-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-small-strong-line-height: var(--cre-8-line-heights-8);\n      --cre8-typography-body-small-strong-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-body-small-strong-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-large-link-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-large-link-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-body-large-link-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-large-link-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-large-link-text-decoration: var(--cre-8-text-decoration-underline);\n      --cre8-typography-body-large-link-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-default-link-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-default-link-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-body-default-link-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-default-link-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-body-default-link-text-decoration: var(--cre-8-text-decoration-underline);\n      --cre8-typography-body-default-link-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-body-small-link-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-body-small-link-font-size: var(--cre-8-font-size-1);\n      --cre8-typography-body-small-link-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-body-small-link-line-height: var(--cre-8-line-heights-8);\n      --cre8-typography-body-small-link-text-decoration: var(--cre-8-text-decoration-underline);\n      --cre8-typography-body-small-link-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-label-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-label-default-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-label-default-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-label-default-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-label-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-label-default-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-label-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-label-large-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-label-large-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-label-large-line-height: var(--cre-8-line-heights-5);\n      --cre8-typography-label-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-label-large-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-label-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-label-small-font-size: var(--cre-8-font-size-1);\n      --cre8-typography-label-small-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-label-small-line-height: var(--cre-8-line-heights-7);\n      --cre8-typography-label-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-label-small-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-xlarge-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-xlarge-font-size: var(--cre-8-font-size-8);\n      --cre8-typography-title-xlarge-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-xlarge-line-height: var(--cre-8-line-heights-4);\n      --cre8-typography-title-xlarge-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-xlarge-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-xlarge-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-xlarge-mobile-font-size: var(--cre-8-font-size-7);\n      --cre8-typography-title-xlarge-mobile-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-xlarge-mobile-line-height: var(--cre-8-line-heights-4);\n      --cre8-typography-title-xlarge-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-xlarge-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-large-font-size: var(--cre-8-font-size-6);\n      --cre8-typography-title-large-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-large-line-height: var(--cre-8-line-heights-1);\n      --cre8-typography-title-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-large-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-large-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-large-mobile-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-title-large-mobile-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-large-mobile-line-height: var(--cre-8-line-heights-1);\n      --cre8-typography-title-large-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-large-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-default-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-title-default-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-default-line-height: var(--cre-8-line-heights-2);\n      --cre8-typography-title-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-default-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-default-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-default-mobile-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-title-default-mobile-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-default-mobile-line-height: var(--cre-8-line-heights-2);\n      --cre8-typography-title-default-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-default-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-small-font-size: var(--cre-8-font-size-3);\n      --cre8-typography-title-small-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-small-line-height: var(--cre-8-line-heights-6);\n      --cre8-typography-title-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-small-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-title-small-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-title-small-mobile-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-title-small-mobile-font-weight: var(--cre-8-font-weights-inter-1);\n      --cre8-typography-title-small-mobile-line-height: var(--cre-8-line-heights-6);\n      --cre8-typography-title-small-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-title-small-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-large-font-size: var(--cre-8-font-size-9);\n      --cre8-typography-headline-large-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-large-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-large-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-large-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-large-mobile-font-size: var(--cre-8-font-size-8);\n      --cre8-typography-headline-large-mobile-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-large-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-large-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-large-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-default-font-size: var(--cre-8-font-size-8);\n      --cre8-typography-headline-default-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-default-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-default-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-default-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-default-mobile-font-size: var(--cre-8-font-size-7);\n      --cre8-typography-headline-default-mobile-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-default-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-default-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-default-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-small-font-size: var(--cre-8-font-size-7);\n      --cre8-typography-headline-small-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-small-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-small-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-small-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-small-mobile-font-size: var(--cre-8-font-size-6);\n      --cre8-typography-headline-small-mobile-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-small-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-small-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-small-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-xsmall-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-xsmall-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-headline-xsmall-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-xsmall-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-xsmall-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-xsmall-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-headline-xsmall-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-headline-xsmall-mobile-font-size: var(--cre-8-font-size-5);\n      --cre8-typography-headline-xsmall-mobile-font-weight: var(--cre-8-font-weights-inter-3);\n      --cre8-typography-headline-xsmall-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-headline-xsmall-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-headline-xsmall-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-large-font-size: var(--cre-8-font-size-13);\n      --cre8-typography-display-large-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-large-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-large-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-large-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-large-mobile-font-size: var(--cre-8-font-size-12);\n      --cre8-typography-display-large-mobile-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-large-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-large-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-large-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-default-font-size: var(--cre-8-font-size-11);\n      --cre8-typography-display-default-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-default-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-default-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-default-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-default-mobile-font-size: var(--cre-8-font-size-10);\n      --cre8-typography-display-default-mobile-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-default-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-default-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-default-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-small-font-size: var(--cre-8-font-size-9);\n      --cre8-typography-display-small-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-small-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-small-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-display-small-mobile-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-display-small-mobile-font-size: var(--cre-8-font-size-8);\n      --cre8-typography-display-small-mobile-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-display-small-mobile-line-height: var(--cre-8-line-heights-0);\n      --cre8-typography-display-small-mobile-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-display-small-mobile-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-meta-default-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-meta-default-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-meta-default-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-meta-default-line-height: var(--cre-8-line-heights-3);\n      --cre8-typography-meta-default-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-meta-default-text-transform: var(--cre-8-text-case-uppercase);\n--cre8-typography-meta-default-sentence-case-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-meta-default-sentence-case-font-size: var(--cre-8-font-size-2);\n      --cre8-typography-meta-default-sentence-case-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-meta-default-sentence-case-line-height: var(--cre-8-line-heights-11);\n      --cre8-typography-meta-default-sentence-case-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-meta-default-sentence-case-text-transform: var(--cre-8-text-case-none);\n--cre8-typography-meta-large-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-meta-large-font-size: var(--cre-8-font-size-4);\n      --cre8-typography-meta-large-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-meta-large-line-height: var(--cre-8-line-heights-3);\n      --cre8-typography-meta-large-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-meta-large-text-transform: var(--cre-8-text-case-uppercase);\n--cre8-typography-meta-small-font-family: var(--cre-8-font-families-inter);\n      --cre8-typography-meta-small-font-size: var(--cre-8-font-size-1);\n      --cre8-typography-meta-small-font-weight: var(--cre-8-font-weights-inter-2);\n      --cre8-typography-meta-small-line-height: var(--cre-8-line-heights-3);\n      --cre8-typography-meta-small-text-decoration: var(--cre-8-text-decoration-none);\n      --cre8-typography-meta-small-text-transform: var(--cre-8-text-case-uppercase);}";
+export default a2ui;
+//# sourceMappingURL=tokens_cre8-a2ui.module.d.ts.map

package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens_cre8-a2ui.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,m89CAiwB4E,CAAC;AACvF,eAAe,IAAI,CAAC"}

package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_cre8-legacy.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,yBAyPT,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"tokens_cre8-legacy.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,yBA6tBT,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_femmecubator2.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,yBA6WjB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tokens_femmecubator2.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,yBAm9BjB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_legacy.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/legacy/css/tokens_legacy.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBAEX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tokens_legacy.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/legacy/css/tokens_legacy.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBA6tBX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_marketing.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/marketing/css/tokens_marketing.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,yBAwPf,CAAC;AAER,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"tokens_marketing.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/marketing/css/tokens_marketing.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,yBA4tBf,CAAC;AAER,eAAe,gBAAgB,CAAC"}

package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts

@@ -1,3 +1,3 @@
-declare const black: import("lit").CSSResult;
-export default black;
+declare const minimalist: import("lit").CSSResult;
+export default minimalist;
 //# sourceMappingURL=tokens_minimalist.module.d.ts.map

package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_minimalist.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/minimalist/css/tokens_minimalist.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,KAAK,yBAEV,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"tokens_minimalist.module.d.ts","sourceRoot":"","sources":["../../../../../design-tokens/brands/minimalist/css/tokens_minimalist.module.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,UAAU,yBA6tBf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens_starbucks.module.d.ts","sourceRoot":"","sources":["../../../../design-tokens/brands/starbucks/tokens_starbucks.module.ts"],"names":[],"mappings":"AAEC,QAAA,MAAM,SAAS,yBAoUf,CAAC;AACF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tokens_starbucks.module.d.ts","sourceRoot":"","sources":["../../../../design-tokens/brands/starbucks/tokens_starbucks.module.ts"],"names":[],"mappings":"AAEC,QAAA,MAAM,SAAS,yBAowBf,CAAC;AACF,eAAe,SAAS,CAAC"}

package/lib/design-tokens/core/scss/theming/component.scss

@@ -1,8 +1,8 @@
-@import '@tmorrow/cre8-design-tokens/lib/web/mixins/typography-usage';
-@import 'reset';
-@import 'breakpoints';
-@import 'animation';
-@import 'functions';
+@import '../../../../node_modules/@tmorrow/cre8-design-tokens/lib/web/mixins/typography-usage';
+@import './reset';
+@import './breakpoints';
+@import './animation';
+@import './functions';
 
 
-@import 'variables';
+@import './variables';

package/lib/design-tokens/core/scss/theming/functions.scss

@@ -0,0 +1,4 @@
+
+@function size($value) {
+  @return #{$value * 0.5}rem;
+}

package/lib/design-tokens/core/scss/theming/spacing.scss

@@ -20,7 +20,7 @@
   * 1) Forces margin small to 0.5rem
   */
 .cre8-u-margin-sm {
-  margin: calc(8px * 1) !important;
+  margin: size(1) !important;
 }
 
 /**
@@ -28,15 +28,15 @@
   * 1) Forces margin medium to 1rem
   */
 .cre8-u-margin-md {
-  margin: calc(8px * 2) !important;
+  margin: size(2) !important;
 }
 
 /**
   * Margin large
-  * 1) Forces margin large to calc(8px * 3)
+  * 1) Forces margin large to size(3)
   */
 .cre8-u-margin-lg {
-  margin: calc(8px * 3) !important;
+  margin: size(3) !important;
 }
 
 /**
@@ -44,7 +44,7 @@
   * 1) Forces margin xl to 2rem
   */
 .cre8-u-margin-xl {
-  margin: calc(8px * 4) !important;
+  margin: size(4) !important;
 }
 
 /**
@@ -52,7 +52,7 @@
   * 1) Forces margin to 4rem
   */
 .cre8-u-margin-xxl {
-  margin: calc(8px * 8) !important;
+  margin: size(8) !important;
 }
 
 /**
@@ -68,7 +68,7 @@
   * 1) Forces margin top to 0.5rem
   */
 .cre8-u-margin-top-sm {
-  margin-top: calc(8px * 1) !important;
+  margin-top: size(1) !important;
 }
 
 /**
@@ -76,15 +76,15 @@
   * 1) Forces margin top to 1rem
   */
 .cre8-u-margin-top-md {
-  margin-top: calc(8px * 2) !important;
+  margin-top: size(2) !important;
 }
 
 /**
   * Margin top large
-  * 1) Forces margin top to calc(8px * 3)
+  * 1) Forces margin top to size(3)
   */
 .cre8-u-margin-top-lg {
-  margin-top: calc(8px * 3) !important;
+  margin-top: size(3) !important;
 }
 
 /**
@@ -92,7 +92,7 @@
   * 1) Forces margin top to 2rem
   */
 .cre8-u-margin-top-xl {
-  margin-top: calc(8px * 4) !important;
+  margin-top: size(4) !important;
 }
 
 /**
@@ -100,7 +100,7 @@
   * 1) Forces margin top to 4rem
   */
 .cre8-u-margin-top-xxl {
-  margin-top: calc(8px * 8) !important;
+  margin-top: size(8) !important;
 }
 
 /**
@@ -116,7 +116,7 @@
   * 1) Forces margin right to 0.5rem
   */
 .cre8-u-margin-right-sm {
-  margin-right: calc(8px * 1) !important;
+  margin-right: size(1) !important;
 }
 
 /**
@@ -124,15 +124,15 @@
   * 1) Forces margin right to 1rem
   */
 .cre8-u-margin-right-md {
-  margin-right: calc(8px * 2) !important;
+  margin-right: size(2) !important;
 }
 
 /**
     * Margin right large
-    * 1) Forces margin right to calc(8px * 3)
+    * 1) Forces margin right to size(3)
     */
 .cre8-u-margin-right-lg {
-  margin-right: calc(8px * 3) !important;
+  margin-right: size(3) !important;
 }
 
 /**
@@ -140,7 +140,7 @@
     * 1) Forces margin right to 2rem
     */
 .cre8-u-margin-right-xl {
-  margin-right: calc(8px * 4) !important;
+  margin-right: size(4) !important;
 }
 
 /**
@@ -148,7 +148,7 @@
   * 1) Forces margin right to 4rem
   */
 .cre8-u-margin-right-xxl {
-  margin-right: calc(8px * 8) !important;
+  margin-right: size(8) !important;
 }
 
 /**
@@ -164,7 +164,7 @@
   * 1) Forces margin bottom to 0.5rem
   */
 .cre8-u-margin-bottom-sm {
-  margin-bottom: calc(8px * 1) !important;
+  margin-bottom: size(1) !important;
 }
 
 /**
@@ -172,15 +172,15 @@
   * 1) Forces margin bottom to 1rem
   */
 .cre8-u-margin-bottom-md {
-  margin-bottom: calc(8px * 2) !important;
+  margin-bottom: size(2) !important;
 }
 
 /**
   * Margin bottom large
-  * 1) Forces margin bottom to calc(8px * 3)
+  * 1) Forces margin bottom to size(3)
   */
 .cre8-u-margin-bottom-lg {
-  margin-bottom: calc(8px * 3) !important;
+  margin-bottom: size(3) !important;
 }
 
 /**
@@ -188,7 +188,7 @@
   * 1) Forces margin bottom to 2rem
   */
 .cre8-u-margin-bottom-xl {
-  margin-bottom: calc(8px * 4) !important;
+  margin-bottom: size(4) !important;
 }
 
 /**
@@ -196,7 +196,7 @@
   * 1) Forces margin bottom to 4rem
   */
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: calc(8px * 8) !important;
+  margin-bottom: size(8) !important;
 }
 
 /**
@@ -204,10 +204,10 @@
   * 1) Forces margin bottom to 2rem on small screens and 4rem on large screens
   */
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: calc(8px * 4) !important;
+  margin-bottom: size(4) !important;
 
   @media all and (min-width:$cre8-breakpoint-md) {
-    margin-bottom: calc(8px * 8) !important;
+    margin-bottom: size(8) !important;
   }
 }
 
@@ -224,7 +224,7 @@
   * 1) Forces margin left to 0.5rem
   */
 .cre8-u-margin-left-sm {
-  margin-left: calc(8px * 1) !important;
+  margin-left: size(1) !important;
 }
 
 /**
@@ -232,7 +232,7 @@
   * 1) Forces margin left to 1rem
   */
 .cre8-u-margin-left-md {
-  margin-left: calc(8px * 2) !important;
+  margin-left: size(2) !important;
 }
 
 /**
@@ -240,7 +240,7 @@
   * 1) Forces margin left to 1.5rem
   */
 .cre8-u-margin-left-lg {
-  margin-left: calc(8px * 3) !important;
+  margin-left: size(3) !important;
 }
 
 /**
@@ -248,7 +248,7 @@
   * 1) Forces margin left to 2rem
   */
 .cre8-u-margin-left-xl {
-  margin-left: calc(8px * 4) !important;
+  margin-left: size(4) !important;
 }
 
 /**
@@ -256,7 +256,7 @@
   * 1) Forces margin left to 4rem
   */
 .cre8-u-margin-left-xxl {
-  margin-left: calc(8px * 8) !important;
+  margin-left: size(8) !important;
 }
 
 /**
@@ -276,7 +276,7 @@
   * 1) Forces padding small to 0.5rem
   */
 .cre8-u-padding-sm {
-  padding: calc(8px * 1) !important;
+  padding: size(1) !important;
 }
 
 /**
@@ -284,15 +284,15 @@
   * 1) Forces padding medium to 1rem
   */
 .cre8-u-padding-md {
-  padding: calc(8px * 2) !important;
+  padding: size(2) !important;
 }
 
 /**
   * Padding large
-  * 1) Forces padding large to calc(8px * 3)
+  * 1) Forces padding large to size(3)
   */
 .cre8-u-padding-lg {
-  padding: calc(8px * 3) !important;
+  padding: size(3) !important;
 }
 
 /**
@@ -300,7 +300,7 @@
   * 1) Forces padding xl to 2rem
   */
 .cre8-u-padding-xl {
-  padding: calc(8px * 4) !important;
+  padding: size(4) !important;
 }
 
 /**
@@ -308,7 +308,7 @@
   * 1) Forces padding xxl to 4rem
   */
 .cre8-u-padding-xxl {
-  padding: calc(8px * 8) !important;
+  padding: size(8) !important;
 }
 
 /**
@@ -324,7 +324,7 @@
   * 1) Forces padding top to 0.5rem
   */
 .cre8-u-padding-top-sm {
-  padding-top: calc(8px * 1) !important;
+  padding-top: size(1) !important;
 }
 
 /**
@@ -332,15 +332,15 @@
   * 1) Forces padding top to 1rem
   */
 .cre8-u-padding-top-md {
-  padding-top: calc(8px * 2) !important;
+  padding-top: size(2) !important;
 }
 
 /**
   * Padding top large
-  * 1) Forces padding top to calc(8px * 3)
+  * 1) Forces padding top to size(3)
   */
 .cre8-u-padding-top-lg {
-  padding-top: calc(8px * 3) !important;
+  padding-top: size(3) !important;
 }
 
 /**
@@ -348,7 +348,7 @@
   * 1) Forces padding top to 2rem
   */
 .cre8-u-padding-top-xl {
-  padding-top: calc(8px * 4) !important;
+  padding-top: size(4) !important;
 }
 
 /**
@@ -356,7 +356,7 @@
   * 1) Forces padding top xxl to 4rem
   */
 .cre8-u-padding-top-xxl {
-  padding-top: calc(8px * 8) !important;
+  padding-top: size(8) !important;
 }
 
 /**
@@ -372,7 +372,7 @@
   * 1) Forces padding right to 0.5rem
   */
 .cre8-u-padding-right-sm {
-  padding-right: calc(8px * 1) !important;
+  padding-right: size(1) !important;
 }
 
 /**
@@ -380,15 +380,15 @@
   * 1) Forces padding right to 1rem
   */
 .cre8-u-padding-right-md {
-  padding-right: calc(8px * 2) !important;
+  padding-right: size(2) !important;
 }
 
 /**
     * Padding right large
-    * 1) Forces padding right to calc(8px * 3)
+    * 1) Forces padding right to size(3)
     */
 .cre8-u-padding-right-lg {
-  padding-right: calc(8px * 3) !important;
+  padding-right: size(3) !important;
 }
 
 /**
@@ -396,7 +396,7 @@
     * 1) Forces padding right to 2rem
     */
 .cre8-u-padding-right-xl {
-  padding-right: calc(8px * 4) !important;
+  padding-right: size(4) !important;
 }
 
 /**
@@ -404,7 +404,7 @@
   * 1) Forces padding right xxl to 4rem
   */
 .cre8-u-padding-right-xxl {
-  padding-right: calc(8px * 8) !important;
+  padding-right: size(8) !important;
 }
 
 /**
@@ -420,7 +420,7 @@
   * 1) Forces padding bottom to 0.5rem
   */
 .cre8-u-padding-bottom-sm {
-  padding-bottom: calc(8px * 1) !important;
+  padding-bottom: size(1) !important;
 }
 
 /**
@@ -428,15 +428,15 @@
   * 1) Forces padding bottom to 1rem
   */
 .cre8-u-padding-bottom-md {
-  padding-bottom: calc(8px * 2) !important;
+  padding-bottom: size(2) !important;
 }
 
 /**
   * Padding bottom large
-  * 1) Forces padding bottom to calc(8px * 3)
+  * 1) Forces padding bottom to size(3)
   */
 .cre8-u-padding-bottom-lg {
-  padding-bottom: calc(8px * 3) !important;
+  padding-bottom: size(3) !important;
 }
 
 /**
@@ -444,7 +444,7 @@
   * 1) Forces padding bottom to 2rem
   */
 .cre8-u-padding-bottom-xl {
-  padding-bottom: calc(8px * 4) !important;
+  padding-bottom: size(4) !important;
 }
 
 /**
@@ -452,7 +452,7 @@
   * 1) Forces padding bottom xxl to 4rem
   */
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: calc(8px * 8) !important;
+  padding-bottom: size(8) !important;
 }
 
 /**
@@ -468,7 +468,7 @@
   * 1) Forces padding left to 0.5rem
   */
 .cre8-u-padding-left-sm {
-  padding-left: calc(8px * 1) !important;
+  padding-left: size(1) !important;
 }
 
 /**
@@ -476,7 +476,7 @@
   * 1) Forces padding left to 1rem
   */
 .cre8-u-padding-left-md {
-  padding-left: calc(8px * 2) !important;
+  padding-left: size(2) !important;
 }
 
 /**
@@ -484,7 +484,7 @@
   * 1) Forces padding left to 1.5rem
   */
 .cre8-u-padding-left-lg {
-  padding-left: calc(8px * 3) !important;
+  padding-left: size(3) !important;
 }
 
 /**
@@ -492,7 +492,7 @@
   * 1) Forces padding left to 2rem
   */
 .cre8-u-padding-left-xl {
-  padding-left: calc(8px * 4) !important;
+  padding-left: size(4) !important;
 }
 
 /**
@@ -500,5 +500,5 @@
   * 1) Forces padding left xxl to 4rem
   */
 .cre8-u-padding-left-xxl {
-  padding-left: calc(8px * 8) !important;
+  padding-left: size(8) !important;
 }