@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

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

@@ -0,0 +1,31 @@
+import { r as registerInstance, h } from './index-e96badea.js';
+
+const logoVariationsHorizontalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.w-\\[150px\\]{width:150px}.w-\\[500px\\]{width:500px}@media (min-width: 750px){.md\\:w-\\[300px\\]{width:300px}.md\\:w-\\[500px\\]{width:500px}}@media (min-width: 900px){.lg\\:w-\\[300px\\]{width:300px}.lg\\:w-\\[500px\\]{width:500px}}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const LogoVariationsHorizontalStyle0 = logoVariationsHorizontalCss;
+
+const LogoVariationsHorizontal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: '577cade970766dbbbd654258efe78920d8c0dbaf' }, h("div", { key: '1c577dafe342384bffce716b4bcb9494685f2283', class: "container my-16" }, h("h3", { key: 'b9f78264dbbe144cc9c7823c48874b3618af3919', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'c07b24eb1a3338d33a3b95c0228a1a7f297a0976', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'ed173d7c59ae22ad55814cf64222a5ce52d108d4', type: "no-bg", href: "#" }))), h("div", { key: '7d939b469a8ce14f609e529121a830d9a47af857', class: "container my-16" }, h("h3", { key: 'f110490f66e3d27f204e289a5eb85461c13594fa', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'd05bd8166d2a60aac723436b96e2451ae4459c04', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'ce24bb6db3038d781a4d1917012c0d4ed7f23b1a', type: "black", href: "#" }))), h("div", { key: '32fbbb1568604bdfd04c6ca6c14a558a3c490ed8', class: "container my-16" }, h("h3", { key: 'ef03e68319669f548c7826d6387072af8d3f5a66', class: "f-heading03" }, "Dark Background "), h("div", { key: 'a6b082f14400be771f43074c1f7f0bc348e77673', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '569f77f1b43b4a65a39720017b34273d6f3d7baa', type: "color-white", href: "#" })))));
+    }
+};
+LogoVariationsHorizontal.style = LogoVariationsHorizontalStyle0;
+
+const logoVariationsVerticalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.w-\\[150px\\]{width:150px}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:500px}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const LogoVariationsVerticalStyle0 = logoVariationsVerticalCss;
+
+const LogoVariationsVertical = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.orientation = 'vertical';
+        this.type = undefined;
+    }
+    render() {
+        return (h("div", { key: '70bc4a46031bb4456ba28bef27efbbfe5e7cf6f2' }, h("div", { key: '84ab774067350c75982d41b6d97500e19d3fe5e5', class: "container my-16" }, h("h3", { key: 'c080f9b4cfa18a3a48fb703f749c62531a322267', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'a9a871769d76e97c879f49437187ca553a633dd2', class: "coloured w-[200px]" }, h("eds-logo", { key: '668f2607e0394ab1b25ddfbef4cd3e3880e1b4f9', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'd1674061f47b242930599337d605b51831214d7a', class: "container my-16" }, h("h3", { key: '8b1470587ad99fdf379c0c4b4646098d14f087e8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'bbb9997369a93ce84450a7d289948049fcfa5bf6', class: "bg-default w-[200px]" }, h("eds-logo", { key: '4f3dc6ad9f9db6f605d54df3c8adecea051cf34e', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '0f54fde04fbef65477809b45371ac15914b1433b', class: "container my-16" }, h("h3", { key: '5c46f1d7b09bf3e113e2733531611943ad21be4e', class: "f-heading03" }, "Dark Background "), h("div", { key: '88609875109aae85cb5333426a3bc270314d9fb5', class: "w-[200px]" }, h("eds-logo", { key: '0eeeba0006e25a8a4f0c4fb5c0d38b089e0a22f4', orientation: "vertical", type: "color-white", href: "#" })))));
+    }
+};
+LogoVariationsVertical.style = LogoVariationsVerticalStyle0;
+
+export { LogoVariationsHorizontal as logo_variations_horizontal, LogoVariationsVertical as logo_variations_vertical };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h } from './index-e96badea.js';
 import { h as hLogoColor } from './logo-color-7f1fd803.js';
 
-const logoWrongUsageCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.container{display:flex;flex-wrap:wrap;gap:16px}.example{width:200px;text-align:center;font-size:14px}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(1.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.gap-y-8{row-gap:0.5rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:flex{display:flex}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}}.flex-col{flex-direction:column}";
+const logoWrongUsageCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.container{display:flex;flex-wrap:wrap;gap:16px}.example{width:200px;text-align:center;font-size:14px}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(1.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-8{row-gap:0.5rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:flex{display:flex}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}}.flex-col{flex-direction:column}";
 const LogoWrongUsageStyle0 = logoWrongUsageCss;
 
 const LogoWrongUsage = class {
@@ -9,7 +9,7 @@ const LogoWrongUsage = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("ul", { key: '9aa8a3f496e779f561e54a6ee656528b2e55a500', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '735e61f1189decb4fef74b5f9f481f94f51c304e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '8d8859bef157051ca9493bac1fd35e0db80414c0', class: "example" }, h("div", { key: '6ee9ce679339e1189439239889a60d8cba39c4b1', class: "bg-dark " }, h("div", { key: '492054f20250a9572ac3c641d05bbb955c050be4', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: 'c9f49c3c44fb7446e6e4e02c1f79ac15827633ba', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'd5cbda2472d3396f08fdb600676852708991ce0f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'dacbf3bcf4dd4914b4332a663a81732a196457f4', class: "example" }, h("div", { key: '9f9bb9b86a840658cf7311a2b035dbadd6a3e0af', class: "no-other-color p-16" }, h("div", { key: '9e96d60f66801638898c12b190640ae0dcc18d24', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '5e0470cb9f81e4bba14104746715704fed2fddeb', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '5e9e1943ab5d4cda7d6b4cb51b76f9da4370a50b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9821754465969edcf1ea98aa7a353ff04140612f', class: "example" }, h("div", { key: '513bb5879746d5979cf7f5360ea60c97196e5379', class: "bg-light p-16" }, h("div", { key: '25f615bf82c51f8601960cb705fa5983667a4943', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '636efd5a54620ca8248b5e1adbf453a7d5292d0f', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: 'a006b91c704b1df8f7adf1cad1d0033bd11378d8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '6a494fdace1e6a2ff48e02a6a8a79f31ca101e02', class: "example" }, h("div", { key: '09ea335ac52cb395cc3173263b4a956aba59cc4e', class: "bg-white p-16" }, h("div", { key: '9acf37c882acb0a04fddc5754b8e91e6789f36ee', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f648aefe81578e9768c24de085e53e2484c1bb7b', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '70f90abc0d6a3292101e29bdfc311ebb0192a585', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9eb3aa4276d7b0a9f7c5e76ffa9fefe7f3def0a3', class: "example" }, h("div", { key: '5a38e80d567d2c2faf08fbcb66a62c24973c3fea', class: "bg-white p-16" }, h("div", { key: '7edbadc8850a9babefea43be9c5f9697021712d5', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '96d30acd52838a03f33fd6c8dcf89a72417ce925', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '41d476bd66b39e796f03c669945024720771216f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3fd7f690559195125d633097b578b1cc2ff4ccc1', class: "example" }, h("div", { key: '684387318cfffdfbc5592486095a28a923e5af07', class: "bg-light p-16" }, h("div", { key: '7593acd61c1ea52ce613a1f3395c8769a09f9aed', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '51d6d974c005a0b5059cd002dff682dc50cfb19a', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '605db4b33b7aab4d0e81e30f658f639689a433b6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '1dc1e6be701572fb7d31b435f8b25dbaf0bf30c8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '30b239799a7d8acf93eba73d3d5dba3cc7117fb5', class: "example" }, h("div", { key: '16a146193f1ec233f37a9472dfe5fa92de10864d', class: "bg-accent p-16" }, h("div", { key: 'cc5924ad51847399ec52c2ece993bdd22305892f', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'bdcd59e968000ecd459b65aaa42e75fa9e06f8ef', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'e2fbd7802c153f970a457011a5dcaf3163d6290f', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '07d6a5b930dd8ae652e63310c4232e8c3e6858b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d3dd01a67f41f839e79aa3d449ba319dcc0209c', class: "example" }, h("div", { key: '6b51ea71b6b4072ec6c66223a4f92c1232e8691a', class: "bg-dark " }, h("div", { key: '03a476635bc1112f1ea2d4ed10df0415ead7f0f8', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '084116335e9f8ed4c9d2a04a9551097dc2a53c4a', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'e67f1bdeee28928f4f6f8fb5d1e0b59160edd949', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'b0e909eb57a6771b32a93dd0932ef5b848a19ff2', class: "example" }, h("div", { key: '19bc9f29ddbffd1c308cb429100f0af3d58237a1', class: "no-other-color p-16" }, h("div", { key: '301c5cb926b9ad167f1ba096f99a874577617fb1', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'b41ab53c2af9efeafb46d41a515eba2f801d49e4', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '826ae54f62c5a3880adf1833dbc19bbb9e1ec6f2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '092d5fc3176845532ecf577c66d6e3a349ebfe45', class: "example" }, h("div", { key: '1d1d3cc86e728fc21f898c59ff1511c5fa728f9f', class: "bg-light p-16" }, h("div", { key: 'df05102398d3de9916a23d0998529d8ca8a66257', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '377e38a762855d563d087eb275481de6a17ddbbb', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '766c4ea568c8bf2fa1efa207ff5f602e5128aef3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'cf4e883370c0ee284167bea7f2c0c603932d1682', class: "example" }, h("div", { key: 'de160646456f91316bf966db6568c20ff382dd3b', class: "bg-white p-16" }, h("div", { key: '5aa03093e5e483547919eaeca58643e54a286405', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'aa65e295008001d6fe2b2168d8f7f43a770ec8e3', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: 'd0eb2536e430b6e9fdb9a37d638d5c31ee81e205', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '43ec87b4632c2709404aff9d3e7bbcb2910426ca', class: "example" }, h("div", { key: '36cd6dc2b23070e5c7fdfc09444d3ccbb8681216', class: "bg-white p-16" }, h("div", { key: 'a1077b322d113220e05ee3edce627c60547cb49a', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '86c384f5cf362d16bd6ac5ac8448e3e0d591fa18', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: 'b267f6024a4e7bad6348d323606922888db5264b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '0bd0c5d62e454ce133a187e7d3917afc0c26c551', class: "example" }, h("div", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "bg-light p-16" }, h("div", { key: '01ab5d75102b9f476fecebcc31c975f6d4720c12', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '0734a049d710d1f6406989668f60da1249e29c7b', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '830b7b2a8cdf6dfc7f395dc92db42fbe626a7ae4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'ca40bb4ea839eacf62e93f7fbec41f076f7b12a6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '641a963ba81294eefe8fc00dd0a3bdca91af94a2', class: "example" }, h("div", { key: '70691be08e9081899fb2928d5d287aaebef3b399', class: "bg-accent p-16" }, h("div", { key: '556135fd6596b530bf959bb9984641f185cd9f96', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '7eaded302e41fc1d04f2033add829dfaba6e8012', class: "f-ui-02" }, "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/token-list_3.entry.js

@@ -240,7 +240,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: '12f2874bbc9a74aea2a37e3c9314e85b5cf96d8c', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'ac8573b341ad313eba0f9f082dcc72cfc81208b3', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -260,7 +260,7 @@ const TokenRadii = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: '8b66cda1370f366c46ed2772ee0a5a18878cdc13', class: "w-full mt-28" }, h("ul", { key: '652f4812de4a40c94646b25429b16683bfc8f54c', class: "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: '84dabcd5a39d49e116f8fc9e9b26e00455c7fbb3', class: "w-full mt-28" }, h("ul", { key: 'a821c747c45b8898ab2e7626d2ead91814549335', class: "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" }))))))));
     }
 };
 
@@ -287,7 +287,7 @@ const TokenShadows = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: '6651a6dcd282a9f9df84249c73ab08a6e8d83597', class: "w-full mt-28" }, h("ul", { key: '12bda2b4a1306c9a8d1bc4f41da4edd5258e381f', class: "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: '4575feac8b5bff23aed39733e638fbb62916988f', class: "w-full mt-28" }, h("ul", { key: 'c9833aa0d698a7ec33911011ccb9227d43c8261a', class: "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: 'd6df281aee2b33d5dd1087c9d06aff6656bf9145', class: "w-full" }, h("eds-section-core", { key: 'fdf31da89f0fa75f5a724ae9bdb26d59dd22fe9e', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '01473ff27842d278c1269870463fb0c1a0658406', 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: '9c4dc70bd40a40fbeedc88280ea3fdd4b2597e40', class: "w-full" }, h("eds-section-core", { key: '039b72b762e48f62a4fa58d5af7803d0ed73bf6a', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'be3e37d842a24536488b7bc03f24399faa1304ff', 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: 'ae388def4474fbd6e9766c2e04eb382ac9022bb8', class: "w-full" }, h("ul", { key: 'a2a51b9494dbd1bbb8b8d454117bc254e9602938', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9e48e3551369f35ae6ec72d493ae888ebee3cceb', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '65b5b1192cdfef841bd4beed6eedf0068393ba8d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '770870c171999d004aba77b6058fe32525b1703e', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'fdba92dbc2c78e55481277c2858de4ea220b2397', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '9420b6110f30e9f3cff94d409362627d32782023', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2e438e9ee4291d1326acb2630ccb55f981acfeaa', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b199e19274f23490485347d2ef102741f583b612', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '2cde99dd7d0bb469b7f69b852f20abc4f61d6a01', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'b8cdd7b7245cd3e7c8fe59297b76f2e9e20a1c2e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f9cf988220669a2ebe2e93d33d904ee045af74a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '88f5a191b1f9878ae6012efd5ec7365cf2f28da4', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: 'af8f876d8cdc7620af861620173ea32fc706378f', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'e65780c7ecfc9685791c40970350ba511e888283', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c1a8e22fde087ac9f5e69602e23c8b7f429c0e3e', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '19aaa0273c1c818f1f6d57a0fd41d9be14aa4d1b', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '18cbdee711f04e90e663d93bd8b752ec0d0b33ee', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: 'f2831db3170703786946a12a5b0c0e188c4f944a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '68ac92294defd683a3c49e38ce0f4366a8b91208', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6bfd849d0f841d6fefb39d91a4be49ae1db8d43f', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '7f3b5868baf86913d172b07347b15ca1e8901d21', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'f3608f5562949c9fb82d987719753bc0b59ba999', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'fe9d90cf206906742000da310a53873ecefaa77c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd6590820496db0ba1009deea6a4b56c9195814e6', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'c65179e127861a66ca1c0d6ff429b07bc0d88945', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '5f72b8386e92973faca8b22ebadcffa5b8ca8744', class: "w-full" }, h("ul", { key: '619cc2546059aaac566dc89f56b098f72f7c2bde', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b90587543210e02a577854ce061472ef8f3bdc7a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd98ea95c641209ba592aae8c695e278549840420', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6dd84540a213d98fa09480eac823fe030dfb2404', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ad0493ba8d97cdcc15535505db4d726d6f69bd38', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: 'a0914d288cdb4b9caef6956af0069cd0937ee019', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '95adc2b10d3962378de300e00b749b691fda88af', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8bad94397c9fe8112b49933a508958000f9cd99d', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '04229385104243a5ce9a194c4f8056f7341a6736', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'f34e1fd5ccafc528ed9359766deaa5c615a2e14b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '38e12800b2c8502ea2f9e912af929f71d3ec9699', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f4e93d89576ab3de7f44ce3a85d9838f21bfa7f6', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: 'e85e2e1c7c4c7e765dfafd25dc9f2c33b6bd5069', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'b42299c17c024a5906bd09c80a2f309b461b6fde', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f54a9e32893ac6f1b0384e79e2959d1e65a251e2', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4209fa0c979a1d55d42d7b892bc94cc0f3788e88', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '1d9249c56d3a42500dfb8cc1d3eae1f89e79cdcd', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: 'ad6f2e33e15c4c21bdfed8478b3d2faa905490fa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9950970e66b8a382e7b0158b54e980a5e5f45774', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '40e96cd046eaddf3a23387995affbfc399d171ae', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '2d120273f7a6d4429061d0ade2164ada9a14b506', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '8c3327edc63f8959c0cb01cce0a8407bf3a605af', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c0be38039770c54577f073e1a707110cd0807ab5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd8085da375e734ed11fe580f1a9004f6fddef679', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: '029857c00659221390438d8477734d0f130d1b97', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
     }
 };
 

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

@@ -203,7 +203,7 @@ const TokenTypography = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("section", { key: '2078622c91b8906b71ee3aebdadcda0ac2c49512', class: "w-full" }, h("ul", { key: 'fe9212731cddcd43e3d5f5518245911d9d4cd493', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: '23815518d694435812ed3d7b9aab850043941b96', class: "w-full" }, h("ul", { key: '366ed5bc5933c5b8a563d33b70471f507a21386c', 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,