@arkyn/components 3.0.1-beta.95 → 3.0.2

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

@@ -1,74 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-import { AlertTitle } from "../alertTitle";
-import "./styles.css";
-const AlertContainerContext = createContext({});
-function useAlertContainer() {
-    return useContext(AlertContainerContext);
-}
-/**
- * AlertContainer component - used to display alert messages with different schemas
- *
- * @param props - AlertContainer component properties
- * @param props.schema - Alert color scheme and semantic meaning: "success" | "danger" | "warning" | "info"
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertContainer JSX element with context provider
- *
- * @example
- * ```tsx
- * // Basic alert
- * <AlertContainer schema="info">
- *   Alert message content
- * </AlertContainer>
- *
- * // Success alert
- * <AlertContainer schema="success">
- *   Operation completed successfully!
- * </AlertContainer>
- *
- * // Alert with title
- * <AlertContainer schema="warning">
- *   <AlertTitle>Warning</AlertTitle>
- *   Please check your input data.
- * </AlertContainer>
- *
- * // Danger alert
- * <AlertContainer schema="danger">
- *   <AlertTitle>Error</AlertTitle>
- *   Something went wrong. Please try again.
- * </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,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertContent component - used to wrap and style the main content area of alerts
- *
- * @param props - AlertContent component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertContent JSX element
- *
- * @example
- * ```tsx
- * // Basic alert content
- * <AlertContainer schema="info">
- *   <AlertContent>
- *     This is the main alert message content.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Alert with title and content
- * <AlertContainer schema="success">
- *   <AlertContent>
- *     <AlertTitle>Success</AlertTitle>
- *     Your operation has been completed successfully.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Multiple content sections
- * <AlertContainer schema="warning">
- *   <AlertContent>
- *     <AlertTitle>Warning</AlertTitle>
- *     <p>Please review the following items:</p>
- *     <ul>
- *       <li>Check your input data</li>
- *       <li>Verify permissions</li>
- *     </ul>
- *   </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,51 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertDescription component - used to display additional descriptive text in alerts
- *
- * @param props - AlertDescription component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertDescription JSX element
- *
- * @example
- * ```tsx
- * // Basic alert with description
- * <AlertContainer schema="info">
- *   <AlertContent>
- *     <AlertTitle>Information</AlertTitle>
- *     <AlertDescription>
- *       This is additional information to help you understand the context.
- *     </AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Success alert with description
- * <AlertContainer schema="success">
- *   <AlertContent>
- *     <AlertTitle>Upload Complete</AlertTitle>
- *     <AlertDescription>
- *       Your file has been successfully uploaded and processed.
- *     </AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Warning with detailed description
- * <AlertContainer schema="warning">
- *   <AlertContent>
- *     <AlertTitle>Storage Limit</AlertTitle>
- *     <AlertDescription>
- *       You have used 90% of your storage quota. Consider upgrading your plan
- *       or removing unused files.
- *     </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,66 +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 - automatically displays the appropriate icon based on the alert schema
- *
- * @param props - AlertIcon component properties
- *
- * **...Other valid Lucide icon properties**
- *
- * @returns AlertIcon JSX element with schema-specific icon
- *
- * @description
- * This component automatically selects and renders the appropriate icon based on the
- * AlertContainer's schema context:
- * - success: CheckCircle2 icon
- * - danger: XCircle icon
- * - warning: AlertTriangle icon
- * - info: Info icon
- *
- * @example
- * ```tsx
- * // Basic usage - icon automatically matches container schema
- * <AlertContainer schema="success">
- *   <AlertIcon />
- *   <AlertContent>
- *     <AlertTitle>Success</AlertTitle>
- *     <AlertDescription>Operation completed successfully.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Warning alert with icon
- * <AlertContainer schema="warning">
- *   <AlertIcon />
- *   <AlertContent>
- *     Please review your input before proceeding.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Custom icon size
- * <AlertContainer schema="danger">
- *   <AlertIcon size={24} />
- *   <AlertContent>
- *     <AlertTitle>Error</AlertTitle>
- *     <AlertDescription>Something went wrong.</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,48 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertTitle component - used to display the main title/heading of alerts
- *
- * @param props - AlertTitle component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertTitle JSX element
- *
- * @description
- * This component affects the layout of the AlertContainer. When present, the container
- * content will be aligned differently compared to alerts without a title.
- *
- * @example
- * ```tsx
- * // Basic alert with title
- * <AlertContainer schema="info">
- *   <AlertTitle>Information</AlertTitle>
- *   <AlertDescription>This is important information.</AlertDescription>
- * </AlertContainer>
- *
- * // Success alert with title and icon
- * <AlertContainer schema="success">
- *   <AlertIcon />
- *   <AlertTitle>Success!</AlertTitle>
- *   <AlertDescription>Your operation was completed.</AlertDescription>
- * </AlertContainer>
- *
- * // Error alert with custom styling
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertTitle className="custom-title">
- *     Critical Error
- *   </AlertTitle>
- *   <AlertDescription>
- *     Please contact support immediately.
- *   </AlertDescription>
- * </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,130 +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 - used to play audio files with playback controls
- *
- * @param props - AudioPlayer component properties
- * @param props.src - Audio source URL (required)
- * @param props.disabled - Whether the audio player is disabled. Default: false
- * @param props.onPlayAudio - Callback function called when audio starts playing
- * @param props.onPauseAudio - Callback function called when audio is paused
- *
- * **...Other valid HTML audio properties**
- *
- * @returns AudioPlayer JSX element
- *
- * @example
- * ```tsx
- * // Basic audio player
- * <AudioPlayer src="/audio/sample.mp3" />
- *
- * // Audio player with callbacks
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   onPlayAudio={(info) => console.log('Playing:', info)}
- *   onPauseAudio={(info) => console.log('Paused:', info)}
- * />
- *
- * // Disabled audio player
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   disabled
- * />
- *
- * // Audio player with additional HTML audio attributes
- * <AudioPlayer
- *   src="/audio/sample.mp3"
- *   loop
- *   preload="metadata"
- *   onPlayAudio={(info) => {
- *     console.log(`Current: ${info.formattedCurrentTime}`);
- *     console.log(`Total: ${info.formattedTotalTime}`);
- *   }}
- * />
- * ```
- */
-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 };