@alume/alume-design-system 4.13.21

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

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const StyledTextInputContainer = 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 StyledTextInputLabel = styled.label `
+  position: relative;
+
+  color: ${colors.textLightGreen};
+  cursor: ${({ disabled }) => (disabled ? "normal" : "text")};
+  transition: transform 0.4s, font-size 0.4s;
+  transition-timing-function: ease;
+  font-size: 16px;
+  text-align: left;
+  transform: translateY(26px);
+
+  ${({ riseLabel }) => riseLabel &&
+    `
+    transform: translateY(0px);
+    font-size: 12px;
+  `}
+  ${({ disabled }) => disabled && `color: ${colors.lightGrey};`}
+  ${({ hasError }) => hasError && `color: ${colors.red};`}
+`;
+export const StyleTextInput = styled.input `
+  border: none;
+  border-bottom: 1px solid ${colors.lightGrey};
+  line-height: 20px;
+  padding: 4px 0;
+  color: ${colors.textGreen};
+  font-size: 16px;
+  &:focus {
+    outline: none;
+  }
+  &:disabled {
+    background-color: transparent;
+  }
+  ${({ hasError }) => hasError &&
+    `
+  border-color: ${colors.red};
+  color: ${colors.red};
+  `}
+`;
+export const StyleErrorSpan = styled.span `
+  position: absolute;
+  align-self: flex-end;
+  transform: translateY(17px);
+  font-size: 12px;
+`;

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

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

package/dist/components/tooltip/index.js

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+interface TooltipProps {
+    content: string | JSX.Element;
+    maxWidth?: number;
+}
+export declare const Tooltip: React.FunctionComponent<TooltipProps>;
+export {};

package/dist/components/tooltip/tooltip.component.js

@@ -0,0 +1,8 @@
+import React, { useState } from "react";
+import { TooltipContainer, TooltipContent } from "./tooltip.styled";
+export const Tooltip = ({ children, content, maxWidth, }) => {
+    const [showContent, setShowContent] = useState(false);
+    return (React.createElement(TooltipContainer, { onMouseEnter: () => setShowContent(true), onMouseLeave: () => setShowContent(false) },
+        children,
+        React.createElement(TooltipContent, { maxWidth: maxWidth, show: showContent }, content)));
+};

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

@@ -0,0 +1,7 @@
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface TooltipContentProps {
+    show?: boolean;
+    maxWidth?: number;
+}
+export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, TooltipContentProps, never>;
+export {};

package/dist/components/tooltip/tooltip.styled.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { breakpoints, colors } from "../../constants";
+export const TooltipContainer = styled.div `
+  display: inline-block;
+
+  @media only screen and (min-width: ${breakpoints.lg}) {
+    position: relative;
+  }
+`;
+export const TooltipContent = styled.div `
+  position: absolute;
+  z-index: 1;
+  border: 1px solid ${colors.darkGreen};
+  background-color: ${colors.floatingNav};
+  border-radius: 4px;
+  padding: 12px;
+  width: max-content;
+
+  visibility: ${({ show }) => (show ? "visible" : "hidden")};
+
+  // all the screen minus the grid lateral paddings
+  max-width: ${({ maxWidth }) => maxWidth ? `${maxWidth}px` : "calc(100vw - 48px)"};
+  left: 24px;
+
+  @media only screen and (min-width: ${breakpoints.lg}) {
+    left: 0;
+    max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : "400px")};
+  }
+`;

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

@@ -0,0 +1 @@
+export * from "./typography.styled";

package/dist/components/typography/index.js

@@ -0,0 +1 @@
+export * from "./typography.styled";

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const H1: import("styled-components").StyledComponent<"h1", any, {}, never>;
+export declare const H2: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"h4", any, {}, never>;
+export declare const H5: import("styled-components").StyledComponent<"h5", any, {}, never>;
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> {
+    fontSize?: number;
+}
+export declare const Text: import("styled-components").StyledComponent<"p", any, TextProps, never>;
+export {};

package/dist/components/typography/typography.styled.js

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+const commonCSS = `
+  color: ${colors.textGreen};
+  margin: 0;
+`;
+export const H1 = styled.h1 `
+  ${commonCSS}
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 29px;
+`;
+export const H2 = styled.h2 `
+  ${commonCSS}
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 27px;
+`;
+export const H3 = styled.h3 `
+  ${commonCSS}
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+`;
+export const H4 = styled.h4 `
+  ${commonCSS}
+  font-size: 14px;
+  line-height: 18px;
+`;
+export const H5 = styled.h5 `
+  ${commonCSS}
+  font-size: 12px;
+  line-height: 15px;
+`;
+export const Text = styled.p `
+  ${commonCSS}
+  font-size: ${({ fontSize }) => (fontSize ? `${fontSize}px` : "16px")};
+  line-height: 20px;
+`;

package/dist/components/vertical-timeline/index.d.ts

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

package/dist/components/vertical-timeline/index.js

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface VerticalTimelineItemProps extends React.HTMLProps<HTMLDivElement> {
+    title: string;
+    icon: JSX.Element;
+    isActive?: boolean;
+    setRef?: (instance: HTMLDivElement) => void;
+}
+declare type VerticalTimelineType = {
+    Item: React.FunctionComponent<VerticalTimelineItemProps>;
+};
+export declare const VerticalTimeline: React.FunctionComponent & VerticalTimelineType;
+export {};

package/dist/components/vertical-timeline/verticalTimeline.component.js

@@ -0,0 +1,16 @@
+import React, { useCallback } from "react";
+import { ContentContainer, IconContainer, TimelineContainer, Title, TitleContainer, } from "./verticalTimeline.styled";
+export const VerticalTimeline = ({ children }) => {
+    return React.createElement(TimelineContainer, null, children);
+};
+const Item = ({ title, icon, children, isActive, setRef, }) => {
+    const defineRef = useCallback((node) => {
+        node && setRef && setRef(node);
+    }, []);
+    return (React.createElement("div", { ref: defineRef },
+        React.createElement(TitleContainer, { isActive: isActive },
+            React.createElement(IconContainer, null, icon),
+            React.createElement(Title, null, title)),
+        children && React.createElement(ContentContainer, null, children)));
+};
+VerticalTimeline.Item = Item;

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

@@ -0,0 +1,9 @@
+export declare const TimelineContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface TitleContainerProps {
+    isActive?: boolean;
+}
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, TitleContainerProps, never>;
+export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/vertical-timeline/verticalTimeline.styled.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+import { H3 } from "../typography";
+export const TimelineContainer = styled.div `
+  > div:not(:last-child) {
+    margin-bottom: 32px;
+  }
+`;
+export const TitleContainer = styled.div `
+  display: flex;
+
+  svg,
+  h3 {
+    ${({ isActive }) => isActive ? "color: inherit" : `color: ${colors.textLightGreen};`}
+  }
+`;
+export const Title = styled(H3) `
+  font-weight: normal;
+`;
+export const IconContainer = styled.div `
+  margin-right: 8px;
+  height: 21px;
+  width: 21px;
+
+  > svg {
+    height: 21px;
+    width: 21px;
+  }
+`;
+export const ContentContainer = styled.div `
+  margin-left: 29px;
+  margin-top: 14px;
+`;

package/dist/constants/breakpoints.d.ts

@@ -0,0 +1,6 @@
+export declare const breakpoints: {
+    xs: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

package/dist/constants/breakpoints.js

@@ -0,0 +1,6 @@
+export const breakpoints = {
+    xs: "320px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+};

package/dist/constants/colors.d.ts

@@ -0,0 +1,23 @@
+export declare const colors: {
+    darkGreen: string;
+    darkGreen15Opacity: string;
+    backgroundGreen: string;
+    green: string;
+    lightGreen: string;
+    white: string;
+    timelineGrey: string;
+    floatingNav: string;
+    grey: string;
+    lightGrey: string;
+    softGrey: string;
+    textLightGreen: string;
+    textGreen: string;
+    red: string;
+    backgroundRed: string;
+    pink: string;
+    aqua: string;
+    cardBorderGrey: string;
+    yellow: string;
+    backgroundYellow: string;
+    tableText: string;
+};

package/dist/constants/colors.js

@@ -0,0 +1,23 @@
+export const colors = {
+    darkGreen: "#004852",
+    darkGreen15Opacity: "rgba(0, 72, 82, 0.15)",
+    backgroundGreen: "rgba(0,220,192,0.1)",
+    green: "#007681",
+    lightGreen: "#00dcc0",
+    white: "#FFFFFF",
+    timelineGrey: "#F2F2F2",
+    floatingNav: "#FAFAFA",
+    grey: "#999999",
+    lightGrey: "#D8D8D8",
+    softGrey: "#F0F0F0",
+    textLightGreen: "rgba(0, 35, 46, 0.5)",
+    textGreen: "#004852",
+    red: "#BD2862",
+    backgroundRed: "#FED6DC",
+    pink: "#FFB9C3",
+    aqua: "rgba(0,220,192, 0.5)",
+    cardBorderGrey: "#E7E7E7",
+    yellow: "#C58036",
+    backgroundYellow: "#FFF2D0",
+    tableText: "#505050",
+};

package/dist/constants/fonts.d.ts

@@ -0,0 +1 @@
+export declare const GlobalFont: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/constants/fonts.js

@@ -0,0 +1,75 @@
+import { createGlobalStyle } from "styled-components";
+import IBMPlexSansSemiBold from "../assets/fonts/IBMPlexSans-SemiBold.ttf";
+import IBMPlexSansSemiBoldItalic from "../assets/fonts/IBMPlexSans-SemiBoldItalic.ttf";
+import IBMPlexSansRegular from "../assets/fonts/IBMPlexSans-Regular.ttf";
+import IBMPlexSansRegularItalic from "../assets/fonts/IBMPlexSans-RegularItalic.ttf";
+import IBMPlexSansMedium from "../assets/fonts/IBMPlexSans-Medium.ttf";
+import IBMPlexSansMediumItalic from "../assets/fonts/IBMPlexSans-MediumItalic.ttf";
+import IBMPlexSansLight from "../assets/fonts/IBMPlexSans-Light.ttf";
+import IBMPlexSansLightItalic from "../assets/fonts/IBMPlexSans-LightItalic.ttf";
+import IBMPlexSansExtraLight from "../assets/fonts/IBMPlexSans-ExtraLight.ttf";
+import IBMPlexSansExtraLightItalic from "../assets/fonts/IBMPlexSans-ExtraLightItalic.ttf";
+export const GlobalFont = createGlobalStyle `
+  body,
+  button,
+  span {
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansSemiBold}) format('truetype');
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansSemiBoldItalic}) format('truetype');
+      font-weight: 600;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansMedium}) format('truetype');
+      font-weight: 500;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansMediumItalic}) format('truetype');
+      font-weight: 500;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansRegular}) format('truetype');
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansRegularItalic}) format('truetype');
+      font-weight: 400;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansLight}) format('truetype');
+      font-weight: 300;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansLightItalic}) format('truetype');
+      font-weight: 300;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansExtraLight}) format('truetype');
+      font-weight: 200;
+    }
+    @font-face {
+      font-family: 'IBMPlexSans';
+      src: url(${IBMPlexSansExtraLightItalic}) format('truetype');
+      font-weight: 200;
+      font-style: italic;
+    }
+
+    font-family: IBMPlexSans, sans-serif !important;
+    font-weight: 300;
+  }
+`;

package/dist/constants/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./colors";
+export * from "./fonts";
+export * from "./reset";
+export * from "./latinAmericaOptions";
+export * from "./breakpoints";
+export * from "./styles";

package/dist/constants/index.js

@@ -0,0 +1,6 @@
+export * from "./colors";
+export * from "./fonts";
+export * from "./reset";
+export * from "./latinAmericaOptions";
+export * from "./breakpoints";
+export * from "./styles";

package/dist/constants/latinAmericaOptions.d.ts

@@ -0,0 +1,2 @@
+import { Option } from "../types";
+export declare const latinAmericaCountriesOptions: Array<Option>;

package/dist/constants/latinAmericaOptions.js

@@ -0,0 +1,78 @@
+export const latinAmericaCountriesOptions = [
+    {
+        label: "Argentina",
+        value: "AR",
+    },
+    {
+        label: "Bolivia",
+        value: "BO",
+    },
+    {
+        label: "Chile",
+        value: "CH",
+    },
+    {
+        label: "Colômbia",
+        value: "CO",
+    },
+    {
+        label: "Costa Rica",
+        value: "CR",
+    },
+    {
+        label: "Cuba",
+        value: "CU",
+    },
+    {
+        label: "El Salvador",
+        value: "SV",
+    },
+    {
+        label: "Equador",
+        value: "EC",
+    },
+    {
+        label: "Guatemala",
+        value: "GT",
+    },
+    {
+        label: "Haiti",
+        value: "HT",
+    },
+    {
+        label: "Honduras",
+        value: "HN",
+    },
+    {
+        label: "México",
+        value: "MX",
+    },
+    {
+        label: "Nicarágua",
+        value: "NI",
+    },
+    {
+        label: "Panamá",
+        value: "PA",
+    },
+    {
+        label: "Paraguai",
+        value: "PY",
+    },
+    {
+        label: "Peru",
+        value: "PE",
+    },
+    {
+        label: "República Dominicana",
+        value: "DO",
+    },
+    {
+        label: "Uruguai",
+        value: "UY",
+    },
+    {
+        label: "Venezuela",
+        value: "VE",
+    },
+];

package/dist/constants/reset.d.ts

@@ -0,0 +1 @@
+export declare const GlobalReset: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/dist/constants/reset.js

@@ -0,0 +1,90 @@
+import { createGlobalStyle } from "styled-components";
+export const GlobalReset = createGlobalStyle `
+  /* Box sizing rules */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Remove default padding */
+  ul[class],
+  ol[class] {
+    padding: 0;
+  }
+
+  body {
+    overflow-x: hidden;
+  }
+
+  /* Remove default margin */
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  ul[class],
+  ol[class],
+  li,
+  figure,
+  figcaption,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  /* Set core body defaults */
+  body {
+    min-height: 100vh;
+    scroll-behavior: smooth;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+  }
+
+  /* Remove list styles on ul, ol elements with a class attribute */
+  ul[class],
+  ol[class] {
+    list-style: none;
+  }
+
+  /* A elements that don't have a class get default styles */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* Make images easier to work with */
+  img {
+    max-width: 100%;
+    display: block;
+  }
+
+  /* Natural flow and rhythm in articles by default */
+  article > * + * {
+    margin-top: 1em;
+  }
+
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    outline: none;
+  }
+  
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Remove all animations and transitions for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+`;

package/dist/constants/styles.d.ts

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

package/dist/constants/styles.js

@@ -0,0 +1,17 @@
+const borderRadius = {
+    small: "4px",
+    medium: "8px",
+    large: "16px",
+    round: "50%",
+};
+const fontSize = {
+    extraSmall: "12px",
+    small: "14px",
+    medium: "16px",
+    large: "20px",
+    extraLarge: "22px",
+};
+export const styles = {
+    borderRadius,
+    fontSize,
+};

package/dist/helpers/currency.d.ts

@@ -0,0 +1,2 @@
+import type { ValueInterceptor } from "../components";
+export declare const currencyInterceptors: ValueInterceptor;

package/dist/helpers/currency.js

@@ -0,0 +1,24 @@
+const addCurrencyMask = (value) => {
+    const cleanValue = value.toString().replace(/\D/g, "") || ""; // clean all non numeric digits
+    let firstPart = cleanValue
+        .substring(0, cleanValue.length - 2) // get the numbers
+        .replace(/\B(?=(\d{3})+(?!\d))/g, "."); // add the thousands spaces
+    firstPart = firstPart === "" ? "0" : firstPart; // if no digits, just print 0
+    let secondPart = cleanValue.substring(cleanValue.length - 2); // get the numbers
+    secondPart = secondPart.length < 2 ? `0${secondPart}` : secondPart; // add left zero if necessary
+    return cleanValue === "" ? "" : `R$ ${firstPart},${secondPart}`;
+};
+const cleanCurrencyMask = (value) => {
+    let cleanValue = (value === null || value === void 0 ? void 0 : value.toString().replace(/\D/g, "")) || ""; // clean all non numeric digits
+    cleanValue =
+        cleanValue !== ""
+            ? parseInt(cleanValue.toString(), 10).toString() // remove left zeros
+            : cleanValue;
+    const firstPart = cleanValue.substring(0, cleanValue.length - 2); // get the numbers
+    const secondPart = cleanValue.substring(cleanValue.length - 2); // get the numbers
+    return cleanValue === "" ? "" : `${firstPart}.${secondPart}`;
+};
+export const currencyInterceptors = {
+    beforeSetValue: addCurrencyMask,
+    onChange: cleanCurrencyMask,
+};

package/dist/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./currency";
+export * from "./number";
+export * from "./percentage";

package/dist/helpers/index.js

@@ -0,0 +1,3 @@
+export * from "./currency";
+export * from "./number";
+export * from "./percentage";

package/dist/helpers/number.d.ts

@@ -0,0 +1,2 @@
+import type { ValueInterceptor } from "../components";
+export declare const onlyNumbersInterceptors: ValueInterceptor;