tuix-webcomponents 0.63.0 → 0.64.0

package/dist/src/tuix-input/TuixInput.js

@@ -1,370 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import '../tuix-icon/TuixIcon.js';
-import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
-import { Palette } from '../utils/colors.js';
-import { DarkPalette } from '../utils/darkColors.js';
-import { hostStyles, inputColorStyles, inputComponentStyles, inputDescriptionStyles, inputFontStyles, inputIconStyles, inputSearchStyles, inputTitleStyles, } from './TuixInput.styles.js';
-import { DescriptionType, IconByDescriptionType, IconDescriptionColorDark, IconDescriptionColorLight, InputIconLocation, InputType, } from './enums/tuix-input.enums.js';
-import { InputState, } from './interfaces/tuix-input.interface.js';
-import { v4 as uuidv4 } from 'uuid';
-let TuixInput = class TuixInput extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._inputId = this._setIdInput();
-        this.disabled = false;
-        this.value = '';
-        this.placeholder = '';
-        this.title = '';
-        this.type = InputType.TEXT;
-        this.descriptionType = DescriptionType.TEXT;
-        this.dark = false;
-        this.readonly = false;
-        this.autofocus = false;
-        this._type = this.type;
-        this._letterCounter = this.value?.length || 0;
-        this._previousType = this.type;
-        this._previousValue = '';
-        this._generalIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.MAIN,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        this._generalIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.MAIN,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-    }
-    static { this.styles = [
-        hostStyles,
-        inputComponentStyles,
-        inputFontStyles,
-        inputColorStyles,
-        inputTitleStyles,
-        inputIconStyles,
-        inputSearchStyles,
-        inputDescriptionStyles,
-    ]; }
-    _handleInputBase(e, eventName) {
-        this.dispatchEvent(new CustomEvent(eventName, {
-            detail: {
-                value: (e.target instanceof HTMLInputElement ||
-                    e.target instanceof HTMLTextAreaElement) &&
-                    e.target.value,
-            },
-            bubbles: true,
-        }));
-    }
-    _handleClickOnInput() {
-        if (this.disabled)
-            return;
-        this.dispatchEvent(new CustomEvent('on-click', {
-            bubbles: true,
-        }));
-    }
-    _handleInput(e) {
-        this._handleInputBase(e, 'on-change');
-        this._updateLetterCounter();
-    }
-    _handleBlur(e) {
-        this._handleInputBase(e, 'on-blur');
-    }
-    _handlePasswordIconClick() {
-        if (this._type === InputType.PASSWORD) {
-            this._type = InputType.TEXT;
-            this._inputElement.setAttribute('type', InputType.TEXT);
-        }
-        else {
-            this._type = InputType.PASSWORD;
-            this._inputElement.setAttribute('type', InputType.PASSWORD);
-        }
-    }
-    _formatIconSet({ iconName, colorByState, location = InputIconLocation.RIGHT, clickHandler = undefined, }) {
-        const iconSetContainerClasses = {
-            't-icon-set-container': true,
-            't-icon-click': !!clickHandler,
-            [`t-icon-${location}`]: true,
-        };
-        return html `<div
-      class="${classMap(iconSetContainerClasses)}"
-      @click="${clickHandler}"
-    >
-      ${Object.entries(colorByState).map(([state, color]) => html `<tuix-icon
-          size="${IconSizeVariant.FULL}"
-          name="${iconName}"
-          color="${color}"
-          class="t-icon-${state}"
-        ></tuix-icon>`)}
-    </div>`;
-    }
-    _updateLetterCounter() {
-        if (this.maxlength != undefined && this.type === InputType.TEXT_AREA) {
-            this._letterCounter = Number(this._inputElement.value?.length);
-        }
-    }
-    _getInputTextFeatureTemplate() {
-        return html `${this.iconRight
-            ? this._formatIconSet({
-                iconName: this.iconRight,
-                colorByState: this.dark
-                    ? this._generalIconColorsDark
-                    : this._generalIconColorsLight,
-            })
-            : nothing}`;
-    }
-    _getInputSearchFeatureTemplate() {
-        const searchIconColorsLight = {
-            [InputState.INACTIVE]: Palette.BLACK,
-            [InputState.ACTIVE]: Palette.BLACK,
-            [InputState.DISABLED]: Palette.PRIMARY_300,
-        };
-        const searchIconColorsDark = {
-            [InputState.INACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.ACTIVE]: DarkPalette.PRIMARY_100,
-            [InputState.DISABLED]: DarkPalette.PRIMARY_800,
-        };
-        return html `${this._formatIconSet({
-            iconName: IconName.SEARCH,
-            colorByState: this.dark ? searchIconColorsDark : searchIconColorsLight,
-            location: InputIconLocation.LEFT,
-        })}`;
-    }
-    _getInputPasswordFeatureTemplate() {
-        return html `${this._formatIconSet({
-            iconName: this._type === InputType.PASSWORD
-                ? IconName.EYE_CLOSE_LINE
-                : IconName.EYE_ON,
-            colorByState: this.dark
-                ? this._generalIconColorsDark
-                : this._generalIconColorsLight,
-            clickHandler: this._handlePasswordIconClick,
-        })} `;
-    }
-    _getFeatureTemplateByInputType() {
-        switch (this.type) {
-            case InputType.SEARCH:
-                return this._getInputSearchFeatureTemplate();
-            case InputType.TEXT:
-                return this._getInputTextFeatureTemplate();
-            case InputType.PASSWORD:
-                return this._getInputPasswordFeatureTemplate();
-            default:
-                return html `${nothing}`;
-        }
-    }
-    _getInputElementClasses() {
-        const hasIconRight = this.type === InputType.PASSWORD || this.type === InputType.TEXT
-            ? !!this.iconRight
-            : false;
-        return {
-            't-input': true,
-            't-textarea': this.type === InputType.TEXT_AREA,
-            'with-title': !!this.title,
-            'with-icon-right': hasIconRight,
-            [`with-${this.descriptionType}`]: this.descriptionType !== DescriptionType.TEXT,
-        };
-    }
-    _getInputContainerClasses() {
-        return {
-            't-input-container': true,
-            't-textarea-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _getMainContainerClasses() {
-        return {
-            't-textarea-main-container': this.type === InputType.TEXT_AREA,
-        };
-    }
-    _setIdInput() {
-        return uuidv4();
-    }
-    _getInputTemplate() {
-        return html `<input
-      id=${this._inputId}
-      type="text"
-      class="${classMap(this._getInputElementClasses())}"
-      ?disabled="${this.disabled}"
-      ?readonly="${this.readonly}"
-      .value="${this.value}"
-      .type="${this.type}"
-      placeholder="${this.placeholder || ' '}"
-      maxlength="${this.maxlength}"
-      @input="${this._handleInput}"
-      @blur="${this._handleBlur}"
-    >
-    </input>
-    ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing}
-    ${this._getFeatureTemplateByInputType()}
-    `;
-    }
-    _getLetterCounterTemplate() {
-        if (!this._hasLetterCounter()) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-letter-counter">
-      ${this.maxlength
-            ? html `${this._letterCounter}/${this.maxlength}`
-            : nothing}
-    </div> `;
-    }
-    _hasLetterCounter() {
-        return (this.type === InputType.TEXT_AREA &&
-            typeof this.maxlength === 'number' &&
-            this.maxlength >= 0);
-    }
-    _getTextAreaTemplate() {
-        return html `<textarea
-        id="${this._inputId}"
-        class="${classMap(this._getInputElementClasses())}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        .value="${this.value}"
-        placeholder="${this.placeholder}"
-        maxlength="${this.maxlength}"
-        @input="${this._handleInput}"
-        @blur="${this._handleBlur}"
-      ></textarea>
-      ${this.title
-            ? html `<label for=${this._inputId} class="t-title"
-            >${this.title}</label
-          >`
-            : nothing} `;
-    }
-    _getIconDescriptionTemplate() {
-        if (!this.descriptionType ||
-            this.descriptionType === DescriptionType.TEXT) {
-            return html `${nothing}`;
-        }
-        return html `<tuix-icon
-      size="${IconSizeVariant.SMALL}"
-      name="${IconByDescriptionType[this.descriptionType]}"
-      color="${this.dark
-            ? IconDescriptionColorDark[this.descriptionType]
-            : IconDescriptionColorLight[this.descriptionType]}"
-    >
-    </tuix-icon>`;
-    }
-    _getDescriptionTemplate() {
-        const isValidDescriptionType = this._hasValidDescriptionType();
-        if (!isValidDescriptionType) {
-            return html `<div></div>`;
-        }
-        const defaultDescription = {
-            [DescriptionType.WARNING]: 'Warning',
-            [DescriptionType.ERROR]: 'Error',
-            [DescriptionType.SUCCESS]: 'Success',
-            [DescriptionType.LOADING]: 'Loading',
-            [DescriptionType.TEXT]: '',
-        };
-        return html `<div class="t-input-description">
-      ${this._getIconDescriptionTemplate()}
-      <span
-        >${this.description ?? defaultDescription[this.descriptionType]}</span
-      >
-    </div>`;
-    }
-    _hasValidDescriptionType() {
-        return Object.values(DescriptionType).includes(this.descriptionType);
-    }
-    _getDescriptionContainerTemplate() {
-        const hasLetterCounter = this._hasLetterCounter();
-        const hasDescription = this._hasValidDescriptionType() &&
-            (this.descriptionType === DescriptionType.TEXT
-                ? !!this.description
-                : true);
-        if (!hasLetterCounter && !hasDescription) {
-            return html `${nothing}`;
-        }
-        return html `<div class="t-input-description-container">
-      ${this._getDescriptionTemplate()} ${this._getLetterCounterTemplate()}
-    </div>`;
-    }
-    render() {
-        if (this._previousType !== this.type) {
-            this._previousType = this.type;
-            this._type = this.type;
-        }
-        if (this._previousValue !== this.value) {
-            this._previousValue = this.value;
-            this._letterCounter = this.value.length;
-        }
-        return html `<div class="${classMap(this._getMainContainerClasses())}">
-      <div
-        class="${classMap(this._getInputContainerClasses())}"
-        @click="${this._handleClickOnInput}"
-      >
-        ${this.type === InputType.TEXT_AREA
-            ? this._getTextAreaTemplate()
-            : this._getInputTemplate()}
-      </div>
-      ${this._getDescriptionContainerTemplate()}
-    </div>`;
-    }
-    updated(changedProperties) {
-        for (const [propName] of changedProperties) {
-            if (this.disabled || this.readonly)
-                break;
-            if (String(propName) !== 'autofocus')
-                continue;
-            if (this.autofocus) {
-                this._inputElement.focus();
-            }
-        }
-    }
-};
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "disabled", void 0);
-__decorate([
-    property({ type: IconName })
-], TuixInput.prototype, "iconRight", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "title", void 0);
-__decorate([
-    property({ type: InputType })
-], TuixInput.prototype, "type", void 0);
-__decorate([
-    property({ type: Number })
-], TuixInput.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: String })
-], TuixInput.prototype, "description", void 0);
-__decorate([
-    property({ type: DescriptionType })
-], TuixInput.prototype, "descriptionType", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "dark", void 0);
-__decorate([
-    property({ type: Boolean })
-], TuixInput.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], TuixInput.prototype, "autofocus", void 0);
-__decorate([
-    query('.t-input-container .t-input')
-], TuixInput.prototype, "_inputElement", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_type", void 0);
-__decorate([
-    state()
-], TuixInput.prototype, "_letterCounter", void 0);
-TuixInput = __decorate([
-    customElement('tuix-input')
-], TuixInput);
-export { TuixInput };

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

@@ -1,8 +0,0 @@
-export declare const hostStyles: import("lit").CSSResult;
-export declare const inputComponentStyles: import("lit").CSSResult;
-export declare const inputFontStyles: import("lit").CSSResult;
-export declare const inputColorStyles: import("lit").CSSResult;
-export declare const inputTitleStyles: import("lit").CSSResult;
-export declare const inputIconStyles: import("lit").CSSResult;
-export declare const inputSearchStyles: import("lit").CSSResult;
-export declare const inputDescriptionStyles: import("lit").CSSResult;

package/dist/src/tuix-input/TuixInput.styles.js

@@ -1,295 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import { ScreenSizes } from '../utils/screenSizes.enum';
-import { Palette } from '../utils/colors';
-import { DarkPalette } from '../utils/darkColors';
-import { hexToRgb } from '../utils/hex-rgb';
-const inputVars = {
-    gapX: '10px',
-    iconDesktopSize: '1.5rem',
-    iconMobileSize: '1rem',
-    paddingX: '1.25rem',
-};
-const rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);
-const rgbDarkError = hexToRgb(DarkPalette.ERROR);
-export const hostStyles = css `
-  :host {
-    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};
-    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_600)};
-    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};
-    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};
-    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};
-    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};
-    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};
-    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};
-    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};
-    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};
-    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};
-    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};
-    --t-field-input-cursor: auto;
-    --t-field-font-size: 1rem;
-    --t-field-font-weight: 300;
-    --t-field-line-height: 1.25rem;
-    --t-field-padding-x: 1.25rem;
-    --t-field-padding-y: 1.125rem;
-    --t-field-padding-top: 1.625rem;
-    --t-field-padding-bottom: 0.625rem;
-    --t-field-title-left-position: 1.25rem;
-  }
-  :host([dark]) {
-    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};
-    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};
-    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};
-    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};
-    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
-    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};
-    --t-field-color-bg-validation: rgba(
-      ${rgbDarkValidation.r},
-      ${rgbDarkValidation.g},
-      ${rgbDarkValidation.b},
-      0.2
-    );
-    --t-field-color-bg-error: rgba(
-      ${rgbDarkError.r},
-      ${rgbDarkError.g},
-      ${rgbDarkError.b},
-      0.2
-    );
-    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};
-  }
-`;
-export const inputComponentStyles = css `
-  .t-textarea-main-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-  }
-  .t-input-container {
-    position: relative;
-    --t-padding-x-desktop-with-icon: calc(
-      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconDesktopSize)} +
-        ${unsafeCSS(inputVars.gapX)}
-    );
-    --t-padding-x-mobile-with-icon: calc(
-      var(--t-field-padding-x) + ${unsafeCSS(inputVars.iconMobileSize)} +
-        ${unsafeCSS(inputVars.gapX)}
-    );
-    --t-border-size: 1px;
-  }
-  .t-input-container.t-textarea-container {
-    height: 100%;
-  }
-  .t-input {
-    padding: calc(var(--t-field-padding-y) - var(--t-border-size))
-      var(--t-field-padding-x);
-    border-radius: 4px;
-    font-family: 'Rubik', sans-serif;
-    cursor: var(--t-field-input-cursor);
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .t-input.t-textarea {
-    height: 100%;
-    display: block;
-  }
-  .t-input.with-title {
-    padding-top: calc(var(--t-field-padding-top) - var(--t-border-size));
-    padding-bottom: calc(var(--t-field-padding-bottom) - var(--t-border-size));
-  }
-  .t-input.with-icon-right {
-    padding-right: var(--t-padding-x-desktop-with-icon);
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input.with-icon-right {
-      padding-right: var(--t-padding-x-mobile-with-icon);
-    }
-  }
-`;
-export const inputFontStyles = css `
-  .t-input::placeholder,
-  .t-input,
-  .t-title {
-    font-size: var(--t-field-font-size);
-    font-weight: var(--t-field-font-weight);
-    line-height: var(--t-field-line-height);
-  }
-  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    :host {
-      --t-field-font-size: 0.813rem;
-      --t-field-line-height: 1.125rem;
-      --t-field-padding-y: 1.063rem;
-      --t-field-padding-top: 1.5rem;
-    }
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    :host {
-      --t-field-font-size: 0.813rem;
-      --t-field-line-height: 1rem;
-      --t-field-padding-y: 1rem;
-      --t-field-padding-top: 1.375rem;
-    }
-  }
-`;
-export const inputColorStyles = css `
-  .t-input {
-    background-color: var(--t-field-color-form);
-    border: 1px solid var(--t-field-color-form);
-    color: var(--t-field-color-text);
-  }
-  .t-input-container:hover .t-input,
-  .t-input:hover {
-    border: 1px solid var(--t-field-color-stroke-hover);
-  }
-  .t-input:focus {
-    border: 1px solid var(--t-field-color-stroke-focus);
-    outline: 1px solid var(--t-field-color-stroke-focus);
-  }
-  .t-input[disabled]:disabled {
-    cursor: not-allowed;
-    border: 1px solid var(--t-field-color-form);
-    color: var(--t-field-color-text-disabled);
-  }
-  .t-input.with-title::placeholder {
-    color: transparent;
-  }
-  .t-input::placeholder,
-  .t-input.with-title:focus::placeholder {
-    color: var(--t-field-color-title);
-  }
-  .t-input.with-warning {
-    border: 1px solid var(--t-field-color-stroke-validation);
-    background-color: var(--t-field-color-bg-validation);
-  }
-  .t-input.with-error {
-    border: 1px solid var(--t-field-color-stroke-error);
-    background-color: var(--t-field-color-bg-error);
-  }
-  .t-input.with-loading {
-    border: 1px solid var(--t-field-color-stroke-loading);
-  }
-`;
-export const inputTitleStyles = css `
-  .t-title {
-    position: absolute;
-    top: 50%;
-    left: var(--t-field-title-left-position);
-    font-family: 'Rubik', sans-serif;
-    color: var(--t-field-color-title);
-    transform: translateY(-50%);
-    transition-duration: 0.3s;
-    pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  .t-textarea-container .t-title {
-    top: 1rem;
-    transform: none;
-  }
-  .t-input.with-title:focus + .t-title,
-  .t-input.with-title:not(:placeholder-shown) + .t-title {
-    font-size: 0.75rem;
-    font-weight: 300;
-    line-height: 0.875rem;
-    transform: translateY(0);
-    top: 0.5rem;
-  }
-`;
-export const inputIconStyles = css `
-  .t-input-container .t-icon-set-container {
-    height: ${unsafeCSS(inputVars.iconDesktopSize)};
-    width: ${unsafeCSS(inputVars.iconDesktopSize)};
-    cursor: var(--t-field-input-cursor);
-  }
-  .t-icon-set-container.t-icon-click {
-    cursor: pointer;
-  }
-  .t-input-container .t-icon-set-container.t-icon-right {
-    position: absolute;
-    top: 50%;
-    right: var(--t-field-padding-x);
-    transform: translateY(-50%);
-  }
-  .t-input-container .t-icon-set-container.t-icon-left {
-    position: absolute;
-    top: 50%;
-    left: var(--t-field-padding-x);
-    transform: translateY(-50%);
-  }
-  .t-icon-inactive {
-    display: inline;
-  }
-  .t-icon-active {
-    display: none;
-  }
-  .t-icon-disabled {
-    display: none;
-  }
-  .t-input-container:hover .t-icon-set-container .t-icon-inactive,
-  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,
-  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {
-    display: none;
-  }
-  .t-input-container:hover .t-icon-set-container .t-icon-active,
-  .t-input:hover ~ .t-icon-set-container .t-icon-active,
-  .t-input:focus ~ .t-icon-set-container .t-icon-active {
-    display: inline;
-  }
-  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {
-    display: none;
-  }
-  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {
-    display: none;
-  }
-  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {
-    display: inline;
-    cursor: not-allowed;
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input-container .t-icon-set-container {
-      height: ${unsafeCSS(inputVars.iconMobileSize)};
-      width: ${unsafeCSS(inputVars.iconMobileSize)};
-    }
-  }
-`;
-export const inputSearchStyles = css `
-  .t-input[type='search'] {
-    padding-left: var(--t-padding-x-desktop-with-icon);
-  }
-  .t-input[type='search'] + .t-title {
-    left: var(--t-padding-x-desktop-with-icon);
-  }
-  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
-    .t-input[type='search'] {
-      padding-left: var(--t-padding-x-mobile-with-icon);
-    }
-    .t-input[type='search'] + .t-title {
-      left: var(--t-padding-x-mobile-with-icon);
-    }
-  }
-  input[type='search']::-webkit-search-decoration,
-  input[type='search']::-webkit-search-cancel-button,
-  input[type='search']::-webkit-search-results-button,
-  input[type='search']::-webkit-search-results-decoration {
-    display: none;
-  }
-`;
-export const inputDescriptionStyles = css `
-  .t-input-description-container {
-    margin-top: 0.5rem;
-    font-family: 'Rubik', sans-serif;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: var(--t-field-color-description);
-    display: flex;
-    justify-content: space-between;
-  }
-  .t-input-description-container .t-letter-counter {
-    align-self: flex-end;
-  }
-  .t-input-description-container .t-input-description {
-    display: flex;
-    gap: 0.5rem;
-  }
-`;