@ebrains/components 2.4.0 → 3.0.0

package/dist/components/eds-breadcrumb.js

@@ -120,7 +120,7 @@ const EdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class EdsBreadcrumb ext
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '4894fb9e6b37ef84880a62f4dcd3289dcb9cab38', "aria-label": "Breadcrumb" }, h("ol", { key: 'd69405fcee024465d645d9cdbb17189998a94b95', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: 'a068d2deb011c0a303e5a4320f4f5913bfc36d4a', "aria-label": "Breadcrumb" }, h("ol", { key: '63ab81ece8ff48546875320f4fd346638fac3bdc', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -132,7 +132,7 @@ const EdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class EdsBreadcrumb ext
                             : this.intent
                     : this.intent;
                 return (h("eds-link", Object.assign({ label: fullLabel, url: item.url, intent: linkIntent, disabled: isLast, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
-            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { name: "chevron-right", class: "w-20 h-20" }))));
         }))));
     }
     get el() { return this; }

package/dist/components/eds-button2.js

@@ -3,7 +3,7 @@ import { s as sendAnalytics } from './analytics.js';
 import { c as cva } from './index2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsButtonCss = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n  }\n\n  &::after {\n    position: absolute;\n  }\n\n  &::after {\n    inset: 0rem;\n  }\n\n  &::after {\n    z-index: 1;\n  }\n\n  &::after {\n    border-radius: 8px;\n  }\n\n  &::after {\n    border-width: 1px;\n  }\n\n  &::after {\n    border-width: 2px;\n  }\n\n  &::after {\n    border-color: rgba(0, 0, 0, .1);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  &::after {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px;\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(0, 0, 0, .3);\n  border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n.block {\n  display: block;\n}\n\n.\\!block {\n  display: block !important;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px;\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n  background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n  background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n  background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n  background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n  background-color: var(--green-600);\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-darker {\n  background-color: var(--grey-400);\n}\n\n.bg-overlay {\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n  background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n  background-color: var(--grey-800);\n}\n\n.bg-stronger {\n  background-color: var(--grey-900);\n}\n\n.bg-strongest {\n  background-color: var(--black);\n}\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--green-500);\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--black);\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-lightest {\n  color: var(--grey-500);\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n  color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}";
+const edsButtonCss = "/* ============================================\n   EDS BUTTON - NEW EBRAINS VISUAL SYSTEM\n   ============================================ */\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n/* ============================================\n   TYPOGRAPHY CLASSES\n   ============================================ */\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n/* ============================================\n   BUTTON BORDER EFFECTS - NEW SYSTEM\n   ============================================ */\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(7, 20, 13, 1); /* brand-black with opacity */\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(255, 255, 255, 1); /* white border */\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape */\n    content: '';\n  }\n}\n\n.border-inside-inverse.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape for inverse border */\n  }\n}\n\n/* ============================================\n   LOADER SPINNER\n   ============================================ */\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(7, 20, 13, 0.3); /* brand-black */\n  border-bottom-color: #07140D; /* brand-black */\n}\n\n/* ============================================\n   TRANSITIONS & EFFECTS\n   ============================================ */\n\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n/* ============================================\n   BRAND HOVER TRANSFORM EFFECT\n   ============================================ */\n.brand-hover-transform {\n  transition-property: transform, box-shadow, color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.brand-hover-transform:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.3);\n}\n\n.brand-hover-transform[aria-disabled=\"true\"]:hover,\n.brand-hover-transform:disabled:hover {\n  transform: none;\n  box-shadow: none;\n}\n\n/* Secondary Inverse Transform Effect */\n.secondary-inverse-transform {\n  transition-property: transform, background-color, color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.secondary-inverse-transform:hover {\n  transform: translateY(-2px);\n}\n\n.secondary-inverse-transform[aria-disabled=\"true\"]:hover,\n.secondary-inverse-transform:disabled:hover {\n  transform: none;\n}\n\n/* ============================================\n   UTILITY CLASSES\n   ============================================ */\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n/* ============================================\n   POSITIONING\n   ============================================ */\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n/* ============================================\n   SPACING\n   ============================================ */\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n/* ============================================\n   DISPLAY\n   ============================================ */\n\n.block {\n  display: block;\n}\n\n.\\!block {\n  display: block !important;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n/* ============================================\n   DIMENSIONS\n   ============================================ */\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-40 {\n  height: 2.5rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-48 {\n  height: 3rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-24 {\n  width: 1.5rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-auto {\n  width: auto;\n}\n\n/* ============================================\n   FLEXBOX\n   ============================================ */\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-4 {\n  gap: 0.25rem;\n}\n\n.gap-8 {\n  gap: 0.5rem;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n/* ============================================\n   OVERFLOW\n   ============================================ */\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n/* ============================================\n   TEXT\n   ============================================ */\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n/* ============================================\n   BORDERS & RADIUS - NEW SYSTEM\n   ============================================ */\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px; /* NEW: pill shape */\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: var(--grey-light);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n}\n\n/* ============================================\n   BACKGROUNDS - NEW EBRAINS COLORS\n   ============================================ */\n\n/* Accent backgrounds - NEW green */\n.\\!bg-accent-dark {\n  background-color: var(--brand-green-dark) !important; /* NEW: #00C87B */\n}\n\n.bg-accent {\n  background-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.bg-accent-dark {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n/* Neutral backgrounds - NEW simplified greys */\n.\\!bg-darker {\n  background-color: var(--grey-dark) !important; /* NEW: #7A7B7A */\n}\n\n.bg-dark {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.bg-darker {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* Strong backgrounds - NEW brand-black */\n.\\!bg-strong-dark {\n  background-color: var(--brand-black) !important; /* NEW: #07140D */\n}\n\n.bg-strong {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.bg-strong-dark {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-stronger {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-strongest {\n  background-color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n/* Overlay */\n.bg-overlay {\n  background-color: rgba(7, 20, 13, 0.25); /* NEW: brand-black overlay */\n}\n\n/* ============================================\n   PADDING\n   ============================================ */\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.px-32 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.pl-2 {\n  padding-left: 0.125rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-2 {\n  padding-right: 0.125rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n/* ============================================\n   TEXT COLORS - NEW SYSTEM\n   ============================================ */\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-light {\n  color: var(--grey-dark); /* NEW: simplified to grey-dark */\n}\n\n\n.text-lightest {\n  color: var(--grey-light); /* NEW: simplified to grey-dark */\n}\n\n/* ============================================\n   OPACITY\n   ============================================ */\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-20 {\n  opacity: 20;\n}\n\n/* ============================================\n   SHADOWS - NEW SYSTEM\n   ============================================ */\n\n.shadow {\n  --tw-shadow: 0 1px 3px rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0 0 16px rgba(0, 255, 157, 0.5); /* NEW: brand-green glow */\n  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n/* ============================================\n   PSEUDO-ELEMENT EFFECTS\n   ============================================ */\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-dark); /* NEW: simplified */\n}\n\n/* ============================================\n   INTERACTIVE STATES - NEW COLORS\n   ============================================ */\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: transparent;\n}\n\n/* Hover states with NEW colors */\n\n.hover\\:border-0::hover {\n  border-width: 0px;\n}\n\n.hover\\:border-accent::hover {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black);\n}\n\n.hover\\:text-light:hover {\n  color: var(--grey-dark);\n}\n\n.hover\\:text-inverse:hover {\n  color: var(--white);\n}\n\n\n.hover\\:bg-accent:hover {\n  background-color: var(--brand-green); /* NEW: #00C87B */\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-light);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: transparent;\n}\n\n.hover\\:bg-strongest:hover {\n  background-color: var(--brand-black);\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0 8px 24px rgba(7, 20, 13, 0.2); /* NEW: brand-black */\n  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   DISABLED STATES - NEW COLORS\n   ============================================ */\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: transparent;\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* ============================================\n   AFTER PSEUDO-ELEMENTS\n   ============================================ */\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: transparent !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.after\\:border-accent-dark::after {\n  border-color: var(--brand-green-dark); /* NEW: #00FF9D */\n}\n\n.after\\:border-soft::after {\n  border-color: var(--grey-dark);\n}\n\n.after\\:border-softest::after {\n  border-color: var(--grey-light);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:text-accent:hover {\n  color: var(--brand-green);\n}\n\n.hover\\:after\\:\\border-accent:hover::after {\n  border-color: var(--brand-green);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: transparent !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:after\\:\\!border-0[aria-disabled=\"true\"]::after {\n  border-width: 0 !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}\n\n/* ============================================\n   CTA BUTTON STYLES\n   ============================================ */\n\n/* CTA link style */\n.cta-link {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-01-fontSize);\n  color: var(--grey-dark);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.cta-link:hover {\n  color: var(--brand-green);\n}\n\n/* CTA brand link style - always green */\n.cta-link-brand {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-02-fontSize);\n  color: var(--brand-green);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cta-link-brand:hover {\n  color: var(--brand-green-dark);\n}\n\n@media (min-width: 750px) {\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n}";
 const EdsButtonStyle0 = edsButtonCss;
 
 const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLElement {
@@ -12,20 +12,26 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.button = cva([
-            'relative inline-flex items-center',
-            'py-8',
-            'effect-focus effect-color',
-            'cursor-pointer',
+            'relative items-center py-12 cursor-pointer',
             'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
             'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
         ], {
             variants: {
                 intent: {
-                    primary: 'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',
-                    secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
-                    tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
-                    ghost: 'border-inside hover:bg-darker',
-                    ghostInverse: 'border-inside text-lightest hover:bg-dark'
+                    primary: 'bg-strongest text-inverse hover:bg-accent hover:text-default focus:shadow-none aria-disabled:shadow-none',
+                    secondary: 'border-inside text-default bg-transparent hover:bg-strong-dark hover:text-inverse  aria-disabled:after:!border-0',
+                    secondaryInverse: 'border-inside-inverse text-inverse bg-transparent hover:bg-inverse hover:text-default aria-disabled:after:!border-0',
+                    ghost: '',
+                    ghostInverse: 'text-inverse',
+                    brand: 'bg-accent text-default hover:bg-strongest hover:text-inverse aria-disabled:shadow-none',
+                    brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
+                    neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
+                    cta: [
+                        'cta-link !px-0 !py-0 !min-h-0 !h-auto'
+                    ],
+                    'cta-brand': [
+                        'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
+                    ]
                 },
                 loading: {
                     true: 'pointer-events-none',
@@ -39,6 +45,10 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
                     small: 'h-36 f-ui-02',
                     large: 'h-44 f-ui-01'
                 },
+                hasIcon: {
+                    true: '',
+                    false: ''
+                },
                 iconPos: {
                     left: 'flex-row-reverse',
                     right: ''
@@ -50,7 +60,11 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
                 pill: {
                     true: 'rounded-full border-inside-pill',
                     false: 'rounded-sm'
-                }
+                },
+                fullWidth: {
+                    true: 'w-full flex',
+                    false: 'inline-flex w-auto'
+                },
             },
             compoundVariants: [
                 {
@@ -98,10 +112,33 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
                     size: 'large',
                     class: 'pr-8',
                     iconOnly: false
+                },
+                // CTA variants with icons get gap-8
+                { intent: 'cta', hasIcon: true, class: 'gap-8' },
+                { intent: 'cta-brand', hasIcon: true, class: 'gap-8' },
+                {
+                    intent: 'cta',
+                    size: 'small',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta',
+                    size: 'large',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta-brand',
+                    size: 'small',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta-brand',
+                    size: 'large',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
                 }
             ],
             defaultVariants: {
-                intent: 'secondary',
+                intent: 'primary',
                 loading: false,
                 iconSmall: false,
                 iconPos: 'right',
@@ -110,11 +147,11 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
                 size: 'small'
             }
         });
-        this.parentContext = null; // Accepts the entire event detail or null
+        this.parentContext = null;
         this.label = undefined;
         this.ariaLabel = 'Button';
         this.elementType = 'button';
-        this.intent = 'secondary';
+        this.intent = 'primary';
         this.loading = false;
         this.disabled = false;
         this.pill = false;
@@ -123,10 +160,10 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
         this.iconPos = 'right';
         this.iconSmall = false;
         this.triggerClick = undefined;
+        this.fullWidth = false;
     }
     handleParentContext(event) {
         if (event.target !== this.el) {
-            // Ignore the event if it's not targeted at this specific instance
             return;
         }
         this.parentContext = event.detail;
@@ -145,14 +182,12 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
             name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
             action: 'click'
         });
-        // If an onClick prop is provided, call it
         if (typeof this.triggerClick === 'function') {
-            this.triggerClick(); // Trigger the passed-in function
+            this.triggerClick();
         }
     }
     handleKeyDown(event) {
         if (this.disabled || this.loading) {
-            // Fix: check loading too
             return;
         }
         if (event.key === 'Enter' || (this.elementType === 'a' && event.key === ' ')) {
@@ -164,21 +199,27 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
         const classes = this.button({
             intent: this.intent,
             loading: this.loading,
+            hasIcon: !!this.icon,
             iconPos: this.iconPos,
             size: this.size,
             pill: this.pill,
             iconOnly: !this.label,
-            iconSmall: this.iconSmall
+            iconSmall: this.iconSmall,
+            fullWidth: this.fullWidth
         });
         const ElementType = this.elementType;
         const isInteractive = !this.disabled && !this.loading;
-        return (h(Host, { key: '25a7b4ffda3df65e91c77a18becd45bc40973f3c' }, h(ElementType, { key: '0f00d82a37f3189b862015eb2d915f2364b6d75d', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '6e45dfefb4805eef0574f7462becca6cde85dbc0', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '9909c70db39a039b883854caff816d25f132b866', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '367cd65a13f81cbcb12d93855dc091a4309566bb', class: "loader", style: {
-                border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
-                borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
-            } }))), this.icon ? (h("eds-icon-wrapper", { class: `
-                flex inline-flex items-center justify-center
-                ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-              `, icon: this.icon, "aria-hidden": "true" })) : null)));
+        // NEW: Loader colors based on intent (brand-black based system)
+        const loaderBorderColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
+            ? 'rgba(255, 255, 255, 0.3)' // White with opacity for dark backgrounds
+            : 'rgba(7, 20, 13, 0.3)'; // Brand-black with opacity for light backgrounds
+        const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
+            ? '#FFFFFF' // White for dark backgrounds
+            : '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
+        return (h(Host, { key: '6f955c89a01cf823ff8fc34bfa92df85a3aa8327' }, h(ElementType, { key: 'fabf5842d4c9583c7ff9e4415697c62c111dce68', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '746feb603fd83b54bab92e62ab9aefcd6a232f54', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'e0f54e409080548687304bae2f5d3e1b56863318', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'c2472f5d2730ef850a076471fa00c9db91496db7', class: "loader", style: {
+                border: `3px solid ${loaderBorderColor}`,
+                borderBottomColor: loaderBottomColor
+            } }))), this.icon ? (h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -195,7 +236,8 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
         "size": [1],
         "iconPos": [1, "icon-pos"],
         "iconSmall": [4, "icon-small"],
-        "triggerClick": [16]
+        "triggerClick": [16],
+        "fullWidth": [4, "full-width"]
     }, [[0, "parentContext", "handleParentContext"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{eds-icon-bin.d.ts → eds-card-app.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconBin extends Components.EdsIconBin, HTMLElement {}
-export const EdsIconBin: {
-    prototype: EdsIconBin;
-    new (): EdsIconBin;
+interface EdsCardApp extends Components.EdsCardApp, HTMLElement {}
+export const EdsCardApp: {
+    prototype: EdsCardApp;
+    new (): EdsCardApp;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-card-app.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-link2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsCardAppCss = ":host{display:flex;height:100%}.app-card{height:auto;border-radius:16px;padding:1.5rem;transition:all 0.4s ease;display:flex;flex-direction:column;flex-grow:1}.app-card-default{background:var(--brand-black);border:1px solid rgba(0, 0, 0, 0.1)}.app-card-default:hover{background:var(--brand-black);border-color:rgba(0, 255, 157, 0.4);transform:translateY(-4px);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.app-card-default .app-title{color:var(--white)}.app-card-default .app-description{color:var(--grey-light)}.app-card-default .app-tag{background:rgba(255, 255, 255, 0.1);color:var(--white)}.app-card-inverse{background:var(--white);border:1px solid rgba(0, 0, 0, 0.1)}.app-card-inverse:hover{background:var(--white);border-color:rgba(0, 255, 157, 0.4);transform:translateY(-4px);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.app-card-inverse .app-title{color:var(--brand-black)}.app-card-inverse .app-description{color:var(--grey-dark)}.app-card-inverse .app-tag{background:rgba(0, 0, 0, 0.08);color:var(--brand-black)}eds-tag{margin-bottom:1rem}.app-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.75rem;margin-top:0;margin-bottom:1rem;line-height:1.3}.app-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6;margin-bottom:1.5rem;flex-grow:1}.app-tags{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.app-tag{padding:0.375rem 0.75rem;border-radius:4px;font-size:0.75rem;font-weight:400}@media (max-width: 768px){.app-card{padding:2rem}.app-title{font-size:1.5rem}}";
+const EdsCardAppStyle0 = edsCardAppCss;
+
+const EdsCardApp$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardApp extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.category = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.tags = [];
+        this.url = undefined;
+        this.linkText = 'Explore Components';
+        this.variant = 'default';
+    }
+    /**
+     * Parse the tags prop into an array
+     */
+    get parsedTags() {
+        return parseData(this.tags);
+    }
+    render() {
+        const cardClasses = [
+            'app-card',
+            `app-card-${this.variant}`
+        ].join(' ');
+        // Determine link and category tag intents based on variant
+        const linkIntent = this.variant === 'default' ? 'cta-brand' : 'cta';
+        const categoryTagIntent = this.variant === 'default' ? 'brand' : 'dark';
+        return (h("div", { key: 'e90fec25a02a9635247da04ca23a932be9cd7ea5', class: cardClasses }, this.category && (h("eds-tag", { key: 'a001a815aa32a96beac3d4af08766479030fe8d4', label: this.category, intent: categoryTagIntent, size: "medium" })), h("h3", { key: '10d4532b4fe9b9a92ad24b09634028c583166bb3', class: "app-title" }, this.title), h("p", { key: 'de1559913d227ff6b023ecdbc5fea29f66cb01a0', class: "app-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '386a2e72a92ea03c13a4410983b8b5320e83b810', class: "app-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "app-tag" }, tag.label))))), this.url && (h("eds-link", { key: '2c1a3d133a6f04b6a3359a3c8d2f47eb19c75202', label: this.linkText, url: this.url, intent: linkIntent, icon: "arrow-right", "icon-pos": "right" }))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardAppStyle0; }
+}, [1, "eds-card-app", {
+        "category": [1],
+        "title": [1],
+        "description": [1],
+        "tags": [1],
+        "url": [1],
+        "linkText": [1, "link-text"],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-app", "eds-icon-wrapper", "eds-link", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardApp$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardApp = EdsCardApp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardApp, defineCustomElement };

package/dist/components/{eds-trl.d.ts → eds-card-cta.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsTrl extends Components.EdsTrl, HTMLElement {}
-export const EdsTrl: {
-    prototype: EdsTrl;
-    new (): EdsTrl;
+interface EdsCardCta extends Components.EdsCardCta, HTMLElement {}
+export const EdsCardCta: {
+    prototype: EdsCardCta;
+    new (): EdsCardCta;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-card-cta.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$4 } from './eds-button2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+
+const edsCardCtaCss = ":host{display:flex;height:100%}.cta-container{height:auto;text-align:center;border-radius:16px;padding:1.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1;justify-content:center}.cta-container-default{background-color:var(--brand-black);border:1px solid rgba(0, 255, 157, 0.25)}.cta-container-default .cta-title{color:var(--white)}.cta-container-default .cta-description{color:var(--grey-light)}.cta-container-default .cta-link{color:var(--grey-dark)}.cta-container-inverse{background-color:var(--white);border:1px solid rgba(0, 255, 157, 0.15)}.cta-container-inverse .cta-title{color:var(--brand-black)}.cta-container-inverse .cta-description{color:var(--grey-dark)}.cta-container-inverse .cta-link{color:var(--grey-dark)}.cta-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center, rgba(0, 255, 157, 0.1) 0%, transparent 50%);animation:rotate 20s linear infinite;pointer-events:none}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.cta-content{position:relative;z-index:1;width:100%}.cta-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:clamp(1.5rem, 4vw, 2rem);letter-spacing:-0.02em;margin-bottom:1rem;line-height:1.2}.cta-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;margin:0 0 1.5rem;line-height:1.6}.cta-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.cta-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}@media (max-width: 768px){.cta-container{padding:1.5rem}.cta-title{font-size:1.25rem}.cta-description{font-size:0.875rem;margin-bottom:1rem}.cta-actions{gap:0.75rem;margin-bottom:1rem}.cta-links{gap:0.75rem}}";
+const EdsCardCtaStyle0 = edsCardCtaCss;
+
+const EdsCardCta$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardCta extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handlePrimaryClick = () => {
+            if (this.primaryButtonUrl) {
+                window.location.href = this.primaryButtonUrl;
+            }
+        };
+        this.handleSecondaryClick = () => {
+            if (this.secondaryButtonUrl) {
+                window.location.href = this.secondaryButtonUrl;
+            }
+        };
+        this.title = undefined;
+        this.description = undefined;
+        this.primaryButtonText = 'Get Started';
+        this.primaryButtonUrl = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.links = [];
+        this.variant = 'default';
+    }
+    /**
+     * Parse the links prop into an array
+     */
+    get parsedLinks() {
+        return parseData(this.links);
+    }
+    render() {
+        const containerClasses = [
+            'cta-container',
+            `cta-container-${this.variant}`
+        ].join(' ');
+        // Determine button and link intents based on variant
+        const primaryButtonIntent = this.variant === 'default' ? 'brandInverse' : 'brand';
+        const secondaryButtonIntent = this.variant === 'default' ? 'secondaryInverse' : 'secondary';
+        const linkIntent = this.variant === 'default' ? 'cta' : 'underline';
+        return (h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, h("eds-button", { key: 'f2c092d340996c87864677f94d979fe6317ef6d7', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (h("eds-button", { key: 'de0fe98dab48b2ab4b78a637915df48c930c4b54', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick }))), this.parsedLinks && this.parsedLinks.length > 0 && (h("div", { key: '842a6e794364fb50829ad422fc7699527b17e918', class: "cta-links" }, this.parsedLinks.map((link, index) => (h("eds-link", { key: index, label: link.label, url: link.url, intent: linkIntent }))))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardCtaStyle0; }
+}, [1, "eds-card-cta", {
+        "title": [1],
+        "description": [1],
+        "primaryButtonText": [1, "primary-button-text"],
+        "primaryButtonUrl": [1, "primary-button-url"],
+        "secondaryButtonText": [1, "secondary-button-text"],
+        "secondaryButtonUrl": [1, "secondary-button-url"],
+        "links": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-cta", "eds-button", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-cta":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardCta$1);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardCta = EdsCardCta$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardCta, defineCustomElement };

package/dist/components/eds-card-desc2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const edsCardDescCss = ".f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const edsCardDescCss = ".f-body-02{font-family:var(--f-body-02-fontFamily);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}";
 const EdsCardDescStyle0 = edsCardDescCss;
 
 const EdsCardDesc = /*@__PURE__*/ proxyCustomElement(class EdsCardDesc extends HTMLElement {
@@ -11,18 +11,20 @@ const EdsCardDesc = /*@__PURE__*/ proxyCustomElement(class EdsCardDesc extends H
         this.description = undefined;
         this.truncate = true;
         this.truncateLines = '3';
+        this.intent = 'secondary';
     }
     getTruncateClass() {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '3711e4f24ad19f1dedef3083b9b9c8868f3b4e3f', class: "text-light f-ui-03-light" }, h("span", { key: '46b53c5111bc05ffaaa6f8fcd4b1b6ddfae2d413', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: 'c018c6b42e709c9e5df23ba9a999955ee4da1fdd', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, h("span", { key: 'bcfb43e3940a31dc4c0ec18904e4448eb27d0580', class: this.getTruncateClass() }, this.description)));
     }
     static get style() { return EdsCardDescStyle0; }
 }, [1, "eds-card-desc", {
         "description": [1],
         "truncate": [4],
-        "truncateLines": [1, "truncate-lines"]
+        "truncateLines": [1, "truncate-lines"],
+        "intent": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{eds-card-project.d.ts → eds-card-feature.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsCardProject extends Components.EdsCardProject, HTMLElement {}
-export const EdsCardProject: {
-    prototype: EdsCardProject;
-    new (): EdsCardProject;
+interface EdsCardFeature extends Components.EdsCardFeature, HTMLElement {}
+export const EdsCardFeature: {
+    prototype: EdsCardFeature;
+    new (): EdsCardFeature;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-card-feature.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+
+const edsCardFeatureCss = ":host{display:flex;height:100%}.feature-card{height:auto;border-radius:16px;padding:1.5rem;transition:all 0.4s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1}.feature-card-default{background:var(--brand-black);border:1px solid rgba(0, 0, 0, 0.1)}.feature-card-default:hover{background:var(--brand-black);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.feature-card-default .feature-title{color:var(--white)}.feature-card-default .feature-description{color:var(--grey-light)}.feature-card-inverse{background:var(--white);border:1px solid rgba(0, 0, 0, 0.1)}.feature-card-inverse:hover{background:var(--white);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.feature-card-inverse .feature-title{color:var(--brand-black)}.feature-card-inverse .feature-description{color:var(--grey-dark)}.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0, 255, 157, 0.1);border-radius:12px;color:var(--brand-green);flex-shrink:0}.feature-card-inverse .feature-icon{background:rgba(0, 0, 0, 0.05);color:var(--brand-black)}.feature-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.25rem;margin-bottom:0.75rem;line-height:1.4}.feature-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6;flex-grow:1}@media (max-width: 768px){.feature-card{padding:2rem}.feature-icon{width:40px;height:40px;margin-bottom:1.25rem}.feature-title{font-size:1.125rem}}";
+const EdsCardFeatureStyle0 = edsCardFeatureCss;
+
+const EdsCardFeature$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardFeature extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.url = undefined;
+        this.linkText = 'Learn more';
+        this.variant = 'default';
+    }
+    render() {
+        const cardClasses = [
+            'feature-card',
+            `feature-card-${this.variant}`
+        ].join(' ');
+        return (h("div", { key: '315904b024e86403b00c9f0e3ebb93dafba08fa8', class: cardClasses }, this.icon && (h("div", { key: 'e0891b38e8321130471ae1422c96fbfe7662b01f', class: "feature-icon" }, h("eds-icon-wrapper", { key: '768b355daebf53d69a54166525c193505dc44d67', name: this.icon, size: 24 }))), h("h3", { key: 'e2486793198e51e518f24beab609a3d0186902d4', class: "feature-title" }, this.title), h("p", { key: '4d66d673b5733c96312cde5e1c3fd64cced5d95a', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: 'e9123234265f259fb9b61172f2e79c7aba5f82b4', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardFeatureStyle0; }
+}, [1, "eds-card-feature", {
+        "icon": [1],
+        "title": [1],
+        "description": [1],
+        "url": [1],
+        "linkText": [1, "link-text"],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-feature", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-feature":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardFeature$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardFeature = EdsCardFeature$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardFeature, defineCustomElement };