@alume/alume-design-system 4.13.21 → 4.13.22

package/dist/components/large-selector/largeSelector.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyledLargeSelectorItemProps } from "./largeSelector.styled";
-declare type LargeSelectorType = {
+type LargeSelectorType = {
     Item: React.FunctionComponent<StyledLargeSelectorItemProps>;
 };
 export declare const LargeSelector: React.FunctionComponent & LargeSelectorType;

package/dist/components/link/link.component.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const Link: React.FunctionComponent<LinkProps>;
 export {};

package/dist/components/list/list.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-declare type ListProps = React.OlHTMLAttributes<HTMLOListElement>;
-declare type ItemProps = React.LiHTMLAttributes<HTMLLIElement>;
-declare type ListType = {
+type ListProps = React.OlHTMLAttributes<HTMLOListElement>;
+type ItemProps = React.LiHTMLAttributes<HTMLLIElement>;
+type ListType = {
     Item: React.FunctionComponent<ItemProps>;
 };
 export declare const List: React.FunctionComponent<ListProps> & ListType;

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

@@ -0,0 +1 @@
+export * from "./menu.component";

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export * from "./menu.component";

package/dist/components/menu/menu.component.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+export declare const Menu: {
+    Root: import("react").FC<DropdownMenu.DropdownMenuProps>;
+    Trigger: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    TriggerItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuTriggerItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Item: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    CheckboxItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Separator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+    ItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+};

package/dist/components/menu/menu.component.js

@@ -0,0 +1,15 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { StyledCheckboxItem, StyledContent, StyledItem, StyledItemIndicator, StyledLabel, StyledRadioItem, StyledSeparator, StyledTriggerItem, } from "./menu.styled";
+export const Menu = {
+    Root: DropdownMenu.Root,
+    Trigger: DropdownMenu.Trigger,
+    TriggerItem: StyledTriggerItem,
+    Content: StyledContent,
+    Item: StyledItem,
+    CheckboxItem: StyledCheckboxItem,
+    Separator: StyledSeparator,
+    Label: StyledLabel,
+    RadioGroup: DropdownMenu.RadioGroup,
+    RadioItem: StyledRadioItem,
+    ItemIndicator: StyledItemIndicator,
+};

package/dist/components/menu/menu.styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as Menu from "@radix-ui/react-dropdown-menu";
+export declare const StyledContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledCheckboxItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledRadioItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledTriggerItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuTriggerItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Menu.DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/components/menu/menu.styled.js

@@ -0,0 +1,86 @@
+import styled, { css, keyframes } from "styled-components";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import { colors } from "../../constants";
+const upSize = keyframes `
+  from { transform: scale(0.9); }
+  to { transform: scale(1); }
+`;
+export const StyledContent = styled(Menu.Content) `
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid ${colors.cardBorderGrey};
+  box-shadow: 0 3px 10px 0px rgb(0 0 0 / 14%);
+  overflow: hidden;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    animation-fill-mode: forwards;
+    will-change: transform, opacity;
+    &[data-state="open"] {
+      &[data-side="top"],
+      &[data-side="right"],
+      &[data-side="bottom"],
+      &[data-side="left"] {
+        animation-name: ${upSize};
+      }
+    }
+  }
+`;
+const itemStyles = css `
+  all: unset;
+  color: ${colors.textGreen};
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding-right: 20px;
+  padding-left: 26px;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+
+  :hover {
+    background: ${colors.backgroundGreen};
+  }
+
+  &[data-disabled] {
+    color: ${colors.grey};
+    pointer-events: none;
+  }
+
+  &:focus: {
+    background-color: ${colors.backgroundGreen};
+    color: #fff;
+  }
+`;
+export const StyledItem = styled(Menu.Item) `
+  ${itemStyles}
+`;
+export const StyledCheckboxItem = styled(Menu.CheckboxItem) `
+  ${itemStyles}
+`;
+export const StyledRadioItem = styled(Menu.RadioItem) `
+  ${itemStyles}
+`;
+export const StyledTriggerItem = styled(Menu.TriggerItem) `
+  ${itemStyles}
+`;
+export const StyledLabel = styled(Menu.Label) `
+  padding-left: 26px;
+  font-size: 14px;
+  color: ${colors.green};
+  background: ${colors.lightGrey};
+`;
+export const StyledSeparator = styled(Menu.Separator) `
+  height: 1px;
+  background-color: ${colors.green};
+  margin: 4px 8px;
+`;
+export const StyledItemIndicator = styled(Menu.ItemIndicator) `
+  position: absolute;
+  left: 0;
+  width: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;

package/dist/components/multiselect/multiselect.style.js

@@ -28,7 +28,7 @@ export const MultiselectSearchContainer = styled.div `
 `;
 export const MultiselectLabel = styled.label `
   position: absolute;
-  color: ${colors.textLightGreen};
+  color: ${colors.textGreen};
   cursor: pointer;
   transition: transform 0.4s, font-size 0.4s;
   transition-timing-function: ease;

package/dist/components/radio/radio.component.d.ts

@@ -3,9 +3,10 @@ interface RadioItemProps {
     label: string;
     itemValue: string | boolean | number;
     value: string | boolean | number;
+    name?: string;
     onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
 }
-declare type RadioType = {
+type RadioType = {
     Item: React.FunctionComponent<RadioItemProps>;
 };
 export declare const Radio: React.FunctionComponent & RadioType;

package/dist/components/radio/radio.component.js

@@ -3,11 +3,11 @@ import { GroupContainer, InputRadio, ItemContainer, CircleButton, LabelText, } f
 export const Radio = ({ children }) => {
     return React.createElement(GroupContainer, null, children);
 };
-const Item = ({ itemValue, label, value, onClick, }) => {
+const Item = ({ itemValue, label, value, onClick, name, }) => {
     const isSelected = value === itemValue;
     const handleRadioClick = (event) => onClick && onClick(event);
     return (React.createElement(ItemContainer, null,
-        React.createElement(InputRadio, { id: itemValue.toString(), type: "radio", onClick: handleRadioClick, checked: isSelected }),
+        React.createElement(InputRadio, { id: itemValue.toString(), type: "radio", onClick: handleRadioClick, checked: isSelected, name: name }),
         React.createElement(CircleButton, { checked: isSelected },
             React.createElement("div", null)),
         React.createElement(LabelText, null, label)));

package/dist/components/range-input/rangeInput.component.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-interface RangeInputProps {
+import React, { InputHTMLAttributes } from "react";
+interface RangeInputProps extends InputHTMLAttributes<HTMLInputElement> {
     value?: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     max: number;
     step?: number;
     min?: number;
-    disabled?: boolean;
+    type?: "currency";
 }
 export declare const RangeInput: React.FunctionComponent<RangeInputProps>;
 export {};

package/dist/components/range-input/rangeInput.component.js

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from "react";
 import { Input, InputContainer, Title } from "./rangeInput.styled";
+import { formatCurrency } from "../../helpers";
 export const RangeInput = (_a) => {
-    var { value, onChange, max, min = 0, step = 1, disabled } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step", "disabled"]);
-    const handleChange = (event) => {
-        const { value } = event.currentTarget;
-        Number(value) >= min && Number(value) <= max && onChange(event);
-    };
-    const verifiedValue = Number(value) || min;
+    var { value, min = 0, step = 1, type } = _a, props = __rest(_a, ["value", "min", "step", "type"]);
+    const newValue = Number(value) || min;
+    const displayedValue = type === "currency"
+        ? formatCurrency(newValue)
+        : new Intl.NumberFormat("pt-BR").format(newValue);
     return (React.createElement(InputContainer, null,
-        React.createElement(Title, { disabled: disabled }, `R$ ${verifiedValue},00`),
-        React.createElement(Input, Object.assign({ type: "range", step: step, sliderValue: verifiedValue, value: verifiedValue, max: max, min: min, disabled: disabled, onChange: handleChange }, rest))));
+        React.createElement(Title, { disabled: props.disabled }, displayedValue),
+        React.createElement(Input, Object.assign({ type: "range", step: step, value: newValue, sliderValue: newValue, min: min }, props))));
 };

package/dist/components/select/select.component.d.ts

@@ -8,6 +8,7 @@ interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
     value?: string;
     label?: string;
     stretch?: boolean;
+    error?: string;
 }
 export declare const Select: React.FunctionComponent<SelectProps>;
 export {};

package/dist/components/select/select.component.js

@@ -10,10 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useState, useRef, useEffect } from "react";
-import { DropdownSelectIcon, OptionsContainer, OptionStyled, SelectLabel, SelectContainerStyled, ContainerText, FocusInput, } from "./select.styled";
+import { DropdownSelectIcon, OptionsContainer, OptionStyled, SelectLabel, ContainerText, FocusInput, StyleErrorSpan, StyledSelectContainer, SelectStyled, } from "./select.styled";
 export const Select = (_a) => {
     var _b;
-    var { options, value, onChange, label, name, disabled } = _a, props = __rest(_a, ["options", "value", "onChange", "label", "name", "disabled"]);
+    var { options, value, onChange, label, name, disabled, error } = _a, props = __rest(_a, ["options", "value", "onChange", "label", "name", "disabled", "error"]);
     const selectorRef = useRef(null);
     const hasLabel = label && label !== "";
     const [isOpen, setIsOpen] = useState(false);
@@ -43,13 +43,15 @@ export const Select = (_a) => {
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [selectorRef]);
     const optionLabel = ((_b = options.find((option) => option.value === value)) === null || _b === void 0 ? void 0 : _b.label) || "";
-    return (React.createElement(SelectContainerStyled, Object.assign({ onClick: handleSelectClick, ref: selectorRef, hasLabel: hasLabel, disabled: disabled }, props),
-        hasLabel && (React.createElement(SelectLabel, { disabled: disabled, riseLabel: isOpen || validateValue(value) }, label)),
-        React.createElement(DropdownSelectIcon, { changeDirection: isOpen }),
-        React.createElement(ContainerText, null, optionLabel),
-        React.createElement(FocusInput, { onFocus: handleInputFocus }),
-        React.createElement(OptionsContainer, { isOpen: isOpen }, options.map((option, index) => (React.createElement(OptionStyled, { onClick: (event) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                handleOptionClick(event, option.value);
-            }, key: index }, option.label))))));
+    return (React.createElement(StyledSelectContainer, { hasError: !!error },
+        React.createElement(SelectStyled, Object.assign({ onClick: handleSelectClick, ref: selectorRef, hasLabel: hasLabel, disabled: disabled, hasError: !!error }, props),
+            hasLabel && (React.createElement(SelectLabel, { disabled: disabled, riseLabel: isOpen || validateValue(value), hasError: !!error }, label)),
+            React.createElement(DropdownSelectIcon, { changeDirection: isOpen }),
+            React.createElement(ContainerText, null, optionLabel),
+            React.createElement(FocusInput, { onFocus: handleInputFocus }),
+            React.createElement(OptionsContainer, { isOpen: isOpen }, options.map((option, index) => (React.createElement(OptionStyled, { onClick: (event) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    handleOptionClick(event, option.value);
+                }, key: index }, option.label))))),
+        error && React.createElement(StyleErrorSpan, null, error)));
 };

package/dist/components/select/select.styled.d.ts

@@ -3,9 +3,11 @@ export interface SelectStyledProps {
     stretch?: boolean;
     hasLabel?: boolean;
     disabled?: boolean;
+    hasError?: boolean;
     [key: string]: unknown;
 }
-export declare const SelectContainerStyled: import("styled-components").StyledComponent<"div", any, SelectStyledProps, never>;
+export declare const StyledSelectContainer: import("styled-components").StyledComponent<"div", any, SelectStyledProps, never>;
+export declare const SelectStyled: import("styled-components").StyledComponent<"div", any, SelectStyledProps, never>;
 interface OptionsContainerProps {
     isOpen?: boolean;
 }
@@ -23,4 +25,5 @@ interface DropdownSelectIconProps {
 export declare const DropdownSelectIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").SVGAttributes<HTMLOrSVGElement>>, any, DropdownSelectIconProps, never>;
 export declare const ContainerText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const FocusInput: import("styled-components").StyledComponent<"select", any, {}, never>;
+export declare const StyleErrorSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/components/select/select.styled.js

@@ -1,19 +1,29 @@
 import styled from "styled-components";
 import { colors } from "../../constants";
 import { DropdownIcon } from "../../assets/icons";
-export const SelectContainerStyled = styled.div `
+export const StyledSelectContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  height: 28px;
+  width: ${({ stretch }) => (stretch ? "100%" : "auto")};
+
+  ${({ hasError }) => hasError && `color: ${colors.red};`}
+`;
+export const SelectStyled = styled.div `
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: transparent;
   border: 0;
+  border-bottom: ${({ hasError }) => `1px solid ${hasError ? colors.red : colors.lightGrey}`};
+  color: ${({ hasError }) => (hasError ? colors.red : colors.textGreen)};
   &:focus {
     outline: none;
   }
   position: relative;
   top: 2px;
   font-size: 16px;
-  color: ${colors.textGreen};
-  border-bottom: 1px solid ${colors.lightGrey};
   width: ${({ stretch }) => (stretch ? "100%" : "auto")};
   box-sizing: content-box;
   height: 26px;
@@ -37,6 +47,7 @@ export const OptionsContainer = styled.div `
   border-radius: 4px;
 `;
 export const OptionStyled = styled.div `
+  color: ${colors.textGreen};
   -webkit-appearance: none;
   -moz-appearance: none;
   padding: 8px;
@@ -47,7 +58,7 @@ export const OptionStyled = styled.div `
 `;
 export const SelectLabel = styled.span `
   position: absolute;
-  color: ${colors.textLightGreen};
+  color: ${colors.textGreen};
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
   transition: transform 0.4s, font-size 0.4s;
   transition-timing-function: ease;
@@ -84,3 +95,9 @@ export const FocusInput = styled.select `
     outline: none;
   }
 `;
+export const StyleErrorSpan = styled.span `
+  position: absolute;
+  align-self: flex-end;
+  transform: translateY(20px);
+  font-size: 12px;
+`;

package/dist/components/table/table.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyledHeaderCellProps, StyledCellProps, StyledRowProps } from "./table.styled";
-declare type TableType = {
+type TableType = {
     Header: React.FunctionComponent;
     Row: React.FunctionComponent<StyledRowProps>;
     HeaderCell: React.FunctionComponent<StyledHeaderCellProps>;

package/dist/components/table/table.styled.d.ts

@@ -1,9 +1,11 @@
-declare type CellAlignment = "left" | "center" | "right";
-declare type TextBehaviour = "nowrap" | "ellipsis" | "normal";
+/// <reference types="react" />
+type CellAlignment = "left" | "center" | "right";
+type TextBehaviour = "nowrap" | "ellipsis" | "normal";
 export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export declare const StyledHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
 export interface StyledRowProps {
     customColor?: string;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
 }
 export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, StyledRowProps, never>;
 export interface StyledHeaderCellProps {

package/dist/components/table/table.styled.js

@@ -18,14 +18,25 @@ export const StyledTable = styled.table `
   font-size: 12px;
 `;
 export const StyledHeader = styled.thead `
-  background-color: ${colors.floatingNav};
+  background-color: ${colors.timelineGrey};
+  color: ${colors.tableText};
+
+  > tr:hover {
+    background-color: initial;
+  }
 `;
 export const StyledRow = styled.tr `
   color: ${({ customColor }) => customColor || colors.tableText};
+
+  cursor: ${({ onClick }) => (onClick ? "pointer" : "initial")};
+
+  :hover {
+    background-color: ${colors.floatingNav};
+  }
 `;
 export const StyledHeaderCell = styled.th `
   border: none;
-  font-weight: normal;
+  font-weight: 500;
   padding: ${cellsPadding};
   text-align: ${({ alignment }) => alignment || cellsDefaultAlignment};
   white-space: nowrap;

package/dist/components/text-area-input/textAreaInput.component.js

@@ -9,13 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable no-debugger */
 import React, { useState } from "react";
 import { StyledCharQuantitySpan, StyledTextAreaInputContainer, StyleErrorSpan, StyledTextAreaInput, } from "./textAreaInput.styled";
 export const TextAreaInput = (_a) => {
     var { label, error, disabled, value, name, onChange, rows = 5, maxChars = 500 } = _a, props = __rest(_a, ["label", "error", "disabled", "value", "name", "onChange", "rows", "maxChars"]);
     const [charactersQuantity, setCharactersQuantity] = useState(0);
     const handleOnChange = (event) => {
-        const eventCharQuantity = event.currentTarget.value.length;
+        const eventCharQuantity = event.target.value.length;
         if (eventCharQuantity > maxChars)
             return;
         setCharactersQuantity(eventCharQuantity);
@@ -23,6 +24,6 @@ export const TextAreaInput = (_a) => {
     };
     return (React.createElement(StyledTextAreaInputContainer, { hasError: !!error },
         React.createElement(StyledCharQuantitySpan, null, ` ${charactersQuantity}/${maxChars}`),
-        React.createElement(StyledTextAreaInput, Object.assign({}, props, { name: name, value: value, hasError: !!error, disabled: disabled, autoComplete: "off", rows: rows, onChange: handleOnChange, placeholder: label })),
+        React.createElement(StyledTextAreaInput, Object.assign({}, props, { name: name, value: value || "", hasError: !!error, disabled: disabled, autoComplete: "off", rows: rows, onChange: handleOnChange, placeholder: label })),
         error && React.createElement(StyleErrorSpan, null, error)));
 };

package/dist/components/text-area-input/textAreaInput.styled.js

@@ -8,7 +8,7 @@ export const StyledTextAreaInputContainer = styled.div `
   ${({ hasError }) => hasError && `color: ${colors.red};`}
 `;
 export const StyledCharQuantitySpan = styled.span `
-  color: grey;
+  color: ${colors.textGreen};
   position: relative;
   top: 20px;
   text-align: right;
@@ -33,6 +33,10 @@ export const StyledTextAreaInput = styled.textarea `
     background-color: transparent;
   }
 
+  &::placeholder {
+    color: ${colors.textGreen};
+  }
+
   ${({ hasError }) => hasError &&
     `
   border-color: ${colors.red};

package/dist/components/text-input/textInput.component.d.ts

@@ -5,7 +5,7 @@ export interface ValueInterceptor {
     onChange?: (value?: string | number | readonly string[]) => string;
     onKeyDown?: (value?: string | number | readonly string[], event?: React.KeyboardEvent<HTMLInputElement>) => string;
 }
-declare type InputValueCase = "lowercase" | "uppercase";
+type InputValueCase = "lowercase" | "uppercase";
 interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;
     error?: string;

package/dist/components/text-input/textInput.styled.js

@@ -13,7 +13,7 @@ export const StyledTextInputContainer = styled.div `
 export const StyledTextInputLabel = styled.label `
   position: relative;
 
-  color: ${colors.textLightGreen};
+  color: ${colors.textGreen};
   cursor: ${({ disabled }) => (disabled ? "normal" : "text")};
   transition: transform 0.4s, font-size 0.4s;
   transition-timing-function: ease;

package/dist/components/vertical-timeline/verticalTimeline.component.d.ts

@@ -5,7 +5,7 @@ interface VerticalTimelineItemProps extends React.HTMLProps<HTMLDivElement> {
     isActive?: boolean;
     setRef?: (instance: HTMLDivElement) => void;
 }
-declare type VerticalTimelineType = {
+type VerticalTimelineType = {
     Item: React.FunctionComponent<VerticalTimelineItemProps>;
 };
 export declare const VerticalTimeline: React.FunctionComponent & VerticalTimelineType;

package/dist/constants/styles.d.ts

@@ -1,5 +1,5 @@
-export declare type BorderRadiusKey = "small" | "medium" | "large" | "round";
-export declare type FontSizeKey = "extraSmall" | "small" | "medium" | "large" | "extraLarge";
+export type BorderRadiusKey = "small" | "medium" | "large" | "round";
+export type FontSizeKey = "extraSmall" | "small" | "medium" | "large" | "extraLarge";
 export declare const styles: {
     borderRadius: Record<BorderRadiusKey, string>;
     fontSize: Record<FontSizeKey, string>;

package/dist/helpers/currency.d.ts

@@ -1,2 +1,3 @@
 import type { ValueInterceptor } from "../components";
+export declare const formatCurrency: (number: number) => string;
 export declare const currencyInterceptors: ValueInterceptor;

package/dist/helpers/currency.js

@@ -1,3 +1,10 @@
+export const formatCurrency = (number) => {
+    return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency: "BRL",
+        maximumFractionDigits: 2,
+    }).format(number);
+};
 const addCurrencyMask = (value) => {
     const cleanValue = value.toString().replace(/\D/g, "") || ""; // clean all non numeric digits
     let firstPart = cleanValue

package/package.json

@@ -1,16 +1,7 @@
 {
   "name": "@alume/alume-design-system",
-  "description": "Compose of React components displayed at Storybook for Alume company",
-  "version": "4.13.21",
   "homepage": "https://alume-com.github.io/design-system/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alume-com/design-system.git"
-  },
-  "author": "",
-  "bugs": {
-    "url": "https://github.com/alume-com/design-system/issues"
-  },
+  "version": "4.13.22",
   "license": "UNLICENSED",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -57,9 +48,9 @@
     "copyfiles:fonts": "copyfiles -V -u 1 src/assets/fonts/*.ttf dist",
     "copyfiles:icons": "copyfiles -V -u 1 src/assets/icons/*.svg dist",
     "copyfiles:css": "copyfiles -V -u 1 src/components/**/*.css dist",
-    "copyfiles:package": "yarn copyfiles:fonts && yarn copyfiles:icons && yarn copyfiles:css",
-    "build:package": "tsc --build \"./tsconfig.json\" && yarn copyfiles:package",
-    "prepare:package": "yarn clean:package && yarn build:package",
+    "copyfiles:package": "npm run copyfiles:fonts && npm run copyfiles:icons && npm run copyfiles:css",
+    "build:package": "tsc --build \"./tsconfig.json\" && npm run copyfiles:package",
+    "prepare:package": "npm run clean:package && npm run build:package",
     "publish:package": "yarn prepare:package && yarn publish --registry http://ec2-18-228-219-90.sa-east-1.compute.amazonaws.com:4873/  && git push",
     "build:site": "yarn && yarn build-storybook -o ./storybook-static",
     "publish:site": "yarn build:site && yarn chromatic",
@@ -96,7 +87,7 @@
     "copyfiles": "^2.4.0",
     "eslint": "^7.12.0",
     "eslint-config-prettier": "^6.14.0",
-    "eslint-plugin-import": "^2.x.x",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
     "gh-pages": "^3.1.0",
@@ -104,4 +95,4 @@
     "lint-staged": ">=10",
     "prettier": "^2.1.2"
   }
-}
+}