@ebrains/components 3.1.0 → 3.2.0

package/dist/esm/logo-space.entry.js

@@ -8,7 +8,64 @@ const LogoSpace = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '9f72a0aaadd8ae1aaa8998ca3539bd7d2640de80', class: "container" }, h("ul", { key: 'c4eae5e0c5c6adebbcdfa9f5ff5e505e8fca5364', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'cc93430ed51397f9cc5f6885da73464eee4f50f0', 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: '7a10d36af753e4cc085a898385a79f86cfda4386', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, h("div", { key: 'ca39c5c1d7692ac3e3f4c5f86b37ac315da32238', style: { position: 'absolute', top: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("span", { key: '29dc95b66b0cc09fc4b4d45b317858262fd5f74c', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: '314d8208cb5349457c1586eacbda115e9fb16d11', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), h("div", { key: '4d8a568924c6891cd4be3c19e04fc31c2ea1fc70', style: { position: 'absolute', bottom: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("div", { key: 'b09af7bd89b9f553b812190356ca62aa92ed6991', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), h("span", { key: 'f093c84334e23c4f4f057e7e4b32d9107a3f41fc', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: '91db9099f9e9a1523e19785fb7114e3f4fce7275', style: { position: 'absolute', left: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("span", { key: '88dd6f5d7954d2a1609db58f16242302f8d4f018', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: '1a6cad75530619b5f7cdbd9044c61ddd05bb4882', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), h("div", { key: '1cf721720500db93522e8563a44260f1ad5d12a3', style: { position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("div", { key: 'cd05bc1ca38fd5698f894f036ea4530833636dec', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), h("span", { key: 'ab0476740b19beb7c7799334370bff344e01a4de', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: 'ce5dcd6aaa22c90084ac3f285c28726ef1dc241e', style: { border: '1px dashed rgba(0, 200, 123, 0.5)', borderRadius: '4px', padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h("eds-logo", { key: '457548ba3f0835a632c86521fce2fc828f72b7a5', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), h("li", { key: '676ceccfa0081fa6b05a2c6cb3c0ba88da61cd6a', 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: '5ca2e9f1c386afc3f70be756183b4fe93779022f', class: "text-center mt-16" }, h("p", { key: '0c986326909c8de83e584f796c41198554741c3d', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: 'c745fc8b37d5fe412b08c0f88283d5ba74492f30', data: '[\n                  { "Media": "Print", "Min Size": "0.75 cm" },\n                  { "Media": "Web", "Min Size": "29 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))))));
+        return (h("div", { key: 'd8adaf2c085aef0029453aef21a527c8e2677ca5', class: "container" }, h("ul", { key: 'f9919afa9a7788769934fa408e3647f409ad436b', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4defd03de432869a1acd5735011b6dbbbb18b6a8', 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: 'fa018de1f0dcbfc32dc6ed5e00618bf238c7e928', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, h("div", { key: 'd275d9edb872b43a183e8a76b1c9531d981d585c', style: {
+                position: 'absolute',
+                top: '0',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+            } }, h("span", { key: '11163f214005427e024b04ce1df24f41b8145f57', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E"), h("div", { key: 'ef4d8d4f7318eba7a9e4cfc8f32119d2c9e23477', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), h("div", { key: 'ffe1a1ae439d3fd9b129acd336e75aa19624c2b6', style: {
+                position: 'absolute',
+                bottom: '0',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+            } }, h("div", { key: '7b8342fd5b5202dfaa6da0665d91bcd3a47f79a7', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), h("span", { key: '4efc55d4f8a642acfb77a571694ea05460d12594', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E")), h("div", { key: '70eb593013f530ef57f9794266ec8909d6f6bbd8', style: {
+                position: 'absolute',
+                left: '4px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center'
+            } }, h("span", { key: 'eeaf30fd53b36844e52b2e92142b8f8adbaacca2', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E"), h("div", { key: '27682de58b8ac8bf1d7f17d25ab4e2429e7c5897', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), h("div", { key: 'ced953919078e5ddd4b5c70d750693b89e4d8cbc', style: {
+                position: 'absolute',
+                right: '4px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center'
+            } }, h("div", { key: '4fe3e43ca20645c3631119cf089aa9f3d83be1f4', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), h("span", { key: '27ca09a454a253730b7cb1ac4246b36c54748745', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E")), h("div", { key: 'df5159d9341ceebeaca350e5589a59c5f14c8b9a', style: {
+                border: '1px dashed rgba(0, 200, 123, 0.5)',
+                borderRadius: '4px',
+                padding: '1rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            } }, h("eds-logo", { key: '1fe938ec424cf65abffa2b1421f9e5ad5fd7f29a', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), h("li", { key: '7db8f82af5f6231048d040d8d96c6c8aabada665', 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: '8912e3482e1590b4f0cbcf1a8d3a02492b24c2f1', class: "text-center mt-16" }, h("p", { key: '94c6b05c888b177afcce6f0eb8ee2c8b0328a89d', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: 'b02c7b046b2b11effc65ff9c889a962b3b6bd2f5', data: '[\n                  { "Media": "Print", "Min Size": "0.75 cm" },\n                  { "Media": "Web", "Min Size": "29 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))))));
     }
 };
 LogoSpace.style = LogoSpaceStyle0;

package/dist/esm/logo-variations-horizontal_2.entry.js

@@ -8,7 +8,7 @@ const LogoVariationsHorizontal = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'bfd9df144e3cabfc1b2198909208d4d41b1d06b8', class: "container" }, h("ul", { key: '318197fcbbf5ea30a3b7786c670dc6a3484063fe', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '7014dddeec695952b9b4041bacc7b509abd4425c', 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: '8be13e6c9f214d23941aae09653e6bae85536805', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'a3eb696587b0fe2eaea6e6f02c6512d75b2319f4', class: "coloured" }, h("eds-logo", { key: '530e57935491b485a8f1ab983c5c74aa62699e33', variant: "positive", href: "#" }))), h("li", { key: '1664f259390ded9c4084a8734b275a24e4add82e', 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: 'c24b35b76fe5cd95462c3f5c435a445b4eed731d', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '0ef846b5bc472e082151994428a681e8ef888919', class: "bg-default" }, h("eds-logo", { key: '647cbedbffc487740dda470fada93c7c4bfe88b7', variant: "negative", href: "#" }))))));
+        return (h("div", { key: '5011adf9e8af3aac24dca24120996b52643e601b', class: "container" }, h("ul", { key: '2b8d7d8ea5c09140279d199372dd06e336e78bc1', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'eaeac5d7de69e2b8a745d4961fb26cf411f4cf91', 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: '44c29035848feb5380b5efb20b37e5f86d65314f', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'b438024e4b9fe2ede6e1d8193d5021f84d78baeb', class: "coloured" }, h("eds-logo", { key: '196ccaa50454d4b26c14d7187736fec16f89349a', variant: "positive", href: "#" }))), h("li", { key: '9eb5bbaf4081f2265ea60d2d2099ca039f190389', 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: '9b95ee3022aafc4c68ea8bed146dd3780b9ef4f2', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '137e1f0451b41bb66c36151e6967e14002bde4ac', class: "bg-default" }, h("eds-logo", { key: '9d97fade01d3e8b59e69d4ba6758ee41f84ef571', variant: "negative", href: "#" }))))));
     }
 };
 LogoVariationsHorizontal.style = LogoVariationsHorizontalStyle0;
@@ -23,7 +23,7 @@ const LogoVariationsVertical = class {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '7707346060f598bc4a33ed1b25591907bd1ed86f', class: "container" }, h("ul", { key: '988427e4445b7238666a8865b40e39106574a020', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '09ebe2c5e0c4a17451cff4fa7f8d14f8dadccfb2', 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: 'b761f45824056d8022b25851dc92ec477ba5dd90', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'b1d0c459aa5fe60c07d23d216873e8792a9b0bdb', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '579c9c3bfe2156153d0a695ed164b5c143435935', orientation: "vertical", variant: "positive", href: "#" }))), h("li", { key: 'e9392a9b97c7fee407bc49dbf1baf5844c002f4a', 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: '5335419cfe66e2454eebe227dcbb844bd9c28d65', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '85f26cc36d343225c543f55ebff8435b7c3b8128', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'e50ba165a491eda6dbdf386cb7c82cfdb69aa7a7', orientation: "vertical", variant: "negative", href: "#" }))))));
+        return (h("div", { key: '67acdc82a0e7dbc0aa07e6607d31c81939ee5d7a', class: "container" }, h("ul", { key: '8c7eb2ee978a402cd85c570e61eb523721dffdd9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f6620aaf501e6dc5168e5d0d2baa238ce82680fa', 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: 'abeb6b64713250a61476e2947dae5490ca18afea', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: '825f3020ce0e73ac80b78e2bbb898c26cb1d2190', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '6aaa41b6beaf9fbcdcce1c6f3130a4db3c97afb4', variant: "positive", href: "#" }))), h("li", { key: '91db370167cecb19689bc2b13d7155a906d14a12', 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: 'b44bf3c628adf0d1f5ca3c1e9dc48e5a6b09a9ee', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '3e9ffec9903d8cfdb38ca64c8a69c201024f593d', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'cfb79e36eb78bd046c783cc4f210febfe30e28e9', variant: "negative", href: "#" }))))));
     }
 };
 LogoVariationsVertical.style = LogoVariationsVerticalStyle0;

package/dist/esm/logo-variations-tabs.entry.js

@@ -16,7 +16,7 @@ const LogoVariationsTabs = class {
         }
     }
     render() {
-        return h("div", { key: '25f8ec6fcb189c14d9e6d1564a5705ba34296fe1', class: "container" }, this.renderContent());
+        return h("div", { key: '5be7df6877ce83e4cdf3652b6e66640e90fb3081', class: "container" }, this.renderContent());
     }
 };
 

package/dist/esm/logo-wrong-usage.entry.js

@@ -9,7 +9,7 @@ const LogoWrongUsage = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'd2670fc81c458c6fa7830adc0bfe84a8d6edc808', class: "container" }, h("ul", { key: '068ccd9ab65938f0d61f800410c0223e79b072a5', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4600e980ce2d169750f3a06ad11ecc5280ac6816', 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("div", { key: 'db4d3fc8f5e35ae084c7f359fcc2553f913cc05a', class: "mx-auto no-other-bg-color logo", innerHTML: logoPositive }), h("p", { key: 'b3f85315b376d5dae84a076fcefad660bb28f2b0', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '786ea943986e9948d465fc9bb07b3ea3ab9438f1', 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("div", { key: 'c9ee298d8c36b732e7a1855f26e08f000c16aa91', class: "mx-auto no-other-color logo non-brand-color", innerHTML: logoPositive }), h("p", { key: '6e16a1cf4f03f8a8929c31b2df080dd89b0951c3', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '82a57b134dd2a559a8c755579bdad818d316742a', 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("div", { key: 'f32b83ca94652e22477a3ce0d2247eef0e47b7b8', class: "mx-auto distorted logo", innerHTML: logoPositive }), h("p", { key: '3cf9e132199d325d430cfffa6bf4b4331e43a62e', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '89d4b3eed2c779ff71b3fd6c8315ce4a99cb871b', 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("div", { key: 'b765e1c704944ecded0d88aca1db3efffd0caeed', class: "mx-auto effects logo", innerHTML: logoPositive }), h("p", { key: '822ac23c64ba745b46d21303a9bbfabe9a26d6dc', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'a5f157b40464fa3178f94147ce9017ffaad0bb69', 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("div", { key: 'c9b3e60f08ad15e0ca9eb11abe769510bf6f04c9', class: "mx-auto rotated logo", innerHTML: logoPositive }), h("p", { key: 'c25fc7938948f5cb3fdf55719483e13ab4780bba', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '8ed76fa89e0bf6b40f0b5478cebfe3a2b129cde6', 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("div", { key: 'a18962c12781071348a8ec0c10e62d7d3ebec881', class: "mx-auto outlined logo", innerHTML: logoPositive }), h("p", { key: 'a967a5ef26f9d935756db41e632d88765fdc50c7', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '9fc5979179dc4d1defe578a6c4aa7b1e7bf6e355', 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("div", { key: 'df9479358ca218d9b2f9ffa15dc9cb802cf71e04', class: "mx-auto" }, h("div", { key: '2d06f90b92971701bbe6a76f8b8125846ac15d0c', class: "bg-accent p-16" }, h("div", { key: 'a4178f35a86f8a5788f30137f75880f4c5f5c2a3', class: "text-inverse", innerHTML: logoPositive })), h("p", { key: '567638cdb967150758210ddb0d52657834f65054', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
+        return (h("div", { key: 'f2917e2a6ea6fb5e2eb31dd1bc915a20256ff676', class: "container" }, h("ul", { key: 'd80a9c848c64f2603fa0aef5dd6cde3e9947eb64', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'acbdc5eba5aa42a629e0af955b8b05b693c04280', 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("div", { key: 'ee377c6fc03df3ea4d36de8f488ff0e3d01795f0', class: "mx-auto no-other-bg-color logo", innerHTML: logoPositive }), h("p", { key: 'ff57d7ac90e5dc0fd03aa3cce651f8a7b05f4215', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '39ff08699d8640290f529f2bf3bee718770f452a', 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("div", { key: '9f718c4ff9148444c2b039c4afba117fd84959bf', class: "mx-auto no-other-color logo non-brand-color", innerHTML: logoPositive }), h("p", { key: '263702a71e19f66e5e133d50ff5a05d78334aa22', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '18261985b96396ab2b6fc2a782acd101565756de', 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("div", { key: 'f6cd02054601479517153821e15c51c07aac549d', class: "mx-auto distorted logo", innerHTML: logoPositive }), h("p", { key: 'cdfd4f9640d3f85a96f194b146a63ff39fb02be6', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '609660c30557cebaa4798f7f13706cf62c5985ce', 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("div", { key: '80c7f31b812f42ae2de7ab04e8ab237bd09d5951', class: "mx-auto effects logo", innerHTML: logoPositive }), h("p", { key: 'a0ef2f9c5358be703f6e997bf7f2d865ac7e743b', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: '52d87ca2b6fc2bd650f5051dae0a98a54b9c8681', 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("div", { key: '78af2276be724f7e989ad46698de80679759d614', class: "mx-auto rotated logo", innerHTML: logoPositive }), h("p", { key: '8fe1680390e358afd2febdac98a5b91f043e3ce3', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: 'dc503648d2ed6aa8b116cd5a3bdcfcf8fdabbe7c', 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("div", { key: 'b33e68a6e1ea1a21cab8832b46fc8a6305151edf', class: "mx-auto outlined logo", innerHTML: logoPositive }), h("p", { key: '59f356aa9af489175849716b43903567acbb202d', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '9754f0dc1a175ede68a9caf494d2e603e06f9bf1', 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("div", { key: '1636ab42d0f934b54e44b55c67f99c6f936b02d5', class: "mx-auto" }, h("div", { key: '710300090e0862499e6d712b1155275a1a58ea18', class: "bg-accent p-16" }, h("div", { key: '71792d037786e7cd5321e969fca8421422daa387', class: "text-inverse", innerHTML: logoPositive })), h("p", { key: '185980c11a566e4ad84dfbf5d0c063f1730b2f3b', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
     }
 };
 LogoWrongUsage.style = LogoWrongUsageStyle0;

package/dist/esm/svg-repository.entry.js

@@ -63,7 +63,7 @@ const SvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: 'a7aebad6b026e51c822051cabd0826b6d9740d91', class: "full-width" }, h("eds-table", { key: '5b5ce183d78d0a2259c99a949967dbbf4caf4ba4', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '623499f3d4e926067be51c7049442ea1d0782439', class: "full-width" }, h("eds-table", { key: 'cec77964e4c9c9e0876f2db6e5a199220be58b7c', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     get hostEl() { return getElement(this); }
 };

package/dist/esm/token-list_3.entry.js

@@ -257,7 +257,7 @@ const TokenList = class {
     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: '19a7dd76a980e2815f8df3ee0cb083b2c77cafa4', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'de737cb2dcf5942c1e4a8b67bf5c757c9ca6564b', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -277,7 +277,7 @@ const TokenRadii = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: '80a475b807538a7c9c1186d0f167a793858ad439', class: "w-full mt-28" }, h("ul", { key: 'e3fa97c0f627f2094c7eae87eb9f7079df2b35f2', 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: '199f8893d44b2c1087056d8c6d922652e08d78bd', class: "w-full mt-28" }, h("ul", { key: '175e5d717cb3e8a2ef32d3ace1a37fa3b305fda2', 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" }))))))));
     }
 };
 
@@ -329,7 +329,7 @@ const TokenShadows = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: '0316f767a182da2f2e96c137034d84794947102a', class: "w-full mt-28" }, h("ul", { key: '16586b6a4d565ee58f4ea2465d54d527390d41ca', 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: '178756bcd7a0192ed59e4cca5850529ed79d14ff', class: "w-full mt-28" }, h("ul", { key: 'f50430eca17728500d9bf3a074530f29e02708fb', 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]" })))))))));
     }
 };
 

package/dist/esm/token-ratios.entry.js

@@ -14,7 +14,7 @@ const TokenRatios = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: 'd95a7a36fc37fb829c74e336d16de79f57ec1b83', class: "w-full" }, h("eds-section-core", { key: '1e2fbe9a818a162d6acd148804a61b87f919eda5', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'a2429b25e2aef59bde0185115dc2ff908b075db5', 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: '0f19e93b3841aa49c36e1195c25b01aa445158ce', class: "w-full" }, h("eds-section-core", { key: '750e15f4957fa7b0d0e050be22a5fcc06d947203', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '217447bc36c9ce0ccd309d0712711e30f704f5ef', 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/esm/token-spacing.entry.js

@@ -5,7 +5,7 @@ const TokenSpacing = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '857d52883315b5be7edb90c89602b29f258cabda', class: "w-full" }, h("ul", { key: 'e1dbf5d8e227c9014183c2465bf281e554f7e35b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '85795c6c4ad2c4fc05cda1183a06dadc78521b45', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e0d6a8712ab4d47dca6ca275c09592b8af381b20', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cbfc5e4dcb4040b375d195246626d833d5b33057', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '8aa060bb7da7ffdbcd343c849f5e62c6db648fd7', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: 'f4e5e7a4eedac3a350f8c68adc5cdc8ba742166a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'de4ce6ca17ba9c0a20a794e1ec55f2fcc1f0c440', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '52766704ac7cb4b1336d4283991c5204c7dece18', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '60c2b72b390ac0b204cf10cf2c01907915e0b3a1', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '1b7922c2a246a1a95e2e26e455b55ea7b5a2a3e9', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '7d43b9c4bc7ebd4883d9d7871b9fb02a2cece586', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7afeb3b0db7c70f11e09b5df2d396ebfc4454f00', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '3bccca0e93ad8accb3da8ce64c86ee70d2a6f255', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '7cbdb2d1b0cd2f91c1b7a05d6654e89a26f74340', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a47cb7cce3d8947d07ceff06fea30e19df12c6ec', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2ee8dc2c52d8a689c12f0333cf7a4d0b36e572f7', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '2c19bbed58312c84d15ef45fc4bd5a699718b259', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '89283aab1c8e84f4d692e290e227d5b91e88cd56', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e341336d74199f51d440ad01217816939b4877eb', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6d59ec419924101b4b2d4daf1fa385cd7d921c2e', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '378293318a5aa7c0c9fecb575e533aa97c7b0ecf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a8e4328bb418b7b878aebfdfe4022e3054b5167e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '421adc7f90db876dca2304f0c0f794c2b93b4536', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ebb689a6011c3da5282eb3bb1cc1a0581af86e90', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '8924318c5edcb5d78c37dc1a768e1b3e0fa775ed', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '21c919b5124094eb34f820327f439c0198758b2a', class: "w-full" }, h("ul", { key: '9dea1c4eb37380b4cf00c1e2b4ccc3b69eca5536', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'bf719062fc2724411a54076a272acf4d06f8cdad', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6bab4e4c52e273faead36180c744593c5365d012', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b1327b6ce1ccca9f3ea64cc5eac0987a76209e04', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '188476bd66a4dff9fa395275088ef94c92f2afca', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '8ba0cdfbde803aa803b21641e4c15917ccbd8988', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'b1b88688a7ff18ac204d49c0536875c0b5a717ab', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b72362f8a8460253e39927f1efde1115aed0a873', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '156be8010b2a809d71354ba28c7908f4fe58064f', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '228d4fecc2d4b7f5958048d0d15c548455287392', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9c92a7fe82b51896bc1ee2462f66efa9251c2fcc', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7059294203bace35afd2ed57b77807e2db806219', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '2e8ec24a3c550ca536a5701c04e0bed7844bc297', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'd79846088a37e1f03a409d11ba69b3ff3cafa5dd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0bd8e24e7369fd83c3de2fe7e841c0f3e97cd80b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c502d2567fb9dc49516390a9a8405c31ab324f0a', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '6f07cec99d6fe8c32053ca3c407c336c7a40a64c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'f6ddca79e1ab773c7a2f64653fbae0d49c03e071', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'bad00c444c75c5a458f66f8b480b69263e9d1548', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd889c0216ded4bc9fce48d68ab7d8008bf9bd045', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '3b00250165aeb560641e99b5859266f1cecd7baf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '53077e307812a3d15f534070e4ceb8dd39e22255', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9e7e1a60ef73524b630845bc686e9a44714c6de7', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c8e3e113b805376f03f9ffe2f2afa985f5e19739', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '924878b9f3c36c8b83112ed93ba354527037f6bd', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 };
 

package/dist/esm/token-typography.entry.js

@@ -233,7 +233,7 @@ const TokenTypography = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: 'ce7e291884a4b1bef85050a04c798a365287a131', class: "w-full" }, h("ul", { key: '070567197ed557c07284ebe733c4f9f3246c60d7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'cfb9e2e38963772af466109521bbaedbf5852e2a', class: "w-full" }, h("ul", { key: '452fa03a44c1082ae4c260245b7dcb2df308ef4f', 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 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'],
@@ -241,7 +241,13 @@ const TokenTypography = class {
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, 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: [
+            } }, 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};`,