@ftdata/ui 0.0.1

package/dist/components/CustomSelect/CustomSelectList/style.js

@@ -0,0 +1,95 @@
+import styled_components from "styled-components";
+import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const SelectDropdown = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  border-radius: 0.25rem;
+  box-shadow: 0px 2px 4px rgba(107, 117, 124, 0.32);
+  color: ${COLOR_NEUTRAL_DUSK};
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  width: 100%;
+  height: auto;
+  z-index: 3;
+
+  .action {
+    span {
+      font-weight: 600;
+      color: ${COLOR_ACCENT_MEDIUM};
+    }
+
+    &:hover {
+      span {
+        color: ${COLOR_ACCENT_MEDIUM};
+      }
+    }
+  }
+
+  & > div {
+    border-radius: 0.25rem;
+  }
+
+  & > div > div {
+    border-radius: 0.25rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background-color: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    background: #f4f4f4;
+    border-radius: 0 0.25rem 0.25rem 0;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #d5d8da;
+  }
+`;
+const OptionContainer = styled_components.div`
+  background-color: ${({ isSelected })=>isSelected ? COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+
+    span {
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+
+  span {
+    color: ${({ isSelected })=>isSelected ? COLOR_NEUTRAL_DUSK : COLOR_NEUTRAL_DARKER};
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-family: ${FONT_FAMILY_01};
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+  }
+`;
+const LoadingContainer = styled_components.div`
+  background-color: ${COLOR_NEUTRAL_DAY};
+  height: 10rem;
+  width: 100%;
+`;
+const CustomAction = styled_components(OptionContainer)`
+  color: ${COLOR_ACCENT_MEDIUM};
+  font-weight: 500;
+  margin-bottom: 8px;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_DAY};
+    color: ${COLOR_ACCENT_DARK};
+  }
+`;
+export { CustomAction, LoadingContainer, OptionContainer, SelectDropdown };

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

@@ -0,0 +1,30 @@
+import React, { InputHTMLAttributes, JSX } from "react";
+export interface ICustomSelectOption {
+    label: string;
+    value: string;
+    chip?: JSX.Element;
+    action?: () => void;
+}
+export interface IAction {
+    label: string;
+    action: () => void;
+}
+export interface CustomSelectProps extends InputHTMLAttributes<HTMLInputElement> {
+    t: (key: string) => string;
+    helpText?: string;
+    isError?: boolean;
+    isSuccess?: boolean;
+    label?: string;
+    isRequired?: boolean;
+    name?: string;
+    options: ICustomSelectOption[] | [];
+    placeholder?: string;
+    search?: (query: string) => void;
+    isLoading?: boolean;
+    icon?: JSX.Element;
+    variation?: "default" | "searchable";
+    selected: ICustomSelectOption | null;
+    setSelected: React.Dispatch<React.SetStateAction<ICustomSelectOption | null>>;
+}
+export default function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, ...rest }: CustomSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const normalizeOptions: (options: ICustomSelectOption[]) => ICustomSelectOption[];

package/dist/components/CustomSelect/index.js

@@ -0,0 +1,193 @@
+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 { Icon } from "@ftdata/f-icons";
+import CustomSelectList from "./CustomSelectList/index.js";
+function CustomSelect({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, ...rest }) {
+    const [showList, setShowList] = useState(false);
+    const [currentValue, setCurrentValue] = useState("");
+    const [filtered, setFiltered] = useState([]);
+    const inputRef = useRef(null);
+    const cavetRef = useRef(null);
+    const selectRef = useRef(null);
+    const { readOnly, disabled } = rest;
+    const notFound = {
+        value: "",
+        label: t("no_data_was_found")
+    };
+    const empty = {
+        value: "",
+        label: t("no_data_is_available")
+    };
+    const computedOptions = ()=>{
+        if (0 === options.length) return [
+            empty
+        ];
+        if (filtered.length) return filtered;
+        return options;
+    };
+    const handleClickOutside = (event)=>{
+        if (selectRef.current && selectRef.current.contains(event.target)) return;
+        setShowList(false);
+    };
+    const handleClick = (event)=>{
+        if (cavetRef.current) {
+            if (cavetRef.current === event.target) return;
+        }
+        if (disabled || readOnly) return;
+        setShowList((prev)=>!prev);
+        if (!inputRef.current) return;
+        inputRef.current.focus();
+    };
+    const handleClickCavet = (event)=>{
+        if (cavetRef.current) {
+            if (cavetRef.current !== event.target) return;
+        }
+        if (disabled || readOnly) return;
+        setShowList((prev)=>!prev);
+        if (!inputRef.current) return;
+        inputRef.current.focus();
+    };
+    const handleClickOption = (event, option)=>{
+        event.stopPropagation();
+        setSelected(option);
+        setCurrentValue(option.label);
+        setFiltered([]);
+        setShowList(false);
+        if (inputRef.current) inputRef.current.blur();
+    };
+    const filter = (query)=>{
+        if (!query) return void setFiltered([]);
+        const valueNormalized = query.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        const newFiltered = options.filter((option)=>{
+            const labelNormalized = option.label.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+            return labelNormalized.includes(valueNormalized);
+        });
+        if (newFiltered.length > 0) return void setFiltered(newFiltered);
+        setFiltered([
+            notFound
+        ]);
+    };
+    const handleChange = (event)=>{
+        setShowList(true);
+        if (selected) setSelected(null);
+        const query = event.target.value;
+        if ("searchable" === variation) {
+            if (search) search(query);
+            filter(query);
+        }
+        setCurrentValue(query);
+    };
+    const addSelectedByEnter = (option)=>{
+        setFiltered([]);
+        setShowList(false);
+        setSelected(option);
+    };
+    const handleKeyDown = (event)=>{
+        if ("Enter" === event.key) {
+            if (filtered.length > 0) return void addSelectedByEnter(filtered[0]);
+            if (options.length > 0) return void addSelectedByEnter(options[0]);
+        }
+    };
+    useEffect(()=>{
+        if (!selected) return void setCurrentValue("");
+        setCurrentValue(selected.label);
+    }, [
+        selected
+    ]);
+    useEffect(()=>{
+        if (showList) document.addEventListener("click", handleClickOutside, true);
+        return ()=>{
+            document.removeEventListener("click", handleClickOutside, true);
+        };
+    }, [
+        showList
+    ]);
+    const handleCustomAction = (action)=>{
+        setSelected(null);
+        setCurrentValue("");
+        action();
+    };
+    useEffect(()=>{
+        if (filtered.length) setSelected(null);
+    }, [
+        filtered
+    ]);
+    return /*#__PURE__*/ jsxs(SelectContainer, {
+        onClick: handleClick,
+        ref: selectRef,
+        children: [
+            /*#__PURE__*/ jsxs(StyledLabel, {
+                htmlFor: name,
+                isRequired: isRequired,
+                children: [
+                    label,
+                    isRequired && /*#__PURE__*/ jsx("span", {
+                        children: "*"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(InputWrapper, {
+                children: [
+                    /*#__PURE__*/ jsx(IconContainer, {
+                        children: icon
+                    }),
+                    /*#__PURE__*/ jsx(StyledInput, {
+                        ref: inputRef,
+                        placeholder: placeholder,
+                        name: name,
+                        disabled: disabled,
+                        required: isRequired,
+                        value: currentValue,
+                        onChange: handleChange,
+                        icon: icon,
+                        isError: isError,
+                        isSuccess: isSuccess,
+                        variation: variation,
+                        onKeyDown: handleKeyDown,
+                        readOnly: readOnly ? readOnly : "default" === variation,
+                        ...rest
+                    }),
+                    /*#__PURE__*/ jsx(CavetButton, {
+                        onClick: handleClickCavet,
+                        isListOpen: showList,
+                        ref: cavetRef,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "arw caret-down",
+                            color: "currentColor",
+                            size: "1.5rem"
+                        })
+                    }),
+                    showList && /*#__PURE__*/ jsx(CustomSelectList, {
+                        options: computedOptions() || [
+                            notFound
+                        ],
+                        onClickOption: options.length ? handleClickOption : ()=>null,
+                        selectedOption: selected,
+                        isLoading: isLoading,
+                        handleCustomAction: handleCustomAction
+                    })
+                ]
+            }),
+            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
+                    })
+                ]
+            })
+        ]
+    });
+}
+const normalizeOptions = (options)=>{
+    const newOptions = options ? options.filter((option)=>option && option.label && option.value) : [];
+    return newOptions;
+};
+export { CustomSelect as default, normalizeOptions };

package/dist/components/CustomSelect/styles.d.ts

@@ -0,0 +1,22 @@
+import { CustomSelectProps } from ".";
+interface CustomSelect {
+    isError?: boolean;
+    isSuccess?: boolean;
+    isRequired?: boolean;
+}
+export declare const SelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, CustomSelect>> & string;
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+interface CavetButtonProps {
+    isListOpen: boolean;
+}
+export declare const CavetButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, CavetButtonProps>> & string;
+interface StyledInputProps extends Partial<Omit<CustomSelectProps, "t" | "options">> {
+    t?: () => void;
+    options?: [];
+}
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;
+export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CustomSelect>> & string;
+export declare const ChipExemple: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/components/CustomSelect/styles.js

@@ -0,0 +1,93 @@
+import styled_components from "styled-components";
+import { COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
+const SelectContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLabel = styled_components.label`
+  color: ${COLOR_NEUTRAL_DUSK};
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: ${FONT_WEIGHT_BOLD};
+  line-height: 1rem;
+  margin-bottom: 0.5rem;
+
+  span {
+    color: ${COLOR_DANGER_MEDIUM};
+  }
+`;
+const InputWrapper = styled_components.div`
+  position: relative;
+  width: 100%;
+`;
+const IconContainer = styled_components.div`
+  left: 1rem;
+  position: absolute;
+  top: 0.5rem;
+`;
+const CavetButton = styled_components.button`
+  align-items: center;
+  color: ${COLOR_NEUTRAL_DARKER};
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  height: 1.5rem;
+  right: 0.5rem;
+  top: 0.5rem;
+  width: 1.5rem;
+
+  svg {
+    transform: ${({ isListOpen })=>isListOpen ? "rotate(180deg)" : "none"};
+  }
+`;
+const StyledInput = styled_components.input`
+  border-radius: 0.25rem;
+  box-shadow: 0px 0px 0px 1px
+    ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_MEDIUM};
+  color: ${COLOR_NEUTRAL_DUSK};
+  cursor: ${({ variation })=>"default" === variation ? "pointer" : "insert"};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  padding: ${({ icon })=>icon ? "0.5rem 2.5rem 0.5rem 3rem" : "0.5rem 2.5rem 0.5rem 1rem"};
+  outline: none;
+  width: 100%;
+  ${({ variation })=>"default" === variation && "pointer-events: none;"}
+  ${({ variation })=>"default" === variation && "user-select: none;"}
+    ${({ variation })=>"default" === variation && "cursor: pointer;"}
+
+    &::placeholder {
+    color: ${COLOR_NEUTRAL_MEDIUM};
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  &:focus {
+    box-shadow: 0px 0px 0px 2px ${COLOR_NEUTRAL_DARK};
+  }
+`;
+const HelpText = styled_components.div`
+  color: ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+  }
+`;
+const ChipExemple = styled_components.div`
+  align-items: center;
+  background-color: ${COLOR_ACCENT_MEDIUM};
+  border-radius: 1rem;
+  color: ${COLOR_NEUTRAL_DAY};
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: ${FONT_WEIGHT_BOLD};
+  height: 1.25rem;
+  line-height: 1.25rem;
+  padding: 0 0.375rem;
+  /* position: absolute; // se quiser que fique fixo no fim
+    left: 0.5rem; // se quiser que fique fixo no fim */
+`;
+export { CavetButton, ChipExemple, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel };

package/dist/components/DoubleList/DoubleList.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import FilterList from ".";
+/**
+ * DoubleList exibe duas listas separadas, permitindo ao usuário visualizar diferentes itens simultaneamente.
+
+ */
+declare const meta: Meta<typeof FilterList>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação da lista com apenas apenas propriedeades essenciais.
+ */
+export declare const Default: Story;

package/dist/components/DoubleList/DoubleList.stories.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import index from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/FilterList",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    background: "#fff",
+                    width: "32rem",
+                    borderRadius: "0.5rem",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: "1rem"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        total: {
+            description: "Recebe a quantidade total de intens."
+        },
+        options: {
+            description: "Recebe um Array de strings que ser\xe3o renderizadas nas listas."
+        },
+        listHeight: {
+            description: "Define a quantidade de op\xe7\xf5es que aparecem por vez nas listas."
+        },
+        title: {
+            description: "Define o titulo acima do componente."
+        },
+        selected: {
+            description: "Define a quantidade que foi selecionada."
+        }
+    }
+};
+const DoubleList_stories = meta;
+const placas = [
+    "XJZ874",
+    "TRK951",
+    "LMP230",
+    "QWV615",
+    "BNC472",
+    "DFT389",
+    "GHR526",
+    "VXZ731",
+    "JFK198",
+    "MNL543",
+    "ZXC741",
+    "PLM852",
+    "QWE963",
+    "TYU357",
+    "BNM147",
+    "ASD951",
+    "GHJ635",
+    "XCV284",
+    "LKJ578",
+    "POI963",
+    "MNB753",
+    "WER852",
+    "OIU246",
+    "YTR159",
+    "ZXA6345",
+    "QWERTY",
+    "PLACAEXEMPLO",
+    "EXEMPLO123",
+    "TESTEPLACAGRANDETESTEPLACAGRANDETESTEPLACAGRANDE",
+    "AB"
+];
+const Default = {
+    args: {
+        options: placas
+    }
+};
+export { Default, DoubleList_stories as default };

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

@@ -0,0 +1,9 @@
+interface DoubleList {
+    options: string[];
+    listHeight?: number;
+    title: string;
+    selected?: number;
+    total?: number;
+}
+export default function DoubleList({ options, listHeight, title, selected, total, ...rest }: DoubleList): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DoubleList/index.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FixedSizeList } from "react-window";
+import { DoubleListContainer, HeadingContainer, ListContainer, ListsContainer, OptionContainer } from "./style.js";
+const renderRow = ({ data, index, style })=>{
+    const label = data[index];
+    return /*#__PURE__*/ jsx(OptionContainer, {
+        style: style,
+        children: /*#__PURE__*/ jsx("span", {
+            children: label
+        })
+    });
+};
+function DoubleList({ options, listHeight = 5, title, selected, total, ...rest }) {
+    const OPTION_SIZE = 36;
+    const height = listHeight * OPTION_SIZE;
+    const halfIndex = Math.ceil(options.length / 2);
+    const firstHalf = options.slice(0, halfIndex);
+    const secondHalf = options.slice(halfIndex);
+    const showSelected = void 0 !== selected && void 0 !== total;
+    return /*#__PURE__*/ jsxs(DoubleListContainer, {
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs(HeadingContainer, {
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        children: title
+                    }),
+                    showSelected && /*#__PURE__*/ jsx("span", {
+                        children: `${selected}/${total}`
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(ListsContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(ListContainer, {
+                        children: /*#__PURE__*/ jsx(FixedSizeList, {
+                            itemCount: firstHalf.length,
+                            itemData: firstHalf,
+                            itemSize: 36,
+                            height: height,
+                            width: "100%",
+                            itemKey: (index)=>options[index] || index,
+                            children: ({ index, style, data })=>renderRow({
+                                    data,
+                                    index,
+                                    style
+                                })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ListContainer, {
+                        children: /*#__PURE__*/ jsx(FixedSizeList, {
+                            itemCount: secondHalf.length,
+                            itemData: secondHalf,
+                            itemSize: 36,
+                            height: height,
+                            width: "100%",
+                            itemKey: (index)=>options[index] || index,
+                            children: ({ index, style, data })=>renderRow({
+                                    data,
+                                    index,
+                                    style
+                                })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DoubleList as default };

package/dist/components/DoubleList/style.d.ts

@@ -0,0 +1,5 @@
+export declare const DoubleListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const HeadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;