@ftdata/ui 0.0.19 → 0.0.20

package/dist/components/DateRangePicker/styles.js

@@ -0,0 +1,147 @@
+import styled_components, { createGlobalStyle } from "styled-components";
+import { COLOR_ACCENT_DARK, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM, FONT_WEIGHT_BOLD } from "@ftdata/f-tokens";
+const DateRangePickerGlobalStyles = createGlobalStyle`
+  .rs-calendar-table-row {
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+  .rs-calendar-table-cell.rs-calendar-table-cell-un-same-month {
+    color: blue;
+  }
+
+  .rs-input-group-addon {
+    display: none;
+  }
+
+  .rs-picker-popup.rs-picker-popup-daterange {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 500 !important;
+    transform: translateY(${({ placement })=>placement?.startsWith("top") ? "-8px" : "8px"});
+  }
+
+    .rs-picker-header-date {
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+  
+  .rs-calendar-month-dropdown-row {
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+`;
+const DateRangePickerWrapper = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+`;
+const LabelContainer = styled_components.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  width: 100%;
+
+  button {
+    background: none;
+    border: none;
+    color: ${COLOR_ACCENT_MEDIUM};
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: ${FONT_WEIGHT_BOLD};
+    height: 1.5rem;
+    line-height: 1rem;
+    padding: 0;
+    transition: color 0.2s;
+    white-space: nowrap;
+
+    &:hover {
+      color: ${COLOR_ACCENT_DARK};
+    }
+  }
+`;
+const getFeedbackColor = (feedback)=>{
+    switch(feedback){
+        case "danger":
+            return COLOR_DANGER_MEDIUM;
+        case "success":
+            return COLOR_SUCCESS_MEDIUM;
+        case "warning":
+            return COLOR_WARNING_MEDIUM;
+        default:
+            return COLOR_NEUTRAL_MEDIUM;
+    }
+};
+const DateRangePickerContainer = styled_components.div`
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  position: relative;
+
+  .rs_rotate {
+    position: absolute;
+    right: 1rem;
+    top: 0.5rem;
+  }
+
+  .rs-picker {
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  .rs-input-group[data-inside="true"] .rs-input:not(:last-child),
+  .rs-input-group[data-inside="true"]
+    .rs-auto-complete:not(:last-child)
+    .rs-input {
+    padding-inline-end: 3rem;
+  }
+
+  .rs-picker-input-group.rs-input-group {
+    background-color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
+    border: none;
+    border-radius: 0.25rem;
+    box-shadow: 0px 0px 0px 1px ${({ feedback })=>getFeedbackColor(feedback)};
+    cursor: ${({ disabled })=>disabled ? "not-allowed" : "pointer"};
+    opacity: ${({ disabled })=>disabled ? "0.5" : "1"};
+    outline: none;
+    transition: box-shadow 0.2s;
+
+    &:focus-within {
+      box-shadow: 0px 0px 0px 2px
+        ${({ feedback })=>feedback ? getFeedbackColor(feedback) : COLOR_NEUTRAL_DARK};
+    }
+
+    ${({ $active, feedback })=>$active && `
+      box-shadow: 0px 0px 0px 2px ${feedback ? getFeedbackColor(feedback) : COLOR_NEUTRAL_DARK};
+    `}
+  }
+
+  .rs-date-range-input {
+    border: none;
+    box-sizing: border-box;
+    color: ${COLOR_NEUTRAL_DUSK};
+    font-family: "Inter", sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    height: 2.5rem;
+    line-height: 1rem;
+    outline: none;
+    padding: 0.5rem 3rem 0.5rem ${({ $icon })=>$icon ? "3rem" : "1rem"};
+    width: 100%;
+
+    &::placeholder {
+      color: ${COLOR_NEUTRAL_MEDIUM};
+    }
+  }
+
+  .rs-picker-header-date {
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+`;
+const IconContainer = styled_components.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  top: 0.5rem;
+  left: 1rem;
+  position: absolute;
+  z-index: 1;
+`;
+export { DateRangePickerContainer, DateRangePickerGlobalStyles, DateRangePickerWrapper, IconContainer, LabelContainer };

package/dist/components/DateRangePicker/types/dataRange.d.ts

@@ -0,0 +1,3 @@
+import type { DateRange as RsuiteDateRange } from "rsuite/esm/DateRangePicker";
+export type DateRange = RsuiteDateRange;
+export type LocaleCode = "pt-BR" | "en-US" | "es-ES";

package/dist/components/Modal/Button/index.d.ts

@@ -0,0 +1,50 @@
+import { MouseEventHandler as ReactMouseEventHandler, JSX } from "react";
+import { IconsNames } from "@ftdata/f-icons";
+export type DropdownOption = {
+    label: string;
+    action: ReactMouseEventHandler<HTMLSpanElement>;
+};
+export type ButtonVariants = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
+export type ButtonSizes = "small" | "medium" | "large";
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** Define o texto do botão */
+    text: string;
+    /** Define se o botão é um seletor (dropdown). */
+    selectable?: {
+        /** Define se é selecionavel */
+        active: boolean;
+        /** componente de dropdown. */
+        dropdown?: JSX.Element;
+        /** Opções do dropdown, exibidas quando `select` é `true`. */
+        options?: DropdownOption[];
+    };
+    /** Define o estilo visual do botão. */
+    variant: ButtonVariants;
+    /** Define o tamanho do botão.
+     * @default 'medium'
+     */
+    size?: ButtonSizes;
+    /** Define se o botão está desabilitado. */
+    disabled?: boolean;
+    /**
+     * Ícone à esquerda do botão.
+     * Pode ser passado como string (`IconsNames`) ou um elemento JSX.
+     */
+    LeftIcon?: IconsNames | JSX.Element;
+    /**
+     * Ícone à direita do botão.
+     * Pode ser passado como string (`IconsNames`) ou um elemento JSX.
+     */
+    RightIcon?: IconsNames | JSX.Element;
+    /** Define se o botão está em estado de carregamento. */
+    loading?: boolean;
+    /** Função chamada ao clicar no botão. */
+    onClick: ReactMouseEventHandler<HTMLButtonElement>;
+    /** Define o tipo do botão (`button`, `submit` ou `reset`).
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+    /** Define se o botão ocupa 100% do container (wide). */
+    wide?: boolean;
+}
+export default function Button({ disabled, variant, LeftIcon, RightIcon, loading, onClick, selectable, wide, text, type, size, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/Button/index.js

@@ -0,0 +1,105 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { ButtonWrapper, DropdownContainer, Spinner } from "./styles.js";
+import { Icon } from "@ftdata/f-icons";
+const LoadingTheme = {
+    primary: "dark",
+    secondary: "light",
+    ghost: "light",
+    danger: "dark",
+    success: "dark",
+    warning: "dark"
+};
+function Button({ disabled, variant, LeftIcon, RightIcon, loading, onClick, selectable, wide, text, type = "button", size = "medium", ...rest }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    useLayoutEffect(()=>{
+        function handleClickOutside(e) {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setIsOpen(false);
+        }
+        document.addEventListener("click", handleClickOutside);
+        return ()=>document.removeEventListener("click", handleClickOutside);
+    }, []);
+    const buttonHandler = (e)=>{
+        if (disabled || loading) return;
+        if (selectable?.active) return void setIsOpen((prev)=>!prev);
+        onClick(e);
+    };
+    const handleClickOption = (e, action)=>{
+        e.stopPropagation();
+        action(e);
+        setIsOpen(false);
+    };
+    const renderIcon = (icon, size)=>{
+        if (!icon) return null;
+        if ("string" == typeof icon) return /*#__PURE__*/ jsx(Icon, {
+            name: icon,
+            size: "small" === size ? "1rem" : "1.5rem"
+        });
+        return icon;
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(ButtonWrapper, {
+            type: type,
+            variant: variant,
+            disabled: disabled,
+            onClick: buttonHandler,
+            size: size,
+            $wide: wide,
+            ref: wrapperRef,
+            selectable: selectable?.active,
+            ...rest,
+            children: [
+                loading ? /*#__PURE__*/ jsx(Spinner, {
+                    size: "sm",
+                    variant: LoadingTheme[variant]
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        selectable?.active ? /*#__PURE__*/ jsxs("div", {
+                            className: "button-init-wrapper",
+                            children: [
+                                renderIcon(LeftIcon, size),
+                                /*#__PURE__*/ jsx("span", {
+                                    children: text
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                renderIcon(LeftIcon, size),
+                                /*#__PURE__*/ jsx("span", {
+                                    children: text
+                                })
+                            ]
+                        }),
+                        selectable?.active && /*#__PURE__*/ jsx(Icon, {
+                            name: "arw caret-down",
+                            size: "small" === size ? "1rem" : "1.5rem",
+                            className: `button-icon ${isOpen ? "open" : ""}`
+                        }),
+                        !selectable?.active && /*#__PURE__*/ jsx(Fragment, {
+                            children: renderIcon(RightIcon, size)
+                        })
+                    ]
+                }),
+                selectable?.active && isOpen && !selectable?.dropdown && /*#__PURE__*/ jsxs(DropdownContainer, {
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            children: text
+                        }),
+                        selectable?.options?.map(({ action, label }, index)=>/*#__PURE__*/ jsx("span", {
+                                className: "button-select-hoverable",
+                                onClick: (e)=>handleClickOption(e, action),
+                                children: label
+                            }, index))
+                    ]
+                }),
+                selectable?.active && isOpen && selectable?.dropdown && /*#__PURE__*/ jsx(Fragment, {
+                    children: /*#__PURE__*/ jsx(DropdownContainer, {
+                        children: selectable.dropdown
+                    })
+                })
+            ]
+        })
+    });
+}
+export { Button as default };

package/dist/components/Modal/Button/modifiers/color.d.ts

@@ -0,0 +1,9 @@
+export type ButtonColorModifiersType = {
+    primary: string;
+    secondary: string;
+    danger: string;
+    success: string;
+    warning: string;
+    ghost: string;
+};
+export declare const BUTTON_COLOR_MODIFIERS: ButtonColorModifiersType;

package/dist/components/Modal/Button/modifiers/color.js

@@ -0,0 +1,96 @@
+import { COLOR_BRAND_DARK, COLOR_BRAND_DARKER, COLOR_BRAND_LIGHT, COLOR_BRAND_MEDIUM, COLOR_DANGER_DARK, COLOR_DANGER_DARKER, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_DARKER, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_DARK, COLOR_WARNING_DARKER, COLOR_WARNING_MEDIUM, OPACITY_LEVEL_MEDIUM } from "@ftdata/f-tokens";
+const BUTTON_COLOR_MODIFIERS = {
+    primary: `
+    background-color: ${COLOR_BRAND_MEDIUM};
+    color: ${COLOR_NEUTRAL_DAY};
+
+    &:not(:disabled):hover {
+      background-color: ${COLOR_BRAND_DARK};
+    }
+
+    &:not(:disabled):active {
+      background-color: ${COLOR_BRAND_DARKER};
+    }
+
+    &:disabled {
+      opacity: ${OPACITY_LEVEL_MEDIUM};
+    }
+  `,
+    secondary: `
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+    color: ${COLOR_NEUTRAL_DUSK};
+
+    &:not(:disabled):hover {
+      color: ${COLOR_BRAND_LIGHT};
+    }
+
+    &:not(:disabled):active {
+      color: ${COLOR_BRAND_MEDIUM};
+    }
+
+    &:disabled {
+      color: ${COLOR_NEUTRAL_MEDIUM};
+    }
+  `,
+    danger: `
+    background-color: ${COLOR_DANGER_MEDIUM};
+    color: ${COLOR_NEUTRAL_DAY};
+
+    &:not(:disabled):hover {
+      background-color: ${COLOR_DANGER_DARK};
+    }
+
+    &:not(:disabled):active {
+      background-color: ${COLOR_DANGER_DARKER};
+    }
+
+    &:disabled {
+      opacity: ${OPACITY_LEVEL_MEDIUM};
+    }
+  `,
+    success: `
+    background-color: ${COLOR_SUCCESS_MEDIUM};
+    color: ${COLOR_NEUTRAL_DAY};
+
+    &:not(:disabled):hover {
+      background-color: ${COLOR_SUCCESS_DARK};
+    }
+
+    &:not(:disabled):active {
+      background-color: ${COLOR_SUCCESS_DARKER};
+    }
+
+    &:disabled {
+      opacity: ${OPACITY_LEVEL_MEDIUM};
+    }
+  `,
+    warning: `
+    background-color: ${COLOR_WARNING_MEDIUM};
+    color: ${COLOR_NEUTRAL_DAY};
+
+    &:not(:disabled):hover {
+      background-color: ${COLOR_WARNING_DARK};
+    }
+
+    &:not(:disabled):active {
+      background-color: ${COLOR_WARNING_DARKER};
+    }
+
+    &:disabled {
+      opacity: ${OPACITY_LEVEL_MEDIUM};
+    }
+  `,
+    ghost: `
+    background-color: transparent;
+    color: ${COLOR_NEUTRAL_DUSK};
+
+    &:not(:disabled):hover {
+      color: ${COLOR_NEUTRAL_DARKER};
+    }
+
+    &:disabled {
+      color: ${COLOR_NEUTRAL_MEDIUM};
+    }
+  `
+};
+export { BUTTON_COLOR_MODIFIERS };

package/dist/components/Modal/Button/modifiers/size.d.ts

@@ -0,0 +1,5 @@
+export declare const BUTTON_SIZE_MODIFIERS: {
+    small: string;
+    medium: string;
+    large: string;
+};

package/dist/components/Modal/Button/modifiers/size.js

@@ -0,0 +1,22 @@
+import { FONT_RELATIVE_SIZE_LG, FONT_RELATIVE_SIZE_MD, FONT_RELATIVE_SIZE_SM, SPACING_REALTIVE_STACK_02, SPACING_RELATIVE_INLINE_03 } from "@ftdata/f-tokens";
+const BUTTON_SIZE_MODIFIERS = {
+    small: `
+    font-size: ${FONT_RELATIVE_SIZE_SM};
+    line-height: 1.125rem;
+    height: 2rem;
+    padding:  ${SPACING_REALTIVE_STACK_02} ${SPACING_RELATIVE_INLINE_03};
+  `,
+    medium: `
+    font-size: ${FONT_RELATIVE_SIZE_MD};
+    line-height: 1.5rem;
+    height: 2.5rem;
+    padding:  ${SPACING_REALTIVE_STACK_02} ${SPACING_RELATIVE_INLINE_03};
+  `,
+    large: `
+    font-size: ${FONT_RELATIVE_SIZE_LG};
+    line-height: 1.5rem;
+    height: 3rem;
+    padding: ${SPACING_RELATIVE_INLINE_03} ${SPACING_RELATIVE_INLINE_03};
+  `
+};
+export { BUTTON_SIZE_MODIFIERS };

package/dist/components/Modal/Button/styles.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonSizes, ButtonVariants } from ".";
+type WrapperProps = {
+    $wide?: boolean;
+    selectable?: boolean;
+    size: ButtonSizes;
+    variant?: ButtonVariants;
+};
+export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, WrapperProps>> & string;
+export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type SpinnerProps = {
+    variant: string;
+};
+export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof {
+    variant: "dark" | "light";
+    size: "sm" | "md" | "lg" | "xl";
+}> & {
+    variant: "dark" | "light";
+    size: "sm" | "md" | "lg" | "xl";
+} & import("react").HTMLAttributes<HTMLDivElement>, SpinnerProps>> & string;
+export {};

package/dist/components/Modal/Button/styles.js

@@ -0,0 +1,105 @@
+import styled_components, { keyframes } from "styled-components";
+import { BORDER_RELATIVE_RADIUS_SM, COLOR_BRAND_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, SHADOW_LEVEL_02, SPACING_REALTIVE_STACK_02, SPACING_STACK_02 } from "@ftdata/f-tokens";
+import { BUTTON_COLOR_MODIFIERS } from "./modifiers/color.js";
+import { BUTTON_SIZE_MODIFIERS } from "./modifiers/size.js";
+import Loading from "../../Loading/index.js";
+const ButtonWrapper = styled_components.button`
+  box-sizing: border-box;
+  align-items: center;
+  border: none;
+  border-radius: ${BORDER_RELATIVE_RADIUS_SM};
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  justify-content: ${({ selectable })=>selectable ? "space-between" : "center"};
+  transition: all 0.15s ease;
+  position: relative;
+  outline: none;
+  font-weight: 500;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled:hover,
+  &:disabled:active {
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  ${({ variant })=>variant && BUTTON_COLOR_MODIFIERS[variant]};
+  ${({ size })=>size && BUTTON_SIZE_MODIFIERS[size]};
+  ${({ $wide })=>$wide ? "width: 100%;" : "width: fit-content;"};
+
+  .button-init-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-direction: row;
+  }
+
+  .button-icon {
+    transition: transform 0.2s ease;
+  }
+
+  .button-icon.open {
+    transform: rotate(180deg);
+  }
+`;
+const dropdownAnimation = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const DropdownContainer = styled_components.div`
+  box-shadow: ${SHADOW_LEVEL_02} ${COLOR_NEUTRAL_LIGHT};
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  padding: ${SPACING_REALTIVE_STACK_02} 0;
+  position: absolute;
+  top: calc(100% + ${SPACING_STACK_02});
+  z-index: 10;
+  overflow-y: auto;
+  white-space: nowrap;
+  animation: ${dropdownAnimation} 0.15s ease-out;
+  max-height: 200px;
+  min-width: 14.375rem;
+  width: 100%;
+
+  span {
+    box-sizing: border-box;
+    display: inline-flex;
+    height: 2.25rem;
+    color: ${COLOR_NEUTRAL_DUSK};
+    padding: 0.5rem 1rem;
+    white-space: nowrap;
+    overflow-y: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+
+  .button-select-hoverable {
+    color: ${COLOR_NEUTRAL_DARKER};
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${COLOR_NEUTRAL_LIGHTER};
+      color: ${COLOR_NEUTRAL_DUSK};
+    }
+  }
+`;
+const Spinner = styled_components(Loading)`
+  background-color: ${({ variant })=>"dark" === variant ? COLOR_BRAND_MEDIUM : COLOR_NEUTRAL_LIGHTER};
+`;
+export { ButtonWrapper, DropdownContainer, Spinner };

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

@@ -4,22 +4,26 @@ export type ModalSizeCustom = {
     height: string;
 };
 export type ModalSizes = "small" | "medium" | "large" | ModalSizeCustom;
-export type ModalAction = {
-    onClick: () => void;
-    label: string;
-    shouldClose?: boolean;
-    disabled?: boolean;
-};
+export type ModalFeedbacks = "danger" | "warning" | "success" | "default";
 export type ModalActions = {
-    primary?: ModalAction;
-    secondary?: ModalAction;
+    primary?: {
+        onClick: () => void;
+        label: string;
+        shouldClose?: boolean;
+    };
+    secondary?: {
+        onClick: () => void;
+        label: string;
+        shouldClose?: boolean;
+    };
 };
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     size?: ModalSizes;
+    feedback?: ModalFeedbacks;
     title?: string;
     message?: string;
     closeHandler: () => void;
     actions?: ModalActions;
 }
-export default function Modal({ children, size, title, message, closeHandler, actions, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ children, size, feedback, title, message, closeHandler, actions, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/index.js

@@ -3,9 +3,15 @@ import { useCallback, useState } from "react";
 import { ActionsContainer, ContentContainer, ModalContainer } from "./styles.js";
 import { Title } from "../Texts/titles.js";
 import { Paragraph } from "../Texts/paragraphs.js";
-import Button from "../Button/index.js";
+import Button from "./Button/index.js";
 import IconButton from "../IconButton/index.js";
-function Modal({ children, size, title, message, closeHandler, actions }) {
+const BUTTON_FEEDBACK = {
+    default: "primary",
+    danger: "danger",
+    warning: "warning",
+    success: "success"
+};
+function Modal({ children, size, feedback, title, message, closeHandler, actions }) {
     const [isClosing, setIsClosing] = useState(false);
     const handleClose = useCallback(()=>{
         setIsClosing(true);
@@ -52,14 +58,14 @@ function Modal({ children, size, title, message, closeHandler, actions }) {
                     actions.secondary && /*#__PURE__*/ jsx(Button, {
                         onClick: ()=>handleActionClick(actions.secondary),
                         type: "button",
-                        variant: "secondary",
-                        children: actions.secondary.label
+                        text: actions.secondary.label,
+                        variant: "secondary"
                     }),
                     actions.primary && /*#__PURE__*/ jsx(Button, {
                         onClick: ()=>handleActionClick(actions.primary),
                         type: "button",
-                        variant: "primary",
-                        children: actions.primary.label
+                        text: actions.primary.label,
+                        variant: BUTTON_FEEDBACK[feedback || "default"]
                     })
                 ]
             })

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

@@ -1,4 +1,4 @@
-import { ModalProps, ModalSizes } from '.';
+import { ModalProps, ModalSizes } from ".";
 export declare const getSize: (size?: ModalSizes) => import("styled-components").RuleSet<object> | undefined;
 export declare const ModalOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Partial<ModalProps> & {