tuix-webcomponents 0.70.0 → 0.72.0

package/README.md

@@ -12,8 +12,8 @@ npm i tuix-webcomponents
 
 ### Webbundle version
 
-Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-b93dcb2@0.70.0.js  
-Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-b93dcb2@0.70.0.css
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-76fb234@0.72.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-76fb234@0.72.0.css
 
 ### React .tsx with SSR
 

package/dist/assets/tuix-styles.css

@@ -27,20 +27,32 @@
   --tuix-light-color-section-bg: #FAFAFA;
   --tuix-light-color-shadow: rgba(66, 79, 101, 0.16);
   --tuix-dark-color-primary-50: #F5F5FA;
+  --tuix-dark-color-#f5f5fa: PRIMARY_50;
   --tuix-dark-color-primary-100: #EBEAF4;
+  --tuix-dark-color-#ebeaf4: PRIMARY_100;
   --tuix-dark-color-primary-200: #D1D1E6;
+  --tuix-dark-color-#d1d1e6: PRIMARY_200;
   --tuix-dark-color-primary-300: #A8A9D1;
+  --tuix-dark-color-#a8a9d1: PRIMARY_300;
   --tuix-dark-color-main: #7A7CB6;
   --tuix-dark-color-dark-main: #33355B;
+  --tuix-dark-color-#33355b: DARK_MAIN;
   --tuix-dark-color-primary-600: #454584;
+  --tuix-dark-color-#454584: PRIMARY_600;
   --tuix-dark-color-primary-700: #3A396B;
+  --tuix-dark-color-#3a396b: PRIMARY_700;
   --tuix-dark-color-primary-800: #32325A;
+  --tuix-dark-color-#32325a: PRIMARY_800;
   --tuix-dark-color-primary-900: #2E2D4D;
+  --tuix-dark-color-#2e2d4d: PRIMARY_900;
   --tuix-dark-color-primary-950: #1F1E33;
+  --tuix-dark-color-#1f1e33: PRIMARY_950;
   --tuix-dark-color-secondary: #BBADFF;
+  --tuix-dark-color-#bbadff: SECONDARY;
   --tuix-dark-color-white: rgba(255, 255, 255, 0.87);
   --tuix-dark-color-black: #121212;
   --tuix-dark-color-neutral-200: #C9C8D3;
+  --tuix-dark-color-#c9c8d3: NEUTRAL_200;
   --tuix-dark-color-neutral-600: rgba(255, 255, 255, 0.60);
   --tuix-dark-color-success: #82C5A9;
   --tuix-dark-color-success-50: rgba(241, 249, 245, 0.30);
@@ -50,6 +62,7 @@
   --tuix-dark-color-error: #FF8486;
   --tuix-dark-color-error-50: rgba(255, 132, 134, 0.20);
   --tuix-dark-color-error-200: #FFD8D8;
+  --tuix-dark-color-#ffd8d8: ERROR_200;
   --tuix-dark-color-section-bg: #0E0E0E;
   --tuix-dark-color-elevation-1: #17171A;
   --tuix-dark-color-elevation-2: #1A1A1F;

package/dist/src/index.d.ts

@@ -1,10 +1,10 @@
-export { CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
-export { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
-export { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
-export { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
-export { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
-export { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
-export { DetailValue } from './utils/interfaces/detail-value.interface.js';
+export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
+export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
+export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
+export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
 export { TuixText } from './tuix-text/TuixText.js';
 export { TuixIcon } from './tuix-icon/TuixIcon.js';
 export { TuixButton } from './tuix-button/TuixButton.js';
@@ -17,7 +17,7 @@ export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
 export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
 export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
 export { TuixTable } from './tuix-table/TuixTable.js';
-export { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
 export { TuixToast } from './tuix-toast/TuixToast.js';
 export { TuixModal } from './tuix-modal/TuixModal.js';
 export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';

package/dist/src/index.js

@@ -40,4 +40,3 @@ export function loadFonts() {
     document.head.appendChild(link2);
     document.head.appendChild(link3);
 }
-//# sourceMappingURL=index.js.map

package/dist/src/tuix-button/TuixBaseButton.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { MainVariant } from '../utils/mainVariant.enum.js';
 import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
 import '../tuix-icon/TuixIcon.js';

package/dist/src/tuix-button/TuixBaseButton.js

@@ -16,8 +16,7 @@ export class TuixBaseButton extends LitElement {
         this._updateIconColor();
     }
     _getTextColor() {
-        var _a;
-        const element = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button');
+        const element = this.shadowRoot?.querySelector('.button');
         if (!element)
             return buttonTextColor[this.variant];
         const computedStyle = getComputedStyle(element);
@@ -59,4 +58,3 @@ __decorate([
 __decorate([
     state()
 ], TuixBaseButton.prototype, "iconColor", void 0);
-//# sourceMappingURL=TuixBaseButton.js.map

package/dist/src/tuix-button/TuixButton.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { TuixBaseButton } from './TuixBaseButton.js';
 export declare class TuixButton extends TuixBaseButton {

package/dist/src/tuix-button/TuixButton.js

@@ -10,25 +10,8 @@ let TuixButton = class TuixButton extends TuixBaseButton {
         super(...arguments);
         this.full = false;
     }
-    _updateIconColor() {
-        if (!this.iconLeft && !this.iconRight)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        let iconSize = IconSizeVariant.MEDIUM;
-        if (screen.width <= ScreenSizes.TABLET) {
-            iconSize = IconSizeVariant.SMALL;
-        }
-        return html ` <div class="container">
-      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
-      <slot></slot>
-      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
-    </div>`;
-    }
-};
-TuixButton.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host([full]) .button {
         width: 100%;
       }
@@ -65,10 +48,27 @@ TuixButton.styles = [
         }
       }
     `,
-    hostButtonStyles,
-    buttonColorStyles,
-    buttonSizeStyles,
-];
+        hostButtonStyles,
+        buttonColorStyles,
+        buttonSizeStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
+    }
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TuixButton.prototype, "full", void 0);
@@ -82,4 +82,3 @@ TuixButton = __decorate([
     customElement('tuix-button')
 ], TuixButton);
 export { TuixButton };
-//# sourceMappingURL=TuixButton.js.map

package/dist/src/tuix-button/TuixButton.styles.js

@@ -105,4 +105,3 @@ export const buttonColorStyles = css `
     cursor: not-allowed;
   }
 `;
-//# sourceMappingURL=TuixButton.styles.js.map

package/dist/src/tuix-button/enums/tuix-button.enums.js

@@ -4,4 +4,3 @@ export const buttonTextColor = {
     [MainVariant.PRIMARY]: Palette.WHITE,
     [MainVariant.SECONDARY]: Palette.MAIN,
 };
-//# sourceMappingURL=tuix-button.enums.js.map

package/dist/src/tuix-button/interfaces/tuix-button.interface.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=tuix-button.interface.js.map

package/dist/src/tuix-checkbox/TuixCheckbox.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { CheckboxLabelSide } from './enums/tuix-checkbox.enums.js';
 export declare class TuixCheckbox extends LitElement {
     static styles: import("lit").CSSResult[];

package/dist/src/tuix-checkbox/TuixCheckbox.js

@@ -16,6 +16,12 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
         this.label = '';
         this.labelSide = CheckboxLabelSide.RIGHT;
     }
+    static { this.styles = [
+        hostStyles,
+        checkboxContainerStyles,
+        checkboxCheckmarkStyles,
+        checkboxLabelStyles,
+    ]; }
     _onCheckboxChange(event) {
         this.dispatchEvent(new CustomEvent('change', {
             detail: {
@@ -76,12 +82,6 @@ let TuixCheckbox = class TuixCheckbox extends LitElement {
     </label>`;
     }
 };
-TuixCheckbox.styles = [
-    hostStyles,
-    checkboxContainerStyles,
-    checkboxCheckmarkStyles,
-    checkboxLabelStyles,
-];
 __decorate([
     property({ type: Boolean })
 ], TuixCheckbox.prototype, "checked", void 0);
@@ -104,4 +104,3 @@ TuixCheckbox = __decorate([
     customElement('tuix-checkbox')
 ], TuixCheckbox);
 export { TuixCheckbox };
-//# sourceMappingURL=TuixCheckbox.js.map

package/dist/src/tuix-checkbox/TuixCheckbox.styles.js

@@ -130,4 +130,3 @@ export const checkboxLabelStyles = css `
     margin-left: 0;
   }
 `;
-//# sourceMappingURL=TuixCheckbox.styles.js.map

package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.js

@@ -21,4 +21,3 @@ export const CheckboxIconColorDark = {
     [CheckboxIconMode.DISABLED]: DarkPalette.PRIMARY_100,
     [CheckboxIconMode.ERROR]: DarkPalette.WHITE,
 };
-//# sourceMappingURL=tuix-checkbox.enums.js.map

package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.d.ts

@@ -1,4 +1,4 @@
-import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export interface DetailValueCheckbox extends DetailValue<boolean> {
     label?: string;
 }

package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=tuix-checkbox.interface.js.map

package/dist/src/tuix-dropdown/TuixDropdown.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { TuixDropdownExtendedOption, TuixDropdownOption } from './interfaces/tuix-dropdown.interface.js';
 import { DescriptionType } from '../tuix-input/enums/tuix-input.enums.js';
 import { DropdownType } from './enums/tuix-dropdown.enums.js';
 export declare class TuixDropdown extends LitElement {

package/dist/src/tuix-dropdown/TuixDropdown.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
@@ -29,6 +29,11 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             }
         };
     }
+    static { this.styles = [
+        dropdownHostStyles,
+        dropdownMainContainerStyles,
+        dropdownOptionStyles,
+    ]; }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener('click', this._handleClickOutside);
@@ -90,9 +95,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _handleBlur() {
-        var _a;
         if (this.type === DropdownType.SEARCH && this._searchingOption) {
-            const optionIndex = (_a = this._previousSelectedOption) === null || _a === void 0 ? void 0 : _a.getAttribute('data-value');
+            const optionIndex = this._previousSelectedOption?.getAttribute('data-value');
             const selectedValue = typeof optionIndex === 'string'
                 ? this.options[Number(optionIndex)]
                 : '';
@@ -101,7 +105,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _getOptionName(option) {
-        return String(typeof option === 'object' ? option === null || option === void 0 ? void 0 : option.name : option);
+        return String(typeof option === 'object' ? option?.name : option);
     }
     _getOptionValue(option) {
         return typeof option === 'object' ? option.value : option;
@@ -137,30 +141,28 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         });
     }
     _handleArrowDown() {
-        var _a;
-        const nextOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+        const nextOption = this._previousFocusedOption
+            ?.nextElementSibling;
         if (nextOption) {
             this._focusTargetOption(nextOption);
         }
     }
     _handleArrowUp() {
-        var _a;
-        const previousOption = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+        const previousOption = this._previousFocusedOption
+            ?.previousElementSibling;
         if (previousOption) {
             this._focusTargetOption(previousOption);
         }
     }
     _focusTargetOption(targetOption, extrict = true) {
-        var _a, _b;
-        (_b = (_a = this._previousFocusedOption) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('t-option-hover');
-        targetOption === null || targetOption === void 0 ? void 0 : targetOption.classList.add('t-option-hover');
+        this._previousFocusedOption?.classList?.remove('t-option-hover');
+        targetOption?.classList.add('t-option-hover');
         if (extrict) {
-            targetOption === null || targetOption === void 0 ? void 0 : targetOption.focus();
+            targetOption?.focus();
         }
         this._previousFocusedOption = targetOption;
     }
     _toggleOptions() {
-        var _a, _b, _c, _d;
         if (this.disabled) {
             return;
         }
@@ -168,15 +170,14 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         if (this._isOptionsVisible &&
             this.type === DropdownType.SEARCH &&
             this._previousSelectedOption) {
-            (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            this._optionsContainer?.scrollTo({
                 top: this._previousSelectedOption.offsetTop,
                 behavior: 'auto',
             });
-            (_d = (_c = (_b = this._inputDropdown) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input')) === null || _d === void 0 ? void 0 : _d.select();
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.select();
         }
     }
     _focusOptionsContainer() {
-        var _a, _b, _c;
         if (this.type === DropdownType.SEARCH) {
             if (this._previousSelectedOption) {
                 this._focusTargetOption(this._previousSelectedOption, false);
@@ -184,7 +185,7 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             return;
         }
         if (!this._isOptionsVisible || !this._optionsContainer) {
-            (_c = (_b = (_a = this._inputDropdown) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+            this._inputDropdown?.shadowRoot?.querySelector('input')?.focus();
             return;
         }
         if (this._previousSelectedOption) {
@@ -199,9 +200,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         }
     }
     _unselectPreviousOption() {
-        var _a;
         if (this._previousSelectedOption) {
-            (_a = this._previousSelectedOption.classList) === null || _a === void 0 ? void 0 : _a.remove('t-option-selected');
+            this._previousSelectedOption.classList?.remove('t-option-selected');
             this._previousSelectedOption = null;
         }
     }
@@ -220,7 +220,6 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         };
     }
     _triggerUpdateByExternalValueChange() {
-        var _a;
         this._unselectPreviousOption();
         if (!this.value) {
             this._value = '';
@@ -235,8 +234,8 @@ let TuixDropdown = class TuixDropdown extends LitElement {
             this._value = '';
             return;
         }
-        const optionTarget = (_a = this._optionsContainer) === null || _a === void 0 ? void 0 : _a.children[index];
-        optionTarget === null || optionTarget === void 0 ? void 0 : optionTarget.classList.add('t-option-selected');
+        const optionTarget = this._optionsContainer?.children[index];
+        optionTarget?.classList.add('t-option-selected');
         this._previousSelectedOption = optionTarget || null;
         this._value = optionTarget ? this._getOptionName(this.options[index]) : '';
     }
@@ -245,11 +244,10 @@ let TuixDropdown = class TuixDropdown extends LitElement {
         this._unselectPreviousOption();
     }
     _getOptionsTemplate() {
-        var _a;
         if (this.type === DropdownType.SINGLE || this._searchingOption === false) {
             this._extendOptionsList();
         }
-        return (_a = this._extendedOptions) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+        return this._extendedOptions?.map((option, index) => {
             return html `<div
         class="${classMap({
                 't-dropdown-option': true,
@@ -311,11 +309,6 @@ let TuixDropdown = class TuixDropdown extends LitElement {
     </div>`;
     }
 };
-TuixDropdown.styles = [
-    dropdownHostStyles,
-    dropdownMainContainerStyles,
-    dropdownOptionStyles,
-];
 __decorate([
     property({ type: Object })
 ], TuixDropdown.prototype, "value", void 0);
@@ -365,4 +358,3 @@ TuixDropdown = __decorate([
     customElement('tuix-dropdown')
 ], TuixDropdown);
 export { TuixDropdown };
-//# sourceMappingURL=TuixDropdown.js.map

package/dist/src/tuix-dropdown/TuixDropdown.styles.js

@@ -123,4 +123,3 @@ export const dropdownOptionStyles = css `
     }
   }
 `;
-//# sourceMappingURL=TuixDropdown.styles.js.map

package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js

@@ -3,4 +3,3 @@ export var DropdownType;
     DropdownType["SINGLE"] = "single";
     DropdownType["SEARCH"] = "search";
 })(DropdownType || (DropdownType = {}));
-//# sourceMappingURL=tuix-dropdown.enums.js.map

package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.d.ts

@@ -1,5 +1,5 @@
-import { CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
-import { DetailValue } from '../../utils/interfaces/detail-value.interface.js';
+import { type CustomEventTuixInput } from '../../tuix-input/interfaces/tuix-input.interface.js';
+import { type DetailValue } from '../../utils/interfaces/detail-value.interface.js';
 export type TuixDropdownPlainOption = string | number | boolean;
 export interface TuixDropdownObjectOption {
     name: string;

package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=tuix-dropdown.interface.js.map

package/dist/src/tuix-icon/TuixIcon.icons.d.ts

@@ -1,6 +1,6 @@
-import { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { IconName } from './enums/tuix-icon.enums.js';
-export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => TemplateResult;
+export declare const iconTemplate: (name?: IconName, color?: string, fill?: string) => ReturnType<typeof html>;
 type IconContentMapType = Record<IconName, string>;
 export declare const iconContentMap: IconContentMapType;
 export {};

package/dist/src/tuix-icon/TuixIcon.icons.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Palette } from '../utils/colors.js';
 import { IconName } from './enums/tuix-icon.enums.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 export const iconTemplate = (name, color = Palette.BLACK, fill) => {
     const iconName = name || IconName.ARROW_DOWN;
     const iconContent = iconContentMap[iconName];
@@ -286,9 +286,5 @@ export const iconContentMap = {
   </svg>`,
     [IconName.ACCESS_TOKEN]: `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M16.2054 7.5L19.7054 4M21.7054 2L19.7054 4L21.7054 2ZM12.0954 11.61C12.6117 12.1195 13.0222 12.726 13.3031 13.3948C13.5841 14.0635 13.7299 14.7813 13.7324 15.5066C13.7348 16.232 13.5937 16.9507 13.3173 17.6213C13.0408 18.2919 12.6344 18.9012 12.1215 19.4141C11.6086 19.9271 10.9993 20.3334 10.3287 20.6099C9.65804 20.8864 8.93935 21.0275 8.21398 21.025C7.48862 21.0226 6.7709 20.8767 6.10214 20.5958C5.43339 20.3148 4.82682 19.9043 4.31735 19.388C3.31548 18.3507 2.76111 16.9614 2.77365 15.5193C2.78618 14.0772 3.36461 12.6977 4.38435 11.678C5.40409 10.6583 6.78356 10.0798 8.22565 10.0673C9.66773 10.0548 11.057 10.6091 12.0944 11.611L12.0954 11.61ZM12.0954 11.61L16.2054 7.5L12.0954 11.61ZM16.2054 7.5L19.2054 10.5L22.7054 7L19.7054 4L16.2054 7.5Z" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>`,
-    [IconName.RESIZE]: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V14M3 3V9M3 3H9M3 3L15 15" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>`,
 };
-//# sourceMappingURL=TuixIcon.icons.js.map

package/dist/src/tuix-icon/TuixIcon.js

@@ -13,6 +13,19 @@ let TuixIcon = class TuixIcon extends LitElement {
         this.size = IconSizeVariant.SMALL;
         this.dark = false;
     }
+    static { this.styles = css `
+    .icon-component {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `; }
     _getSelectedColor(color) {
         let selectedColor = color || this.color || TextVariant.PRIMARY;
         if (Object.values(TextVariant).includes(selectedColor)) {
@@ -33,8 +46,7 @@ let TuixIcon = class TuixIcon extends LitElement {
         return iconTemplate(this.name, this._getSelectedColor(), this._getSelectedFill());
     }
     render() {
-        var _a;
-        const selectedSize = (_a = iconSize[this.size]) !== null && _a !== void 0 ? _a : iconSize[IconSizeVariant.SMALL];
+        const selectedSize = iconSize[this.size] ?? iconSize[IconSizeVariant.SMALL];
         const dynamicStyles = {
             width: selectedSize,
             height: selectedSize,
@@ -46,19 +58,6 @@ let TuixIcon = class TuixIcon extends LitElement {
     `;
     }
 };
-TuixIcon.styles = css `
-    .icon-component {
-      width: 24px;
-      height: 24px;
-      display: block;
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-  `;
 __decorate([
     property({ type: IconName })
 ], TuixIcon.prototype, "name", void 0);
@@ -78,4 +77,3 @@ TuixIcon = __decorate([
     customElement('tuix-icon')
 ], TuixIcon);
 export { TuixIcon };
-//# sourceMappingURL=TuixIcon.js.map

package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts

@@ -58,6 +58,5 @@ export declare enum IconName {
     HOLIDAYS = "holidays",
     TRENDING_UP = "trending-up",
     ARCHIVE = "archive",
-    ACCESS_TOKEN = "access-token",
-    RESIZE = "resize"
+    ACCESS_TOKEN = "access-token"
 }

package/dist/src/tuix-icon/enums/tuix-icon.enums.js

@@ -66,6 +66,4 @@ export var IconName;
     IconName["TRENDING_UP"] = "trending-up";
     IconName["ARCHIVE"] = "archive";
     IconName["ACCESS_TOKEN"] = "access-token";
-    IconName["RESIZE"] = "resize";
 })(IconName || (IconName = {}));
-//# sourceMappingURL=tuix-icon.enums.js.map

package/dist/src/tuix-icon-button/TuixIconButton.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { TuixBaseButton } from '../tuix-button/TuixBaseButton.js';
 export declare class TuixIconButton extends TuixBaseButton {

package/dist/src/tuix-icon-button/TuixIconButton.js

@@ -10,17 +10,8 @@ let TuixIconButton = class TuixIconButton extends TuixBaseButton {
         super(...arguments);
         this.icon = IconName.ARROW_DOWN;
     }
-    _updateIconColor() {
-        if (!this.icon)
-            return;
-        this.iconColor = this._getTextColor();
-    }
-    _buttonContent() {
-        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
-    }
-};
-TuixIconButton.styles = [
-    css `
+    static { this.styles = [
+        css `
       .button {
         padding: 16px;
         border-radius: 4px;
@@ -39,9 +30,18 @@ TuixIconButton.styles = [
         }
       }
     `,
-    hostButtonStyles,
-    buttonColorStyles,
-];
+        hostButtonStyles,
+        buttonColorStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.icon)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        return html `${this._iconTemplate(this.icon, IconSizeVariant.MEDIUM)}`;
+    }
+};
 __decorate([
     property({ type: IconName })
 ], TuixIconButton.prototype, "icon", void 0);
@@ -49,4 +49,3 @@ TuixIconButton = __decorate([
     customElement('tuix-icon-button')
 ], TuixIconButton);
 export { TuixIconButton };
-//# sourceMappingURL=TuixIconButton.js.map

package/dist/src/tuix-input/TuixInput.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, CSSResult, PropertyValueMap } from 'lit';
+import { LitElement, type TemplateResult, CSSResult, type PropertyValueMap } from 'lit';
 import '../tuix-icon/TuixIcon.js';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
 import { DescriptionType, InputType } from './enums/tuix-input.enums.js';