@ftdata/ui 0.0.16 → 0.0.17

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/Texts/paragraphs.d.ts

@@ -0,0 +1,12 @@
+declare const PARAGRAPH_SIZES: {
+    readonly body: "1rem";
+    readonly small: "0.875rem";
+    readonly caption: "0.75rem";
+};
+type ParagraphSize = keyof typeof PARAGRAPH_SIZES;
+interface ParagraphProps {
+    size?: ParagraphSize;
+    color?: string;
+}
+export declare const Paragraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ParagraphProps>> & string;
+export {};

package/dist/components/Texts/paragraphs.js

@@ -0,0 +1,14 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const PARAGRAPH_SIZES = {
+    body: '1rem',
+    small: '0.875rem',
+    caption: '0.75rem'
+};
+const Paragraph = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.5;
+  font-weight: 500;
+  font-size: ${({ size = 'body' })=>PARAGRAPH_SIZES[size]};
+`;
+export { Paragraph };

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

@@ -0,0 +1,17 @@
+declare const FONT_SIZES: {
+    readonly xxs: string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly xxl: string;
+    readonly xxxl: string;
+    readonly megadisplay: string;
+};
+type TextSize = keyof typeof FONT_SIZES;
+interface TextProps {
+    size?: TextSize;
+}
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextProps>> & string;
+export {};

package/dist/components/Texts/text.js

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK, FONT_RELATIVE_SIZE_LG, FONT_RELATIVE_SIZE_MD, FONT_RELATIVE_SIZE_MEGADISPLAY, FONT_RELATIVE_SIZE_SM, FONT_RELATIVE_SIZE_XL, FONT_RELATIVE_SIZE_XS, FONT_RELATIVE_SIZE_XXL, FONT_RELATIVE_SIZE_XXS, FONT_RELATIVE_SIZE_XXXL } from "@ftdata/f-tokens";
+const FONT_SIZES = {
+    xxs: FONT_RELATIVE_SIZE_XXS,
+    xs: FONT_RELATIVE_SIZE_XS,
+    sm: FONT_RELATIVE_SIZE_SM,
+    md: FONT_RELATIVE_SIZE_MD,
+    lg: FONT_RELATIVE_SIZE_LG,
+    xl: FONT_RELATIVE_SIZE_XL,
+    xxl: FONT_RELATIVE_SIZE_XXL,
+    xxxl: FONT_RELATIVE_SIZE_XXXL,
+    megadisplay: FONT_RELATIVE_SIZE_MEGADISPLAY
+};
+const Text = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'md' })=>FONT_SIZES[size]};
+`;
+export { Text };

package/dist/components/Texts/titles.d.ts

@@ -0,0 +1,7 @@
+type TitleVariant = 'huge' | 'standard' | 'section' | 'heading' | 'smallHeading' | 'subheading';
+interface TitleProps {
+    size?: TitleVariant;
+    color?: string;
+}
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TitleProps>> & string;
+export {};

package/dist/components/Texts/titles.js

@@ -0,0 +1,37 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const TITLE_VARIANTS = {
+    huge: {
+        size: '1.875rem',
+        spacing: '-0.03em'
+    },
+    standard: {
+        size: '1.5rem',
+        spacing: '-0.03em'
+    },
+    section: {
+        size: '1.25rem',
+        spacing: '-0.03em',
+        weight: 500
+    },
+    heading: {
+        size: '1rem'
+    },
+    smallHeading: {
+        size: '0.875rem'
+    },
+    subheading: {
+        size: '0.75rem',
+        spacing: '0.06em'
+    }
+};
+const Title = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'standard' })=>TITLE_VARIANTS[size].size};
+  letter-spacing: ${({ size = 'standard' })=>TITLE_VARIANTS[size].spacing ?? '0'};
+  font-weight: ${({ size = 'standard' })=>TITLE_VARIANTS[size].weight ?? 600};
+`;
+export { Title };

package/dist/components/fields/modifiers/selectColorModifier.d.ts

@@ -1,2 +1,2 @@
 import { FieldFeedbackType } from "../../../types/feedback";
-export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean): "" | import("styled-components").RuleSet<object>;
+export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean, disabled?: boolean): "" | import("styled-components").RuleSet<object>;

package/dist/components/fields/modifiers/selectColorModifier.js

@@ -1,6 +1,12 @@
 import { css } from "styled-components";
 import { FEEDBACK_COLORS } from "./color_modifiers.js";
-function selectColorModifier(feedback, active) {
+import { COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER } from "@ftdata/f-tokens";
+function selectColorModifier(feedback, active, disabled) {
+    if (disabled) return css`
+      background-color: ${COLOR_NEUTRAL_LIGHTER};
+      box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_LIGHT};
+      cursor: not-allowed;
+    `;
     if (!feedback) return "";
     const color = FEEDBACK_COLORS[feedback];
     return css`