@ebrains/react 0.0.1-alpha.0 → 0.2.0-alpha.0

package/eds-tabs-content.entry.esm.js

@@ -0,0 +1,145 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './color-0ba8ed56.esm.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsTabsContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabContentChange = createEvent(this, "tabContentChange", 7);
+    // cva configuration
+    this.tabCva = cva(['relative px-16 py-12', 'f-ui-03 whitespace-nowrap', 'effect-color', 'focus-visible:text-default hover:text-default', 'border-2', "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0", 'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'], {
+      variants: {
+        position: {
+          left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
+          right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
+          center: '',
+          first: 'rounded-t-lg'
+        },
+        active: {
+          false: 'text-lighter bg-dark hover:bg-darker border-softest',
+          true: ['bg-default text-default z-99', 'rounded-t-lg', "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default", 'border-[#d2d2d2]']
+        }
+      }
+    });
+    this.navAriaLabel = 'Tabs';
+    this.tabs = undefined;
+    this.parsedTabs = [];
+    this.activeIndex = -1;
+  }
+  componentWillLoad() {
+    this.parseTabs();
+    this.setActiveIndex();
+  }
+  parseTabs() {
+    try {
+      this.parsedTabs = JSON.parse(this.tabs);
+    } catch (error) {
+      //console.error('Invalid JSON format for tabs:', error);
+      this.parsedTabs = [];
+    }
+  }
+  componentDidLoad() {
+    this.initializeTabContentVisibility();
+    this.el.addEventListener('tabContentChange', e => {
+      this.updateTabContentVisibility(e.detail.index);
+    });
+    this.scrollToActiveTab();
+  }
+  initializeTabContentVisibility() {
+    const allContent = this.el.querySelectorAll('.tab-content');
+    allContent.forEach((content, index) => {
+      content.setAttribute('style', `display: ${index === this.activeIndex ? 'block' : 'none'}`);
+    });
+  }
+  updateTabContentVisibility(index) {
+    const allContent = this.el.querySelectorAll('.tab-content');
+    allContent.forEach((content, contentIndex) => {
+      content.setAttribute('style', `display: ${contentIndex === index ? 'block' : 'none'}`);
+    });
+  }
+  setActiveIndex() {
+    this.activeIndex = this.parsedTabs.findIndex(tab => tab.active);
+  }
+  scrollToActiveTab() {
+    var _a;
+    const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
+    if (activeTab) {
+      setTimeout(() => {
+        activeTab.scrollIntoView({
+          inline: 'center',
+          block: 'nearest'
+        });
+      }, 316);
+    }
+  }
+  getTabOptions(active, index) {
+    const position = active ? 'center' : this.activeIndex === -1 && index === 0 ? 'first' : index < this.activeIndex ? 'left' : 'right';
+    return Object.assign({
+      class: this.tabCva({
+        active,
+        position
+      }),
+      style: {
+        zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+      }
+    }, active ? {
+      'data-tab-active': 'true'
+    } : {});
+  }
+  handleTabClick(index, tabLabel) {
+    // Update the active index and set all tabs' active state accordingly
+    this.activeIndex = index;
+    this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => Object.assign(Object.assign({}, tab), {
+      active: tabIndex === index
+    }));
+    this.tabContentChange.emit({
+      index: index,
+      name: tabLabel
+    });
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+      action: 'click'
+    });
+  }
+  render() {
+    return h("div", {
+      key: 'b1bfb55fbdee21a10fcc600d4c3ce2842684c519',
+      class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
+    }, h("div", {
+      key: '1d1aeb094b6c350355abec1bf74928561a1c0f2d',
+      class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
+    }, h("nav", {
+      key: '5d5b04ddf5ddb60c2a9b49d19f4efe026cc2557d',
+      ref: el => this.tabContainer = el,
+      class: "inline-flex",
+      "aria-label": this.navAriaLabel
+    }, this.parsedTabs.map((tab, index) => {
+      //const TabComponent = tab.active ? 'span' : 'a';
+      const tabProps = this.getTabOptions(tab.active, index);
+      return h("eds-tab", Object.assign({}, tabProps, {
+        label: tab.label,
+        url: tab.url,
+        active: index === this.activeIndex,
+        ariaLabel: tab.ariaLabel,
+        onClick: () => this.handleTabClick(index, tab.label)
+      }));
+    })), h("slot", {
+      key: '58e9281516d0a4485ba0779f9b79c0fa5e989166'
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "tabs": ["parseTabs"]
+    };
+  }
+};
+
+export { EdsTabsContent as eds_tabs_content };

package/eds-tabs.entry.esm.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './color-0ba8ed56.esm.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsTabsCss = "";
+const EdsTabsStyle0 = edsTabsCss;
+const EdsTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabChange = createEvent(this, "tabChange", 7);
+    // cva configuration
+    this.tabCva = cva(['relative px-16 py-12', 'f-ui-03 whitespace-nowrap', 'effect-color', 'focus-visible:text-default hover:text-default', 'border-2', "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0", 'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'], {
+      variants: {
+        position: {
+          left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
+          right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
+          center: '',
+          first: 'rounded-t-lg'
+        },
+        active: {
+          false: 'text-lighter bg-dark hover:bg-darker border-softest',
+          true: ['bg-default text-default z-99', 'rounded-t-lg', "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default", 'border-[#d2d2d2]']
+        }
+      }
+    });
+    this.id = undefined;
+    this.navAriaLabel = 'Tabs';
+    this.tabs = undefined;
+    this.parsedTabs = [];
+    this.activeIndex = -1;
+  }
+  componentWillLoad() {
+    this.parseTabs();
+    this.setActiveIndex();
+    this.tabChange.emit({
+      tabId: this.id,
+      index: 0
+    });
+  }
+  parseTabs() {
+    try {
+      this.parsedTabs = JSON.parse(this.tabs);
+    } catch (error) {
+      //console.error('Invalid JSON format for tabs:', error);
+      this.parsedTabs = [];
+    }
+  }
+  componentDidLoad() {
+    this.scrollToActiveTab();
+  }
+  setActiveIndex() {
+    this.activeIndex = this.parsedTabs.findIndex(tab => tab.active);
+  }
+  scrollToActiveTab() {
+    var _a;
+    const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
+    if (activeTab) {
+      setTimeout(() => {
+        activeTab.scrollIntoView({
+          inline: 'center',
+          block: 'nearest'
+        });
+      }, 316);
+    }
+  }
+  getTabOptions(active, index) {
+    const position = active ? 'center' : this.activeIndex === -1 && index === 0 ? 'first' : index < this.activeIndex ? 'left' : 'right';
+    return Object.assign({
+      class: this.tabCva({
+        active,
+        position
+      }),
+      style: {
+        zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+      }
+    }, active ? {
+      'data-tab-active': 'true'
+    } : {});
+  }
+  handleTabClick(index, tabLabel) {
+    // Update the active index and set all tabs' active state accordingly
+    this.activeIndex = index;
+    this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => Object.assign(Object.assign({}, tab), {
+      active: tabIndex === index
+    }));
+    this.tabChange.emit({
+      tabId: this.id,
+      index: index,
+      name: tabLabel
+    });
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+      action: 'click'
+    });
+  }
+  render() {
+    return h("div", {
+      key: '25078703609dbdaa2025013d0e266b169c880c50',
+      id: `${this.id}`,
+      class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
+    }, h("div", {
+      key: '8aa1b4ab1f15692c912db3ee39486a59d634c6a5',
+      class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
+    }, h("nav", {
+      key: '33728823ca0f039e1037a691da90b295cbe3f3ac',
+      ref: el => this.tabContainer = el,
+      class: "inline-flex",
+      "aria-label": this.navAriaLabel
+    }, this.parsedTabs.map((tab, index) => {
+      //const TabComponent = tab.active ? 'span' : 'a';
+      const tabProps = this.getTabOptions(tab.active, index);
+      return h("eds-tab", Object.assign({}, tabProps, {
+        label: tab.label || tab.ariaLabel,
+        url: tab.url,
+        active: index === this.activeIndex,
+        onClick: () => this.handleTabClick(index, tab.label)
+      }));
+    }))));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "tabs": ["parseTabs"]
+    };
+  }
+};
+EdsTabs.style = EdsTabsStyle0;
+
+export { EdsTabs as eds_tabs };

package/eds-tooltip.entry.esm.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.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)}.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}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-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))}.-translate-y-1\\/2{--tw-translate-y:-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))}.-translate-y-full{--tw-translate-y:-100%;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}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
+const EdsTooltipStyle0 = edsTooltipCss;
+const EdsTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.content = undefined;
+    this.position = 'above';
+    this.isVisible = false;
+    this.isPositioned = false;
+    this.tooltipStyle = {
+      top: '0px',
+      left: '0px',
+      transform: ''
+    };
+  }
+  /**
+   * Show the tooltip and update its position.
+   */
+  async showTooltip() {
+    await this.updateTooltipPosition();
+    this.isPositioned = true;
+    this.isVisible = true;
+  }
+  /**
+   * Hide the tooltip.
+   */
+  hideTooltip() {
+    this.isVisible = false;
+    this.isPositioned = false; // Reset positioning when hiding
+  }
+  /**
+   * Hide the tooltip when the `Escape` key is pressed.
+   */
+  handleKeyPress(event) {
+    if (event.key === 'Escape') {
+      this.isVisible = false;
+      this.isPositioned = false; // Reset positioning when hiding
+    }
+  }
+  /**
+   * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
+   */
+  updateTooltipPosition() {
+    var _a, _b;
+    const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+    if (!slotElement) {
+      return;
+    }
+    const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({
+      flatten: true
+    })) || [];
+    const targetElement = assignedNodes.find(node => node instanceof HTMLElement);
+    if (targetElement) {
+      const targetRect = targetElement.getBoundingClientRect();
+      const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
+      if (tooltipElement) {
+        const tooltipWidth = tooltipElement.offsetWidth;
+        const tooltipHeight = tooltipElement.offsetHeight;
+        // Calculate position based on the preferred `position` prop
+        let top = 0;
+        let left = 0;
+        switch (this.position) {
+          case 'above':
+            top = window.scrollY - tooltipHeight - 8; // Above with offset
+            left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+            break;
+          case 'below':
+            top = tooltipHeight - window.scrollY + 18; // Below with offset
+            left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+            break;
+          /*case 'left':
+            top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+            left = targetRect.left - tooltipWidth - 8; // To the left with offset
+            break;
+          case 'right':
+            top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+            left = targetRect.right + 8; // To the right with offset
+            break;*/
+        }
+        this.tooltipStyle = {
+          top: `${top}px`,
+          left: `${left}px`,
+          transform: 'translateX(0)' // No additional horizontal adjustment needed
+        };
+      }
+    }
+  }
+  render() {
+    return h("div", {
+      key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b',
+      class: "relative"
+    }, h("slot", {
+      key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13'
+    }), this.isVisible && this.isPositioned && this.content && h("div", {
+      key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191',
+      class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6",
+      role: "tooltip",
+      style: {
+        top: this.tooltipStyle.top,
+        left: this.tooltipStyle.left,
+        transform: this.tooltipStyle.transform
+      }
+    }, this.content));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsTooltip.style = EdsTooltipStyle0;
+
+export { EdsTooltip as eds_tooltip };

package/eu-9ddde93a.esm.js

@@ -0,0 +1,30 @@
+const euSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icons-eu" viewBox="0 0 640 480">
+  <defs>
+    <g id="d">
+      <g id="b">
+        <path id="a" d="m0-1-.3 1 .5.1z"/>
+        <use xlink:href="#a" transform="scale(-1 1)"/>
+      </g>
+      <g id="c">
+        <use xlink:href="#b" transform="rotate(72)"/>
+        <use xlink:href="#b" transform="rotate(144)"/>
+      </g>
+      <use xlink:href="#c" transform="scale(-1 1)"/>
+    </g>
+  </defs>
+  <path fill="#039" d="M0 0h640v480H0z"/>
+  <g fill="#fc0" transform="translate(320 242.3) scale(23.7037)">
+    <use xlink:href="#d" width="100%" height="100%" y="-6"/>
+    <use xlink:href="#d" width="100%" height="100%" y="6"/>
+    <g id="e">
+      <use xlink:href="#d" width="100%" height="100%" x="-6"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(-144 -2.3 -2.1)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(144 -2.1 -2.3)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(72 -4.7 -2)"/>
+      <use xlink:href="#d" width="100%" height="100%" transform="rotate(72 -5 .5)"/>
+    </g>
+    <use xlink:href="#e" width="100%" height="100%" transform="scale(-1 1)"/>
+  </g>
+</svg>`;
+
+export { euSvg as e };

package/facebook-9cb5c17f.esm.js

@@ -0,0 +1,14 @@
+const facebook = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.9481 19.9556C16.0263 19.4781 20 15.2031 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 14.7129 3.26027 18.6643 7.64847 19.722V12.0931H6V9.36828H7.64847V7.73228C7.64847 5.50935 8.5793 4.1875 11.2239 4.1875H13.4256V6.91266H12.0494C11.0199 6.91266 10.9518 7.29347 10.9518 8.00415L10.9481 9.36797H13.4412L13.1494 12.0928H10.9481V19.9556Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { facebook as f };

package/incorrect-use-of-colors.entry.esm.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const primary = [{
+  background: '#9CE142'
+}, {
+  background: '#00C959'
+}, {
+  background: '#00A595'
+}];
+const purple = [{
+  background: '#C461FF'
+}, {
+  background: '#5D3DF9'
+}];
+const red = [{
+  background: '#FFA543'
+}, {
+  background: '#FF4D68'
+}];
+const incorrect = [{
+  background: '#3FA9F5'
+}, ...purple, ...red];
+const IncorrectUseOfColors = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("div", {
+      key: '024316623703e89a7d5d226a75c25c145be9b2c6',
+      class: "container"
+    }, h("p", {
+      key: 'c2ddb12f2d87bf1c5bb7f49bcf2b76d42ccfd310',
+      class: "f-body-01"
+    }, "Each of the four colour tones cannot be mixed in the same composition."), h("div", {
+      key: 'c5f1acb20614d5732836240dd65b23a8dd074447',
+      class: "flex"
+    }, h("div", {
+      key: 'cb2fb1c0355b744e53977c573383989be12fe1ad',
+      class: "w-full"
+    }, h("ul", {
+      key: '9ceb752231d8a7764221d45653c4ef73fad4573d',
+      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, primary.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }))))), h("div", {
+      key: '494eaadc1547f91e11d93655b91424f98de6a635',
+      class: "w-full"
+    }, h("ul", {
+      key: '51de6e25df144ab9014ca95ad645a437b6469441',
+      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, incorrect.map(color => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+    }, h("div", {
+      class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    })))))));
+  }
+};
+
+export { IncorrectUseOfColors as incorrect_use_of_colors };

package/index-39c58238.esm.js

@@ -0,0 +1,58 @@
+function r(e) {
+  var t,
+    f,
+    n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length;) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const falsyToString = value => typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config) => {
+  return props => {
+    var ref;
+    if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    const {
+      variants,
+      defaultVariants
+    } = config;
+    const getVariantClassNames = Object.keys(variants).map(variant => {
+      const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+      const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+      if (variantProp === null) return null;
+      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+      return variants[variant][variantKey];
+    });
+    const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+      let [key, value] = param;
+      if (value === undefined) {
+        return acc;
+      }
+      acc[key] = value;
+      return acc;
+    }, {});
+    const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1) => {
+      let {
+        class: cvClass,
+        className: cvClassName,
+        ...compoundVariantOptions
+      } = param1;
+      return Object.entries(compoundVariantOptions).every(param => {
+        let [key, value] = param;
+        return Array.isArray(value) ? value.includes({
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key]) : {
+          ...defaultVariants,
+          ...propsWithoutUndefined
+        }[key] === value;
+      }) ? [...acc, cvClass, cvClassName] : acc;
+    }, []);
+    return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  };
+};
+
+export { cva as c };