frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/audio-player/index.js

@@ -0,0 +1,110 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { FRSTTheme } from '../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import ReactPlayer from 'react-player';
+import { container, containerMask, thumbLoading, thumb, content, title, description, date, controls, navigationButton, playButton, volumeControl, volume, volumeBar, audioTimeline, timeText, timeline } from './audioPlayerStyles.js';
+import { Box, Skeleton } from '@mui/material';
+import { Back15, PlayIcon, PauseIcon, Foward15, MuteIcon, VolumeIcon } from '../../shared/icons.js';
+
+function AudioPlayer(props) {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [playedSeconds, setPlayedSeconds] = useState(0);
+    const [duration, setDuration] = useState(0); // Added duration state
+    const playerRef = useRef(null);
+    const [loading, setLoading] = useState(true);
+    const [audioVolume, setAudioVolume] = useState(props?.volume ?? 0.5);
+    const defaultThumb = 'https://i.gyazo.com/f201e5ef302347108c31a2129104adc1.png';
+    useEffect(() => {
+        setTimeout(() => {
+            if (playerRef.current) {
+                setPlayedSeconds(props.startAt);
+                playerRef.current.seekTo(props.startAt);
+            }
+        }, 1000);
+    }, [props.startAt, playerRef.current]);
+    useEffect(() => {
+        if (props.exitSound) {
+            setIsPlaying(false);
+            if (playerRef.current) {
+                playerRef.current.seekTo(0);
+            }
+        }
+    }, [props.exitSound]);
+    const onProgress = (data) => {
+        if (props.onProgress && isPlaying) {
+            props.onProgress(data);
+        }
+        setPlayedSeconds(data.playedSeconds); // Update the playedSeconds state
+    };
+    const onVolumeChange = (newVolume) => {
+        setAudioVolume(newVolume); // Atualize o estado interno
+        if (playerRef.current) {
+            const internalPlayer = playerRef.current.getInternalPlayer();
+            if (internalPlayer) {
+                internalPlayer.volume = newVolume; // Atualize o volume diretamente no player interno
+            }
+        }
+    };
+    const onDuration = (duration) => {
+        setDuration(duration); // Store the duration when it's available
+    };
+    const onEnded = () => {
+        setIsPlaying(false);
+        if (props.onEnded) {
+            props.onEnded();
+        }
+    };
+    useEffect(() => {
+        if (props.audio)
+            setLoading(false);
+    }, [props.audio]);
+    function formatTime(seconds) {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Fragment, { children: jsxs(container, { style: {
+                    ...props.style,
+                    backgroundImage: props.coverImage ? `url(${props.coverImage})` : ''
+                }, children: [jsx(containerMask, {}), loading ? (jsx(Fragment, { children: jsx(thumbLoading, { style: {
+                                ...props.style,
+                                backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})`
+                            } }) })) : (jsx(Fragment, { children: jsx(thumb, { style: {
+                                ...props.style,
+                                backgroundImage: props.coverImage ? `url(${props.coverImage})` : `url(${defaultThumb})`
+                            } }) })), jsxs(content, { style: { width: '100%' }, children: [jsxs(title, { children: [" ", props.title, " "] }), jsxs(description, { children: [" ", props.description, " "] }), jsxs(date, { children: [" ", props.date, " "] }), props.longLoading && loading ? (jsxs(Box, { justifyContent: 'center', alignItems: 'center', width: '100%', children: [jsx(Skeleton, { height: 48, width: 150, sx: { marginLeft: 24 } }), jsx(Skeleton, { height: 24 })] })) : (jsxs(Fragment, { children: [jsxs(controls, { children: [jsx(navigationButton, { onClick: () => {
+                                                    const newTime = playedSeconds - 15;
+                                                    setPlayedSeconds(newTime >= 0 ? newTime : 0);
+                                                    if (playerRef.current) {
+                                                        playerRef.current.seekTo(newTime >= 0 ? newTime : 0);
+                                                    }
+                                                }, children: jsx(Back15, { fill: "currentColor" }) }), !isPlaying ? (jsx(playButton, { onClick: () => setIsPlaying(true), children: jsx(PlayIcon, { customColor_1: "currentColor" }) })) : (jsx(playButton, { onClick: () => setIsPlaying(false), children: jsx(PauseIcon, { customColor_1: "currentColor" }) })), jsx(navigationButton, { onClick: () => {
+                                                    const newTime = playedSeconds + 15;
+                                                    setPlayedSeconds(newTime <= duration ? newTime : duration);
+                                                    if (playerRef.current) {
+                                                        playerRef.current.seekTo(newTime <= duration ? newTime : duration);
+                                                    }
+                                                }, children: jsx(Foward15, { fill: "currentColor" }) }), jsx(volumeControl, { children: audioVolume === 0 ? (jsx(volume, { onClick: () => onVolumeChange(0.1), children: jsx(MuteIcon, {}) })) : (jsxs(volume, { children: [jsx("div", { onClick: () => onVolumeChange(0), children: jsx(VolumeIcon, {}) }), jsx(volumeBar, { type: "range", min: "0", max: "1", value: audioVolume, className: "volumeBar", step: "0.1", onChange: (e) => onVolumeChange(Number(e.target.value)), currentInputValue: (audioVolume / 1) * 100 })] })) })] }), jsx(thumb, { style: {
+                                            ...props.style,
+                                            backgroundImage: `url(${props.coverImage})` ?? `url(${defaultThumb})`
+                                        } }), jsxs(audioTimeline, { children: [jsx(timeText, { children: formatTime(playedSeconds) }), jsx(timeline, { type: "range", min: "0", max: duration, value: playedSeconds, className: "timeline", onChange: (e) => {
+                                                    setPlayedSeconds(Number(e.target.value));
+                                                }, onMouseUp: (e) => {
+                                                    const newPlayedSeconds = Number(e.target.value);
+                                                    setPlayedSeconds(newPlayedSeconds);
+                                                    const seekTime = (newPlayedSeconds / duration) * duration;
+                                                    if (playerRef.current) {
+                                                        playerRef.current.seekTo(seekTime);
+                                                    }
+                                                }, onTouchEnd: (e) => {
+                                                    const newPlayedSeconds = Number(e.target.value);
+                                                    setPlayedSeconds(newPlayedSeconds);
+                                                    const seekTime = (newPlayedSeconds / duration) * duration;
+                                                    if (playerRef.current) {
+                                                        playerRef.current.seekTo(seekTime);
+                                                    }
+                                                }, currentInputValue: (playedSeconds / duration) * 100 }), jsx(timeText, { children: formatTime(duration) })] }), jsx(ReactPlayer, { ref: playerRef, url: props.audio, playing: isPlaying, onProgress: onProgress, onDuration: onDuration, onEnded: onEnded, volume: audioVolume, hidden: true })] }))] })] }) }) }));
+}
+
+export { AudioPlayer as default };

package/dist/esm/src/components/avatar/avatarStyles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const AvatarImg = styled.img `
+  width: ${(props) => props.size || '120px'};
+  height: ${(props) => props.size || '120px'};
+  border-radius: 50%;
+  object-fit: cover;
+  background-image: url('https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg');
+  background-size: cover;
+  border: ${(props) => props.border || 'none'};
+
+  ${({ disabled }) => disabled === true &&
+    `
+        filter: grayscale(100%);
+    `}
+`;
+const AvatarWrapper = styled.div `
+  width: ${(props) => props.size || '120px'};
+  height: ${(props) => props.size || '120px'};
+  cursor: ${({ isActiveClick }) => isActiveClick ? 'pointer' : 'auto'} ;
+  box-sizing: border-box;
+`;
+
+export { AvatarImg, AvatarWrapper };

package/dist/esm/src/components/avatar/index.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { AvatarWrapper, AvatarImg } from './avatarStyles.js';
+import { useState, useEffect } from 'react';
+
+function Avatar({ size, src, alt, className, disabled, onClick, isActiveClick, id, style, border }) {
+    const [isImage, setIsImage] = useState(!!src);
+    const defaultImg = 'https://lxp-cdn.frstfalconi.cloud/STORYBOOK/path582.svg';
+    useEffect(() => {
+        setIsImage(!!src);
+    }, [src]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(AvatarWrapper, { size: size, className: className, onClick: onClick, isActiveClick: isActiveClick, id: id, style: style, children: isImage ? (jsx(AvatarImg, { border: border, src: src, size: size, disabled: disabled, onError: () => setIsImage(false) })) : (jsx(AvatarImg, { border: border, src: defaultImg, size: size, disabled: disabled })) }) }));
+}
+
+export { Avatar as default };

package/dist/esm/src/components/brainstorming-votar/index.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../shared/global.css.js';
+import { ContainerVotar, QuantidadeVotos, ButtonVotar, DivSeparador } from './votarStyles.js';
+import { VotarIconPressed, VotarIcon } from '../../shared/icons.js';
+
+function Votar(props) {
+    return props.user === 'userAutor' ? (jsxs(ContainerVotar, { children: [jsx(VotarIconPressed, {}), jsxs(QuantidadeVotos, { user: props.user, children: [props.valueQuantidade, " ", props.textValueQuantidade] })] })) : (jsxs(ContainerVotar, { children: [jsxs(ButtonVotar, { children: [props.votado ? jsx(VotarIconPressed, {}) : jsx(VotarIcon, {}), props.textButton] }), jsx(DivSeparador, {}), jsxs(QuantidadeVotos, { user: props.user, children: [props.valueQuantidade, " ", props.textValueQuantidade] })] }));
+}
+
+export { Votar as default };

package/dist/esm/src/components/brainstorming-votar/votarStyles.js

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components';
+
+const ContainerVotar = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const ButtonVotar = styled.button `
+  display: flex;
+  height: 32px;
+  width: 68px;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  position: absolute;
+  width: 68px;
+  border-radius: 8px;
+  font-family: 'PT Sans';
+  background: transparent;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+  border: none;
+  color: #444444;
+  cursor: pointer;
+  margin-right: 1rem;
+
+  :hover {
+    background: #f2f2f2;
+  }
+  :active {
+    color: #f26818;
+    svg {
+      fill: #f26818;
+      path {
+        stroke: #ffff;
+      }
+      path :nth-child(3) {
+        stroke: blue;
+      }
+    }
+  }
+  svg {
+    margin-right: 4px;
+  }
+`;
+const DivSeparador = styled.div `
+  margin-left: 4rem;
+  width: 24px;
+  height: 0px;
+  border: 0.5px solid #bdbdbd;
+  transform: rotate(-90deg);
+`;
+const QuantidadeVotos = styled.div `
+  display: flex;
+  flex-direction: row;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 140%;
+  color: #444444;
+  margin: 0;
+  cursor: pointer;
+
+  :hover {
+    text-decoration-line: underline;
+    color: #0645ad;
+  }
+  :active {
+    text-decoration-line: underline;
+    color: #0645ad;
+    font-weight: 700;
+  }
+
+  ${(props) => props.user === 'userAutor' &&
+    css `
+      margin-left: 0.5rem;
+    `}
+`;
+
+export { ButtonVotar, ContainerVotar, DivSeparador, QuantidadeVotos };

package/dist/esm/src/components/buttons/buttonStyle.js

@@ -0,0 +1,389 @@
+import styled, { css } from 'styled-components';
+
+const colorVariants = {
+    '#F26818': { hover: '#ee4c15', pressed: '#d14211' },
+    '#E7AD00': { hover: '#D49F00', pressed: '#C79500' },
+    '#2457E3': { hover: '#2652CC', pressed: '#2A4DAC' },
+    '#27AA3D': { hover: '#1F9B33', pressed: '#238D35' },
+    '#9A37E1': { hover: '#8E29D6', pressed: '#7F28BE' },
+    '#E64040': { hover: '#D13A3A', pressed: '#C23636' } //vermelho
+};
+const LinkButton = styled.a `
+  border: none;
+  text-decoration: none;
+  ${({ theme }) => theme.fonts.textMessageComponentsBodyBold}
+  color: ${({ theme }) => theme.colors.linkOnfocus};
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.linkHover};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.linkPressed};
+  }
+
+  &:focus {
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+  }
+
+  & > svg {
+    margin-right: 12px;
+    max-height: 16px;
+    height: 100%;
+    width: auto;
+  }
+
+  ${({ disabled }) => disabled &&
+    css `
+      pointer-events: none;
+      color: ${({ theme }) => theme.colors.linkDisabled};
+    `}
+`;
+const LinkButtonStartIcon = styled.a `
+  border: none;
+  text-decoration: none;
+  ${({ theme }) => theme.fonts.textMessageComponentsBodyBold};
+  color: ${({ theme }) => theme.colors.linkOnfocus};
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.linkHover};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.linkPressed};
+  }
+
+  &:focus {
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+  }
+
+  & > svg {
+    margin-right: 8px;
+    max-height: ${({ sizeIcon }) => (sizeIcon ? sizeIcon : '16px')};
+    height: 100%;
+    width: auto;
+  }
+
+  ${({ disabled }) => disabled &&
+    css `
+      pointer-events: none;
+      color: ${({ theme }) => theme.colors.linkDisabled};
+    `}
+`;
+const LinkButtonEndIcon = styled.a `
+  border: none;
+  text-decoration: none;
+  ${({ theme }) => theme.fonts.textMessageComponentsBodyBold}
+  color: ${({ theme }) => theme.colors.linkOnfocus};
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.linkHover};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.linkPressed};
+  }
+
+  &:focus {
+    color: ${({ theme }) => theme.colors.linkOnfocus};
+  }
+
+  & > svg {
+    margin-left: 12px;
+    max-height: ${({ sizeIcon }) => (sizeIcon ? sizeIcon : '16px')};
+    height: 100%;
+    width: auto;
+  }
+
+  ${({ disabled }) => disabled &&
+    css `
+      pointer-events: none;
+      color: ${({ theme }) => theme.colors.linkDisabled};
+    `}
+`;
+const variantStyles = (variant = 'contained', backgroundColor) => ({
+    primary: ({ theme }) => {
+        const isDefault = !backgroundColor || backgroundColor === '#F26818';
+        const baseColor = isDefault ? '#F26818' : backgroundColor;
+        const hoverColor = isDefault
+            ? colorVariants['#F26818'].hover
+            : colorVariants[backgroundColor]?.hover || baseColor;
+        const pressedColor = isDefault
+            ? colorVariants['#F26818'].pressed
+            : colorVariants[backgroundColor]?.pressed || baseColor;
+        return css `
+        background-color: ${baseColor};
+        color: ${theme.colors.shadeWhite};
+
+        &:hover {
+          background-color: ${hoverColor};
+        }
+
+        &:active {
+          background-color: ${pressedColor};
+        }
+
+        &:focus {
+          border: 2px solid ${baseColor}4D;
+          -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+        }
+
+        &:disabled {
+          background-color: ${theme.colors.neutralsGrey5};
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+      `;
+    },
+    secondary: css `
+      background-color: transparent;
+      color: ${({ theme }) => theme.colors.primary1};
+      border: 1px solid ${({ theme }) => theme.colors.primary1};
+
+      &:hover {
+        color: ${({ theme }) => theme.colors.primary2};
+        border: 1px solid ${({ theme }) => theme.colors.primary2};
+      }
+
+      &:active {
+        color: ${({ theme }) => theme.colors.primary3};
+        border: 1px solid ${({ theme }) => theme.colors.primary3};
+      }
+
+      &:focus {
+        border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
+        -webkit-background-clip: padding-box;
+        background-clip: padding-box;
+      }
+
+      &:disabled {
+        color: ${({ theme }) => theme.colors.neutralsGrey5};
+        border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    `,
+    expandedPrimary: ({ theme }) => {
+        const isDefault = !backgroundColor || backgroundColor === '#F26818';
+        const baseColor = isDefault ? '#F26818' : backgroundColor;
+        const hoverColor = isDefault
+            ? colorVariants['#F26818'].hover
+            : colorVariants[backgroundColor]?.hover || baseColor;
+        const pressedColor = isDefault
+            ? colorVariants['#F26818'].pressed
+            : colorVariants[backgroundColor]?.pressed || baseColor;
+        return css `
+        background-color: ${baseColor};
+        color: ${theme.colors.shadeWhite};
+        width: 100%;
+
+        &:hover {
+          background-color: ${hoverColor};
+        }
+
+        &:active {
+          background-color: ${pressedColor};
+        }
+
+        &:focus {
+          border: 2px solid ${baseColor}4D;
+          -webkit-background-clip: padding-box;
+          background-clip: padding-box;
+        }
+
+        &:disabled {
+          background-color: ${theme.colors.neutralsGrey5};
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+      `;
+    },
+    expandedSecondary: css `
+      background-color: transparent;
+      color: ${({ theme }) => theme.colors.primary1};
+      border: 1px solid ${({ theme }) => theme.colors.primary1};
+      width: 100%;
+
+      &:hover {
+        color: ${({ theme }) => theme.colors.primary2};
+        border: 1px solid ${({ theme }) => theme.colors.primary2};
+      }
+
+      &:active {
+        color: ${({ theme }) => theme.colors.primary3};
+        border: 1px solid ${({ theme }) => theme.colors.primary3};
+      }
+
+      &:focus {
+        border: 2px solid ${({ theme }) => theme.colors.primary1}4D;
+        -webkit-background-clip: padding-box;
+        background-clip: padding-box;
+      }
+
+      &:disabled {
+        color: ${({ theme }) => theme.colors.neutralsGrey5};
+        border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    `
+}[variant]);
+const Button = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 16px;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  box-shadow: none;
+
+  ${({ variant, backgroundColor }) => variantStyles(variant, backgroundColor)}
+
+  ${({ theme, length }) => theme.type === 'group' &&
+    length === 2 &&
+    `
+        &:first-child {
+            border-radius: 4px 0px 0px 4px;
+            border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
+            border-left: none !important;
+        }
+
+        &:last-child {
+            border-radius: 0px 4px 4px 0px;
+            border: none !important;
+        }
+    `}
+
+  ${({ theme, length }) => theme.type === 'group' &&
+    length > 2 &&
+    `
+        border-radius: 0px;
+
+        border-right: 1px solid rgba(255, 255, 255, 0.5);
+        border-left: 1px solid rgba(255, 255, 255, 0.5);
+    
+        &:focus,
+        &:active {
+            border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
+            border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
+        }
+        
+        &:first-child {
+            border-radius: 4px 0px 0px 4px;
+            border: none !important;
+        }
+
+        &:last-child {
+            border-radius: 0px 4px 4px 0px;
+            border: none !important;
+        }
+    `}
+
+  ${({ active }) => active === true &&
+    css `
+      background: #d14211;
+    `}
+
+  /* AQUI COMEÇA A ADIÇÃO NOVA: */
+
+  ${({ backgroundColor }) => backgroundColor &&
+    backgroundColor !== '#F26818' &&
+    css `
+      background-color: ${backgroundColor};
+
+      &:hover {
+        background-color: ${colorVariants[backgroundColor]?.hover || backgroundColor};
+      }
+
+      &:active {
+        background-color: ${colorVariants[backgroundColor]?.pressed || backgroundColor};
+      }
+    `}
+`;
+const ButtonStartIcon = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 16px;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  box-shadow: none;
+
+  & > svg {
+    margin-right: 12px;
+    max-height: ${({ sizeIcon }) => (sizeIcon ? sizeIcon : '16px')};
+    height: 100%;
+    width: auto;
+  }
+
+  ${({ variant, backgroundColor }) => variantStyles(variant, backgroundColor)}
+`;
+const ButtonEndIcon = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 16px;
+  height: 48px;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  box-sizing: border-box;
+  transition: all 0.2s ease-in-out;
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+  box-shadow: none;
+
+  & > svg {
+    margin-left: 12px;
+    max-height: ${({ sizeIcon }) => (sizeIcon ? sizeIcon : '16px')};
+    height: 100%;
+    width: auto;
+  }
+
+  ${({ variant, backgroundColor }) => variantStyles(variant, backgroundColor)}
+`;
+
+export { Button, ButtonEndIcon, ButtonStartIcon, LinkButton, LinkButtonEndIcon, LinkButtonStartIcon };

package/dist/esm/src/components/buttons/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import '../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../theme/index.js';
+import { LinkButtonStartIcon, ButtonStartIcon, LinkButtonEndIcon, ButtonEndIcon, LinkButton, Button as Button$1 } from './buttonStyle.js';
+
+function Button({ variant, label, sizeIcon, disabled, startIcon, endIcon, handleClick, type, active, style, value, length, id, ref, handleMount, buttonProps, backgroundColor, }) {
+    useEffect(() => {
+        if (handleMount && id) {
+            handleMount(id);
+        }
+    }, [id]);
+    return (jsx(ThemeProvider, { theme: { ...FRSTTheme, type: type }, children: startIcon ?
+            (variant === 'link') ?
+                jsxs(LinkButtonStartIcon, { ref: ref, style: { ...style }, disabled: disabled, onClick: handleClick, sizeIcon: sizeIcon, id: id, children: [startIcon, label] })
+                :
+                    jsxs(ButtonStartIcon, { backgroundColor: backgroundColor, ...buttonProps, ref: ref, style: { ...style }, variant: variant, disabled: disabled, onClick: handleClick, sizeIcon: sizeIcon, id: id, children: [startIcon, label] })
+            : endIcon ?
+                (variant === 'link') ?
+                    jsxs(LinkButtonEndIcon, { ref: ref, style: { ...style }, disabled: disabled, onClick: handleClick, sizeIcon: sizeIcon, id: id, children: [label, endIcon] })
+                    :
+                        jsxs(ButtonEndIcon, { backgroundColor: backgroundColor, ...buttonProps, ref: ref, style: { ...style }, variant: variant, disabled: disabled, onClick: handleClick, sizeIcon: sizeIcon, id: id, children: [label, endIcon] })
+                :
+                    (variant === 'link') ?
+                        jsx(LinkButton, { ref: ref, style: { ...style }, disabled: disabled, onClick: handleClick, id: id, children: label })
+                        :
+                            jsx(Button$1, { ...buttonProps, backgroundColor: backgroundColor, ref: ref, style: { ...style }, length: length, active: active, value: value, variant: variant, disabled: disabled, onClick: handleClick, id: id, children: label }) }));
+}
+
+export { Button as default };