@alume/alume-design-system 4.13.21 → 4.13.22

package/dist/assets/icons/email.js

@@ -1,4 +1,4 @@
 import React from "react";
-export const EmailIcon = (props) => (React.createElement("svg", Object.assign({ height: "24px", width: "24px", version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 40 24", xmlSpace: "preserve" }, props),
-    React.createElement("path", { fill: "none", d: "M0 0h40v24H0z" }),
-    React.createElement("path", { className: "st1", d: "M3.2 9.5h6v1h-6zM5.2 6.5h4v1h-4zM7.2 3.5h2v1h-2zM11.8 3.5l-4.2 17h25l4.2-17h-25zm22.4 1l-12.9 6.9-7.8-6.9h20.7zm-2.4 15h-23l3.6-14.6 8.6 7.7L35.5 5l-3.7 14.5z" })));
+export const EmailIcon = (props) => (React.createElement("svg", Object.assign({ width: "27", height: "21", viewBox: "0 0 27 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", strokeWidth: "3" }, props),
+    React.createElement("rect", { x: "1.5", y: "2.38574", width: "23.5143", height: "17.1143", rx: "2.5" }),
+    React.createElement("path", { d: "M2.74219 3.6286L13.2565 10.4857L24.2279 3.6286" })));

package/dist/assets/icons/index.d.ts

@@ -12,12 +12,14 @@ export * from "./share";
 export * from "./checkMark";
 export * from "./indicatorRound";
 export * from "./email";
+export * from "./send-email";
 export * from "./information";
 export * from "./legal";
 export * from "./love";
 export * from "./safe";
 export * from "./simulation";
 export * from "./whatsapp";
+export * from "./whatsapp-support";
 export * from "./plus";
 export * from "./emptyBullet";
 export * from "./animated-bullet";

package/dist/assets/icons/index.js

@@ -12,12 +12,14 @@ export * from "./share";
 export * from "./checkMark";
 export * from "./indicatorRound";
 export * from "./email";
+export * from "./send-email";
 export * from "./information";
 export * from "./legal";
 export * from "./love";
 export * from "./safe";
 export * from "./simulation";
 export * from "./whatsapp";
+export * from "./whatsapp-support";
 export * from "./plus";
 export * from "./emptyBullet";
 export * from "./animated-bullet";

package/dist/assets/icons/send-email.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const SendEmailIcon: React.FunctionComponent<React.SVGAttributes<HTMLOrSVGElement>>;

package/dist/assets/icons/send-email.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const SendEmailIcon = (props) => (React.createElement("svg", Object.assign({ height: "24px", width: "24px", version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", x: "0", y: "0", viewBox: "0 0 40 24", xmlSpace: "preserve" }, props),
+    React.createElement("path", { fill: "none", d: "M0 0h40v24H0z" }),
+    React.createElement("path", { className: "st1", d: "M3.2 9.5h6v1h-6zM5.2 6.5h4v1h-4zM7.2 3.5h2v1h-2zM11.8 3.5l-4.2 17h25l4.2-17h-25zm22.4 1l-12.9 6.9-7.8-6.9h20.7zm-2.4 15h-23l3.6-14.6 8.6 7.7L35.5 5l-3.7 14.5z" })));

package/dist/assets/icons/whatsapp-support.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const WhatsappSupportIcon: React.FunctionComponent<React.SVGAttributes<HTMLOrSVGElement>>;

package/dist/assets/icons/whatsapp-support.js

@@ -0,0 +1,4 @@
+import React from "react";
+export const WhatsappSupportIcon = (props) => (React.createElement("svg", Object.assign({ height: "64px", width: "64px", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" }, props),
+    React.createElement("circle", { cx: "32", cy: "32", r: "32", fill: "#25D366" }),
+    React.createElement("path", { d: "M32.3 47.2c-2.8 0-5.3-.7-7.6-1.9L16 48l2.8-8.4c-1.4-2.3-2.3-5.1-2.3-8 0-8.6 7-15.6 15.7-15.6C41 16 48 23 48 31.6s-7 15.6-15.7 15.6m0-28.7c-7.3 0-13.2 5.9-13.2 13.1 0 2.9.9 5.5 2.5 7.7l-1.7 4.9 5.1-1.6c2.1 1.4 4.6 2.2 7.3 2.2 7.3 0 13.2-5.9 13.2-13.1 0-7.3-5.9-13.2-13.2-13.2m7.9 16.7c-.1-.2-.4-.3-.7-.4-.4-.2-2.3-1.1-2.6-1.2-.4-.1-.6-.2-.9.2-.3.4-1 1.2-1.2 1.5-.2.3-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.3-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.2.3-.4.4-.6.1-.3.1-.5 0-.7-.1-.2-.9-2.1-1.2-2.8-.3-.8-.6-.6-.9-.6h-.7c-.3 0-.7.1-1 .5-.4.4-1.3 1.3-1.3 3.2 0 1.9 1.4 3.7 1.6 4 .2.3 2.7 4.2 6.6 5.8 3.9 1.5 3.9 1 4.6 1 .7-.1 2.3-.9 2.6-1.8 0-1.3 0-2.1-.1-2.2", fillRule: "evenodd", clipRule: "evenodd", fill: "#fff" })));

package/dist/assets/icons/whatsapp.js

@@ -1,4 +1,4 @@
 import React from "react";
-export const WhatsappIcon = (props) => (React.createElement("svg", Object.assign({ height: "64px", width: "64px", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" }, props),
-    React.createElement("circle", { cx: "32", cy: "32", r: "32", fill: "#25D366" }),
-    React.createElement("path", { d: "M32.3 47.2c-2.8 0-5.3-.7-7.6-1.9L16 48l2.8-8.4c-1.4-2.3-2.3-5.1-2.3-8 0-8.6 7-15.6 15.7-15.6C41 16 48 23 48 31.6s-7 15.6-15.7 15.6m0-28.7c-7.3 0-13.2 5.9-13.2 13.1 0 2.9.9 5.5 2.5 7.7l-1.7 4.9 5.1-1.6c2.1 1.4 4.6 2.2 7.3 2.2 7.3 0 13.2-5.9 13.2-13.1 0-7.3-5.9-13.2-13.2-13.2m7.9 16.7c-.1-.2-.4-.3-.7-.4-.4-.2-2.3-1.1-2.6-1.2-.4-.1-.6-.2-.9.2-.3.4-1 1.2-1.2 1.5-.2.3-.4.3-.8.1-.4-.2-1.6-.6-3.1-1.9-1.1-1-1.9-2.3-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.2.3-.4.4-.6.1-.3.1-.5 0-.7-.1-.2-.9-2.1-1.2-2.8-.3-.8-.6-.6-.9-.6h-.7c-.3 0-.7.1-1 .5-.4.4-1.3 1.3-1.3 3.2 0 1.9 1.4 3.7 1.6 4 .2.3 2.7 4.2 6.6 5.8 3.9 1.5 3.9 1 4.6 1 .7-.1 2.3-.9 2.6-1.8 0-1.3 0-2.1-.1-2.2", fillRule: "evenodd", clipRule: "evenodd", fill: "#fff" })));
+export const WhatsappIcon = (props) => (React.createElement("svg", Object.assign({ width: "27", height: "27", viewBox: "0 0 27 27", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props),
+    React.createElement("path", { d: "M12.1013 0.031311C12.7337 0.031311 13.3662 0.031311 13.9986 0.031311C14.2349 0.0636783 14.4713 0.0950181 14.7071 0.127899C18.0502 0.594399 20.8394 2.09768 23.0029 4.68398C25.285 7.41208 26.2869 10.5815 26.0038 14.1316C25.7659 17.1176 24.6058 19.7163 22.5631 21.9029C20.153 24.4825 17.1639 25.8722 13.6426 26.07C11.5335 26.1887 9.50828 25.7813 7.58833 24.892C7.33145 24.7728 7.09769 24.7522 6.82539 24.818C4.8402 25.2968 2.85243 25.7654 0.865183 26.2355C0.385839 26.349 0.24147 26.2868 0 25.8748V25.6698C0.0323673 25.5552 0.0714136 25.4417 0.0955606 25.3256C0.509657 23.3209 0.919642 21.3151 1.33888 19.3114C1.39077 19.0623 1.35737 18.8485 1.24794 18.6225C0.810724 17.7208 0.496812 16.776 0.282572 15.7962C0.151047 15.1951 0.0981294 14.5838 0 13.9785V12.1839C0.0405876 11.8541 0.0729549 11.5227 0.123818 11.1944C0.599566 8.12827 1.96413 5.53221 4.25347 3.43193C6.10817 1.72982 8.28038 0.661189 10.7588 0.221918C11.2037 0.142798 11.6533 0.0939906 12.1013 0.031311ZM13.1483 23.2109C13.4381 23.1976 13.8558 23.2063 14.2735 23.1529C15.915 22.9443 17.4254 22.3853 18.7823 21.4431C20.6365 20.155 21.9404 18.4396 22.6622 16.2956C23.3656 14.2061 23.3856 12.0971 22.7311 9.99787C22.0642 7.85855 20.7978 6.13229 18.9852 4.81242C16.9055 3.29784 14.5637 2.66899 12.0227 2.93255C9.02226 3.24389 6.59009 4.63415 4.79858 7.07659C3.15761 9.31405 2.5976 11.8336 2.95827 14.5689C3.13295 15.8928 3.62206 17.1094 4.25707 18.2726C4.36599 18.4725 4.38808 18.6631 4.34081 18.8855C4.09934 20.022 3.86815 21.1605 3.63593 22.299C3.57068 22.6175 3.60561 22.6535 3.92364 22.579C4.94655 22.3396 5.97408 22.1156 6.98877 21.8438C7.40852 21.7313 7.75274 21.7821 8.12984 21.984C9.6547 22.8004 11.2777 23.2515 13.1483 23.2119V23.2109Z" }),
+    React.createElement("path", { d: "M6.44753 9.77183C6.39769 9.10753 6.79997 8.38055 7.36974 7.72242C7.59888 7.45731 7.85319 7.21482 8.12754 6.99646C8.6259 6.60086 9.30664 6.72622 9.58202 7.30061C9.9658 8.10106 10.3126 8.91949 10.6635 9.73535C10.814 10.0847 10.7585 10.4223 10.5289 10.7269C10.3799 10.9247 10.2242 11.1179 10.0778 11.3172C9.76235 11.7457 9.7531 12.1346 10.0639 12.5693C10.796 13.5937 11.7234 14.425 12.7006 15.2044C13.1481 15.561 13.6125 15.8964 14.1314 16.1466C14.5851 16.365 14.9375 16.3172 15.3049 15.973C15.498 15.7922 15.6773 15.5964 15.8674 15.4125C16.1392 15.1499 16.4608 15.0431 16.8313 15.1479C17.6697 15.3842 18.5113 15.6108 19.3415 15.8733C20.0084 16.0845 20.2237 16.7457 19.8507 17.3365C19.5851 17.7568 19.2758 18.1411 18.9238 18.494C18.1475 19.2719 17.177 19.4507 16.1382 19.3911C14.7264 19.3104 13.4625 18.7812 12.2937 18.0245C10.4092 16.8043 8.79287 15.2974 7.56394 13.4047C6.89759 12.3777 6.46962 11.2633 6.44701 9.77235L6.44753 9.77183Z" })));

package/dist/components/autocomplete-input/autocompleteInput.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Option } from "../../types";
 interface AutocompleteInputProps<T> {
     value: T;
@@ -6,6 +7,7 @@ interface AutocompleteInputProps<T> {
     noOptionsMessage?: string;
     placeholder?: string;
     onChange?: (value: T) => void;
+    error?: string | boolean;
 }
-export declare const AutocompleteInput: <T extends unknown>({ placeholder, value, onChange, options, label, noOptionsMessage, ...props }: AutocompleteInputProps<T>) => JSX.Element;
+export declare const AutocompleteInput: <T extends unknown>({ placeholder, value, onChange, options, label, error, noOptionsMessage, ...props }: AutocompleteInputProps<T>) => JSX.Element;
 export {};

package/dist/components/autocomplete-input/autocompleteInput.component.js

@@ -10,10 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useRef, useState } from "react";
-import { MultiselectContainer, MultiselectLabel, MultiselectOption, MultiselectOptionsContainer, MultiselectSearchContainer, MultiselectSearchInput, MultiselectSelectedValueLabel, } from "./autocompleteInput.styled";
+import { MultiselectContainer, MultiselectLabel, MultiselectOption, MultiselectOptionsContainer, MultiselectSearchContainer, MultiselectSearchInput, MultiselectSelectedValueLabel, StyleErrorSpan, } from "./autocompleteInput.styled";
 export const AutocompleteInput = (_a) => {
     var _b;
-    var { placeholder, value, onChange, options = [], label, noOptionsMessage } = _a, props = __rest(_a, ["placeholder", "value", "onChange", "options", "label", "noOptionsMessage"]);
+    var { placeholder, value, onChange, options = [], label, error, noOptionsMessage } = _a, props = __rest(_a, ["placeholder", "value", "onChange", "options", "label", "error", "noOptionsMessage"]);
     const selectorRef = useRef(null);
     const inputRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -47,9 +47,10 @@ export const AutocompleteInput = (_a) => {
     });
     const selectItemLabel = ((_b = options.find(({ value: itemValue }) => value === itemValue)) === null || _b === void 0 ? void 0 : _b.label) || "";
     return (React.createElement(MultiselectContainer, { ref: selectorRef },
-        React.createElement(MultiselectSearchContainer, null,
+        React.createElement(MultiselectSearchContainer, { hasError: !!error },
             React.createElement(MultiselectLabel, { onClick: handleLabelClick, riseLabel: isOpen || !!selectItemLabel }, label),
             React.createElement(MultiselectSearchInput, Object.assign({ ref: inputRef, placeholder: isOpen && placeholder, onChange: handleSearchInputChange, onFocus: () => setIsOpen(true), value: searchValue }, props)),
             !isOpen && (React.createElement(MultiselectSelectedValueLabel, { onClick: handleLabelClick }, selectItemLabel))),
-        React.createElement(MultiselectOptionsContainer, { isOpen: isOpen }, optionsToRender.length > 0 ? (optionsToRender) : (React.createElement(MultiselectOption, { cursor: "default" }, noOptionsMessage)))));
+        React.createElement(MultiselectOptionsContainer, { isOpen: isOpen }, optionsToRender.length > 0 ? (optionsToRender) : (React.createElement(MultiselectOption, { cursor: "default" }, noOptionsMessage))),
+        error && React.createElement(StyleErrorSpan, null, error)));
 };

package/dist/components/autocomplete-input/autocompleteInput.styled.d.ts

@@ -3,6 +3,7 @@ export interface MultiselectSearchContainerProps {
     stretch?: boolean;
     hasLabel?: boolean;
     disabled?: boolean;
+    hasError?: boolean;
     [key: string]: unknown;
 }
 export declare const MultiselectSearchContainer: import("styled-components").StyledComponent<"div", any, MultiselectSearchContainerProps, never>;
@@ -21,4 +22,5 @@ interface MultiselectOptionProps {
     selected?: boolean;
 }
 export declare const MultiselectOption: import("styled-components").StyledComponent<"div", any, MultiselectOptionProps, never>;
+export declare const StyleErrorSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/components/autocomplete-input/autocompleteInput.styled.js

@@ -17,18 +17,23 @@ export const MultiselectSearchContainer = styled.div `
   top: 2px;
   font-size: 16px;
   color: ${colors.textGreen};
-  border-bottom: 1px solid ${colors.lightGrey};
+  border-bottom: 1px solid
+    ${({ hasError }) => (hasError ? colors.red : colors.lightGrey)};
   width: ${({ stretch }) => (stretch ? "100%" : "auto")};
   box-sizing: content-box;
   cursor: ${({ disabled }) => (!disabled ? "pointer" : "default")};
 
+  > label {
+    color: ${({ hasError }) => (hasError ? colors.red : colors.textGreen)};
+  }
+
   &:focus {
     outline: none;
   }
 `;
 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;
@@ -46,6 +51,7 @@ export const MultiselectSearchInput = styled.input `
   width: 100%;
   background-color: transparent;
   border: none;
+  color: ${colors.textGreen};
 `;
 export const MultiselectSelectedValueLabel = styled.label `
   position: absolute;
@@ -87,3 +93,10 @@ export const MultiselectOption = styled.div `
     }
   `}
 `;
+export const StyleErrorSpan = styled.span `
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  font-size: 12px;
+  color: ${colors.red};
+`;

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

@@ -1,4 +1,4 @@
 import React from "react";
-declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: React.FunctionComponent<ButtonProps>;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ButtonSize = "small" | "normal";
+type ButtonSize = "small" | "normal";
 export interface BasicButtonProps {
     stretch?: boolean;
     buttonSize?: ButtonSize;

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

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from "react";
+import type { EChartsOption, SetOptionOpts } from "echarts";
+export interface ChartProps {
+    options: EChartsOption;
+    style?: CSSProperties;
+    settings?: SetOptionOpts;
+    loading?: boolean;
+    theme?: "light" | "dark";
+}
+export declare const Chart: React.FC<ChartProps>;

package/dist/components/chart/chart.component.js

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from "react";
+import { init } from "echarts";
+import { colors } from "../../constants";
+export const Chart = ({ options, style, loading, theme, settings, }) => {
+    const chartRef = useRef(null);
+    const chartInstanceRef = useRef({ chart: null });
+    options.color = options.color || [colors.darkGreen, colors.lightGreen];
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        // Initialize chart
+        chartInstanceRef.current.chart = init(chartRef.current, theme);
+        // Add chart resize listener
+        function resizeChart() {
+            chartInstanceRef.current.chart.resize();
+        }
+        window.addEventListener("resize", resizeChart);
+        // Return cleanup function
+        return () => {
+            chartInstanceRef.current.chart.dispose();
+            window.removeEventListener("resize", resizeChart);
+        };
+    }, [theme]);
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        chartInstanceRef.current.chart.setOption(options, settings);
+    }, [options, settings]);
+    useEffect(() => {
+        if (!chartRef.current)
+            return;
+        loading === true
+            ? chartInstanceRef.current.chart.showLoading()
+            : chartInstanceRef.current.chart.hideLoading();
+    }, [loading]);
+    return (React.createElement("div", { ref: chartRef, style: Object.assign({ width: "100%", height: "400px" }, style) }));
+};

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

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

package/dist/components/chart/index.js

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

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

@@ -0,0 +1,34 @@
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "./datepicker.style.css";
+interface DatePickerProps {
+    label: string;
+    selected: Date | null;
+    onChange: (date: Date) => void;
+    onSelect?: (date: Date) => void;
+    calendarStartDay?: number;
+    disabled?: boolean;
+    startDate?: Date;
+    endDate?: Date;
+    excludeDates?: Array<Date>;
+    excludeDateIntervals?: Array<{
+        start: Date;
+        end: Date;
+    }>;
+    filterDate?: (date: Date) => boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    onInputError?: (err: {
+        code: number;
+        msg: string;
+    }) => void;
+    placeholderText?: string;
+    readOnly?: boolean;
+    value?: string;
+    selectsRange?: boolean;
+    isClearable?: boolean;
+    selectsStart?: boolean;
+    selectsEnd?: boolean;
+}
+export declare const Datepicker: React.FC<DatePickerProps>;
+export {};

package/dist/components/datepicker/datepicker.component.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import DatePicker from "react-datepicker";
+import ptBR from "date-fns/locale/pt-BR";
+import "./datepicker.style.css";
+import { TextInput } from "../text-input";
+const CustomInput = forwardRef((props, ref) => (React.createElement("div", { ref: ref },
+    React.createElement(TextInput, Object.assign({ label: props.label }, props)))));
+export const Datepicker = (props) => {
+    return (React.createElement(DatePicker, Object.assign({ className: "react-datepicker__input", dateFormat: "dd/MM/yyyy", locale: ptBR, customInput: React.createElement(CustomInput, { label: props.label }) }, props)));
+};

package/dist/components/datepicker/datepicker.style.css

@@ -0,0 +1,103 @@
+.react-datepicker-wrapper {
+  width: initial;
+}
+
+.react-datepicker__input-container {
+  width: calc(100% + 26px);
+}
+
+.react-datepicker__input {
+  border: 2px solid #007681;
+  border-radius: 4px;
+  color: #004851;
+  font-size: 14px;
+}
+
+.react-datepicker {
+  border: 2px solid #007681;
+  border-radius: 8px;
+}
+
+.react-datepicker__header {
+  background-color: #007681;
+  border: 0;
+}
+
+.react-datepicker__current-month {
+  color: #fff;
+}
+
+.react-datepicker__day-name {
+  color: #fff;
+}
+
+.react-datepicker__day {
+  color: #004852;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range {
+  background-color: #007681;
+  color: #fff;
+}
+
+.react-datepicker__day--selected:hover,
+.react-datepicker__day--in-selecting-range:hover,
+.react-datepicker__day--in-range:hover {
+  background-color: #007681;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: #00768120;
+}
+
+.react-datepicker__day--today:not(.react-datepicker__day--selected) {
+  position: relative;
+  color: #00dcc0;
+  display: inline-flex;
+  justify-content: center;
+}
+.react-datepicker__day--today:not(.react-datepicker__day--selected)::after {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: #3cdbc0;
+  border-radius: 10px;
+  bottom: 0;
+}
+
+.react-datepicker__day--outside-month {
+  opacity: 0.5;
+}
+
+.react-datepicker__triangle {
+  display: none;
+}
+
+.react-datepicker__navigation-icon {
+  top: 0;
+  font-size: initial;
+}
+.react-datepicker__navigation-icon::before {
+  border-color: #fff;
+  border-width: 2px 2px 0px 0;
+}
+
+.react-datepicker__navigation-icon--previous {
+  right: 0;
+}
+
+.react-datepicker__navigation-icon--next {
+  left: 0;
+}
+
+.react-datepicker__close-icon::after {
+  color: #004851;
+  background-color: unset;
+  font-size: 20px;
+  font-weight: 500;
+  width: 20px;
+  right: 2px;
+}

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

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

package/dist/components/datepicker/index.js

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

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

@@ -1,5 +1,5 @@
 import React from "react";
-declare type DisclaimerTypes = "warning" | "error" | "success";
+type DisclaimerTypes = "warning" | "error" | "success";
 interface DisclaimerProps {
     children?: React.ReactNode;
     type?: DisclaimerTypes;

package/dist/components/disclaimer/disclaimer.component.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from "react";
 import { colors } from "../../constants";
 import { StyledTag } from "./disclaimer.styled";
@@ -7,6 +18,7 @@ const colorByType = {
     error: { fontColor: red, backgroundColor: backgroundRed },
     success: { fontColor: darkGreen, backgroundColor: backgroundGreen },
 };
-export const Disclaimer = ({ children, type = "warning", fontSize, marginTop, }) => {
-    return (React.createElement(StyledTag, { customColors: colorByType[type], fontSize: fontSize, marginTop: marginTop }, children));
+export const Disclaimer = (_a) => {
+    var { children, type = "warning", fontSize, marginTop } = _a, props = __rest(_a, ["children", "type", "fontSize", "marginTop"]);
+    return (React.createElement(StyledTag, Object.assign({ customColors: colorByType[type], fontSize: fontSize, marginTop: marginTop }, props), children));
 };

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

@@ -0,0 +1,7 @@
+import React from "react";
+type DropdownType = {
+    Trigger: React.FunctionComponent;
+    Content: React.FunctionComponent;
+};
+export declare const Dropdown: React.FunctionComponent & DropdownType;
+export {};

package/dist/components/dropdown/dropdown.component.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { StyledChevron, StyledContainer, StyledContent, StyledTrigger, } from "./dropdown.styled";
+const Context = React.createContext({});
+export const Dropdown = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const [isOpen, setIsOpen] = useState(false);
+    const contextValue = {
+        isOpen,
+        toggleContent: () => setIsOpen(!isOpen),
+    };
+    return (React.createElement(Context.Provider, { value: contextValue },
+        React.createElement(StyledContainer, Object.assign({}, props), children)));
+};
+const Trigger = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { isOpen, toggleContent } = useContext(Context);
+    return (React.createElement(StyledTrigger, Object.assign({ "data-state": getState(isOpen), onClick: toggleContent }, props),
+        children,
+        React.createElement(StyledChevron, null)));
+};
+const Content = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { isOpen } = useContext(Context);
+    const [height, setHeight] = useState(0);
+    const ref = useRef(null);
+    useEffect(() => {
+        setHeight(ref.current.clientHeight);
+    }, []);
+    return (React.createElement(StyledContent, Object.assign({ ref: ref, "data-state": getState(isOpen), style: {
+            [`--content-height`]: height ? `${height}px` : undefined,
+        } }, props), children));
+};
+Dropdown.Trigger = Trigger;
+Dropdown.Content = Content;
+function getState(open) {
+    return open ? "open" : "closed";
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledChevron: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").SVGAttributes<HTMLOrSVGElement>>, any, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTrigger: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/dropdown/dropdown.styled.js

@@ -0,0 +1,43 @@
+import styled, { keyframes } from "styled-components";
+import { DropdownIcon } from "../../assets/icons";
+const open = keyframes({
+    from: { height: 0 },
+    to: { height: "var(--content-height)" },
+});
+const close = keyframes({
+    from: { height: "var(--content-height)" },
+    to: { height: 0 },
+});
+export const StyledChevron = styled(DropdownIcon) `
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  [data-state="open"] & {
+    transform: rotate(180deg);
+  }
+`;
+export const StyledContainer = styled.div ``;
+export const StyledTrigger = styled.button `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 0;
+  background: none;
+  padding: 6px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.2s;
+
+  :hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+`;
+export const StyledContent = styled.div `
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: ${open} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards;
+  }
+  &[data-state="closed"] {
+    animation: ${close} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards;
+  }
+`;

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

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

package/dist/components/dropdown/index.js

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

package/dist/components/feedback-input/feedbackInput.styled.js

@@ -7,13 +7,14 @@ export const ScoreButton = styled.button `
   width: 28px;
   height: 28px;
   line-height: 14px;
-  color: ${colors.textGreen};
   cursor: pointer;
-  background-color: ${({ active }) => active ? colors.lightGrey : colors.softGrey};
-
-  &:hover {
-    background-color: ${colors.lightGrey};
-  }
+  ${({ active }) => `
+    color: ${active ? colors.white : colors.textGreen};
+    background-color: ${active ? colors.darkGreen : colors.lightGrey};
+    :hover {
+      background-color: ${!active && colors.grey}
+    }
+  `}
 `;
 export const FeedbackInputContainer = styled.div `
   display: flex;

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { StyledGridItemProps } from "./grid.styled";
-declare type Proportion = "1/2" | "2/2";
+type Proportion = "1/2" | "2/2";
 interface GridItemProps extends StyledGridItemProps {
     proportion?: Proportion;
 }
-declare type GridType = {
+type GridType = {
     Item: React.FunctionComponent<GridItemProps>;
 };
 export declare const Grid: React.FunctionComponent & GridType;

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

@@ -1,6 +1,6 @@
 export declare const StyledGridContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare type SmallSpan = 1 | 2 | 3 | 4;
-declare type LargeSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type SmallSpan = 1 | 2 | 3 | 4;
+type LargeSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 interface GridSpan {
     xs?: SmallSpan;
     md?: LargeSpan;

package/dist/components/horizontal-timeline/horizontalTimeline.component.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { HorizontalTimelineBarProps, HorizontalTimelineNodeProps } from "./horizontalTimeline.styled";
-declare type HorizontalTimelineType = {
+type HorizontalTimelineType = {
     Bar: React.FunctionComponent<HorizontalTimelineBarProps>;
     Node: React.FunctionComponent<HorizontalTimelineNodeProps>;
 };

package/dist/components/index.d.ts

@@ -25,3 +25,7 @@ export * from "./page-title";
 export * from "./list";
 export * from "./multiselect";
 export * from "./feedback-input";
+export * from "./menu";
+export * from "./dropdown";
+export * from "./datepicker";
+export * from "./chart";

package/dist/components/index.js

@@ -25,3 +25,7 @@ export * from "./page-title";
 export * from "./list";
 export * from "./multiselect";
 export * from "./feedback-input";
+export * from "./menu";
+export * from "./dropdown";
+export * from "./datepicker";
+export * from "./chart";