@ftdata/ui 0.0.16 → 0.0.18

package/dist/components/MultiSelect/components/MultiSelectList/style.js

@@ -1,5 +1,21 @@
-import styled_components from "styled-components";
+import styled_components, { keyframes } from "styled-components";
 import { COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, FONT_WEIGHT_BOLD } from "@ftdata/f-tokens";
+const slideDown = keyframes`
+  0% {
+    transform: translateY(-0.25rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+const slideUp = keyframes`
+  0% {
+    transform: translateY(0.25rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
 const SelectDropdown = styled_components.div`
   background-color: ${COLOR_NEUTRAL_DAY};
   border-radius: 0.25rem;
@@ -11,8 +27,10 @@ const SelectDropdown = styled_components.div`
   height: auto;
   z-index: 3;
 
-  top: ${({ position })=>"top" === position ? "auto" : "calc(100% + 0.5rem)"};
-  bottom: ${({ position })=>"top" === position ? "calc(100% + 0.5rem)" : "auto"};
+  animation: ${({ listPosition })=>"top" === listPosition ? slideUp : slideDown}
+    0.18s ease-out;
+  top: ${({ listPosition })=>"top" === listPosition ? "auto" : "calc(100% + 0.5rem)"};
+  bottom: ${({ listPosition })=>"top" === listPosition ? "calc(100% + 0.5rem)" : "auto"};
 
   & > div {
     border-radius: 0.25rem;

package/dist/components/MultiSelect/helpers/addOption.d.ts

@@ -1,5 +1,5 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const addOption: (selected: IMultiSelectOption[], options: IMultiSelectOption[], option: IMultiSelectOption, max?: number) => {
-    selected: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
+    selected: import("../../Select").ISelectOption[];
+    unselected: import("../../Select").ISelectOption[];
 } | undefined;

package/dist/components/MultiSelect/helpers/computeUnselected.d.ts

@@ -1,2 +1,2 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const computeUnselected: (options: IMultiSelectOption[], selected: IMultiSelectOption[]) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/computeUnselected.js

@@ -1,2 +1,2 @@
-const computeUnselected = (options, selected)=>options.filter((opt)=>!selected.some((s)=>s.value === opt.value));
+const computeUnselected = (options, selected)=>options.filter((opt)=>!selected.some((selected)=>selected.value === opt.value));
 export { computeUnselected };

package/dist/components/MultiSelect/helpers/feedbackText.d.ts

@@ -1,4 +1,4 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare function feedbackText(translation: (key: string) => string, options: IMultiSelectOption[], filtered: IMultiSelectOption[], selected: IMultiSelectOption[], query: string, max?: number): {
     value: string;
     label: string;

package/dist/components/MultiSelect/helpers/feedbackText.js

@@ -1,27 +1,27 @@
 import { computeUnselected } from "./computeUnselected.js";
 function feedbackText(translation, options, filtered, selected, query, max) {
-    if (!options.length) return [
-        {
-            value: "feedback__",
-            label: translation("no_data_is_available")
-        }
-    ];
     if (max && selected.length >= max) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("the_selection_limit_has_been_reached")
         }
     ];
     if (query && !filtered.length) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("no_data_was_found")
         }
     ];
+    if (!options.length) return [
+        {
+            value: "__feedback",
+            label: translation("no_data_is_available")
+        }
+    ];
     const unselected = computeUnselected(options, selected);
     if (!query && !unselected.length) return [
         {
-            value: "feedback__",
+            value: "__feedback",
             label: translation("all_were_selected")
         }
     ];

package/dist/components/MultiSelect/helpers/filterOptions.d.ts

@@ -1,2 +1,2 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const filterOptions: (options: IMultiSelectOption[], query: string) => IMultiSelectOption[];

package/dist/components/MultiSelect/helpers/removeOptions.d.ts

@@ -1,5 +1,5 @@
-import { IMultiSelectOption } from "../interfaces/state";
+import { IMultiSelectOption } from "..";
 export declare const removeOption: (selected: IMultiSelectOption[], options: IMultiSelectOption[], option: IMultiSelectOption) => {
-    selected: IMultiSelectOption[];
-    unselected: IMultiSelectOption[];
+    selected: import("../../Select").ISelectOption[];
+    unselected: import("../../Select").ISelectOption[];
 };

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

@@ -1,28 +1,46 @@
 import { InputHTMLAttributes, JSX } from "react";
-import { FieldFeedbackType } from "../../types/feedback";
 import { IconsNames } from "@ftdata/f-icons";
-import { IMultiSelectActions } from "./interfaces/actions";
-import { IMultiSelectState } from "./interfaces/state";
-export interface MultiSelectProps extends InputHTMLAttributes<HTMLDivElement> {
-    disabled?: boolean;
-    helpText?: string;
-    helpIcon?: IconsNames;
-    icon?: IconsNames | JSX.Element;
-    rightItem?: JSX.Element;
+import { FieldFeedbackType } from "../../types/feedback";
+import { ISelectOption } from "../Select";
+export type IMultiSelectOption = ISelectOption;
+export interface MultiSelectProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Texto do label exibido acima do campo. */
     label?: string;
+    /** Texto auxiliar exibido abaixo do label. */
     sublabel?: string;
+    /** Texto de ajuda exibido abaixo do campo. */
+    helpText?: string;
+    /** Ícone exibido junto ao texto de ajuda. */
+    helpIcon?: IconsNames;
+    /** Estado de feedback visual do campo (ex.: erro, sucesso, aviso). */
     feedback?: FieldFeedbackType;
-    clear?: () => void;
-    loading?: boolean;
-    state: IMultiSelectState;
-    actions?: IMultiSelectActions;
-    updateState: (newPartial: Partial<IMultiSelectState>) => void;
-    translation: (key: string) => string;
-    max?: number;
+    /** Define se o campo está desabilitado. */
+    disabled?: boolean;
+    /** Quantidade máxima de itens que podem ser selecionados. */
+    maxItems?: number;
+    /** Define se a opção "Selecionar todos" deve ser exibida. */
     selectAll?: boolean;
-    total?: number;
+    /** Define se a lista de opções está em estado de carregamento. */
+    isLoading?: boolean;
+    /** Lista de opções disponíveis para seleção. */
+    options: IMultiSelectOption[];
+    /** Lista de opções atualmente selecionadas. */
+    selected: IMultiSelectOption[];
+    /** Função chamada sempre que a lista de selecionados for alterada. */
+    onChangeSelected: (selected: IMultiSelectOption[]) => void;
+    /** Função usada para traduzir textos internos do componente. */
+    translation: (key: string) => string;
+    /** Função chamada ao digitar no campo de busca. */
+    onSearch?: (query: string) => void;
+    /** Função chamada ao solicitar mais itens (scroll infinito/paginação). */
     onLoadMore?: () => Promise<void>;
+    /** Ícone exibido à esquerda do input. Pode ser `IconName` ou JSX. */
+    icon?: IconsNames | JSX.Element;
+    /** Define o estilo do componente. `alt` mostra caret, `default` não. */
+    variant?: "default" | "alt";
+    /** Define a posição da lista do componente */
+    listPosition?: "top" | "bottom";
+    /** Executa junto com o toggle da lista */
     toggle?: (open: boolean) => void;
-    dropdownPosition?: "top" | "bottom";
 }
-export default function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, dropdownPosition, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ label, sublabel, helpText, helpIcon, feedback, disabled, maxItems, selectAll, isLoading, options, selected, onChangeSelected, translation, onSearch, onLoadMore, placeholder, required, name, icon, listPosition, toggle, variant, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect/index.js

@@ -1,152 +1,111 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BadgesContainer, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput } from "./styles.js";
+import Badge from "./components/Badge/index.js";
+import MultiSelectList from "./components/MultiSelectList/index.js";
+import HelpText from "../fields/components/HelpText/index.js";
 import Label from "../fields/components/Label/index.js";
-import { getHelpTextFeedbackType } from "../fields/helpers/getFeedbackType.js";
 import { Icon } from "@ftdata/f-icons";
-import HelpText from "../fields/components/HelpText/index.js";
-import MultiSelectList from "./components/MultiSelectList/index.js";
-import Badge from "./components/Badge/index.js";
-import { addOption } from "./helpers/addOption.js";
-import { removeOption } from "./helpers/removeOptions.js";
-import { computeUnselected } from "./helpers/computeUnselected.js";
-import { filterOptions } from "./helpers/filterOptions.js";
 import { feedbackText } from "./helpers/feedbackText.js";
-import { COLOR_NEUTRAL_DARK } from "@ftdata/f-tokens";
-import RotateButton from "../fields/components/RotateButton/index.js";
+import { filterOptions } from "./helpers/filterOptions.js";
 import calcTextSize from "./helpers/calcTextSize.js";
-function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, dropdownPosition, ...rest }) {
-    const [showList, setShowList] = useState(false);
+import RotateButton from "../fields/components/RotateButton/index.js";
+import { COLOR_NEUTRAL_MEDIUM } from "@ftdata/f-tokens";
+function MultiSelect({ label, sublabel, helpText, helpIcon, feedback, disabled, maxItems, selectAll, isLoading, options, selected, onChangeSelected, translation, onSearch, onLoadMore, placeholder, required, name, icon, listPosition, toggle, variant = "default" }) {
     const [query, setQuery] = useState("");
+    const [showList, setShowList] = useState(false);
     const [inputSize, setInputSize] = useState(0);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
-    const { selected, options, filtered, unselected } = state;
-    const handleAddOption = (option)=>{
-        const result = addOption(selected, options, option, max);
-        if (!result) return;
+    const unselected = useMemo(()=>options.filter((o)=>!selected.some((s)=>s.value === o.value)), [
+        options,
+        selected
+    ]);
+    const canShowSelectAll = useMemo(()=>{
+        if (!selectAll) return false;
+        if (disabled) return false;
+        if (selected.length === options.length) return false;
+        if (query) return false;
+        if (maxItems && selected.length >= maxItems) return false;
+        return true;
+    }, [
+        selectAll,
+        selected,
+        options,
+        query,
+        maxItems,
+        disabled
+    ]);
+    const filtered = useMemo(()=>{
+        if (!query) return unselected;
+        return filterOptions(unselected, query);
+    }, [
+        query,
+        unselected
+    ]);
+    const addOption = (option)=>{
+        if ("__feedback" === option.value || disabled) return;
+        if (maxItems && selected.length >= maxItems) return;
+        onChangeSelected([
+            ...selected,
+            option
+        ]);
         setQuery("");
-        setInputSize(1);
-        updateState({
-            ...result,
-            filtered: []
-        });
-        inputRef.current?.focus();
     };
-    const handleRemoveOption = (option)=>{
-        const result = removeOption(selected, options, option);
-        updateState({
-            ...result,
-            filtered: []
-        });
+    const toggleList = (event)=>{
+        event.stopPropagation();
+        setShowList((prev)=>!prev);
+    };
+    const removeOption = (option)=>{
+        if (disabled) return;
+        onChangeSelected(selected.filter((o)=>o.value !== option.value));
     };
-    const removeLast = ()=>{
-        if (!selected.length || query) return;
-        handleRemoveOption(selected[selected.length - 1]);
+    const clearAll = ()=>onChangeSelected([]);
+    const handleAddAll = ()=>{
+        maxItems ? onChangeSelected(options.slice(0, maxItems)) : onChangeSelected(options);
+    };
+    const handleClickContainer = ()=>{
+        if (!disabled) {
+            if (inputRef.current) inputRef.current.focus();
+            setShowList(true);
+        }
     };
     const handleChange = (event)=>{
         const value = event.target.value;
         setQuery(value);
         const textStyle = "500 14px Inter";
-        const newInputSize = calcTextSize(value, textStyle, "rem");
-        if (newInputSize) setInputSize(newInputSize);
-        if (!value) return updateState({
-            filtered: []
-        });
-        if (actions?.search) return void actions.search(value);
-        updateState({
-            filtered: filterOptions(computeUnselected(options, selected), value)
-        });
+        const newSize = calcTextSize(value, textStyle, "rem");
+        if (newSize) setInputSize(newSize);
+        if (onSearch) onSearch(value);
     };
     const handleKeyDown = (event)=>{
-        if ("Backspace" === event.key) removeLast();
-        if ("Enter" === event.key) {
-            const available = filtered.length ? filtered : computeUnselected(options, selected);
-            if (available[0]) handleAddOption(available[0]);
-        }
+        event.stopPropagation();
+        if ("Backspace" === event.key && !query && selected.length) removeOption(selected[selected.length - 1]);
+        if ("Enter" === event.key && filtered[0]) addOption(filtered[0]);
     };
     const currentDataOptions = useMemo(()=>{
-        const feedbackOptions = feedbackText(translation, options, filtered, selected, query, max);
-        if (feedbackOptions.length) return feedbackOptions;
+        const fb = feedbackText(translation, options, filtered, selected, query, maxItems);
+        if (fb.length) return fb;
         if (filtered.length) return filtered;
-        return computeUnselected(options, selected);
+        return unselected;
     }, [
-        query,
         filtered,
         selected,
-        options,
-        max
-    ]);
-    const handleClickOutside = (event)=>{
-        if (containerRef.current && !containerRef.current.contains(event.target)) setShowList(false);
-    };
-    const clearSelected = ()=>updateState({
-            selected: []
-        });
-    const handleAddAll = (event)=>{
-        event.preventDefault();
-        if (max) {
-            if (selected.length) {
-                const index = selected.length - max;
-                const toAdd = unselected.slice(0, index);
-                updateState({
-                    selected: [
-                        ...selected,
-                        ...toAdd
-                    ],
-                    unselected: []
-                });
-                return;
-            }
-            updateState({
-                selected: options.slice(0, max),
-                unselected: []
-            });
-            return;
-        }
-        updateState({
-            selected: options,
-            unselected: []
-        });
-    };
-    const canShowSelectAll = useMemo(()=>{
-        if (!selectAll) return;
-        if (selected.length === total || selected.length === options.length) return;
-        if (query) return;
-        if (max && max === selected.length) return;
-        return handleAddAll;
-    }, [
         query,
-        filtered,
-        selected,
         options,
-        max
+        maxItems
     ]);
     useEffect(()=>{
+        if (toggle) toggle(showList);
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) setShowList(false);
+        };
         if (showList) document.addEventListener("mousedown", handleClickOutside);
         return ()=>document.removeEventListener("mousedown", handleClickOutside);
     }, [
         showList
     ]);
-    const feedBackHelpText = getHelpTextFeedbackType(feedback, disabled);
-    const toggleList = (event)=>{
-        event.stopPropagation();
-        if (disabled) return;
-        setShowList((prev)=>!prev);
-    };
-    const handleClickContainer = (event)=>{
-        event.stopPropagation();
-        if (disabled) return;
-        if (!showList) setShowList(true);
-        inputRef.current?.focus();
-    };
-    useEffect(()=>{
-        if (toggle) toggle(showList);
-    }, [
-        showList
-    ]);
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
-        ...rest,
         children: [
             /*#__PURE__*/ jsxs(LabelContainer, {
                 children: [
@@ -156,8 +115,9 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                         required: required,
                         htmlFor: name
                     }),
-                    selected.length > 0 && /*#__PURE__*/ jsx("button", {
-                        onClick: clearSelected,
+                    selected.length > 0 && !disabled && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: clearAll,
                         children: translation("remove_all")
                     })
                 ]
@@ -169,61 +129,58 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                 disabled: disabled,
                 $active: showList,
                 children: [
-                    "string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
+                    icon && ("string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
                         name: icon,
-                        color: COLOR_NEUTRAL_DARK
-                    }) : icon,
+                        color: COLOR_NEUTRAL_MEDIUM
+                    }) : icon),
                     /*#__PURE__*/ jsxs(BadgesContainer, {
                         children: [
                             selected.map((option)=>/*#__PURE__*/ jsx(Badge, {
                                     text: option.label,
-                                    remove: ()=>handleRemoveOption(option)
+                                    remove: ()=>removeOption(option),
+                                    disabled: disabled
                                 }, option.value)),
                             /*#__PURE__*/ jsx(ResizableInput, {
                                 type: "text",
-                                name: name,
                                 placeholder: selected.length ? "" : placeholder,
                                 ref: inputRef,
                                 value: query,
                                 onKeyDown: handleKeyDown,
                                 onChange: handleChange,
-                                disabled: disabled,
                                 size: inputSize,
-                                wide: 0 === selected.length
+                                wide: 0 === selected.length,
+                                disabled: disabled,
+                                name: name
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx(RotateButton, {
+                    "alt" === variant && /*#__PURE__*/ jsx(RotateButton, {
                         rotate: showList,
-                        onClick: toggleList,
-                        disabled: disabled,
-                        style: {
-                            cursor: disabled ? "not-allowed" : "pointer"
-                        }
+                        onClick: toggleList
                     }),
-                    !!max && /*#__PURE__*/ jsx(MaxItemsIndicator, {
+                    maxItems && /*#__PURE__*/ jsx(MaxItemsIndicator, {
                         children: /*#__PURE__*/ jsxs("span", {
                             children: [
                                 selected.length,
                                 "/",
-                                max
+                                maxItems
                             ]
                         })
                     }),
                     showList && /*#__PURE__*/ jsx(MultiSelectList, {
                         options: currentDataOptions,
-                        translation: translation,
-                        onClickOption: (e, option)=>handleAddOption(option),
-                        loading: loading,
-                        addAll: canShowSelectAll,
+                        onClickOption: (_, option)=>addOption(option),
+                        loading: isLoading,
+                        addAll: canShowSelectAll ? handleAddAll : void 0,
                         onLoadMore: onLoadMore,
-                        dropdownPosition: dropdownPosition
+                        translation: translation,
+                        listPosition: listPosition
                     })
                 ]
             }),
             helpText && /*#__PURE__*/ jsx(HelpText, {
                 text: helpText,
-                feedback: feedBackHelpText,
+                feedback: feedback,
                 icon: helpIcon
             })
         ]

package/dist/components/MultiSelect/styles.js

@@ -10,7 +10,7 @@ const MultiSelectWrapper = styled_components.div`
 const showButton = keyframes`
     from {
         opacity: 0.8;
-        transform: translateY(2px);
+        transform: translateY(0.125rem);
     }
     to {
         opacity: 1;
@@ -31,7 +31,7 @@ const LabelContainer = styled_components.div`
     font-weight: ${FONT_WEIGHT_BOLD};
     line-height: 1rem;
     animation: ${showButton} 0.15s ease-in forwards;
-    height: 1rem;
+    height: 1.5rem;
 
     &:hover {
       color: ${COLOR_ACCENT_DARK};
@@ -50,45 +50,35 @@ const MultiSelectContainer = styled_components.div`
     ${({ $active })=>$active ? "2px" : "1px"}${COLOR_NEUTRAL_MEDIUM};
   position: relative;
 
-  &:focus-within {
-    box-shadow: 0px 0px 0px 2px ${COLOR_NEUTRAL_MEDIUM};
-  }
-
-  ${({ disabled, feedback, $active })=>disabled ? `
-          background-color: ${COLOR_NEUTRAL_LIGHTER};
-          box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM};
-          cursor: not-allowed;
-        ` : selectColorModifier(feedback, $active)}
+  ${({ disabled, feedback, $active })=>selectColorModifier(feedback, $active, disabled)}
 `;
 const BadgesContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   flex: 1;
-  max-height: 160px;
+  max-height: 10rem;
   overflow-y: auto;
 
   &::-webkit-scrollbar-track {
-    background-color: #f4f4f4;
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
     border-radius: 0 0.25rem 0.25rem 0;
   }
 
   &::-webkit-scrollbar {
-    width: 10px;
-    background: #f4f4f4;
+    width: 0.5rem;
+    background: ${COLOR_NEUTRAL_LIGHTER};
     border-radius: 0 0.25rem 0.25rem 0;
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
+    border-radius: 8px;
     background: #d5d8da;
   }
 `;
 const ResizableInput = styled_components.input`
   outline: none;
   border: none;
-  background-color: transparent;
   color: ${COLOR_NEUTRAL_DUSK};
   font-size: 0.875rem;
   line-height: 1rem;
@@ -103,11 +93,6 @@ const ResizableInput = styled_components.input`
     font-weight: ${FONT_WEIGHT_MEDIUM};
     line-height: 1.5rem;
   }
-
-  &:disabled {
-    background-color: ${COLOR_NEUTRAL_LIGHTER};
-    cursor: not-allowed;
-  }
 `;
 const MaxItemsIndicator = styled_components.div`
   display: flex;

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

@@ -29,7 +29,8 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
     onLoadMore?: () => Promise<void>;
     onToggle?: (open: boolean) => void;
     dropdownPosition?: "top" | "bottom";
+    sublabel?: string;
 }
-export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, dropdownPosition, sublabel, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export declare const normalizeOptions: (options: ISelectOption[]) => ISelectOption[];
 export {};

package/dist/components/Select/index.js

@@ -1,9 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { CavetButton, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel } from "./styles.js";
+import { CavetButton, IconContainer, InputWrapper, SelectContainer, StyledInput } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
 import List from "./List/index.js";
-function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }) {
+import Label from "../fields/components/Label/index.js";
+import HelpText from "../fields/components/HelpText/index.js";
+function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, sublabel, ...rest }) {
     const [showList, setShowList] = useState(false);
     const [currentValue, setCurrentValue] = useState("");
     const [filtered, setFiltered] = useState([]);
@@ -118,15 +120,11 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
         onClick: handleClick,
         ref: selectRef,
         children: [
-            /*#__PURE__*/ jsxs(StyledLabel, {
-                htmlFor: name,
-                isRequired: isRequired,
-                children: [
-                    label,
-                    isRequired && /*#__PURE__*/ jsx("span", {
-                        children: "*"
-                    })
-                ]
+            label && /*#__PURE__*/ jsx(Label, {
+                text: label,
+                subtext: sublabel,
+                required: isRequired,
+                htmlFor: name
             }),
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
@@ -173,19 +171,9 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
                     })
                 ]
             }),
-            helpText && /*#__PURE__*/ jsxs(HelpText, {
-                isError: isError,
-                isSuccess: isSuccess,
-                children: [
-                    isError && /*#__PURE__*/ jsx(Icon, {
-                        name: "ui warning-circle",
-                        size: "1rem",
-                        color: "currentColor"
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        children: helpText
-                    })
-                ]
+            helpText && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText,
+                feedback: isError ? "danger" : isSuccess ? "success" : "info"
             })
         ]
     });