@arkyn/components 3.0.1-beta.99 → 3.0.2

package/dist/components/alert/alertContainer/index.js

@@ -1,91 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, } from "react";
-import { AlertTitle } from "../alertTitle";
-import "./styles.css";
-/**
- * Context for sharing alert container properties with child components
- * @internal
- */
-const AlertContainerContext = createContext({});
-/**
- * Custom hook to access the AlertContainer context
- *
- * @returns {AlertContainerProps} The current alert container properties including schema and HTML attributes
- *
- * @example
- * function CustomAlertContent() {
- *   const { schema } = useAlertContainer();
- *   return <div>Current schema: {schema}</div>;
- * }
- */
-function useAlertContainer() {
-    return useContext(AlertContainerContext);
-}
-/**
- * AlertContainer - A flexible alert component that displays messages with different visual styles
- *
- * This component automatically adjusts its layout based on whether an AlertTitle component
- * is present among its children. When AlertTitle is detected, the content is left-aligned;
- * otherwise, it's centered.
- *
- * @component
- * @memberof Alert
- *
- * @param {AlertContainerProps} props - Component properties
- * @param {"success" | "danger" | "warning" | "info"} props.schema - Determines the visual styling and semantic meaning of the alert
- * @param {ReactNode} props.children - Content to be rendered inside the alert, can include AlertTitle and other components
- * @param {string} [props.className] - Additional CSS classes to customize the alert appearance
- *
- * @returns {JSX.Element} A styled alert container with context provider for child components
- *
- * @requires react - For createContext, useContext, ReactNode
- *
- * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *  {children}
- * </AlertContainer>
- *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- */
-function AlertContainer(props) {
-    const { schema, children, className: baseClassName, ...rest } = props;
-    const hasAlertTitle = (children) => {
-        let found = false;
-        const searchForAlertTitle = (nodes) => {
-            if (Array.isArray(nodes)) {
-                nodes.forEach(searchForAlertTitle);
-            }
-            else if (nodes && typeof nodes === "object" && "type" in nodes) {
-                if (nodes.type === AlertTitle) {
-                    found = true;
-                }
-                else if (nodes.props &&
-                    typeof nodes.props === "object" &&
-                    nodes.props !== null &&
-                    "children" in nodes.props) {
-                    searchForAlertTitle(nodes.props.children);
-                }
-            }
-        };
-        searchForAlertTitle(children);
-        return found;
-    };
-    const shouldAlignCenter = !hasAlertTitle(children);
-    const finalClassName = shouldAlignCenter
-        ? "nonExistsAlertTitle"
-        : "existsAlertTitle";
-    const className = `arkynAlertContainer ${schema} ${finalClassName} ${baseClassName}`;
-    return (_jsx(AlertContainerContext.Provider, { value: props, children: _jsx("div", { className: className.trim(), ...rest, children: children }) }));
-}
-export { AlertContainer, useAlertContainer };

package/dist/components/alert/alertContent/index.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertContent component that renders the main content area of an alert.
- *
- * @component
- * @memberof Alert
- *
- * @description
- * This component serves as a container for the main content within an Alert component.
- * Supports all standard HTML div attributes for maximum flexibility.
- *
- * @param {AlertContentProps} props - Component props extending HTMLDivElement attributes
- * @param {string} [props.className] - Additional CSS classes to apply to the content container
- * @param {React.ReactNode} [props.children] - Content to be displayed inside the alert
- *
- * @returns {JSX.Element} A div element with the alert content styling
- *
- * @requires react
- *
- * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *  <AlertContent>
- *   {children}
- *  </AlertContent>
- * </AlertContainer>
- *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- */
-function AlertContent(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertContent ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertContent };

package/dist/components/alert/alertDescription/index.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertDescription component displays descriptive text content within an Alert component.
- *
- * This component provides a semantic wrapper for alert descriptions with appropriate styling
- * through the `arkynAlertDescription` CSS class. It extends all standard HTML div attributes,
- * making it flexible for various content and accessibility requirements.
- *
- * @component
- * @memberof Alert
- *
- * @param {AlertDescriptionProps} props - Component props extending HTML div attributes
- * @param {string} [props.className] - Additional CSS classes to apply to the description
- * @param {React.ReactNode} [props.children] - The description content to display
- *
- * @returns {JSX.Element} A div element with alert description styling
- *
- * @requires react
- *
- * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *  <AlertContent>
- *    <AlertDescription>
- *      Your are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- */
-function AlertDescription(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertDescription ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertDescription };

package/dist/components/alert/alertIcon/index.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AlertTriangle, CheckCircle2, Info, XCircle, } from "lucide-react";
-import { useAlertContainer } from "../alertContainer";
-import "./styles.css";
-/**
- * AlertIcon component that renders different icons based on the alert schema.
- *
- * @component
- * @memberof Alert
- *
- * @description
- * This component automatically selects and renders the appropriate icon based on the
- * alert schema from the AlertContainer context. It supports four schemas:
- * - success: Renders a CheckCircle2 icon
- * - danger: Renders an XCircle icon
- * - warning: Renders an AlertTriangle icon
- * - info: Renders an Info icon
- *
- * @param {AlertIconProps} props - Component props extending LucideProps
- * @param {string} [props.className] - Additional CSS class names to apply to the icon
- *
- * @returns {JSX.Element} The rendered icon component based on the alert schema
- *
- * @requires lucide-react - For icon components (CheckCircle2, XCircle, AlertTriangle, Info)
- * @requires useAlertContainer - Hook to access the alert schema from context
- *
- * @example
- * // This component is used internally within an Alert component
- * // and should not be used standalone as it depends on AlertContainer context
- * <AlertContainer schema="success">
- *   <AlertIcon />
- * </AlertContainer>
- *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- */
-function AlertIcon(props) {
-    const { className: baseClassName, ...rest } = props;
-    const { schema } = useAlertContainer();
-    const className = `arkynAlertIcon ${schema} ${baseClassName}`;
-    switch (schema) {
-        case "success":
-            return _jsx(CheckCircle2, { className: className, ...rest });
-        case "danger":
-            return _jsx(XCircle, { className: className, ...rest });
-        case "warning":
-            return _jsx(AlertTriangle, { className: className, ...rest });
-        case "info":
-            return _jsx(Info, { className: className, ...rest });
-    }
-}
-export { AlertIcon };

package/dist/components/alert/alertTitle/index.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertTitle component - Displays the title section of an alert message.
- *
- * This component renders a styled title for alert components, providing semantic structure
- * and consistent styling across the application.
- *
- * @component
- * @memberof Alert
- *
- * @param {AlertTitleProps} props - Component props extending HTML div attributes
- *
- * @returns {JSX.Element} A div element with alert title styling
- *
- * @requires react
- *
- * @example
- * // Basic usage
- * <AlertContainer schema="success">
- *   <AlertTitle>Success!</AlertTitle>
- *   <AlertDescription>Your changes have been saved.</AlertDescription>
- * </AlertContainer>
- *
- * @example
- * // Complete alert example
- * <AlertContainer schema="success">
- *  <AlertIcon />
- *  <AlertContent>
- *    <AlertTitle>Success!</AlertTitle>
- *    <AlertDescription>
- *      You are premium user now!
- *    </AlertDescription>
- *  </AlertContent>
- * </AlertContainer>
- */
-function AlertTitle(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertTitle ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertTitle };

package/dist/components/audioPlayer/index.js

@@ -1,115 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pause, Play } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useSlider } from "../../hooks/useSlider";
-import { Slider } from "../slider";
-import "./styles.css";
-/**
- * AudioPlayer component
- *
- * A customizable audio player with play/pause controls, progress slider, and time display.
- * Provides callbacks for play and pause events with detailed audio information.
- *
- * @component
- *
- * @param {AudioPlayerProps} props - The component props
- *
- * @returns {JSX.Element} The rendered audio player component
- *
- * @requires lucide-react - For Play and Pause icons
- * @requires useSlider - For slider state management
- * @requires slider - For the progress slider component
- *
- * @example
- * // Basic usage
- * <AudioPlayer src="https://example.com/audio.mp3" />
- *
- * @example
- * // With callbacks
- * <AudioPlayer
- *   src="https://example.com/audio.mp3"
- *   onPlayAudio={(info) => console.log('Playing:', info.formattedCurrentTime)}
- *   onPauseAudio={(info) => console.log('Paused at:', info.formattedCurrentTime)}
- * />
- */
-function AudioPlayer(props) {
-    const { onPlayAudio, onPauseAudio, disabled, ...rest } = props;
-    const [sliderValue, setSliderValue] = useSlider(0);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isDragging, setIsDragging] = useState(false);
-    const audioReference = useRef(null);
-    const currentTime = audioReference.current?.currentTime;
-    const totalTime = audioReference.current?.duration;
-    const formattedCurrentTime = formatTime(currentTime);
-    const formattedTotalTime = formatTime(totalTime);
-    const audioInformation = {
-        totalTime,
-        currentTime,
-        formattedCurrentTime,
-        formattedTotalTime,
-    };
-    function formatTime(time) {
-        if (!time)
-            return "00:00";
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        const formattedMinutes = String(minutes).padStart(2, "0");
-        const formattedSeconds = String(seconds).padStart(2, "0");
-        return `${formattedMinutes}:${formattedSeconds}`;
-    }
-    function handlePlayAudio() {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        if (props.onPlayAudio)
-            props.onPlayAudio(audioInformation);
-        audioElement.play();
-        setIsPlaying(true);
-    }
-    function handlePauseAudio() {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        if (props.onPauseAudio)
-            props.onPauseAudio(audioInformation);
-        audioElement.pause();
-        setIsPlaying(false);
-    }
-    function handleToggleAudio() {
-        if (isPlaying)
-            handlePauseAudio();
-        else
-            handlePlayAudio();
-    }
-    function handleSliderChange(value) {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        const totalTime = audioElement.duration;
-        const currentTime = (value / 100) * totalTime;
-        audioElement.currentTime = currentTime;
-    }
-    if (isDragging || !isPlaying) {
-        audioReference.current?.pause();
-    }
-    else if (isPlaying) {
-        audioReference.current?.play();
-    }
-    useEffect(() => {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        const handleTimeUpdate = () => {
-            const totalTime = audioElement.duration;
-            const currentTime = audioElement.currentTime;
-            const value = (currentTime / totalTime) * 100;
-            setSliderValue(value);
-        };
-        audioElement.addEventListener("timeupdate", handleTimeUpdate);
-        return () => {
-            audioElement.removeEventListener("timeupdate", handleTimeUpdate);
-        };
-    }, []);
-    return (_jsxs("div", { className: "arkynAudioPlayer", children: [_jsx("audio", { ...rest, ref: audioReference, src: props.src, onEnded: handlePauseAudio }), _jsxs("button", { type: "button", disabled: disabled, onClick: handleToggleAudio, children: [isPlaying && _jsx(Pause, {}), !isPlaying && _jsx(Play, {})] }), _jsx("p", { children: formattedCurrentTime }), _jsx(Slider, { value: sliderValue, onChange: handleSliderChange, onDragging: setIsDragging, disabled: disabled }), _jsx("p", { children: formattedTotalTime })] }));
-}
-export { AudioPlayer };

package/dist/components/audioUpload/hasFileContent/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RefreshCw } from "lucide-react";
-import { AudioPlayer } from "../../audioPlayer";
-import { Button } from "../../button";
-import { Divider } from "../../divider";
-import { IconButton } from "../../iconButton";
-import { Tooltip } from "../../tooltip";
-import "./styles.css";
-function HasFileContent(props) {
-    const { filePath, disabled, acceptAudio, handleSelectFile, isLoading, reSendAudio, changeAudioButtonText, } = props;
-    function handleClick() {
-        if (disabled)
-            return;
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = acceptAudio;
-        input.onchange = (event) => {
-            const file = event.target.files?.[0];
-            if (file)
-                handleSelectFile(file);
-        };
-        input.click();
-    }
-    return (_jsxs("div", { className: "arkynAudioUploadHasFileContentContainer", children: [_jsx(AudioPlayer, { src: filePath }), _jsx(Divider, {}), _jsxs("div", { className: "arkynAudioUploadButtonsContainer", children: [!!reSendAudio && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar \u00E1udio", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendAudio, icon: RefreshCw, disabled: disabled }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", disabled: disabled, children: changeAudioButtonText })] })] }));
-}
-export { HasFileContent };

package/dist/components/audioUpload/index.js

@@ -1,120 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import { HasFileContent } from "./hasFileContent";
-import { NoFileContent } from "./noFileContent";
-import "./styles.css";
-/**
- * AudioUpload component - handles audio file upload with drag & drop functionality and server upload
- *
- * @param props - AudioUpload component properties
- * @param props.name - Required field name for form handling
- * @param props.action - Required server endpoint URL for file upload
- * @param props.fileName - Name of the file field in FormData. Default: "file"
- * @param props.method - HTTP method for upload request. Default: "POST"
- * @param props.acceptAudio - Audio file types to accept. Default: "audio/*"
- * @param props.dropAudioText - Text displayed in drop zone. Default: "Ou arraste e solte um arquivo de áudio aqui"
- * @param props.selectAudioButtonText - Text for file selection button. Default: "Selecionar arquivo de áudio"
- * @param props.changeAudioButtonText - Text for change file button. Default: "Trocar arquivo de áudio"
- * @param props.onChange - Callback function called after successful upload with the file URL
- * @param props.fileResponseName - Name of the URL field in server response. Default: "url"
- * @param props.label - Optional label text to display above the upload area
- * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
- * @param props.disabled - Whether the upload is disabled. Default: false
- * @param props.defaultValue - Default audio URL value
- *
- * @returns AudioUpload JSX element with drag & drop zone or audio preview
- *
- * @example
- * ```tsx
- * // Basic audio upload
- * <AudioUpload
- *   name="audio"
- *   action="/api/upload"
- * />
- *
- * // Audio upload with label and custom texts
- * <AudioUpload
- *   name="podcast"
- *   action="/api/upload/podcast"
- *   label="Upload Podcast"
- *   showAsterisk
- *   selectAudioButtonText="Choose Audio File"
- *   dropAudioText="Drop your audio file here"
- *   changeAudioButtonText="Change Audio"
- * />
- *
- * // Audio upload with callback and custom settings
- * <AudioUpload
- *   name="recording"
- *   action="/api/upload"
- *   label="Voice Recording"
- *   acceptAudio="audio/mp3,audio/wav"
- *   onChange={(url) => console.log('Uploaded:', url)}
- *   fileResponseName="audioUrl"
- *   fileName="recording"
- *   method="PUT"
- * />
- *
- * // Disabled audio upload with default value
- * <AudioUpload
- *   name="preview"
- *   action="/api/upload"
- *   disabled
- *   defaultValue="/path/to/audio.mp3"
- *   label="Audio Preview"
- * />
- * ```
- */
-function AudioUpload(props) {
-    const { name, label, fileName = "file", method = "POST", onChange, fileResponseName = "url", selectAudioButtonText = "Selecionar arquivo de áudio", dropAudioText = "Ou arraste e solte um arquivo de áudio aqui", changeAudioButtonText = "Trocar arquivo de áudio", acceptAudio = "audio/*", action, defaultValue = "", showAsterisk = false, disabled = false, } = props;
-    const { fieldErrors } = useForm();
-    const fieldError = fieldErrors?.[name];
-    const [value, setValue] = useState(defaultValue);
-    const [error, setError] = useState("");
-    const [file, setFile] = useState(null);
-    const [filePath, setFilePath] = useState(defaultValue);
-    const [isLoading, setIsLoading] = useState(false);
-    async function handleUploadAudio(file) {
-        if (disabled)
-            return;
-        setIsLoading(true);
-        setFile(file);
-        setError("");
-        const formData = new FormData();
-        formData.append(fileName, file);
-        await fetch(action, { method: method, body: formData })
-            .then(async (response) => await response.json())
-            .then((response) => {
-            if (!!response?.error)
-                setError(response.error);
-            else
-                setValue(response?.[fileResponseName]);
-            onChange && onChange(response?.[fileResponseName]);
-        })
-            .catch((error) => {
-            console.error(error);
-            setError("Erro ao enviar audio");
-        })
-            .finally(() => setIsLoading(false));
-    }
-    function handleSelectFile(file) {
-        if (disabled)
-            return;
-        if (file.type.indexOf("audio") === -1) {
-            setError("O arquivo selecionado não é um arquivo de áudio");
-            return;
-        }
-        setFilePath(URL.createObjectURL(file));
-        handleUploadAudio(file);
-    }
-    const errorMessage = fieldError || error;
-    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
-    const hasImageClassName = filePath ? "hasAudio" : "noHasAudio";
-    const className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;
-    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptAudio: acceptAudio, dropAudioText: dropAudioText, handleSelectFile: handleSelectFile, selectAudioButtonText: selectAudioButtonText })), filePath && (_jsx(HasFileContent, { filePath: filePath, acceptAudio: acceptAudio, changeAudioButtonText: changeAudioButtonText, disabled: disabled, handleSelectFile: handleSelectFile, isLoading: isLoading, reSendAudio: !!errorMessage && file ? () => handleUploadAudio(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { AudioUpload };

package/dist/components/audioUpload/noFileContent/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../../button";
-import "./styles.css";
-function NoFileContent(props) {
-    const { dropAudioText, isLoading, acceptAudio, handleSelectFile, selectAudioButtonText, disabled, } = props;
-    function handleDrop(event) {
-        if (disabled)
-            return;
-        event.preventDefault();
-        const file = event.dataTransfer.files[0];
-        if (file)
-            handleSelectFile(file);
-    }
-    function handleClick() {
-        if (disabled)
-            return;
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = acceptAudio;
-        input.onchange = (event) => {
-            const file = event.target.files?.[0];
-            if (file)
-                handleSelectFile(file);
-        };
-        input.click();
-    }
-    return (_jsxs("div", { onDrop: handleDrop, className: "arkynAudioUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectAudioButtonText }), _jsx("p", { children: dropAudioText })] }));
-}
-export { NoFileContent };

package/dist/components/badge/index.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-/**
- * Badge component - used to display labels, statuses, and categorizations
- *
- * @param props - Badge component properties
- * @param props.size - Badge size. Default: "lg"
- * @param props.variant - Visual variant of the badge. Default: "ghost"
- * @param props.scheme - Badge color scheme. Default: "primary"
- * @param props.leftIcon - Optional icon to display on the left
- * @param props.rightIcon - Optional icon to display on the right
- *
- * **...Other valid HTML properties for div**
- *
- * @returns Badge JSX element
- *
- * @example
- * ```tsx
- * // Basic badge
- * <Badge>New</Badge>
- *
- * // Badge with color scheme
- * <Badge scheme="success">Approved</Badge>
- *
- * // Badge with icons
- * <Badge leftIcon={CheckIcon} scheme="success">
- *  Completed
- * </Badge>
- *
- * // Custom badge
- * <Badge
- *  size="lg"
- *  variant="solid"
- *  scheme="warning"
- *  rightIcon={AlertIcon}
- * >
- *  Warning
- * </Badge>
- * ```
- */
-function Badge(props) {
-    const { variant = "ghost", scheme = "primary", size = "lg", leftIcon, rightIcon, className: baseClassName = "", children, ...rest } = props;
-    const iconSizes = { md: 12, lg: 14 };
-    const iconSize = iconSizes[size];
-    const className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;
-    return (_jsxs("div", { className: className.trim(), ...rest, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: leftIcon }), _jsx("p", { children: children }), _jsx(IconRenderer, { iconSize: iconSize, icon: rightIcon })] }));
-}
-export { Badge };