@koslibs/components 1.5.0 → 1.7.0

package/dist/components/Textarea/index_module.css

@@ -0,0 +1,269 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-K9LhZN {
+  --field-background: var(--input-primary-background-color);
+  --field-border: var(--input-border-color);
+  --field-color: var(--input-color);
+  --field-label-color: var(--input-label-color);
+  --field-placeholder-color: var(--input-placeholder-color);
+  --field-icon-color: var(--input-icon-color);
+  gap: var(--input-gap);
+  width: var(--textarea-width);
+  vertical-align: top;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-primary);
+  color: var(--field-color);
+  flex-direction: column;
+  display: inline-flex;
+
+  &[data-block] {
+    width: 100%;
+    display: flex;
+  }
+
+  &[data-view="secondary"] {
+    --field-background: var(--input-secondary-background-color);
+  }
+
+  &[data-read-only] {
+    --field-border: var(--input-read-only-border-color);
+  }
+
+  &[data-error] {
+    --field-border: var(--input-error-border-color);
+  }
+
+  &[data-disabled] {
+    --field-background: var(--input-disabled-background-color);
+    --field-border: transparent;
+    --field-color: var(--input-disabled-color);
+    --field-label-color: var(--input-disabled-color);
+    --field-placeholder-color: var(--input-disabled-color);
+    --field-icon-color: var(--input-disabled-color);
+  }
+}
+
+.field-GADSqb {
+  box-sizing: border-box;
+  align-items: flex-start;
+  gap: var(--input-gap);
+  width: 100%;
+  padding: var(--textarea-padding);
+  border-radius: var(--input-border-radius);
+  background: var(--field-background);
+  box-shadow: inset 0 0 0 1px var(--field-border);
+  cursor: text;
+  display: flex;
+}
+
+@media (hover: hover) {
+  .component-K9LhZN:not([data-disabled], [data-read-only], [data-error]) .field-GADSqb:hover {
+    box-shadow: inset 0 0 0 1px var(--input-hover-border-color);
+  }
+}
+
+.component-K9LhZN:not([data-disabled]) .field-GADSqb:focus-within {
+  box-shadow: none;
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 0;
+}
+
+.component-K9LhZN[data-error]:not([data-disabled]) .field-GADSqb:focus-within {
+  outline-color: var(--input-error-border-color);
+}
+
+.component-K9LhZN[data-disabled] .field-GADSqb, .textarea-vCe_J9:disabled {
+  cursor: not-allowed;
+}
+
+.value-pi9twE {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  position: relative;
+}
+
+.header-AqxZRm {
+  align-items: baseline;
+  gap: var(--input-gap);
+  min-width: 0;
+  display: flex;
+}
+
+.innerHeader-N47qW7 {
+  width: 100%;
+  height: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.component-K9LhZN .counter-XxZoUu {
+  color: var(--field-label-color);
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.label-fhdpHS {
+  min-width: 0;
+  color: var(--field-label-color);
+  overflow-wrap: anywhere;
+  cursor: inherit;
+  flex: 1;
+  font-size: 13px;
+  display: block;
+}
+
+.component-K9LhZN[data-inner-label] .label-fhdpHS {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--textarea-font-size);
+  transition: transform .18s, font-size .18s;
+  overflow: hidden;
+  transform: translateY(7.5px);
+
+  & > span {
+    font-size: inherit;
+  }
+}
+
+.component-K9LhZN[data-inner-label][data-filled] .label-fhdpHS, .component-K9LhZN[data-inner-label]:not([data-disabled], [data-read-only]) .value-pi9twE:focus-within .label-fhdpHS {
+  font-size: 12px;
+  transform: translateY(0);
+}
+
+.component-K9LhZN[data-inner-label] .value-pi9twE:has(.textarea-vCe_J9:autofill) .label-fhdpHS {
+  font-size: 12px;
+  transform: translateY(0);
+}
+
+.component-K9LhZN[data-inner-header] .textarea-vCe_J9 {
+  margin-top: calc(var(--size-30) / 2);
+}
+
+.component-K9LhZN[data-inner-label] .textarea-vCe_J9::placeholder {
+  opacity: 0;
+  transition: opacity .18s;
+}
+
+.component-K9LhZN[data-inner-label]:not([data-disabled], [data-read-only]) .textarea-vCe_J9:focus::placeholder {
+  opacity: 1;
+}
+
+.textarea-vCe_J9 {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: calc(var(--textarea-rows) * var(--textarea-line-height));
+  min-height: calc(var(--textarea-rows) * var(--textarea-line-height));
+  margin: var(--size-0);
+  padding: var(--size-0);
+  border-radius: var(--border-radius-0);
+  color: var(--field-color);
+  font-family: var(--font-primary);
+  font-size: var(--textarea-font-size);
+  font-weight: 400;
+  line-height: var(--textarea-line-height);
+  overflow-wrap: break-word;
+  resize: none;
+  appearance: none;
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+  background: none;
+  border: 0;
+  outline: none;
+  display: block;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    background: none;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--border-radius-pill);
+    background: var(--field-icon-color);
+  }
+
+  &::placeholder {
+    color: var(--field-placeholder-color);
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 1;
+    -webkit-text-fill-color: var(--field-color);
+  }
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  .textarea-vCe_J9 {
+    scrollbar-width: thin;
+    scrollbar-color: var(--field-icon-color) transparent;
+  }
+}
+
+.component-K9LhZN[data-resize] .textarea-vCe_J9 {
+  resize: vertical;
+}
+
+.component-K9LhZN .clear-BZMCFP {
+  width: 24px;
+  min-width: 0;
+  height: 24px;
+  min-height: 0;
+  margin: var(--size-0) var(--size-4-neg);
+  padding: var(--size-0);
+  color: var(--field-icon-color);
+  background: none;
+  flex: 0 0 24px;
+
+  &:hover, &:active {
+    color: var(--field-icon-color);
+  }
+
+  & svg {
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+    display: block;
+  }
+}
+
+.component-K9LhZN .message-_mT8Ov {
+  color: var(--input-hint-color);
+  overflow-wrap: anywhere;
+}
+
+.component-K9LhZN[data-error] .message-_mT8Ov {
+  color: var(--input-error-message-color);
+}
+
+.component-K9LhZN[data-disabled] .message-_mT8Ov {
+  color: var(--input-disabled-color);
+}
+

package/dist/components/Textarea/textarea.d.ts

@@ -0,0 +1,27 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "children" | "defaultValue" | "onChange" | "value" | "maxLength" | "rows"> & {
+    value?: string;
+    defaultValue?: string;
+    maxLength?: number;
+    showValueLength?: boolean;
+    view?: "primary" | "secondary";
+    block?: boolean;
+    label?: import("react").ReactNode;
+    labelView?: "outer" | "inner";
+    hint?: import("react").ReactNode;
+    error?: import("react").ReactNode | boolean;
+    minRows?: number;
+    maxRows?: number;
+    autosize?: boolean;
+    resize?: boolean;
+    clear?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    fieldClassName?: string;
+    textareaClassName?: string;
+    labelClassName?: string;
+    messageClassName?: string;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/textarea.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CrossHeavyMIcon } from "@koslibs/icons/CrossHeavyMIcon";
+import classnames from "classnames";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useDataTestId } from "../../hooks/use-data-test-id.js";
+import { Button } from "../Button/index.js";
+import { TypographyText } from "../Typography/text.js";
+import { useAutosize } from "./hooks/use-autosize.js";
+import index_module from "./index.module.js";
+const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+    const generatedId = useId();
+    const textareaId = id ?? generatedId;
+    const textareaRef = useRef(null);
+    const [uncontrolledLength, setUncontrolledLength] = useState(defaultValue?.length ?? 0);
+    const controlled = void 0 !== value;
+    const valueLength = controlled ? value.length : uncontrolledLength;
+    const hasValue = valueLength > 0;
+    const showCounter = showValueLength && void 0 !== maxLength && Number.isInteger(maxLength) && maxLength >= 0;
+    const hasLabel = null != label && false !== label && '' !== label;
+    const errorMessage = hint && 'boolean' != typeof error ? error : void 0;
+    const message = errorMessage || hint;
+    const showClear = clear && hasValue && !disabled && !readOnly;
+    const rows = Number.isFinite(minRows) ? Math.max(1, Math.floor(minRows)) : 3;
+    const limit = void 0 !== maxRows && Number.isFinite(maxRows) ? Math.max(rows, Math.floor(maxRows)) : void 0;
+    const getDataTestId = useDataTestId(dataTestId);
+    useImperativeHandle(ref, ()=>textareaRef.current, []);
+    useAutosize(textareaRef, autosize, rows, limit, restProps.form);
+    useEffect(()=>{
+        const textarea = textareaRef.current;
+        const form = textarea?.form;
+        let active = true;
+        const handleReset = (event)=>{
+            setTimeout(()=>{
+                if (active && !event.defaultPrevented) setUncontrolledLength(textarea?.value.length ?? 0);
+            }, 0);
+        };
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            active = false;
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        restProps.form
+    ]);
+    const handleChange = (event)=>{
+        const nextValue = event.target.value;
+        if (!controlled) setUncontrolledLength(nextValue.length);
+        onChange?.(event, {
+            value: nextValue
+        });
+    };
+    const handleClear = (event)=>{
+        const textarea = textareaRef.current;
+        if (!textarea || !showClear) return;
+        if (!controlled) {
+            textarea.value = '';
+            setUncontrolledLength(0);
+        }
+        onClear?.(event);
+        textarea.focus();
+    };
+    const handleFieldClick = (event)=>{
+        if (disabled || event.defaultPrevented || !(event.target instanceof Element)) return;
+        const target = event.target.closest('textarea, button, a, label, input, select, [contenteditable], [tabindex]');
+        if (target && event.currentTarget.contains(target)) return;
+        textareaRef.current?.focus();
+    };
+    const labelElement = hasLabel && /*#__PURE__*/ jsx("label", {
+        htmlFor: textareaId,
+        className: classnames(index_module.label, labelClassName),
+        "data-test-id": getDataTestId('label'),
+        children: /*#__PURE__*/ jsx(TypographyText, {
+            size: 'inner' === labelView ? 12 : 13,
+            weight: 'inner' === labelView ? 'regular' : 'medium',
+            children: label
+        })
+    });
+    const counterElement = showCounter && /*#__PURE__*/ jsxs(TypographyText, {
+        size: 11,
+        className: index_module.counter,
+        style: {
+            minWidth: `${2 * String(maxLength).length + 1}ch`
+        },
+        dataTestId: getDataTestId('counter'),
+        children: [
+            valueLength,
+            "/",
+            maxLength
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames(index_module.component, className),
+        style: {
+            '--textarea-rows': rows,
+            ...style
+        },
+        "data-view": view,
+        "data-block": block || void 0,
+        "data-disabled": disabled || void 0,
+        "data-read-only": readOnly || void 0,
+        "data-error": Boolean(error) || void 0,
+        "data-label-view": labelView,
+        "data-inner-label": 'inner' === labelView && hasLabel || void 0,
+        "data-inner-header": 'inner' === labelView && (hasLabel || showCounter) || void 0,
+        "data-filled": hasValue || void 0,
+        "data-resize": resize && !autosize && !disabled && !readOnly || void 0,
+        "data-test-id": getDataTestId('form-control'),
+        children: [
+            'outer' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                className: index_module.header,
+                children: [
+                    labelElement,
+                    counterElement
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames(index_module.field, fieldClassName),
+                onClick: handleFieldClick,
+                "data-test-id": getDataTestId('field'),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: index_module.value,
+                        children: [
+                            'inner' === labelView && (hasLabel || showCounter) && /*#__PURE__*/ jsxs("div", {
+                                className: classnames(index_module.header, index_module.innerHeader),
+                                children: [
+                                    labelElement,
+                                    counterElement
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("textarea", {
+                                ...restProps,
+                                ref: textareaRef,
+                                id: textareaId,
+                                value: value,
+                                defaultValue: defaultValue,
+                                rows: rows,
+                                maxLength: maxLength,
+                                disabled: disabled,
+                                readOnly: readOnly,
+                                onChange: handleChange,
+                                className: classnames(index_module.textarea, textareaClassName),
+                                "data-test-id": dataTestId
+                            })
+                        ]
+                    }),
+                    showClear && /*#__PURE__*/ jsx(Button, {
+                        view: "text",
+                        size: 32,
+                        className: index_module.clear,
+                        title: "Очистить поле",
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onClick: handleClear,
+                        dataTestId: getDataTestId('clear'),
+                        children: /*#__PURE__*/ jsx(CrossHeavyMIcon, {
+                            width: 16,
+                            height: 16
+                        })
+                    })
+                ]
+            }),
+            Boolean(message) && /*#__PURE__*/ jsx(TypographyText, {
+                tag: "div",
+                size: 12,
+                className: classnames(index_module.message, messageClassName),
+                dataTestId: getDataTestId(errorMessage ? 'error' : 'hint'),
+                children: message
+            })
+        ]
+    });
+});
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/dist/components/Textarea/types.d.ts

@@ -0,0 +1,108 @@
+import type { ChangeEvent, MouseEvent, ReactNode, TextareaHTMLAttributes } from 'react';
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'maxLength' | 'onChange' | 'children' | 'rows'> & {
+    /**
+     * Значение управляемого поля.
+     */
+    value?: string;
+    /**
+     * Начальное значение неуправляемого поля.
+     */
+    defaultValue?: string;
+    /**
+     * Максимальная длина нативного ввода в кодовых единицах UTF-16.
+     */
+    maxLength?: number;
+    /**
+     * Показывает текущую длину и maxLength рядом с label.
+     * Работает только при заданном неотрицательном целом maxLength.
+     * @default false
+     */
+    showValueLength?: boolean;
+    /**
+     * Вид поля: белый primary или светлый secondary.
+     * @default 'primary'
+     */
+    view?: 'primary' | 'secondary';
+    /**
+     * Растягивает компонент на ширину контейнера.
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Название поля. Клик переводит фокус в textarea.
+     */
+    label?: ReactNode;
+    /**
+     * Положение label. Внутренний label поднимается при фокусе или заполнении.
+     * @default 'outer'
+     */
+    labelView?: 'outer' | 'inner';
+    /**
+     * Подсказка под полем. Сообщение об ошибке заменяет её.
+     */
+    hint?: ReactNode;
+    /**
+     * Сообщение об ошибке или true для состояния ошибки без сообщения.
+     * Без непустого hint отображается только рамка. true сохраняет hint.
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Начальное число видимых строк; при autosize — минимальное число строк.
+     * Должно быть положительным целым числом.
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Максимальное число видимых строк при autosize. Затем текст прокручивается.
+     * Значение меньше minRows ограничивается minRows.
+     */
+    maxRows?: number;
+    /**
+     * Подстраивает высоту под содержимое, включая переносы по ширине.
+     * @default false
+     */
+    autosize?: boolean;
+    /**
+     * Разрешает менять высоту вручную за нижний правый угол.
+     * Не работает вместе с autosize, в disabled и readOnly. Ширина сохраняется.
+     * @default false
+     */
+    resize?: boolean;
+    /**
+     * Показывает кнопку очистки заполненного редактируемого поля.
+     * @default false
+     */
+    clear?: boolean;
+    /**
+     * Обработчик ввода с нативным событием React и текущим значением.
+     */
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик очистки. Не вызывает onChange.
+     * В управляемом режиме обновите value в этом обработчике.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Класс визуального поля.
+     */
+    fieldClassName?: string;
+    /**
+     * Класс нативного textarea. className и style относятся к обёртке.
+     */
+    textareaClassName?: string;
+    /**
+     * Класс label.
+     */
+    labelClassName?: string;
+    /**
+     * Класс подсказки или сообщения об ошибке.
+     */
+    messageClassName?: string;
+    /**
+     * Идентификатор нативного textarea. Части получают суффиксы -form-control,
+     * -field, -label, -hint, -error, -clear и -counter.
+     */
+    dataTestId?: string;
+};

package/dist/components/Textarea/vars.css

@@ -0,0 +1,9 @@
+@import "../Input/vars.css";
+
+:root {
+  --textarea-width: var(--input-width);
+  --textarea-padding: var(--input-padding-40);
+  --textarea-font-size: var(--input-font-size-40);
+  --textarea-line-height: 17px;
+}
+

package/dist/components/Typography/index.d.ts

@@ -14,7 +14,7 @@ export declare const Typography: {
         rowLimit?: 1 | 2 | 3;
         dataTestId?: string;
     } & {
-        size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+        size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
         tag?: "span" | "p" | "div" | "li";
     } & import("react").RefAttributes<import("./shared.js").TextElement>>;
     Title: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "color" | "children"> & {

package/dist/components/Typography/index_module.css

@@ -5,9 +5,9 @@
   margin: var(--size-0, 0px);
   padding: var(--size-0, 0px);
   font-family: var(--font-primary);
-  font-style: normal;
-  line-height: var(--typography-line-height);
   letter-spacing: var(--typography-letter-spacing);
+  font-style: normal;
+  line-height: normal;
 }
 
 .weight-regular-cOlAcy {

package/dist/components/Typography/preset.module.js

@@ -18,6 +18,8 @@ const preset_module = {
     size15: "size-15-DxWyW2",
     "size-16": "size-16-OgafBi",
     size16: "size-16-OgafBi",
+    "size-18": "size-18-MSiKUJ",
+    size18: "size-18-MSiKUJ",
     "size-20": "size-20-eTO0D7",
     size20: "size-20-eTO0D7",
     "size-24": "size-24-lZpjdx",

package/dist/components/Typography/preset_module.css

@@ -36,6 +36,10 @@
   font-size: var(--typography-font-size-16);
 }
 
+.size-18-MSiKUJ {
+  font-size: var(--typography-font-size-18);
+}
+
 .size-20-eTO0D7 {
   font-size: var(--typography-font-size-20);
 }

package/dist/components/Typography/shared.d.ts

@@ -44,7 +44,7 @@ export type TextProps = BaseProps & {
      * Размер шрифта в пикселях.
      * @default 13
      */
-    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
     /**
      * HTML-тег, определяющий семантику текста.
      * @default span

package/dist/components/Typography/text.d.ts

@@ -10,6 +10,6 @@ export declare const TypographyText: import("react").ForwardRefExoticComponent<O
     rowLimit?: 1 | 2 | 3;
     dataTestId?: string;
 } & {
-    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+    size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20;
     tag?: "span" | "p" | "div" | "li";
 } & import("react").RefAttributes<TextElement>>;

package/dist/components/Typography/vars.css

@@ -1,5 +1,4 @@
 :root {
-  --typography-line-height: normal;
   --typography-letter-spacing: 0;
   --typography-regular-font-weight: 400;
   --typography-medium-font-weight: 500;
@@ -19,6 +18,7 @@
   --typography-font-size-14: 14px;
   --typography-font-size-15: 15px;
   --typography-font-size-16: 16px;
+  --typography-font-size-18: 18px;
   --typography-font-size-20: 20px;
   --typography-font-size-24: 24px;
   --typography-font-size-28: 28px;

package/dist/index.d.ts

@@ -2,6 +2,10 @@ export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
 export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
+export { Textarea } from './components/Textarea/index.js';
+export type { TextareaProps } from './components/Textarea/index.js';
+export { Tab, Tabs } from './components/Tabs/index.js';
+export type { TabProps, TabsProps } from './components/Tabs/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';

package/dist/index.js

@@ -1,5 +1,7 @@
 export { Button } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";
+export { Textarea } from "./components/Textarea/index.js";
+export { Tab, Tabs } from "./components/Tabs/index.js";
 export { Spinner } from "./components/Spinner/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 export { Popover } from "./components/Popover/index.js";