@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-toast/eds-toast.stories.js

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['default', 'success', 'error', 'warning'],
+            options: ['default', 'success', 'error', 'warning', 'brand'],
             description: 'The visual intent or style of the toast.'
         },
         duration: {
@@ -36,3 +36,27 @@ export const Default = {
         duration: 5000
     }
 };
+export const Brand = {
+    render: (args) => `
+      <eds-toast
+        message="${args.message}"
+        intent="brand"
+        duration="${args.duration}">
+      </eds-toast>
+    `,
+    args: {
+        message: 'You are an admin of this form.',
+        duration: 5000
+    }
+};
+export const AllVariants = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
+      <eds-toast message="Default notification" intent="default" duration="0"></eds-toast>
+      <eds-toast message="Success! Your changes have been saved." intent="success" duration="0"></eds-toast>
+      <eds-toast message="Error: Something went wrong." intent="error" duration="0"></eds-toast>
+      <eds-toast message="Warning: Please review your input." intent="warning" duration="0"></eds-toast>
+      <eds-toast message="You are an admin of this form." intent="brand" duration="0"></eds-toast>
+    </div>
+  `
+};

package/dist/collection/components/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: 'ac2e0d12975d88e9a22db8b92255a597e7f6ea6f', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: 'd707822f33892171428aa926822dff5ffefac219', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -19,7 +19,7 @@ export class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '1ba27ac30f67a50e39b2bfdff2b4392b4adc948a', class: "relative w-full inline-block group" }, h("slot", { key: 'c84887cde7b92c3684ef61e36039d2e8c96f71f2' }), h("div", { key: 'c7e475e74d977b6ab291ba8a315cdb237742a8e6', class: `absolute ${positionClass}
+        return (h("div", { key: '240956acf8218cb0b36254aecd629058ad39f4eb', class: "relative w-full inline-block group" }, h("slot", { key: '4424c8de31fd4e2aa702369314cf0819447ca364' }), h("div", { key: 'f260ef6ee9700231dc77ddc9debc7f5b92f546c6', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out

package/dist/collection/components/eds-user/eds-user.js

@@ -11,7 +11,7 @@ export class EdsUser {
             this.expanded = e.detail.expanded;
         };
         this.user = undefined;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.dropdownLabel = 'Account';
         this.expanded = false;
         this.shortMode = false;
@@ -45,8 +45,8 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: '1c4017bd33c81ad29385e164dc8611cfac58eca0', class: "block" }, h("div", { key: 'b692ce5a4b6b424c7e109589bdff5617d4e3b33c', class: "flex items-center" }, h("eds-dropdown", { key: '0df9e3b3c5212433ec88da84edd746a1dce8c763', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'ef25176f1fc1796dde0b1d56264617d067d06adb', class: "min-w-[280px] p-8" }, h("div", { key: '539532b05094ad47281f7d03c7900b93162e175a', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: 'ff51082744e2d32e5bc57069ccc99a3214ac3c03', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '1850d3ad72889a446fb8f5f29cf96d7434bc8c81', class: "max-w-full" }, user.name && h("p", { key: '29a458e82be47f3b4ce801e289253158b6f7372b', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'fbb49fa957c32bd90b15dd71691b975c920049bb', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e634ceb7b74062a19f466abb1f50266370a82747', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '3a8a04862973d0e28d7c62d84a6928953fd08df3', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '50627b6ed0b735079d60b66092181334cd1a954a' })))))));
+        //const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (h("div", { key: 'd23f741600ca86103642bfe17058e8e966ed00e0', class: "block" }, h("div", { key: 'cf73f261fdd219f236a93b4162656ef3178ca419', class: "flex items-center" }, h("eds-dropdown", { key: 'c69a3c95348c765d893aa01d5631d122de428970', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'f142afdf77953f791ca0478af862934d0904dabb', class: "min-w-[280px] p-8" }, h("div", { key: '7ee37a9f2175e626c278071a409a5c26f4331c8a', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '7248877a0579d8d15dec94b994af5150c9dbf2c2', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '1766fb5e2613b434c8de825c90141b4f95be00e1', class: "max-w-full" }, user.name && h("p", { key: 'd36907607f575eeb5425c1f2e32e91034fad6dde', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '73e02010d3d54151252903071bbe30168ea7d64a', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'eb522e6c95f15ef0584c7a90c20bb815ccc5d1a1', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'c4284f4dba1964a949380aa0154419e3215daac4', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6476e03cf61ad7517e9742e67b44b9c917d9f329' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }
@@ -89,7 +89,7 @@ export class EdsUser {
                 "mutable": false,
                 "complexType": {
                     "original": "Intent",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"brand\" | \"ghost\" | \"primary\" | \"secondary\"",
                     "references": {
                         "Intent": {
                             "location": "global",
@@ -105,7 +105,7 @@ export class EdsUser {
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'tertiary'"
+                "defaultValue": "'ghost'"
             },
             "dropdownLabel": {
                 "type": "string",

package/dist/collection/components/eds-user/eds-user.stories.js

@@ -23,7 +23,7 @@ export const Default = {
         const container = document.createElement('div');
         container.innerHTML = `
         <eds-header>
-          <div class="px-16">
+          <div class="px-16" slot="actions">
             <eds-user></eds-user>
           </div>
         </eds-header>

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '247df18cb7672b14048e390299894acf0ff44714', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '8e734cf4a60694d3f9e3b8418cda0b5ae2b53c0c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '1712cc4bd243d5bde96aac8334ce26706edf4731', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '5ed603d55cb6903a0dcfa620ae51a729a61cc883', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -58,7 +58,7 @@ export class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: 'f8847f5ebf1c015d60cc1b699b4cfbeceff77b59', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '44b71e2df44c8c9d5a5ba570d25050a09566bf3f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '6858be14a27601106581efe8fd9221daf4f0ddfc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '258789470870c2782879bbf43ee7320b7c20278c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }

package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js

@@ -57,19 +57,19 @@ export class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (h("div", { key: '568e55cca12f97a4afc1a5acffd8ffd64938da44' }, h("ul", { key: '16f19b9d89e83015db81290acfddb3ffc0368aa2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd1b205d58e171e2a194685888a919d7178291118', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '3be3ecf27999f572951253260802099e49c60392', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '69225b7fdfb7caca0f969c9f8443e5feae1e5049' }, h("ul", { key: '191050a4e4062a36abbe3dcbd341e42cf1bbc729', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1983fa3f61c360c114d0219701e31cb986864b75', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9f578c04f4bdb27ad92300ee3607f07332798798', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: '931046b9a1b98bcb147f3d65f1278aa0104b7620', class: "grid" }, h("span", { key: '15341ab5e4937589bd6495e88af46f52b66c13f6', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'f73ee08c5e15162f757c1f20084c23dc4cd4fa4f', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '414005a29611c2abf4adb9e1429ba46ed946e17c', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ea676e150c48d8b6f92d664955e435445c00b290', class: "grid" }, h("span", { key: '1b379dba41b32ebf0e79feee6c73646686976123', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'b327219cfb31f7f6cc2ef1bfbba30acb676f1df8', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'b8192f45ddef48a5adc24b9dbd023ab39212b9b7', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '46d3cab1cb3dd781fb0b10a7e2a475a335d3a14b', class: "grid" }, h("span", { key: '20c96e39bb215773e97152fc6232b40c35369492', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'bf5eefcd1e597bd459367dde6435337fca6790bb', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '439f646e2f45512485a0e871340fe1c0d99af31d', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ff06a5814e4d7a677ea695640235df7f1b09c685', class: "grid" }, h("span", { key: '1f2329355cde34ce8de0db364588a9210414a63f', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'ce99a877251340fa0fe40cf1a9449c180f3d4f4a', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'aeff17cba43d8048125b7934c9359183b98c94e5', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '945802383c8208d374156a239bd902e55e54993b', class: "grid" }, h("span", { key: 'dc9b6be317846769a1e8365c0a3a2c974ccfa23b', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'bbff2c3bf5769945f07db0813c21d7a14d8495b6', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '93d9b9d19f789a9731ed444c74bada150295ce28', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8b87555408c3539afe4bd90c19f3d2034cc57d54', class: "grid" }, h("span", { key: '2d5b21465eeb219886486f77f2f72351c5f054aa', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'b16aa8a075b2a7a3676b7f193ba4fa3185e72f49', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '3878257fda9acf2175bc8a152c62b09ec5c4924f' }), h("ul", { key: '8b98d84de8eab1fdf31b21ec30aef8af95f82f4d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6eec8f2913b8805929a6931856be3fea0b665fdd', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fdc4febd09538cc9d2e0d5efee8394d680859aef', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '4dbe74c2a516f22ef522d95fa3fb0c5815207a3c', class: "grid" }, h("span", { key: '22867c70b47939d9f9b30078c6873486eef8a03d', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '0510a917d4b4bc373d6a259cef421c20e6fef0cc', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '649226a0e9dc4825c3f009ac1b2044b68b55a80b', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '70d71385d6f5fa63e64831f31b3ca5c5b15a059f', class: "grid" }, h("span", { key: 'e31cb3e8d926d12dfb59c60e236458311867bd83', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'f36f4f08dc044852213b42dfde6e106a1b85c982', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '40c2cdbce85fe5233a167f2133082877ed46fe8a' }), h("ul", { key: '6c0ef5e7552351757cf0f419bf1b254cca6f9121', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd7b26c790d754d5ba55b3c02f601718c07b2c54a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '24c753409e5b67d70212ea6a39850b4355ced584', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '05e44f954e17e71e93983544efb08fb3f8415efb', class: "grid" }, h("span", { key: 'ff3dac59c5d99e3c3a0bea5454771a46546699dc', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '629424b91fe69ba2348995ea321b5de71b9bb0e1', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '3cadcf4a4d666bfea773aeaf797dcebe0224e9c7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a725f4f13d4c944a18c3158f735d8dd172e35128', class: "grid" }, h("span", { key: '02c30563e47078f08752ab718e923dacfca8cf6b', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '460cfb91e2f9bf5c9f557b844c0bd1d7e904c9d2', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '14c4755af95cb41e5149db0de90a0f0aef429325', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '058568211b7fe1f9318ca17df97b54e06ae0ea5d', class: "grid" }, h("span", { key: '082e7edbbc979c8481e4c87471d5217fecd70325', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '1d7f777eeeae24bba34af35a328cfca5be2d6ab8', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '2226100dd044fe6cb53652f6384a6b1eff1cf20b', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '33f9d85cffdd0f83b9caf87805dd18eae875a76d', class: "grid" }, h("span", { key: '6637f361a11e185af2953435c93a76799e6fda05', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '749318eac8b7f37e1da1302bcbd17f93f0af344d', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '9d3b781a726649c0accc613cb697d01bb42c5e32', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: 'ef619263619ba173c62312b766cb00d6d5098123', class: "grid" }, h("span", { key: 'b5585b81fbc61845e6e5cf0ed23782f904cf3d58', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '346257d86c37f5058f9b4deddf9166f1522970ce', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '59b89beef607a724b2bfed5b9bad2a78e5708b42', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f8e1a2462a31e0a3901618ec76338dde5ae10943', class: "grid" }, h("span", { key: '6e83c3aaae0ae9ec8df2d6eff620059256e4540f', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '714d4e2a90966381c56671c295ec106581eeddef', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '0014a9aa45398ea35a1f80b6d2e01b4cbc0e99e0' }), h("ul", { key: 'ef5896480deed0bf14c7ebc583b875e31271cff1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '130103977198e73dcf1e76c8b247dfd0052e66b4', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8f971d70daed0c51ae3794f5eeea9b8d5bbd689a', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'a6b623c79282ce86a61e729057900ecbb5a68168', class: "grid" }, h("span", { key: 'f6eb8b41c30a9acf4f71f23c4f5dc63475792874', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'f0606ad3c6c4676d2899052e33f6c4441953cf6d', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'c910b8bfbe955617edcdaeea4fa3e3398c134b18', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a33a31c3d55d5490eb48800f921408dc48e046d5', class: "grid" }, h("span", { key: 'd74a10f52e474e9db505461bb53c44c9e12405ee', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '01ca7c9b8cf3dd0d3b3f3159a426f6f4f0840c5f', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '8d19ffae79f0d6c800d1ab6f303d978b2d0c6ae3' }), h("ul", { key: '508b78eda27c872d411df1b6c9f9bd8ece25b4ee', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '69ec343591e60f178e5c9a8742495739f489c8f5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8b142eaf31a4456fad672dbb8c60076e2c4ddfc5', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: '8563d07bc98d7a37b1c0eb04957420875247571e', class: "grid" }, h("span", { key: 'b99f1f4d7c044625462542434c6b8941e0b4f8eb', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '1d5524bcd82d295aa9bb502f04a4b3deb6816a4d', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'f3dec7ffb1d822eec1fbda4e189624c52b3d46b3', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '61135fbeab7e0657b589199cdf8caa39b5a97191', class: "grid" }, h("span", { key: '3feae86bababfb8dd0ae4c78e342b6b40a5353d6', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '458f2c43915ff00eff926dc39afe9a56b822df67', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '6fdbdbd92c843ddaa42d3cad358317ec7dc92723', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'bf5f0cf2b9ef7c9a4814fa6f423cb4b9434878c3', class: "grid" }, h("span", { key: '074772116344b8e4e4283e448a67de07019fc807', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'f963109c62079dd8dd85fb82eae94ece0170d8fd', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'c2e79bf856562f0830ea6fe651ec774644d64f08', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd08a0628c64b87da7e8714b75e2c380228ea6144', class: "grid" }, h("span", { key: '79bfd7870adbc66d77770dd59d63f1e368fc3d32', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '88d5fce43c419d06b0d1a7c5196ca2cb7c2e4171', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '36b4521488bd73d13f2e666b899e50df1537eb81', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '1f0f2dd84c18ab45e5db4f09cdacc4cffdd6db30', class: "grid" }, h("span", { key: '3050e33955bd0c6486ac385b7d89f404fd2ffb47', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'c40759231240722eb9c93878d74f4a2028492b3a', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '01746b746ebe1c229169f8c9d0b078bff564edbf', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'c11478286125955885b8e4e650f284876af7144b', class: "grid" }, h("span", { key: '013e2e01b741eaff76a5ab017304dd6f2afb91c4', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'ab81b5c103a1dd18b91227848fdd0ed379e92738', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: 'c94304a7f235b4ba472a07004773424d8a90c222', class: "grid" }, h("span", { key: 'b1b47cc470037312522f3de03c8249870dda6703', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '665d8aa39800f35bf04f04912ff18f6599f27735', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '4c09ed9f92d05ee3918d8f67b429989ae512d561', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3500216d692f134a3a02426adf62e32bbf49d776', class: "grid" }, h("span", { key: 'eff3cd5a7e07a2a8d51db3471389ecdc0ffc4d83', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'e34aae1a29feadb849ae0e4ffa5037e716f67777', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get is() { return "gradient-secondary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js

@@ -49,11 +49,11 @@ export class GradientSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '8f8703b8b6ef19574984d630d23f4a078e2683c1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6981ecea14309c747455aff6dff44c807391fb22', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '23dc2b606d633779313a98cde5df750a21c50267', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '3649c7d9a2c815cc6ab1f414f062321f29a00701', class: "grid" }, h("span", { key: '732dfac36b9bb5d9df0dfe96bfd4fb36c5288d2e', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'f0505ec5aaff33b24b19db784b3b16b9f73f18db', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'ca7457b315b438bf41a7f0b1dfd2205d493e1c06', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd29ebbce1ea5dbf25888388bbc3cd73416642c94', class: "grid" }, h("span", { key: '8e503b62bc19087efe3291f2454eec4b00b18a4a', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '5a12462534602160bce47b9c9f397557f8f1057d', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '491e060c9201186f987ae4f075eee0efca38b6bc', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e2084e7d7cfce5a784efbcdaf0c597b749ecc1d0', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '633ced7174a5242a3dff2d51d53add5a20bcbf0a', class: "grid" }, h("span", { key: 'a0000924f7a9614b4dd8651880b51925f0868487', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '6007da47921d8ae881156f9c57af43a839e71743', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '4aa67182a26f57bbeb9dd251db1cbbe0ba1919fe', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '963ac8d736c7b54366d2e2798e77bc04ac01d539', class: "grid" }, h("span", { key: 'd574f8c3b02fdcd9bca10d186916b848b275ae85', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '97b5290bd127179160eb6fc8b76914cb620b733c', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'f5f7ff4bdad90dff2506112c812fe4c466539f7f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8517f8e52dbb41ece0da2019d072f7e73fc8d2a0', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: 'b2a9b236f4d09ceef5bda9568b2210ce5f244a35', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6527094bbfe9ae9b3d07107e06ad25639a5a9102', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fd97b352fd25574a076855b168e9a86dd12450a5', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '1ecf065df68a1038dfb3d98e4f3b6c1de65bc08e', class: "grid" }, h("span", { key: '8768cb503ab0a21870428ed166f8e25f45072a3f', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'd2ca5585cb8e58941c1e24e3b92d24c113042f4b', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '179d621b1f7355241aba0332d8cb261300cc313b', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '2857e7fe056cd77b613697fcd0a71b6904d7f522', class: "grid" }, h("span", { key: '37fb181e166357e3a735a3b28cec42c04fa307d0', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '2df6d62a1f29d5815a910c3a1d69137a72d38837', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'b8f91e3c53126c2eaf8b4055754acbb40ff5641a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '37f55d6e6af310b057b6c76011f995377e8479b4', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '2310de38c6deed34dde453039d22c3295c3515a0', class: "grid" }, h("span", { key: '3cf79727b544d93d73e58b257f73864bf928d301', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'd1f2e667b2e49c39b5c58a63a995aeedd4e8b659', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '6dfbad0e7a87977d9ad4eb3d6732c2582f66000d', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9e5a372a3a1b72ad7ef8e7658fc5ee328ee4ebc6', class: "grid" }, h("span", { key: '1b808be8fc77c51983ef4c43e8a3f0dc47b46006', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'ccabc7f2ddc85de55fb3b099b0b95b2030baa818', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '2831236d472040166824309e964608560f8935d8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8471b5023d94083d8118f9c452b35d0c1c173662', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '08db76c840f25159be21cf66f8ab1a5e7c0ec206', class: "grid" }, h("span", { key: 'b46181d8eaa69635063b39efeab603d6961428cc', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'a91102f446f351b6be7d27051b947bf72a394606', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '98d406eaa5d641640ca5eb95271fc400282c6f69', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a4cf89fe913982b3c296dc745323630518b9834f', class: "grid" }, h("span", { key: 'ea5a30092e75135670580b40263314a1e16fb725', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '0a4fe2b93027193d508f593432c7c2589ceedba9', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '117711ee44837fe7545490304e714e4e433c608b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '7c1251b8075a6d67b82e88e038ed772e292e0742', class: "grid" }, h("span", { key: '55793b301d204f7d5996f85ae5ad003d61930f5f', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'a5eab2850d8a5e41ec043cd3b506a2f536f20820', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'b7642a477a00c4f811b4cc36f36458179802211b', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '791c7d3c9d83c82848805efe96d6567dbcf2579a', class: "grid" }, h("span", { key: '3d46cbb0ccce0f1554d19c33aa4fb0a92d24381f', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '68ce16ea65d735d9025729b5cbffa173a2b9e07a', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'ee9efa5eec6d06a960619eb84de06703df3a4358', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '49227a94ee6c63902c24ae6e1ce598721f2179e7', class: "grid" }, h("span", { key: '25c2e7c420bf7501c91fb810dcc15b8fabe75211', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '0a7918f45e4315630fdd51701fd502930db1d62d', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '93fd3a9ce6103b162559697d43bd6c79134bd12e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9b8af5c7b8c039647035c2252cb9febddf1c12d8', class: "grid" }, h("span", { key: 'c50c154e8587bb41f1c80b61869103d12339308f', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '567798f8d597a9fe26123dd489443e6c752f0b38', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '4297335389feff02c051beea3bbfee33677f61ac', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '0a5cda329ffc92c33e323ded6c74a2f3b6309797', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '02babf093dea42599bdd40ae789b795714b638a2', class: "grid" }, h("span", { key: 'a5c2e49f307c005c29b6c3c0d5c37604a20b38d7', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'e9281ee3b7c23920e165f90796772c5057f0e591', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '0144a15a5f4276c6d686dd7ea2893ead295d81ad', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '84e6de06e4c31803fa99ef2113866e947631be02', class: "grid" }, h("span", { key: '1a21ce9476d86e83c3a61c591d015d917f34bad2', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'c81bd5ea778d4694847bcbd0f23c320e5acc9167', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: 'a1033cf5a07c5adae91f6968ef0d74ea910ff02e', class: "grid" }, h("span", { key: 'e5d58be01a90c281fa701d022b24807a3b1a8404', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '7bef9018db3e4997997124f6f3d697ecf614531e', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'c95ed9f2caf0a75b34e6cc1ca3d4afa12f163b35', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1ab575c669e9fb41388df03fe029c4dc63c167b0', class: "grid" }, h("span", { key: '58c31b1b22572eb897f7e5a2d82135b92505eae3', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'ca75da8134fd83a86150fd6dbcdde73a2561c453', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '700df92ad4634107b94e19ae2dd21b04909393b6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9038289a89c119a695fcd3a0eb6d174f13a33591', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '73a8b1f9955f52c8e83aff7f85d269af13206cfa', class: "grid" }, h("span", { key: 'd7cd4652abb1e85f1751149c4be6ba5fc13c6da5', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'b38ed95e45e80e3ce59edff465293a9d9f42ab37', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '72ffcc7e26b91aaa5315738d902e3becbade6759', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '856966a786985018be9151aaef0442456056ca88', class: "grid" }, h("span", { key: '6baa9c0a4a587055b85940d846369086bc688075', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '578fbcd62e8ca8d6cd6d43891540451724133f6e', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: '4fe6cbf0872ceb38e8c4ade73f9cd5d71dc02a6d', class: "container" }, h("p", { key: 'a2f95067e472c8ecc8010cc529ec69c48746f243', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '304fd52f6ef4744d6a531a5d7b8729d505c6d7e5', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'eea7378f6153492e2238417887f2ce786c450293', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '87608635aa776aea41fd8d6a9b794fd617e58316', class: "flex" }, h("div", { key: '39197725e0a769ce5aeae4ecf3490c40368a1a69', class: "w-full" }, h("ul", { key: 'fc7bc2dd624ad83209d2e55a31c7fe228e27a05c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '487f4c9776ef797fed3a504bc988529fafafe5d8', class: "w-full" }, h("ul", { key: '40cc46b58f95bdfe281b8336d57200f0b10ba7bf', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '0d7f40bfb85770112c13562ec947475f3b31a581', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '2574eb39b09d61126d4caceb1ca39718fb84cc49', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '19ae32c4f3db95043b10be2dd1f8542910295db0', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '500638a0a9d1a29962dcffa485612bc716b17585', class: "flex" }, h("div", { key: '8564beedaa965489c3224ab8279a35af3f8234a4', class: "w-full" }, h("ul", { key: 'a60d9044f83a891df3f8855699c9add12826b1e2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '312f36e79e1a1c1d6c009c8e61fdff15aa7d2d36', class: "w-full" }, h("ul", { key: '239670d7c3ff0eb8e8183999250dd4599f7eb57d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '0ad90e8f9b9b5a6e02f60f1992c3290811f7712c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'df616406dd19b599afba16f1eb7c6efd0ab0a676', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '595d7edcb5d5309daff1bda838a87afaeb91d1ac', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '553e6261bd0b27dee6993b3b828f0a32e9125fa7', class: "flex" }, h("div", { key: 'c2117c24b17629ab511eff847954b54b5ef7dafe', class: "w-full" }, h("ul", { key: 'a18f9635a15188a3b9ae057d83968a26f225289e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '31a3b39cebe2d27d0f14769e9031a6342956ae48', class: "w-full" }, h("ul", { key: 'acd7aab003bade1303b98c6e5cfa31f65078315e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '3d85b99a224355957176c8511e2ce8847a10b15f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'c362a37363f542dc6e93f74fd19e1be47a9c2e26', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '30890c8730d50a567611fee53a879511d6c83170', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '0711dc09f3de81be950f9b1103fef11579bf269f', class: "flex" }, h("div", { key: '84e885c4a4102791febe68fa3b3f65f7f14cbf66', class: "w-full" }, h("ul", { key: '68f65fecdc6a4875d0ec1dcc3a187b32a13edaa6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '9eb65cffe9ec2b8cd8505dffaf67bb9da1545327', class: "w-full" }, h("ul", { key: 'b8ec8142577d347f87a4a34984c83a7b2b6390de', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '6f2e0d05692813eeb9f7edb52508efd608763908', class: "container" }, h("p", { key: '78ab9fe995f873ae56b734550fb96d5cfcc94ecf', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '2dd1a95794b4e72c5fc54079b69ef48108fca4ac', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'db85859e08c5faa38cc8e04d9e7602486cac1921', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'bbd0f8a9de6ab6d1ad08d79af9695ebee46568c4', class: "flex" }, h("div", { key: '12fe2d6fa1f349e6431a6484e50b637f3a9539cf', class: "w-full" }, h("ul", { key: '8750fcdacb4a408d1003153ef24c1aa1eb266d50', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '899c5ac4127fdab0c26a619e5ba9e9abad682b84', class: "w-full" }, h("ul", { key: '20324cb5001311ad3ff9dc138e2d7dfd4779a071', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '8d9cf6a12252c3ab51779365467d9b5b8eda2aac', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '01fb910b11041bb7b9891edf0546ad6d48a1c59d', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '0e16590a0ea3dd612c386ec8144d34c46d9cc239', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '409db013f54872918a046349932ffb03cbd5c7c8', class: "flex" }, h("div", { key: '7a4caa407edcf4778769b087e14f1d7725d49541', class: "w-full" }, h("ul", { key: '04a87008d35495235219096d6cee25c5b79c047a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '42412cb3ccd6019262724d160208c9c74ab0be87', class: "w-full" }, h("ul", { key: '832b788f29badaf0e6b498b743400e98b3d62336', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '7d5710b21829f9a98d11d9328528391bb35b9b5b', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'afd01b3fbd6ba01f2e6f66c99a8d69e31a21bf1a', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '560b790073d516e3a48217454d2926eb8e7619ae', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '81ec29cd9873c62aa9afffecc9f39ada4535452a', class: "flex" }, h("div", { key: '358baaafe6def20de75387af5bac0cb69cb53daf', class: "w-full" }, h("ul", { key: '338913f0d10c724834a9bf9102ebff0159ad4b42', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'baf990dd3cf2c6587e312e07b93b00e975608268', class: "w-full" }, h("ul", { key: '60bb4363163e3d10eb61388a8f505d1da2027598', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'e607f95714c66a02cc8d7e336f2b0731bfeb916f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '82b699d19d01e11eeea3c13d8e817d12c32ee4ca', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '54f9a3e1e6b7629ace882a50f971e88d983e66d2', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'bf1a294c09474031d042153d402e9fe84907d0f5', class: "flex" }, h("div", { key: '5ec457417cf7a123aabd28e822d437e2706c228f', class: "w-full" }, h("ul", { key: 'ee50fe6ddf736682fb69838f53875b88cd22507d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '50fcc531966b131ec36acbf396e1676ea988d1ba', class: "w-full" }, h("ul", { key: '01fa6bca1248df187df894f419ff77efe24bf426', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "correct-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js

@@ -38,7 +38,7 @@ const incorrect = [
  */
 export class IncorrectUseOfColors {
     render() {
-        return (h("div", { key: 'dc96e5e7e26b90d55edf211a12cca96331fd50ee', class: "container" }, h("div", { key: '7168395a53d0d1ccb01ea8850dc78b9bafbc80db', class: "mb-8" }, h("eds-alert", { key: '66969d5478be8b0e07dc96e62aac4273fe23927c', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '1b31ee746e23288fc37c17e71bc9c5a4d9333a0a', class: "flex" }, h("div", { key: 'f04c1b2349c82720f7e3d9a29c2aaf0ff9d73af0', class: "w-full" }, h("ul", { key: '2ba63701fdde544e5c510e03676d1b1c74061931', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '7642247ada8ff3201e3a1273a20cb37860a1581d', class: "w-full" }, h("ul", { key: 'ef03781a8ed2067adc0b8cb65ba9268ba0920f04', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '424c9b01d69068fa058b25dd89df08154912dfe7', class: "container" }, h("div", { key: '5a9dae817344c3c92b8bdb55b806b1f96e26496d', class: "mb-8" }, h("eds-alert", { key: 'afeaa6e5320151800d31c3fecb85669000409a14', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '87241b25b9f9e326183ba4496983d93bef766380', class: "flex" }, h("div", { key: 'c018e1fffc8198b3e48e1df6b1e8d560e1c7b84a', class: "w-full" }, h("ul", { key: '97845ca2dfe71ac0feb27762c4b3c71c80ca626c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '05adf9099f1b043d08577cf1f233551d83fc4242', class: "w-full" }, h("ul", { key: '55792bcf3ecb93df6884d7366aa8c7f2c3cf5ad5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "incorrect-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/components-section/components-section.js

@@ -28,7 +28,7 @@ export class ComponentsSection {
         }
     }
     render() {
-        return h("div", { key: '2716938c52b8f67e031d8508745cccb8f015a110', class: "container" }, this.renderContent());
+        return h("div", { key: '9664cd887a7ac8a2a80f32e501cac7230620052e', class: "container" }, this.renderContent());
     }
     static get is() { return "components-section"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js

@@ -25,7 +25,7 @@ export class DocsContent {
         }
     }
     render() {
-        return h("div", { key: 'dfc087cb088b4505939bcf69559639f0a2075255', class: "container" }, this.renderContent());
+        return h("div", { key: 'd012b0c560b658efc52b6ed9c26f481d2ce38bd9', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js

@@ -69,7 +69,7 @@ export class TokenList {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (h("section", { key: '2fcc5dd08b84b47b561c6f32f49c65b90560069f', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'b95825988f64556481b66203bcd8fb281b88d2a9', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: '2afbed04fa53695bfc13275ab6d6f77d314e4d14', class: "w-full mt-28" }, h("ul", { key: '87490ba0d46027993d10cdf5f5deef419cc147c1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: '8b1c08f1c32236156eea1d1d1f78a9bad3a202cb', class: "w-full mt-28" }, h("ul", { key: 'b995ce086b3c9b7796f161c29bd206534a3e5316', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
     static get is() { return "token-radii"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: '4dcf52cac610208030db8af7681cfee611f02a62', class: "w-full" }, h("eds-section-core", { key: 'cb571aba92bc59c7b458281258362ca91becc09b', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '734f5db424dce811f5b6508c49c9f4c9ea4f4474', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: '9ab666342a801e51b3a75c979bceadccf4d9736e', class: "w-full" }, h("eds-section-core", { key: '4eea7a8b3b8e3b0404108345756d11806ea2805d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'faa065acac9bce28073f709d147c9b2725150da5', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '56dcf320ff3ee79c493757a3cfe27c1f7bca33d9', class: "w-full mt-28" }, h("ul", { key: '8113c23d2eaab9abd28acb618c9599d5be1262a6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '60745a5eb31e7ce043c3d69cd8246b752cd66520', class: "w-full mt-28" }, h("ul", { key: '4c8ce259916cf36fc240c0ae3f22d32571a919f8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
     static get is() { return "token-shadows"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: '45442561f72445e84c257ebc9d30f2147303427a', class: "w-full" }, h("ul", { key: 'cca0cba4260ddebb2b0f1e39a9cc96d067d3fa73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '8c38c0e0802683d9ba2cb38dff013aa02650bbe0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '406aac1f24a9a812b7405b5e323e3cb73574fb79', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ec7f90ce92020a91b57e28545ede5d782d4a7dcc', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'e84d0c8ccc0c6be14ca41bceece9cc63a8137dfb', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: 'dce507afa0eac9ddd430d8b2034b943e844a9b32', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cc986ee89d249ac351c6ed81650668a8ba8ab139', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '1778c2032e322a0cde34987e5ecaaeec38933892', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '8ee98a9847db2baf69adf1e5919ecefa86a1dea8', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '589485906ebebf8fdc348e995e6aae0dcd4124fd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'b94fe2cd4f93f7e52fc82423d728f5ffd3cb7dd1', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5c6ed8a3c4573eb4f7644e18a4e6c10cab958e2a', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: 'bec15bc9092c36295bf012f82fd34e8eee5954cf', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'e9568891252c4597431f117f0f8c9136d30c3658', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1fac252cd3bfd2cb1f9aa3b419e04f570f57f4e8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd59e7e5f180ab164837c5b94cf3f61a7084a6385', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '73dc397292ae7ff9c532b4c6c9f2a42c35945493', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'af9c0e9fb5fd5c314d34f2cf6b2bdc9a63133c0d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '498a46c66ec671f41681f458615d69a741784761', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6e511b973ff53d748e99728fb1b186796437bbca', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'cae79c38937cae94930fa8750fb308ab4329de45', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '67e0ec47dfcbaf8c51969973137c4ba87ee6337d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'aa8003ce3db28c8697d57728c02797324dffbf1f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'aeaa333a1e0fbfaf5d2fcc49c4e8180e94b91b03', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '708a18ad1ebeb0a24fcea4d06aa42c024bb2258a', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '8ebe0d888150e5fefd1d3047cc82548f12f47f9f', class: "w-full" }, h("ul", { key: 'c57af77dfb437bafaf060a6c6ebece84c4683409', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6ca948268bd07e50409334b84eeeb362287f131e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f33f8feec6657d21a4e4a1973d4c46cf4f6c526', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '194c9d5367c75c35f021d0b5c64601a72d1141fd', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '252af2371d58a8364718210563b7aa9a76a551a6', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '833a8373bbe4db4514c84d4e299e2103b37bc75e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd364398230aca7af47273a654a8f138d70361c75', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '707e0b62f500c16dc2d72da8e0bd85adabd7280b', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '846c07af2613e90c3acd1fa66aa422db14a95526', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '107899eab78bbb70f62b0aa2df8573f7a940024c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'fb007ac46524cfda56c1033869b3fd7edeec96b8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4312aaa901f7ad1075056517b2d8b0902e708aec', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '62a87119afea530831e3bcbb45da16f3a3cfb1b8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '279e6f5af470cf3f969c37f715def542e4d13140', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '057bcacd976a4d7f0a69ccba3b469e79f6e8c86a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '379423e5ef1b3f5be2a322493266305f2cf46b9d', class: "spacing-sample p-32 bg-strong" }, h("span", { key: 'a3bd9db6ab5dd4f6204d5009c4328f617f44b78c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '526411b8ab854f67873964446dee7191949f5d54', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '93e0422c2304a0d3a158ba086aa9235a05d621f0', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'dca707847134a421d60930307613a6528a009f9d', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a132977bdf19ba79401ccc05f248711eb2793497', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2fad0e796528bce6c021cbb9d3036d4a23226b82', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'be02958fc44ca651c348078dfc84fabbe92afaa1', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '6c94b77b470a1dd9de4dad7a6900d2e053236f52', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,23 +5,24 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: '859a416f39219fa58601b57eab3d3ceeceb072fa', class: "w-full" }, h("ul", { key: '3c29d182685328e8bf1ae8b46909426c2b2164cf', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'a3698b57da5e26052bf013daef956ff5f9e0bd1c', class: "w-full" }, h("ul", { key: '924a82c721a636370a15e7a47ca73264c8e1d30e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
-            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
-                fontFamily: typography.families.sans,
+            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 flex flex-col mt-16" }, h("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, h("div", { style: {
+                fontFamily: style.fontFamily || typography.families['plex-sans'],
                 fontWeight: style.fontWeight,
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default" }, `${typeKey}`), h("div", { style: { fontSize: '12px', fontWeight: '400', color: '#7A7B7A', marginTop: '4px', fontFamily: '"IBM Plex Mono", monospace' } }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", { code: [
+                `/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
                 style.fontWeight && `font-weight: ${style.fontWeight};`,
-                style.fontFamily && `font-family: ${style.fontFamily};`
+                `font-family: "IBM Plex Sans", sans-serif;`
             ]
-                .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
+                .filter(Boolean)
+                .join('\n'), language: "css" }))))))))));
     }
     static get is() { return "token-typography"; }
 }

package/dist/collection/eds-docs-ui/docs-palettes/docs-palettes.js

@@ -17,7 +17,7 @@ export class DocsPalettes {
         }
     }
     render() {
-        return h("div", { key: 'dd4c39b9b45b3ac9d7e54898e27c09b3c6b4259d', class: "container" }, this.renderContent());
+        return h("div", { key: '81c8a0516dc577d0a9b04255aa021739abfd6c9e', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-palettes"; }
     static get properties() {

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -1,11 +1,10 @@
 import { h } from "@stencil/core";
-import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
 /**
  * @internal
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: '60dcb01fe1791ae536755d50234c38fe1b8355f2', class: "container" }, h("ul", { key: 'f8392d3dd6620cfe57b39a03c4f427eb201faa2a', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f89baf7dfe7257402a93c06faf09d6602a169de3', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '94ba054bcc5ada258cb95530dcc380184820cc59', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '226d955d9d0a049d2a99b83a3d1223369c3a75a3', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ebd3897ab3207f1ddebbf4d9cdbbe6a2069c9952', class: "text-center mt-16" }, h("p", { key: '4e56dc98d24514717e4711204d9bad0c59ca816c', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: 'e04e02f59c35d52d647f18a71a37657a5d7115b3', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: 'd499f9bf757d0daa9d22fdb41e56058a1d7b3749', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
+        return (h("div", { key: 'afaefa486624790c61ec7be56d25e8214e692f80', class: "container" }, h("ul", { key: '20a3d543d1bb3027cf12ea20d64bfc263c1e911f', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '02e87b7c3b1acf86fe4aba6eb3fcda5cf0737d73', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'cb6614645cfdac9e07fb08a843a1171a60d2cae9', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, h("div", { key: 'bda137ca9589342b6483262df1429e64eb3785ee', style: { position: 'absolute', top: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("span", { key: 'd6f5fe1d1b006baf25cfb4b20613d92bace337ce', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: '97ff118cab9d1ebdb1abc7f4c253cab3c1bd9965', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), h("div", { key: 'a538f0751fe79c94d90e33325ff1be2e5feebc5c', style: { position: 'absolute', bottom: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("div", { key: '500d0e1d35fbfb8df0af72cd6019e3ef673ce8f5', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), h("span", { key: 'a02e8d7742fed312d090f00213a07774fe1a196f', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: '00ec1e2a973bb99fadb6d73a9af41862c09dd05d', style: { position: 'absolute', left: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("span", { key: 'd792490e3d3e52895eb19ea489153bd4d37556ed', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: 'da0320e4a4c3e0b6cf5dae32507c488a1698885c', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), h("div", { key: '2c01f062de36831c794f1a9defe7b044d28ad9ad', style: { position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("div", { key: '68e5e2bb4f52a4c6ac003aa1deccfe721a948a92', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), h("span", { key: '6e753f8d2513ef86efd3c4b7e4ebf187ec5bf122', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: 'f4a83531bfbbce8e3e89565be7f1c8d0320ea504', style: { border: '1px dashed rgba(0, 200, 123, 0.5)', borderRadius: '4px', padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h("eds-logo", { key: '135977a942f8d9c8817bd866ea21a2597860e7b6', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), h("li", { key: '2d2d834f16263bb4d95cc0c945af2aa0a53c7dd8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'b6b7f75960412d0232e417406158b56e3d1946e2', class: "text-center mt-16" }, h("p", { key: '43f97699ab3f882863b9e181e3b31cc576b1e411', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '62c49c7c7675d876bd11feb480836fe344f0f3a1', data: '[\n                  { "Media": "Print", "Min Size": "0.75 cm" },\n                  { "Media": "Web", "Min Size": "29 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))))));
     }
     static get is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class LogoVariationsHorizontal {
     render() {
-        return (h("div", { key: '0f0c8f6752da65c793c2f7ad20a9e9a038c15f16', class: "container" }, h("ul", { key: 'fb9647dcdb07fc5eec1a84c7458094add83233ba', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '06069a4da6863f7bd714191610ce44730531c25d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'a2c24b224acb98ea80b4d43695a0cae87de8f311', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'a672294c291984c387fb5ddfbbf89a5209cf88d3', class: "coloured" }, h("eds-logo", { key: 'f6540444fabfeb1313103ecc860c9543335bf693', type: "no-bg", href: "#" }))), h("li", { key: '769c0e2d304e117ae5925a0d2d981f85cb31281f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '1c4b6cb455ef32c5b94bead22b7116aec3b9233c', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '8e3c36097fa1dd5d0fa8cdafe00daaaa035f5463', class: "bg-default" }, h("eds-logo", { key: 'cdd92bd788afa9e127ad6163ce132f2e6d620c95', type: "black", href: "#" }))), h("li", { key: 'e8012388b0209873684706e16306144174212b6c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '49b42b62f6f769c81526add05822df44941bba5c', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '4ba6fc32175d6b6dd3f38e551eb80f4e5d1144d0' }, h("eds-logo", { key: '3ebe5f6551a960873a82af20a4d415b175b7f8de', type: "color-white", href: "#" }))))));
+        return (h("div", { key: 'a7b635b81f06347ecf026f5102fff854275cd0a1', class: "container" }, h("ul", { key: '4d2289f7a8136374bf6cf876f1c7eba0ec2a9422', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e8d3dc755e9923ef57d4cb32876874c84d406620', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'd51a85c405e5c75f4184d72a81bd3b8e001293aa', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'fd20af4231cf1e7ddf3878e1cd11aa2fcbdc36a3', class: "coloured" }, h("eds-logo", { key: 'be23d497a621c1b133521a365df483d0a753b4d7', variant: "positive", href: "#" }))), h("li", { key: '6a330cea74757c1e3f6db14ef1c3ee6e8f998e23', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '87016c5c2d861900ed0bd2f0302e5969ee23822b', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: 'd592916a66379e9dcafbd39ae6f0393207893e3a', class: "bg-default" }, h("eds-logo", { key: '78b0f667deb8e789166b7b9243d4ac246dd9b9ac', variant: "negative", href: "#" }))))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '7d88d267037ee805159ea73f27b15d2e7ec0e1b6', class: "container" }, h("ul", { key: '848defdb55c164b9fb3cee0b1425acbcbfeda209', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9e5d7a1218da406b571ef4a8026aabfd2618846d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'ed5bc7c77061eee46c95e719aa938d1374d413c6', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'b508a4c0fb271a880e16a375cff36ecfe70d55a7', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: 'e92421e0d04d84ae40d36bdd1d7d20b0582da600', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '1a6c57792d0b9a7fd89036d963556def55a9a3cf', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '56b18c6f6932f92995b5e936dc271f07fdcb2896', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '8d77de5838230e17a30d6327c71a3e93cf52c8db', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'f818a1028b59b30aa2d7ddd35146e81d332f653a', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: '0ce7ef6e6f3e95d43a8133c12a0b2b57bfb9b67a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '8a0e61ff35121c1c3e60320d4023e44e639cee72', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '412f19f119a71743bae3a824874e1a1dcafcd258', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'a62f01cb47568231e90facf00ab74481e818a40b', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (h("div", { key: '87d5bf852fe573878eabdd768aaf979de16c226e', class: "container" }, h("ul", { key: 'd9e47765d5e27f53dc8ced19fa954cd573e76856', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6b7ac8948438ede5dc01365511244e9858b2848b', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'e4fce7db514e0741507b6a37cb7bf47d89047929', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: '787af1c40ebac015c1a57391ab3959e691bd8dd3', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '0e0d4dcea468625e374959d5c2762d8f7ce19e70', orientation: "vertical", variant: "positive", href: "#" }))), h("li", { key: '77860d576cac3f5e71d728dee804c812fe6e430d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'f598d729ae5436b5777df79135d585378e5e7725', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '860b8539372eebd327c56b5d127203b93a7ae3b8', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '6bc89e4a6fc56125b14dec7079108eef51c961a7', orientation: "vertical", variant: "negative", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations-tabs/logo-variations.js

@@ -17,7 +17,7 @@ export class LogoVariationsTabs {
         }
     }
     render() {
-        return h("div", { key: 'b05bf7f07b39c2119f4716da95f34372f75f6137', class: "container" }, this.renderContent());
+        return h("div", { key: '744c1ba1e806d2659fa2d409c2e2314d02c5d911', class: "container" }, this.renderContent());
     }
     static get is() { return "logo-variations-tabs"; }
     static get properties() {