@ebrains/react 2.1.0 → 2.3.0

package/token-spacing.entry.esm.js

@@ -9,82 +9,82 @@ const TokenSpacing = class {
   }
   render() {
     return h("div", {
-      key: '9967174337c771b175eb51d9cd77ec227071178e',
+      key: '46cb6fe655e9f8b8688f44e2351f3992e8011b2a',
       class: "w-full"
     }, h("ul", {
-      key: 'db8df572ea997ea83600cb522c761ec5c99788bc',
+      key: '9d7205ee2e0b3b0386284dc282fcc5375c43ec26',
       class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, h("li", {
-      key: '25a7b31970e56ce8ff62c81a69daac121984d9d6',
+      key: 'b3e9d62bb934c1b413712b182cfdf015484db525',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '1a1dfa005e39237c2fedb210c0082293770387c6',
+      key: '78c8a23dcacfd216a6159da8af3809607ef29702',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '473024ed6927d1a140eee0e021af92790c3ec5b0',
+      key: '92a2938c5bdcb38456d96077f78993c711bc789f',
       class: "spacing-sample m-16 bg-strong"
     }, h("span", {
-      key: '7b691bf830943134160396ddcd8f71e419eb29e2',
+      key: '7738363bee7cc25863bec922f55224044af61b6e',
       class: "f-body-01 text-inverse"
     }, "Margin: 1rem / m-16")))), h("li", {
-      key: '38f1d4d7e78b1efdbc55cf732b6be2ac3a62b5b7',
+      key: '96c1f622b7e4136cebd53862b79bbc17ad484a25',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '3a0fc8cdfa13bf0998a4829c36a74b17a6ee2314',
+      key: 'ff4357650e10f9e7a61903c3c9f6a4f4d60d8c73',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: 'ec730379e1041a68c9d980bb6b5d4b16560debb0',
+      key: 'cd07be06a51604f81f2868786028066f834cd87d',
       class: "spacing-sample ml-64 bg-strong"
     }, h("span", {
-      key: 'fd6f3ab787f1d43fb0b060e8408a1464eacd9875',
+      key: 'ded579013d8765c7802862b57cf2bf7ae03f1b99',
       class: "f-body-01 text-inverse"
     }, "Margin Left: 4rem / ml-64")))), h("li", {
-      key: '60a45420ca9cd7f4dab1524c8d6be31b39295b0c',
+      key: 'a8e244c95f027993755fa567d900ff88ed08669b',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: 'ec433621396341959df05dd4becf2844c4266ea5',
+      key: 'e3662c064d089089ebb796aadede38bbd7ebe69d',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: 'e2ae2d3a3f0eb5226fae09d70eff099ed79ca0e6',
+      key: 'f168cbeaec417b0eccd66ed60f2776bdffdb7bfb',
       class: "spacing-sample mt-32 bg-strong"
     }, h("span", {
-      key: '1da10931bb4dae62a1a1c020c89463634a3c1630',
+      key: '696ec848f217896ae3fc06bf07546fe735d6ccd8',
       class: "f-body-01 text-inverse"
     }, "Margin Top: 2rem / mt-32")))), h("li", {
-      key: 'f2f6ff5c992df7d4d426a3488cb7aa7ad9b7bc85',
+      key: '5e5d4a63fd7e28114a87dfa5789f5213b6c057f3',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: '23700500e04f2ec99fb5329092b7e430f7ac4274',
+      key: '14cb262cc18f340e72a922dc793244c17fa9fb05',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: 'bc304e082326c02787a62681fa86d20382fbb2d7',
+      key: '791781717dc851f2e174277c557212e7e5c15b7a',
       class: "spacing-sample p-32 bg-strong"
     }, h("span", {
-      key: '32692a307c58603ac232bb1004b88e0b5bff0c3d',
+      key: 'd1df2d8f2520746e49ec9c85d8e17cf5569c4bc5',
       class: "f-body-01 text-inverse"
     }, "Padding: 2rem / p-32")))), h("li", {
-      key: '6fc5032427724389d29d200347e3f5de984d6ec5',
+      key: '312e2c71672a05cc54cd492297a1cdcb2b11a395',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: 'f66687c53866291f4f455153e34813d53bbb6d68',
+      key: '8cd16bfafd2345b68e50a46c08c7a8f2430ee6ef',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: 'c4305cf37d1f08f50be085664d9a4da0c4859805',
+      key: '8f7e910d8fc43b596b35f3e72a48646e9550e8ba',
       class: "spacing-sample pt-32 bg-strong"
     }, h("span", {
-      key: '4bd0c2056950a34d119c11ffd04e1dce1b8136c5',
+      key: '509c712085a239a435fc11f8ea7a6c9c788be60c',
       class: "f-body-01 text-inverse"
     }, "Padding Top: 2rem / pt-32")))), h("li", {
-      key: '67053133a6c121e02b7cab1da4cf4bc025dcc28d',
+      key: 'b99c86cd7dd23e7c091dd2c70ec42133d9d2e2ef',
       class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
     }, h("div", {
-      key: 'dc7c1198e284eb0d71d183017e99fca72c3fb2a7',
+      key: '0e61fb5d7bf779eddc16c9627d6ca0ff6cf702e1',
       class: "container p-8 item-center border-2 border-soft"
     }, h("div", {
-      key: '3e69f16b8673007197f18b736e07a9e2c86e7eeb',
+      key: 'e65eb20ca88e563ae43eb0c208feacf7e310870f',
       class: "spacing-sample pl-32 bg-strong"
     }, h("span", {
-      key: '5a112de1bf2ce66ea278da76b8890aff02cce8af',
+      key: '2a40e6977caccb37173f60de613c1a72b02f6d3e',
       class: "f-body-01 text-inverse"
     }, "Padding Left: 2rem / pl-32"))))));
   }

package/token-typography.entry.esm.js

@@ -202,10 +202,10 @@ const TokenTypography = class {
   }
   render() {
     return h("section", {
-      key: 'b638ddc335ade66f9eb0af8752f56945270fc5ee',
+      key: 'ff15f73114d16107a766fe6fe8342315cf2fa542',
       class: "w-full"
     }, h("ul", {
-      key: '40f638bc0eccdcc79aecaf5da8fc9c1332122d49',
+      key: '22e8e89e792fee03f1957e5705fca1938771b9ac',
       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", {

package/eds-spinner.entry.esm.js

@@ -1,104 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index.esm2.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}";
-const EdsSpinnerStyle0 = edsSpinnerCss;
-const EdsSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 'md';
-    this.variant = 'secondary';
-    this.message = undefined;
-    this.background = 'var(--grey-200)';
-    this.fullscreen = false;
-  }
-  get spinnerSize() {
-    switch (this.size) {
-      case 'xs':
-        return '1rem';
-      case 'sm':
-        return '4rem';
-      case 'lg':
-        return '8rem';
-      case 'xl':
-        return '10rem';
-      case 'md':
-      default:
-        return '6rem';
-    }
-  }
-  get spinnerThickness() {
-    switch (this.size) {
-      case 'xs':
-        return '4px';
-      case 'sm':
-        return '8px';
-      case 'lg':
-        return '16px';
-      case 'xl':
-        return '20px';
-      case 'md':
-      default:
-        return '12px';
-    }
-  }
-  render() {
-    // derive colors from variant
-    const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
-    const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
-    const spinnerStyle = Object.assign({
-      width: this.spinnerSize,
-      height: this.spinnerSize,
-      border: `${this.spinnerThickness} solid ${borderColor}`,
-      borderBottomColor: bottomColor
-    }, !this.fullscreen && {
-      display: 'inline-block'
-    });
-    // Overlay style: use fixed positioning for fullscreen,
-    // and absolute positioning for inline mode.
-    const overlayStyle = this.fullscreen ? {
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      width: '100vw',
-      height: '100vh',
-      zIndex: '9999999',
-      backgroundColor: this.background,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    } : {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      //zIndex: '1000',
-      backgroundColor: this.background,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    };
-    return h(Host, {
-      key: 'cbf9cead7c7c6bc5314c074f7249c920eb60d326'
-    }, h("div", {
-      key: 'd22c71a76af3f53c649e547538e0f1627cd9ecd0',
-      class: "spinner-overlay",
-      style: overlayStyle
-    }, h("span", {
-      key: '83b42f7ee9ba4d356bd82097989b8be1db8a8ef9',
-      class: "spinner",
-      style: spinnerStyle
-    }), this.message && h("p", {
-      key: '0a2c4efe46b8f86a037d29de699534441bf7585e',
-      class: "f-body-01"
-    }, this.message)));
-  }
-};
-EdsSpinner.style = EdsSpinnerStyle0;
-
-export { EdsSpinner as eds_spinner };

package/eds-tooltip.entry.esm.js

@@ -1,47 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-dom';
-
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
-const EdsTooltipStyle0 = edsTooltipCss;
-const EdsTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.content = undefined;
-    this.position = 'top';
-  }
-  /** fire analytics on every hover */
-  handleHover() {
-    sendAnalytics({
-      category: 'ui-component',
-      tag: this.el.tagName.toLowerCase(),
-      name: this.content.toLowerCase(),
-      action: 'hover'
-    });
-  }
-  render() {
-    const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-    return h("div", {
-      key: 'ee76b787881bdaef986b73fb2775c900a8c33d05',
-      class: "relative w-full inline-block group"
-    }, h("slot", {
-      key: 'a5f9ade50e829efab02ef28ecff3edeedae9d469'
-    }), h("div", {
-      key: '31bdc63d6263090578f6600ae32027c2b050b2bf',
-      class: `absolute ${positionClass}
-            rounded-xs bg-strongest text-inverse 
-            f-ui-03-light pointer-events-none 
-            z-10 p-4 opacity-0 transition-opacity duration-150 ease-in-out
-            group-hover:opacity-100 whitespace-normal break-words`,
-      role: "tooltip"
-    }, this.content));
-  }
-  get el() {
-    return getElement(this);
-  }
-};
-EdsTooltip.style = EdsTooltipStyle0;
-
-export { EdsTooltip as eds_tooltip };