@alume/alume-design-system 4.13.21

package/dist/components/large-selector/largeSelector.styled.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const LargeSelectorContainer = styled.div `
+  > button:not(:first-child) {
+    margin-top: 10px;
+  }
+`;
+export const StyledLargeSelectorItem = styled.button `
+  // we need to remove default HTML button styles
+  border: none;
+  background: none;
+  &:focus {
+    outline: none;
+  }
+
+  width: 100%;
+  border: 2px solid ${colors.darkGreen15Opacity};
+  padding: 14px 22px;
+  border-radius: 8px;
+  text-align: left;
+  font-size: 16px;
+  line-height: 16px;
+  background-color: ${colors.white};
+  color: ${colors.textGreen};
+  cursor: pointer;
+
+  ${({ isSelected }) => {
+    return (isSelected &&
+        `
+      border-color: ${colors.darkGreen};
+      background-color: ${colors.backgroundGreen};
+    `);
+}}
+`;

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

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

package/dist/components/link/index.js

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

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

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

package/dist/components/link/link.component.js

@@ -0,0 +1,17 @@
+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 { StyledLink } from "./link.styled";
+export const Link = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(StyledLink, Object.assign({}, props));
+};

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

@@ -0,0 +1 @@
+export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;

package/dist/components/link/link.styled.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const StyledLink = styled.a `
+  text-decoration: none;
+  color: ${colors.green};
+  cursor: pointer;
+`;

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

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

package/dist/components/list/index.js

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

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

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

package/dist/components/list/list.component.js

@@ -0,0 +1,22 @@
+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 { StyledList, StyledListItem } from "./list.styled";
+export const List = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(StyledList, Object.assign({}, props));
+};
+const Item = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(StyledListItem, Object.assign({}, props));
+};
+List.Item = Item;

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

@@ -0,0 +1,2 @@
+export declare const StyledList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/dist/components/list/list.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const StyledList = styled.ul ``;
+export const StyledListItem = styled.li `
+  margin-left: 18px;
+  list-style-type: disc;
+  color: ${colors.textGreen};
+`;

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

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

package/dist/components/loading/index.js

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

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

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Loading: React.FunctionComponent<React.AllHTMLAttributes<HTMLDivElement>>;

package/dist/components/loading/loading.styled.js

@@ -0,0 +1,48 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+const rotate = keyframes `
+  from {
+    transform: rotate(45deg);
+  }
+  to {
+    transform: rotate(-315deg);
+  }
+`;
+const fadein = keyframes ` {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}`;
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  animation: ${fadein} 0.4s;
+`;
+const Wrap = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+`;
+const Circle1 = styled.div `
+  position: relative;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  content: " ";
+  border: 4px dashed #007681;
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  animation: ${rotate} 2.4s linear infinite;
+`;
+export const Loading = ({ style }) => (React.createElement(Overlay, { style: style },
+    React.createElement(Wrap, null,
+        React.createElement(Circle1, null))));

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

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

package/dist/components/modal/index.js

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    fullscreen?: "mobile" | "always";
+    overflow?: "hidden" | "scroll";
+    showCloseButton?: boolean;
+    onCloseClick?: () => void;
+}
+export declare const Modal: React.FunctionComponent<ModalProps>;
+export {};

package/dist/components/modal/modal.component.js

@@ -0,0 +1,35 @@
+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, { useEffect, useRef } from "react";
+import { CloseIcon } from "../../assets/icons";
+import { ModalContainer, Overlay, StyledCloseButton } from "./modal.styled";
+export const Modal = (_a) => {
+    var { children, fullscreen, overflow, showCloseButton, onCloseClick } = _a, props = __rest(_a, ["children", "fullscreen", "overflow", "showCloseButton", "onCloseClick"]);
+    const modalContainerRef = useRef(null);
+    const handleCloseClick = () => onCloseClick && onCloseClick();
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            const { current } = modalContainerRef || {};
+            if (current && !current.contains(event.target)) {
+                handleCloseClick();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [modalContainerRef]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Overlay, null),
+        React.createElement(ModalContainer, Object.assign({ fullscreen: fullscreen, overflow: overflow, ref: modalContainerRef }, props),
+            showCloseButton && (React.createElement(StyledCloseButton, { onClick: handleCloseClick },
+                React.createElement(CloseIcon, null))),
+            children)));
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ModalContainerProps {
+    fullscreen?: "mobile" | "always";
+    overflow?: "hidden" | "scroll";
+}
+export declare const ModalContainer: import("styled-components").StyledComponent<"div", any, ModalContainerProps, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement>>, any, import("../button").BasicButtonProps, never>;
+export {};

package/dist/components/modal/modal.styled.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import { LightIconButton } from "../button";
+import { breakpoints, colors } from "../../constants";
+export const Overlay = styled.div `
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+`;
+export const ModalContainer = styled.div `
+  border-radius: 8px;
+  padding: 32px;
+  background-color: ${colors.white};
+  position: fixed;
+  top: 56px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 999;
+  max-height: calc(100vh - 64px);
+
+  width: calc(100vw - 48px);
+  max-width: 600px;
+
+  ${({ overflow = "hidden" }) => `
+    overflow-y: ${overflow};
+  `}
+
+  ${({ fullscreen }) => fullscreen &&
+    `
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      top: 0;
+      border-radius: 0;
+      max-height: fit-content;
+  `}
+
+  ${({ fullscreen }) => fullscreen &&
+    fullscreen === "mobile" &&
+    `
+    @media only screen and (min-width: ${breakpoints.md}) {
+      width: calc(100vw - 48px);
+      max-width: 600px;
+      height: auto;
+      top: 56px;
+      border-radius: 8px;
+      max-height: fit-content;
+    }
+  `}
+`;
+export const StyledCloseButton = styled(LightIconButton) `
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  z-index: 999;
+`;

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

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

package/dist/components/multiselect/index.js

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Option } from "../../types";
+interface MultiselectProps {
+    options: Array<Option<string | number>>;
+    label: string;
+    noOptionsMessage?: string;
+    placeholder?: string;
+    value: Array<string | number>;
+    onChange?: (value: Array<string | number>) => void;
+}
+export declare const Multiselect: React.FunctionComponent<MultiselectProps>;
+export {};

package/dist/components/multiselect/multiselect.component.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef, useState } from "react";
+import { MultiselectChip, MultiselectContainer, MultiselectLabel, MultiselectOption, MultiselectOptionsContainer, MultiselectSearchContainer, MultiselectSearchInput, } from "./multiselect.style";
+export const Multiselect = ({ options, label, noOptionsMessage = "Não foram encontradas opções", placeholder = "Digite para buscar uma opção", value, onChange, }) => {
+    const selectorRef = useRef(null);
+    const inputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectorRef.current && !selectorRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchValue("");
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [selectorRef]);
+    const handleOptionClick = (itemValue) => {
+        const alreadySelected = value.includes(itemValue);
+        alreadySelected
+            ? onChange(value.filter((item) => item !== itemValue))
+            : onChange([...value, itemValue]);
+    };
+    const handleSearchInputChange = (event) => setSearchValue(event.currentTarget.value);
+    const handleLabelClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        setIsOpen(true);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const chipsToRender = value.map((item, index) => {
+        var _a;
+        const label = (_a = options.find(({ value }) => value === item)) === null || _a === void 0 ? void 0 : _a.label;
+        return React.createElement(MultiselectChip, { key: index }, label);
+    });
+    const optionsToRender = options
+        .filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()))
+        .map(({ label, value: itemValue }, index) => {
+        const selected = value.includes(itemValue);
+        return (React.createElement(MultiselectOption, { key: index, selected: selected, onClick: () => handleOptionClick(itemValue) }, label));
+    });
+    return (React.createElement(MultiselectContainer, { ref: selectorRef },
+        React.createElement(MultiselectSearchContainer, null,
+            React.createElement(MultiselectLabel, { onClick: handleLabelClick, riseLabel: isOpen || chipsToRender.length > 0 }, label),
+            chipsToRender,
+            React.createElement(MultiselectSearchInput, { ref: inputRef, placeholder: (isOpen || chipsToRender.length > 0) && placeholder, onChange: handleSearchInputChange, onFocus: () => setIsOpen(true), value: searchValue })),
+        React.createElement(MultiselectOptionsContainer, { isOpen: isOpen }, optionsToRender.length > 0 ? (optionsToRender) : (React.createElement(MultiselectOption, { cursor: "default" }, noOptionsMessage)))));
+};

package/dist/components/multiselect/multiselect.style.d.ts

@@ -0,0 +1,24 @@
+export declare const MultiselectContainer: import("styled-components").StyledComponent<"div", any, MultiselectSearchContainerProps, never>;
+export interface MultiselectSearchContainerProps {
+    stretch?: boolean;
+    hasLabel?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+export declare const MultiselectSearchContainer: import("styled-components").StyledComponent<"div", any, MultiselectSearchContainerProps, never>;
+interface MultiselectLabelProps {
+    riseLabel?: boolean;
+}
+export declare const MultiselectLabel: import("styled-components").StyledComponent<"label", any, MultiselectLabelProps, never>;
+export declare const MultiselectChip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MultiselectSearchInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+interface MultiselectOptionsContainerProps {
+    isOpen?: boolean;
+}
+export declare const MultiselectOptionsContainer: import("styled-components").StyledComponent<"div", any, MultiselectOptionsContainerProps, never>;
+interface MultiselectOptionProps {
+    cursor?: "default" | "pointer";
+    selected?: boolean;
+}
+export declare const MultiselectOption: import("styled-components").StyledComponent<"div", any, MultiselectOptionProps, never>;
+export {};

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

@@ -0,0 +1,93 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const MultiselectContainer = styled.div `
+  position: relative;
+`;
+export const MultiselectSearchContainer = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 16px;
+  height: auto;
+  background-color: transparent;
+  border: 0;
+  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;
+  cursor: ${({ disabled }) => (!disabled ? "pointer" : "default")};
+
+  &:focus {
+    outline: none;
+  }
+`;
+export const MultiselectLabel = styled.label `
+  position: absolute;
+  color: ${colors.textLightGreen};
+  cursor: pointer;
+  transition: transform 0.4s, font-size 0.4s;
+  transition-timing-function: ease;
+  transform: translateY(0);
+  font-size: 16px;
+  cursor: ${({ riseLabel }) => (riseLabel ? "default" : "text")};
+
+  ${({ riseLabel }) => riseLabel &&
+    `
+    transform: translateY(-17px);
+    font-size: 12px;
+  `}
+`;
+export const MultiselectChip = styled.div `
+  background-color: ${colors.textGreen};
+  color: ${colors.white};
+  width: fit-content;
+  padding: 2px 10px;
+  font-size: 12px;
+  border-radius: 11px;
+  white-space: nowrap;
+  margin: 2px;
+  cursor: default;
+`;
+export const MultiselectSearchInput = styled.input `
+  width: 100%;
+  background-color: transparent;
+  border: none;
+`;
+export const MultiselectOptionsContainer = styled.div `
+  max-height: 250px;
+  overflow-y: scroll;
+  height: auto;
+  padding: 4px 0;
+  z-index: 9;
+  position: absolute;
+  top: auto;
+  transform-origin: top left;
+  transform: scale(${({ isOpen }) => (isOpen ? "1" : "0")});
+  transition: transform 0.1s ease-out;
+  transform-style: preserve-3d;
+  width: 100%;
+  background-color: ${colors.white};
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+`;
+export const MultiselectOption = styled.div `
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  padding: 8px;
+  cursor: ${({ cursor = "pointer" }) => cursor};
+
+  ${({ selected }) => `
+    background-color: ${selected ? colors.textGreen : colors.white};
+    color: ${selected ? colors.white : colors.textGreen};
+    
+    &:hover {
+      background-color: ${selected ? colors.textGreen : colors.softGrey} !important;
+    }
+  `}
+`;

package/dist/components/page-title/index.d.ts

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

package/dist/components/page-title/index.js

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

package/dist/components/page-title/pageTitle.component.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const PageTitle: React.FunctionComponent;

package/dist/components/page-title/pageTitle.component.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { PageTitleContainer, H3 } from "./pageTitle.styled";
+export const PageTitle = ({ children }) => {
+    return (React.createElement(PageTitleContainer, null,
+        React.createElement(H3, null, children)));
+};

package/dist/components/page-title/pageTitle.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const PageTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/dist/components/page-title/pageTitle.styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const PageTitleContainer = styled.div `
+  border-top: 1px solid ${colors.cardBorderGrey};
+  border-bottom: 1px solid ${colors.cardBorderGrey};
+  text-align: center;
+  padding: 0.5rem 0;
+`;
+export const H3 = styled.h3 `
+  font-weight: normal;
+  color: ${colors.darkGreen};
+`;

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

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

package/dist/components/radio/index.js

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface RadioItemProps {
+    label: string;
+    itemValue: string | boolean | number;
+    value: string | boolean | number;
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+}
+declare type RadioType = {
+    Item: React.FunctionComponent<RadioItemProps>;
+};
+export declare const Radio: React.FunctionComponent & RadioType;
+export {};

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { GroupContainer, InputRadio, ItemContainer, CircleButton, LabelText, } from "./radio.styled";
+export const Radio = ({ children }) => {
+    return React.createElement(GroupContainer, null, children);
+};
+const Item = ({ itemValue, label, value, onClick, }) => {
+    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(CircleButton, { checked: isSelected },
+            React.createElement("div", null)),
+        React.createElement(LabelText, null, label)));
+};
+Radio.Item = Item;

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

@@ -0,0 +1,9 @@
+export declare const GroupContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface CircleButtonProps {
+    checked?: boolean;
+}
+export declare const CircleButton: import("styled-components").StyledComponent<"div", any, CircleButtonProps, never>;
+export declare const ItemContainer: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const InputRadio: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/radio/radio.styled.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import { colors } from "../../constants";
+export const GroupContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  > label:not(:first-child) {
+    margin-top: 10px;
+  }
+`;
+export const CircleButton = styled.div `
+  ${({ checked }) => `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      border: 2px solid ${colors.green};
+      height: 22px;
+      width: 22px;
+
+      div {
+        background-color: ${checked ? colors.green : "none"};
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+      }
+    `};
+`;
+export const ItemContainer = styled.label `
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  width: fit-content;
+
+  &:hover ${CircleButton} div {
+    background-color: ${colors.lightGreen};
+  }
+`;
+export const InputRadio = styled.input `
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`;
+export const LabelText = styled.div `
+  margin-left: 8px;
+  font-size: 14px;
+  line-height: 1.125rem;
+  font-weight: 400;
+  color: ${colors.darkGreen};
+`;

package/dist/components/range-input/index.d.ts

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

package/dist/components/range-input/index.js

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