@nectary/components 4.12.1 → 5.0.0

package/button-group/index.js

@@ -1,50 +1,52 @@
-import { typeValues } from '../button/utils';
-import { NectaryElement, defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
-import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%}</style><div id="wrapper"><slot></slot></div>';
-const template = document.createElement('template');
+import { typeValues } from "../button/utils.js";
+import { updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { sizeExValues, DEFAULT_SIZE } from "../utils/size.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n  }\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ButtonGroup extends NectaryElement {
+class ButtonGroup extends NectaryElement {
   #$slot;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector('slot');
+    this.#$slot = shadowRoot.querySelector("slot");
   }
   static get observedAttributes() {
-    return ['size', 'type'];
+    return ["size", "type"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'size':
+      case "size":
         for (const $option of this.#$slot.assignedElements()) {
           updateLiteralAttribute($option, sizeExValues, name, newVal);
         }
         break;
-      case 'type':
+      case "type":
         for (const $option of this.#$slot.assignedElements()) {
           updateLiteralAttribute($option, typeValues, name, newVal);
         }
         break;
-      default:
-        break;
     }
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type', 'primary');
+    return getLiteralAttribute(this, typeValues, "type", "primary");
   }
   set size(size) {
-    updateLiteralAttribute(this, sizeExValues, 'size', size);
+    updateLiteralAttribute(this, sizeExValues, "size", size);
   }
   get size() {
-    return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
+    return getLiteralAttribute(this, sizeExValues, "size", DEFAULT_SIZE);
   }
   connectedCallback() {
-    this.setAttribute('role', 'group');
+    this.setAttribute("role", "group");
   }
 }
-defineCustomElement('sinch-button-group', ButtonGroup);
+defineCustomElement("sinch-button-group", ButtonGroup);
+export {
+  ButtonGroup
+};

package/button-group/types.d.ts

@@ -1,6 +1,5 @@
-import type { TSinchButtonProps, TSinchButtonReact } from '../button/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
-export { TSinchButtonReact };
+import type { TSinchButtonProps } from '../button/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchButtonGroupProps = {
     size?: TSinchButtonProps['size'];
     type?: TSinchButtonProps['type'];
@@ -11,3 +10,23 @@ export type TSinchButtonGroup = {
 };
 export type TSinchButtonGroupElement = NectaryComponentVanillaByType<TSinchButtonGroup>;
 export type TSinchButtonGroupReact = NectaryComponentReactByType<TSinchButtonGroup>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button-group': TSinchButtonGroup;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group': NectaryComponentVanilla<'sinch-button-group'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button-group': NectaryComponentReact<'sinch-button-group'>;
+        }
+    }
+}

package/button-group/types.js

@@ -1 +1 @@
-export {};
+

package/button-group-item/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/button-group-item/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-button-group-item");

package/button-group-item/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchButtonGroupItem } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class ButtonGroupItem extends NectaryElement {
     #private;
     constructor();
@@ -15,23 +15,3 @@ export declare class ButtonGroupItem extends NectaryElement {
     get toggled(): boolean;
     get focusable(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-button-group-item': TSinchButtonGroupItem;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-button-group-item': NectaryComponentVanilla<'sinch-button-group-item'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
-        }
-    }
-}

package/button-group-item/index.js

@@ -1,18 +1,20 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}#wrapper{display:flex;box-sizing:border-box;width:100%;height:100%;position:relative}:host(:is(:not(:first-of-type))) #wrapper::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-divider-color);opacity:.3;pointer-events:none;z-index:2;top:10%;bottom:10%;left:-.5px;width:1px}:host([type=primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-primary-default-text-initial)}:host([type=secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-secondary-default-text-initial)}:host([type=subtle-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-primary-default-text-initial)}:host([type=subtle-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-subtle-secondary-default-text-initial)}:host([type=cta-primary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-primary-default-text-initial)}:host([type=cta-secondary]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-cta-secondary-default-text-initial)}:host([type=destructive]) #wrapper::before{--sinch-local-divider-color:var(--sinch-comp-button-color-danger-default-text-initial)}#sinch-button-element{display:flex;box-sizing:border-box;width:100%;height:100%;--sinch-button-shape-radius-base:0;--sinch-button-shape-radius-top-right:0;--sinch-button-shape-radius-top-left:0;--sinch-button-shape-radius-bottom-right:0;--sinch-button-shape-radius-bottom-left:0}:host(:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host(:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="l"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-l)}:host([size="l"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-l);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-l)}:host([size="m"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-m)}:host([size="m"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-m);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-m)}:host([size="s"]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-s)}:host([size="s"]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-s);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-s)}:host([size=xs]:is(:first-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-left:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-left:var(--sinch-comp-button-shape-radius-size-xs)}:host([size=xs]:is(:last-of-type)) #sinch-button-element{--sinch-button-shape-radius-top-right:var(--sinch-comp-button-shape-radius-size-xs);--sinch-button-shape-radius-bottom-right:var(--sinch-comp-button-shape-radius-size-xs)}:host(:is(:not(:first-of-type,:last-of-type))) #sinch-button-element:not(:active){--sinch-button-border-left:none;--sinch-button-border-right:none}:host(:is(:first-of-type)) #sinch-button-element:not(:active){--sinch-button-border-right:none}:host(:is(:last-of-type)) #sinch-button-element:not(:active){--sinch-button-border-left:none}:host(:is([text=""],:not([text]))) :is(#left-icon,#right-icon,#text){display:none}::slotted(*){display:block}</style><div id="wrapper"><sinch-button id="sinch-button-element"><slot id="left-icon" name="left-icon" slot="left-icon"></slot><slot id="icon" name="icon" slot="icon"></slot><slot id="right-icon" name="right-icon" slot="right-icon"></slot></sinch-button></div>';
-const template = document.createElement('template');
+import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  #wrapper {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  /* divider */\n  :host(:is(:not(:first-of-type))) #wrapper::before {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: var(--sinch-local-divider-color);\n    opacity: 0.3;\n    pointer-events: none;\n    z-index: 2;\n    top: 10%;\n    bottom: 10%;\n    left: -0.5px;\n    width: 1px;\n  }\n\n  :host([type="primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-primary-default-text-initial\n      );\n  }\n\n  :host([type="secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-secondary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-primary-default-text-initial\n      );\n  }\n\n  :host([type="subtle-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-subtle-secondary-default-text-initial\n      );\n  }\n\n  :host([type="cta-primary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-primary-default-text-initial\n      );\n  }\n\n  :host([type="cta-secondary"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-cta-secondary-default-text-initial\n      );\n  }\n\n  :host([type="destructive"]) #wrapper::before {\n    --sinch-local-divider-color:\n      var(\n        --sinch-comp-button-color-danger-default-text-initial\n      );\n  }\n\n  /* fix border */\n  #sinch-button-element {\n    display: flex;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n\n    --sinch-button-shape-radius-base: 0;\n    --sinch-button-shape-radius-top-right: 0;\n    --sinch-button-shape-radius-top-left: 0;\n    --sinch-button-shape-radius-bottom-right: 0;\n    --sinch-button-shape-radius-bottom-left: 0;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="l"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="l"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-l\n      );\n  }\n\n  :host([size="m"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="m"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-m\n      );\n  }\n\n  :host([size="s"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="s"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-s\n      );\n  }\n\n  :host([size="xs"]:is(:first-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-left:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host([size="xs"]:is(:last-of-type)) #sinch-button-element {\n    --sinch-button-shape-radius-top-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n    --sinch-button-shape-radius-bottom-right:\n      var(\n        --sinch-comp-button-shape-radius-size-xs\n      );\n  }\n\n  :host(:is(:not(:first-of-type, :last-of-type))) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:first-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-right: none;\n  }\n\n  :host(:is(:last-of-type)) #sinch-button-element:not(:active) {\n    --sinch-button-border-left: none;\n  }\n\n  /* icon-button */\n  :host(:is([text=""], :not([text]))) :is(#left-icon, #right-icon, #text) {\n    display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-button id="sinch-button-element">\n    <slot id="left-icon" name="left-icon" slot="left-icon"></slot>\n    <slot id="icon" name="icon" slot="icon"></slot>\n    <slot id="right-icon" name="right-icon" slot="right-icon"></slot>\n  </sinch-button>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ButtonGroupItem extends NectaryElement {
+class ButtonGroupItem extends NectaryElement {
   #$sinchButton;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$sinchButton = shadowRoot.querySelector('#sinch-button-element');
+    this.#$sinchButton = shadowRoot.querySelector("#sinch-button-element");
   }
   static get observedAttributes() {
-    return ['type', 'size', 'text', 'disabled', 'toggled'];
+    return ["type", "size", "text", "disabled", "toggled"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     updateAttribute(this.#$sinchButton, name, newVal);
@@ -20,61 +22,48 @@ export class ButtonGroupItem extends NectaryElement {
   connectedCallback() {
     super.connectedCallback();
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.setAttribute('role', 'button');
-    const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
-      ...e
-    }));
-    this.addEventListener('-click', e => this.#onClickReactHandler(e), {
-      signal
-    });
-    this.addEventListener('-focus', () => this.#onFocusReactHandler(), {
-      signal
-    });
-    this.addEventListener('-blur', () => this.#onBlurReactHandler(), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-click', e => forwardEvent(e), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-focus', e => forwardEvent(e), {
-      signal
-    });
-    this.#$sinchButton.addEventListener('-blur', e => forwardEvent(e), {
-      signal
-    });
+    const { signal } = this.#controller;
+    this.setAttribute("role", "button");
+    const forwardEvent = (e) => this.dispatchEvent(new CustomEvent(e.type, { ...e }));
+    this.addEventListener("-click", (e) => this.#onClickReactHandler(e), { signal });
+    this.addEventListener("-focus", () => this.#onFocusReactHandler(), { signal });
+    this.addEventListener("-blur", () => this.#onBlurReactHandler(), { signal });
+    this.#$sinchButton.addEventListener("-click", (e) => forwardEvent(e), { signal });
+    this.#$sinchButton.addEventListener("-focus", (e) => forwardEvent(e), { signal });
+    this.#$sinchButton.addEventListener("-blur", (e) => forwardEvent(e), { signal });
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set toggled(isToggled) {
-    updateBooleanAttribute(this, 'toggled', isToggled);
+    updateBooleanAttribute(this, "toggled", isToggled);
   }
   get toggled() {
-    return getBooleanAttribute(this, 'toggled');
+    return getBooleanAttribute(this, "toggled");
   }
   get focusable() {
     return true;
   }
-  #onClickReactHandler = e => {
-    getReactEventHandler(this, 'on-click')?.(e);
+  #onClickReactHandler = (e) => {
+    getReactEventHandler(this, "on-click")?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
 }
-defineCustomElement('sinch-button-group-item', ButtonGroupItem);
+defineCustomElement("sinch-button-group-item", ButtonGroupItem);
+export {
+  ButtonGroupItem
+};

package/button-group-item/types.d.ts

@@ -1,6 +1,5 @@
-import type { TSinchButtonEvents, TSinchButtonProps, TSinchButtonReact } from '../button/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
-export type { TSinchButtonReact };
+import type { TSinchButtonEvents, TSinchButtonProps } from '../button/types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchButtonGroupItemProps = {
     text?: TSinchButtonProps['text'];
     disabled?: TSinchButtonProps['disabled'];
@@ -43,3 +42,23 @@ export type TSinchButtonGroupItem = {
 };
 export type TSinchButtonGroupItemElement = NectaryComponentVanillaByType<TSinchButtonGroupItem>;
 export type TSinchButtonGroupItemReact = NectaryComponentReactByType<TSinchButtonGroupItem>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-button-group-item': TSinchButtonGroupItem;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-button-group-item': NectaryComponentVanilla<'sinch-button-group-item'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-button-group-item': NectaryComponentReact<'sinch-button-group-item'>;
+        }
+    }
+}

package/button-group-item/types.js

@@ -1 +1 @@
-export {};
+

package/card-container/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/card-container/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-card-container");

package/card-container/index.d.ts

@@ -1,25 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class CardContainer extends NectaryElement {
     constructor();
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-card-container': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-container': NectaryComponentVanilla<'sinch-card-container'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
-        }
-    }
-}

package/card-container/index.js

@@ -1,12 +1,15 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-comp-card-color-default-background-initial);border-radius:var(--sinch-comp-card-shape-radius);border:1px solid var(--sinch-comp-card-color-default-border-initial)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
-const template = document.createElement('template');
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    height: 100%;\n    padding: 20px 0;\n    box-sizing: border-box;\n    background-color: var(--sinch-comp-card-color-default-background-initial);\n    border-radius: var(--sinch-comp-card-shape-radius);\n    border: 1px solid var(--sinch-comp-card-color-default-border-initial);\n  }\n\n  #scroll {\n    overflow: auto;\n    height: 100%;\n    box-sizing: border-box;\n    padding: 4px 24px;\n  }\n</style>\n\n<div id="wrapper">\n  <div id="scroll">\n    <slot></slot>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class CardContainer extends NectaryElement {
+class CardContainer extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
 }
-defineCustomElement('sinch-card-container', CardContainer);
+defineCustomElement("sinch-card-container", CardContainer);
+export {
+  CardContainer
+};

package/card-container/types.d.ts

@@ -1,3 +1,23 @@
-import type { NectaryComponentReactByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchCardContainerElement = HTMLElement;
 export type TSinchCardContainerReact = NectaryComponentReactByType<TSinchCardContainerElement>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card-container': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-container': NectaryComponentVanilla<'sinch-card-container'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card-container': NectaryComponentReact<'sinch-card-container'>;
+        }
+    }
+}

package/card-container/types.js

@@ -1 +1 @@
-export {};
+

package/card-v2/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/card-v2/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-card-v2");

package/card-v2/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchCardV2 } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class CardV2 extends NectaryElement {
     #private;
     constructor();
@@ -15,23 +14,3 @@ export declare class CardV2 extends NectaryElement {
     get selected(): boolean;
     set selected(value: boolean);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-card-v2': TSinchCardV2;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-v2': NectaryComponentVanilla<'sinch-card-v2'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
-        }
-    }
-}