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

package/dist/components/p-0a3b2576.entry.js

@@ -1 +0,0 @@
-import{r as e,c as s,h as t}from"./p-7a8b9de5.js";const i=class{constructor(t){e(this,t),this.menuClose=s(this,"menuClose",7),this.links=void 0,this.menuLinks=void 0,this.homeUrl="/",this.inverseHeader=!1,this.isMenuOpen=!1}handleToggleMenu(e){this.isMenuOpen=e.detail}openMenu(){this.isMenuOpen=!0}closeMenu(){this.isMenuOpen=!1,this.menuClose.emit()}componentDidLoad(){window.addEventListener("resize",this.handleResize.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.handleResize.bind(this))}handleResize(){window.innerWidth>=1024&&(this.isMenuOpen=!1)}get parsedLinks(){if("object"==typeof this.links)return this.links;if("string"==typeof this.links)try{return JSON.parse(this.links)}catch(e){return console.error("Error parsing links prop:",e),[]}return[]}get parsedMenuLinks(){if("object"==typeof this.menuLinks)return this.menuLinks;if("string"==typeof this.menuLinks)try{return JSON.parse(this.menuLinks)}catch(e){return console.error("Error parsing menuLinks prop:",e),[]}return[]}render(){return this.isMenuOpen?t("div",{class:"eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll"},t("div",{class:"flex min-h-full flex-col"},t("div",{class:"bg-default w-full sticky top-0 "+(this.inverseHeader?"bg-strongest":"bg-default")},t("div",{class:"mx-auto flex items-center justify-between"},t("div",{class:"mr-auto w-[200px] h-[85px]"},t("eds-logo",{type:this.inverseHeader?"color-white":"color",href:this.homeUrl})),t("div",{class:"px-16"},t("eds-button",{"aria-label":"Close menu",intent:"ghostInverse",icon:"close",onClick:()=>this.closeMenu()})))),t("div",{class:"py-16 px-16"},t("nav",{class:"mt-28 flex flex-col gap-y-8"},this.parsedLinks.map(((e,s)=>t("eds-link",{label:e.label,key:s,url:e.url,intent:"tertiary",size:"large",class:"effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit",onClick:()=>this.closeMenu(),icon:"arrow-right"})))),t("eds-block-break",null),t("nav",{class:"mt-28 flex flex-col gap-y-8"},this.parsedMenuLinks.map(((e,s)=>t("eds-link",{label:e.label,key:s,url:e.url,intent:"tertiary",size:"large",class:"effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit",onClick:()=>this.closeMenu(),icon:"chevron-right"}))))),t("div",{class:"mt-auto"},t("eds-footer",{social:!0,"extra-class":"bg-darker"})))):null}};i.style="";export{i as eds_fullscreen_menu}

package/dist/components/p-0c99ef81.entry.js

@@ -1 +0,0 @@
-import{h as e,r as n}from"./p-7a8b9de5.js";const t=()=>e("div",{class:"static-content container"},e("eds-alert",{message:"EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We\n      accomplish this by using standardized web platform APIs and Web Components.",intent:"default"}),e("h2",null,"Load the module"),e("p",null,"Integrating EDSs components to a project without a JavaScript framework is straight forward. If you’re working on a simple HTML page, you can start using the components immediately by adding the tags below to the"," ",e("code",null,"head"),"."),e("eds-code-block",{code:'<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/><\/script>',language:"javascript","copy-label":"Copy Code"}),e("h2",null,"Load the styles"),e("p",null,"To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the"," ",e("code",null,"head")),e("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>',language:"css","copy-label":"Copy Code"}),e("h2",null,"Load the fonts"),e("p",null,"To load the correct webfonts as well, add either one of these tags to the ",e("code",null,"head")),e("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>',language:"css","copy-label":"Copy Code"}),e("h2",null,"Component Usage"),e("p",null,"Once included, components can be used in your markup like any other regular HTML elements:"),e("eds-code-block",{code:'<eds-button label="my bytton" intent="primary"></eds-button>',language:"html","copy-label":"Copy Code"})),a=()=>e("div",null,e("p",null,"To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."),e("eds-code-block",{code:"npm install @ebrains/components",language:"html","copy-label":"Copy Code"}),e("p",null,"TBD")),l=()=>e("div",null,e("h1",null,"Usage with basic HTML "),e("p",null,"TBD")),o=()=>e("div",null,e("h2",null,"React Wrappers"),e("p",null,"Learn how to use our components in a React Application."),"Simple install the package below and check out the examples",e("eds-code-block",{code:"npm install @ebrains/react",language:"javascript","copy-label":"Copy Code"}),e("eds-section-core",{"section-title":"Example React App","heading-level":"h3"},e("eds-code-block",{code:'\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n',language:"javascript","copy-label":"Copy Code"}))),s=()=>e("div",null,e("h2",null,"Vue Wrappers"),e("p",null,"Learn how to use our components in a Vue Application."),e("eds-code-block",{code:"npm install @ebrains/vue",language:"javascript","copy-label":"Copy Code"}),e("p",null,"Define the custom elements"),e("eds-code-block",{code:"import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();",language:"javascript","copy-label":"Copy Code"}),e("eds-section-core",{"section-title":"Example Vue App","heading-level":"h3"},e("eds-code-block",{code:'\n<template>\n  <h1 className="f-heading-02">Vue App</h1>\n\n  <EdsHeader \n    home-url="/" \n    user-feature=false \n    keycloak-url="http://localhost:8080" \n    keycloak-realm="nigeor-realm"\n    keycloak-client-id="stencil-app" \n    links="[\n      { "label": "About", "url": "/about" },\n      { "label": "Focus Areas", "url": "/focus-areas" },\n      { "label": "News & Events", "url": "/news-and-events" },\n      { "label": "Contact", "url": "/contact" }\n    ]">\n  </EdsHeader>\n\n</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n<\/script>\n',language:"javascript","copy-label":"Copy Code"}))),r=()=>e("div",null,e("h2",null,"Angular Wrappers"),e("p",null,"Learn how to use our components in a Angular Application."),e("eds-code-block",{code:"npm install @ebrains/angular",language:"javascript","copy-label":"Copy Code"}),e("p",null,"Define the custom elements"),e("eds-code-block",{code:"import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();",language:"javascript","copy-label":"Copy Code"}),e("p",null,"Angular Custom Elements Schema"),e("eds-code-block",{code:'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";',language:"javascript","copy-label":"Copy Code"}),e("eds-section-core",{"section-title":"Example Angular App","heading-level":"h3"},e("eds-code-block",{code:'\n<div class="container">\n  <h1 class="f-heading-01">{{ title }}</h1>\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>',language:"javascript","copy-label":"Copy Code"}))),c=class{constructor(e){n(this,e),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e(t,null);case 1:return e(a,null);case 2:return e(l,null);case 3:return e(o,null);case 4:return e(s,null);case 5:return e(r,null);default:return e("p",null,"Content not available.")}}render(){return e("div",{key:"faa14dc7bb5d966ea1328f60d8ca88b3c406ad51",class:"container"},this.renderContent())}};export{c as eds_components_section}

package/dist/components/p-272d249f.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-7a8b9de5.js";const i=class{constructor(t){e(this,t),this.socialNetworks=[{label:"Twitter",url:"https://twitter.com/ebrains_eu",icon:"twitter"},{label:"Linkedin",url:"https://www.linkedin.com/company/ebrains-eu/about/",icon:"linkedin"},{label:"Facebook",url:"https://www.facebook.com/people/Ebrains_eu/100046659909324/",icon:"facebook"},{label:"Youtube",url:"https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ",icon:"youtube"},{label:"Mastodon",url:"https://mastodon.social/@ebrains",icon:"mastodon"},{label:"Bluesky",url:"https://bsky.app/profile/ebrains.bsky.social",icon:"bluesky"}],this.title="Follow EBRAINS to keep up-to-date"}render(){return t("div",{key:"6169559327b728fd0f3a51a2b8a6439f80fba8fc"},t("p",{key:"df2e008500097af1b85660fe8b3fac122f5018a4",class:"f-ui-02"},this.title),t("ul",{key:"df01a2802412c4db4e5442fdfc0b6ef3f15c4109",class:"mt-12 flex gap-4"},this.socialNetworks.map(((e,i)=>t("li",{key:i},t("eds-link",{"extra-class":"effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm",external:!0,"aria-label":e.label,url:e.url,icon:e.icon,intent:"strong"}))))))}};i.style="blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";export{i as eds_social_networks}

package/dist/components/p-2d8508cd.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a}from"./p-7a8b9de5.js";const c=class{constructor(a){e(this,a)}render(){return a("div",{key:"ae388def4474fbd6e9766c2e04eb382ac9022bb8",class:"w-full"},a("ul",{key:"a2a51b9494dbd1bbb8b8d454117bc254e9602938",class:"gap-y-8 md:gap-y-12 lg:gap-y-16"},a("li",{key:"9e48e3551369f35ae6ec72d493ae888ebee3cceb",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"65b5b1192cdfef841bd4beed6eedf0068393ba8d",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"770870c171999d004aba77b6058fe32525b1703e",class:"spacing-sample m-32 bg-darker"},a("span",{key:"fdba92dbc2c78e55481277c2858de4ea220b2397",class:"text-white"},"Margin: 2rem / m-32")))),a("li",{key:"9420b6110f30e9f3cff94d409362627d32782023",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"2e438e9ee4291d1326acb2630ccb55f981acfeaa",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"b199e19274f23490485347d2ef102741f583b612",class:"spacing-sample ml-64 bg-darker"},a("span",{key:"2cde99dd7d0bb469b7f69b852f20abc4f61d6a01",class:"text-white"},"Margin Left: 4rem / ml-64")))),a("li",{key:"b8cdd7b7245cd3e7c8fe59297b76f2e9e20a1c2e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"0f9cf988220669a2ebe2e93d33d904ee045af74a",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"88f5a191b1f9878ae6012efd5ec7365cf2f28da4",class:"spacing-sample mt-32 bg-darker"},a("span",{key:"af8f876d8cdc7620af861620173ea32fc706378f",class:"text-white"},"Margin Top: 2rem / mt-32")))),a("li",{key:"e65780c7ecfc9685791c40970350ba511e888283",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"c1a8e22fde087ac9f5e69602e23c8b7f429c0e3e",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"19aaa0273c1c818f1f6d57a0fd41d9be14aa4d1b",class:"spacing-sample p-32 bg-darker"},a("span",{key:"18cbdee711f04e90e663d93bd8b752ec0d0b33ee",class:"text-white"},"Padding: 2rem / p-32")))),a("li",{key:"f2831db3170703786946a12a5b0c0e188c4f944a",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"68ac92294defd683a3c49e38ce0f4366a8b91208",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"6bfd849d0f841d6fefb39d91a4be49ae1db8d43f",class:"spacing-sample pt-32 bg-darker"},a("span",{key:"7f3b5868baf86913d172b07347b15ca1e8901d21",class:"text-white"},"Padding Top: 2rem / pt-32")))),a("li",{key:"f3608f5562949c9fb82d987719753bc0b59ba999",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"fe9d90cf206906742000da310a53873ecefaa77c",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"d6590820496db0ba1009deea6a4b56c9195814e6",class:"spacing-sample pl-32 bg-darker"},a("span",{key:"c65179e127861a66ca1c0d6ff429b07bc0d88945",class:"text-white"},"Padding Left: 2rem / pl-32"))))))}};export{c as token_spacing}

package/dist/components/p-3a2e8ef3.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a}from"./p-7a8b9de5.js";import{h as c}from"./p-2692f93d.js";const d=class{constructor(a){e(this,a)}render(){return a("ul",{key:"9aa8a3f496e779f561e54a6ee656528b2e55a500",class:"grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"},a("span",{key:"735e61f1189decb4fef74b5f9f481f94f51c304e",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"8d8859bef157051ca9493bac1fd35e0db80414c0",class:"example"},a("div",{key:"6ee9ce679339e1189439239889a60d8cba39c4b1",class:"bg-dark "},a("div",{key:"492054f20250a9572ac3c641d05bbb955c050be4",class:"no-other-bg-color logo",innerHTML:c})),a("p",{key:"c9f49c3c44fb7446e6e4e02c1f79ac15827633ba",class:"f-ui-02"},"Do not use with backgrounds that make legibility difficult"))),a("span",{key:"d5cbda2472d3396f08fdb600676852708991ce0f",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"dacbf3bcf4dd4914b4332a663a81732a196457f4",class:"example"},a("div",{key:"9f9bb9b86a840658cf7311a2b035dbadd6a3e0af",class:"no-other-color p-16"},a("div",{key:"9e96d60f66801638898c12b190640ae0dcc18d24",class:"logo non-brand-color",innerHTML:c})),a("p",{key:"5e0470cb9f81e4bba14104746715704fed2fddeb",class:"f-ui-02"},"Do not apply other colors"))),a("span",{key:"5e9e1943ab5d4cda7d6b4cb51b76f9da4370a50b",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"9821754465969edcf1ea98aa7a353ff04140612f",class:"example"},a("div",{key:"513bb5879746d5979cf7f5360ea60c97196e5379",class:"bg-light p-16"},a("div",{key:"25f615bf82c51f8601960cb705fa5983667a4943",class:"logo distorted",innerHTML:c})),a("p",{key:"636efd5a54620ca8248b5e1adbf453a7d5292d0f",class:"f-ui-02"},"Do not deform the logo"))),a("span",{key:"a006b91c704b1df8f7adf1cad1d0033bd11378d8",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"6a494fdace1e6a2ff48e02a6a8a79f31ca101e02",class:"example"},a("div",{key:"09ea335ac52cb395cc3173263b4a956aba59cc4e",class:"bg-white p-16"},a("div",{key:"9acf37c882acb0a04fddc5754b8e91e6789f36ee",class:"logo effects",innerHTML:c})),a("p",{key:"f648aefe81578e9768c24de085e53e2484c1bb7b",class:"f-ui-02"},"Do not apply effects"))),a("span",{key:"70f90abc0d6a3292101e29bdfc311ebb0192a585",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"9eb3aa4276d7b0a9f7c5e76ffa9fefe7f3def0a3",class:"example"},a("div",{key:"5a38e80d567d2c2faf08fbcb66a62c24973c3fea",class:"bg-white p-16"},a("div",{key:"7edbadc8850a9babefea43be9c5f9697021712d5",class:"logo rotated",innerHTML:c})),a("p",{key:"96d30acd52838a03f33fd6c8dcf89a72417ce925",class:"f-ui-02"},"Do not rotate the logo"))),a("span",{key:"41d476bd66b39e796f03c669945024720771216f",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"3fd7f690559195125d633097b578b1cc2ff4ccc1",class:"example"},a("div",{key:"684387318cfffdfbc5592486095a28a923e5af07",class:"bg-light p-16"},a("div",{key:"7593acd61c1ea52ce613a1f3395c8769a09f9aed",class:"logo outlined",innerHTML:c})),a("p",{key:"51d6d974c005a0b5059cd002dff682dc50cfb19a",class:"f-ui-02"},"Do not apply outlines"))),a("span",{key:"605db4b33b7aab4d0e81e30f658f639689a433b6",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"}),a("span",{key:"1dc1e6be701572fb7d31b435f8b25dbaf0bf30c8",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col"},a("div",{key:"30b239799a7d8acf93eba73d3d5dba3cc7117fb5",class:"example"},a("div",{key:"16a146193f1ec233f37a9472dfe5fa92de10864d",class:"bg-accent p-16"},a("div",{key:"cc5924ad51847399ec52c2ece993bdd22305892f",class:"text-inverse",innerHTML:c})),a("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"))))}};d.style=".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}";export{d as logo_wrong_usage}