venice-ui 1.0.7 → 1.0.9

package/dist/esm/components/InputText/InputText.styles.js

@@ -1,18 +1,36 @@
+import { defaultStyles, setSize, colorMode } from "../common";
 import styled from "styled-components";
-import { Theme } from "../../Theme/Theme";
-export const InputTextField = styled.input `
-  background-color: ${Theme.colors.white};
-  border: 1px solid ${Theme.colors.gray_1};
-  width: 100%;
-  border-radius: 2px;
-  box-sizing: border-box;
-  outline: 0;
-  font-family: "Lato", sans-serif;
-  padding: ${Theme.padding.s};
-  margin: 0;
-  font-size: ${Theme.fontSize.m};
-
+import { Theme } from "../../Theme";
+import { TextLabel } from "../Typography";
+export const InputTextElement = styled.input `
+  position:relative;
+  ${defaultStyles}
+  ${(p) => setSize(p.inputSize)}
+  color: ${Theme.colors.text};
+  width: ${p => p.width ? p.width : '100%'};
   :focus {
-    border-color: ${Theme.colors.primary};
+    ${colorMode.default}
   }
+  :disabled{
+    ${colorMode.disabled}
+    cursor: not-allowed;
+  }
+  ${p => p.error && `
+    ${colorMode.error}
+  `}
+`;
+export const InputLabelElement = styled(TextLabel) `
+  ${p => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
+  ${p => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
+`;
+export const InputWrapper = styled.div `
+  display:flex;
+  position:relative;
+  width: ${p => p.width ? p.width : '100%'};
+`;
+export const InputErrorMsg = styled.div `
+  color: ${Theme.colors.red};
+  font-size: ${Theme.fontSize.s};
+  position: absolute;
+  bottom: -20px;
 `;

package/dist/esm/components/InputText/index.js

@@ -1 +1,2 @@
 export { InputText } from "./InputText";
+export { InputWrapper, InputLabelElement, InputErrorMsg } from './InputText.styles';

package/dist/esm/components/Modal/Modal.js

@@ -1,10 +1,9 @@
+import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { Theme } from '../../Theme/Theme';
 import { Aligment } from '../Aligment';
 import { Button } from '../Button';
 import { ScrollCotainer } from '../common';
-import { Icon } from '../Icons';
-import { TextHeader } from '../Typography';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 export const Modal = ({ children, title, handleConfirm, handleClose, labelConfirm, labelClose, size = 'small', }) => {
     const isMultiButtons = () => {
@@ -12,9 +11,7 @@ export const Modal = ({ children, title, handleConfirm, handleClose, labelConfir
     };
     return (React.createElement(ModalOverlayer, null,
         React.createElement(ModalElement, { size: size },
-            React.createElement(Aligment, { justify: !title ? 'flex-end' : 'space-between', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
-                title && React.createElement(TextHeader, null, title),
-                React.createElement(Icon, { onClick: handleClose, name: "close" })),
+            React.createElement(ElementHeader, { title: title, handleClose: handleClose }),
             React.createElement(ScrollCotainer, null, children),
             React.createElement(Aligment, { justify: 'flex-end', vPadding: Theme.padding.l, hPadding: Theme.padding.l },
                 React.createElement(Button, { mode: isMultiButtons() ? 'inverse' : 'primary', onClick: () => handleClose(), text: labelClose, left: isMultiButtons() }),

package/dist/esm/components/More/More.js

@@ -0,0 +1,23 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Theme } from '../../Theme';
+import { Icon } from '../Icons';
+import { MoreElement, MoreOptions, MoreOption } from './More.styles';
+export const More = ({ options, size = 'medium', iconName = 'more_vert', }) => {
+    const [open, toogleOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                toogleOpen(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [open]);
+    return (React.createElement(MoreElement, null,
+        React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), color: Theme.colors.primary }),
+        open && (React.createElement(MoreOptions, { ref: ref }, options &&
+            options.map((option) => (React.createElement(MoreOption, { key: option.label, onClick: option.action }, option.label)))))));
+};

package/dist/esm/components/More/More.styles.js

@@ -0,0 +1,30 @@
+import { lighten } from "polished";
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const MoreElement = styled.div `
+  position:relative;
+  width:auto;
+  display: flex;
+  box-sizing: border-box;
+`;
+export const MoreOptions = styled.div `
+  box-sizing:border-box;
+  background-color:${Theme.colors.white};
+  box-shadow:${Theme.shadow.m};
+  padding: ${Theme.padding.m} 0;
+  border-radius: ${Theme.borderRadius.m};
+  width:auto;
+  position:absolute;
+  z-index:${Theme.zIndex.dropdown};
+  top:32px;
+  left:0px;
+`;
+export const MoreOption = styled.div `
+  padding: ${Theme.padding.s} ${Theme.padding.m};
+  cursor: pointer;
+  color: ${Theme.colors.primary};
+  :hover{
+    background-color: ${lighten(0.4, Theme.colors.primary)};
+  }
+  
+`;

package/dist/esm/components/More/index.js

@@ -0,0 +1 @@
+export * from './More';

package/dist/esm/components/Selector/Selector.js

@@ -0,0 +1,26 @@
+import { Aligment } from '../Aligment';
+import React, { useState } from 'react';
+import { InputErrorMsg, InputLabelElement } from '../InputText';
+import { Icon } from '../Icons';
+import { SelectorElement, SelectorValue } from './Selector.styles';
+import { Modal } from '../Modal';
+import { DropdownOption } from '../Dropdown/Dropdown.styles';
+export const Selector = ({ label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', }) => {
+    const [open, toogleOpen] = useState(false);
+    const selectOption = (selectedValue) => {
+        handleSelect(name, selectedValue);
+        toogleOpen(false);
+    };
+    const getLabelForValue = (value) => {
+        return options.find((option) => option.value === value).label;
+    };
+    return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
+        label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
+        React.createElement(SelectorElement, null,
+            value ? (React.createElement(React.Fragment, null,
+                React.createElement(SelectorValue, { onClick: () => toogleOpen(true), size: size }, getLabelForValue(value)),
+                React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: 20 }))) : (React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(true), size: 20 })),
+            open && (React.createElement(Modal, { title: "Select", labelClose: "Close", handleClose: () => toogleOpen(false) }, options &&
+                options.map((option) => (React.createElement(DropdownOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label))))),
+            error && React.createElement(InputErrorMsg, null, error))));
+};

package/dist/esm/components/Selector/Selector.styles.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+import { setLabelFontSize } from '../common';
+import { lighten } from "polished";
+export const SelectorElement = styled.div `
+  position: relative;
+  cursor: pointer;
+  display:flex;
+  box-sizing:border-box;
+`;
+export const SelectorValue = styled.div `
+  cursor: pointer;
+  display:flex;
+  box-sizing:border-box;
+  width:100%;
+  align-items: center;
+  padding: ${Theme.padding.s};
+  ${(p) => setLabelFontSize(p.size)}
+  color:${Theme.colors.primary};
+  &:hover{
+    background-color: ${lighten(0.3, Theme.colors.primary)};
+  }
+      
+`;

package/dist/esm/components/Selector/index.js

@@ -0,0 +1 @@
+export * from './Selector';

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -0,0 +1,25 @@
+import { ElementHeader } from '../ElementHeader';
+import React, { useEffect, useRef } from 'react';
+import { ModalOverlayer } from '../Modal/Modal.styles';
+import { SidepanelElement } from './Sidepanel.styles';
+import { Icon } from '../Icons';
+export const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top = 0, iconOptions, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                handleClose && handleClose();
+            }
+        };
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, [handleClose]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
+            React.createElement(ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
+                iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
+            children),
+        overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })));
+};

package/dist/esm/components/Sidepanel/Sidepanel.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { Theme } from '../../Theme/Theme';
+export const SidepanelElement = styled.div `
+  height: calc( 100vh - ${p => p.top}px);
+  width: 20rem;
+  background-color: ${Theme.colors.white};
+  position: fixed;
+  top: ${p => p.top};
+  z-index: 1001;
+  box-shadow: ${Theme.shadow.m};
+  ${p => p.right ? `right:0;` : 'left:0;'}
+
+`;

package/dist/esm/components/Sidepanel/index.js

@@ -0,0 +1 @@
+export * from './Sidepanel';

package/dist/esm/components/Typography/Typography.styles.js

@@ -1,3 +1,4 @@
+import { setLabelFontSize } from '../common';
 import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
 export const Text = styled.div `
@@ -21,7 +22,11 @@ export const TextSubHeader = styled.div `
   font-weight: 300;
 `;
 export const TextLabel = styled.div `
+  font-weight: ${(p) => (p.labelPosition === 'left' ? 'normla' : 'bold')};
+  ${(p) => p.size && p.labelPosition === 'left'
+    ? setLabelFontSize(p.size)
+    : `
   font-size: ${Theme.fontSize.xs};
   line-height: ${Theme.lineHeight.xs};
-  font-weight: bold;
+  `}
 `;

package/dist/esm/components/common/index.js

@@ -1 +1,2 @@
 export * from './commonComponents';
+export * from './inputStyles';

package/dist/esm/components/common/inputStyles.js

@@ -0,0 +1,66 @@
+import { lighten } from "polished";
+import { Theme } from "../../Theme";
+export const defaultStyles = `
+  box-sizing: border-box;
+  background-color: ${Theme.colors.white};
+  border: 1px solid ${Theme.colors.gray_1};
+  border-radius: ${Theme.borderRadius.m};
+  width: 100%;
+  font-family: "Lato", sans-serif;
+  outline: 0;
+`;
+export const sizes = {
+    xsmall: `
+  padding: ${Theme.padding.s};
+  font-size: ${Theme.fontSize.s};
+  `,
+    small: `
+  padding: ${Theme.padding.s};
+  font-size: ${Theme.fontSize.m};
+  `,
+    medium: `
+  padding: ${Theme.padding.m};
+  font-size: ${Theme.fontSize.m};`,
+    large: `
+  padding: ${Theme.padding.m};
+  font-size: ${Theme.fontSize.l};
+  `
+};
+export const setSize = (size) => {
+    return sizes[size];
+};
+export const colorMode = {
+    default: `
+    border-color: ${Theme.colors.primary};
+    background-color: ${lighten(0.4, Theme.colors.primary)};
+  `,
+    disabled: `
+    border-color: ${Theme.colors.disableText};
+    background-color: ${lighten(0.2, Theme.colors.gray_1)};
+    color:${Theme.colors.disableText};
+  `,
+    error: `
+    border-color: ${Theme.colors.red};
+    background-color: ${lighten(0.5, Theme.colors.red)};
+  `,
+};
+export const lableFontSize = {
+    xsmall: `
+  line-height: ${Theme.lineHeight.s};
+  font-size: ${Theme.fontSize.s};
+  `,
+    small: `
+  line-height: ${Theme.lineHeight.m};
+  font-size: ${Theme.fontSize.m};
+  `,
+    medium: `
+  line-height: ${Theme.lineHeight.m};
+  font-size: ${Theme.fontSize.m};`,
+    large: `
+  line-height: ${Theme.lineHeight.m};
+  font-size: ${Theme.fontSize.l};
+  `
+};
+export const setLabelFontSize = (size) => {
+    return lableFontSize[size];
+};

package/dist/esm/index.js

@@ -1,7 +1,10 @@
 export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/Card';
+export * from './components/Dropdown';
+export * from './components/ElementHeader';
 export * from './components/Icons';
 export * from "./components/InputText";
 export * from './components/Modal';
+export * from './components/Sidepanel';
 export * from './components/Typography';

package/dist/esm/types/commonTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/index.js

@@ -1 +1,2 @@
 export * from './types';
+export * from './commonTypes';

package/dist/types/Theme/Theme.d.ts

@@ -8,6 +8,7 @@ export declare const Theme: {
         black: string;
         gray_1: string;
         overlayer: string;
+        red: string;
     };
     fontSize: {
         xs: string;
@@ -33,6 +34,7 @@ export declare const Theme: {
     };
     zIndex: {
         modalOverlayer: number;
+        dropdown: number;
     };
     borderRadius: {
         s: string;

package/dist/types/Theme/index.d.ts

@@ -0,0 +1 @@
+export * from './Theme';

package/dist/types/components/Card/Card.d.ts

@@ -1,10 +1,15 @@
 import React, { FC } from 'react';
+import { IAction } from 'types';
 interface ICardProps {
     children: React.ReactNode;
     title?: string;
     actionLabel?: string;
     handleClick?: () => void;
+    handleBack?: () => void;
     height?: string;
+    moreIcon?: boolean;
+    backIcon?: boolean;
+    options?: IAction[];
 }
 export declare const Card: FC<ICardProps>;
 export {};

package/dist/types/components/Card/index.d.ts

@@ -1 +1 @@
-export * from './Card';
+export { Card } from './Card';

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { InputSize, IOption, LabelPosition } from 'types';
+export interface IDropdownProps {
+    mode: 'normal' | 'icon';
+    label?: string;
+    labelPosition?: LabelPosition;
+    size?: InputSize;
+    disabled?: boolean;
+    error?: string;
+    width?: string;
+    options: IOption[];
+    value?: string | number;
+    placeholder?: string;
+    name: string;
+    handleSelect: (name: string, value: string | number) => void;
+}
+export declare const Dropdown: FC<IDropdownProps>;

package/dist/types/components/Dropdown/Dropdown.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const DropdownElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface IDropdownOptionsProps {
+    height?: string;
+}
+export declare const DropdownOptions: import("styled-components").StyledComponent<"div", any, IDropdownOptionsProps, never>;
+interface IDropdownOptionProps {
+    active: boolean;
+}
+export declare const DropdownOption: import("styled-components").StyledComponent<"div", any, IDropdownOptionProps, never>;
+export {};

package/dist/types/components/Dropdown/DropdownElements.d.ts

@@ -0,0 +1,9 @@
+import { InputSize } from "types";
+export interface IFieldProps {
+    inputSize: InputSize;
+    disabled: boolean;
+    error?: string;
+    width?: string;
+    active: boolean;
+}
+export declare const Field: import("styled-components").StyledComponent<"div", any, IFieldProps, never>;

package/dist/types/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dropdown';
+export * from './DropdownElements';

package/dist/types/components/ElementHeader/ElementHeader.d.ts

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { IAction } from 'types';
+interface IElementHeader {
+    title?: string;
+    showTitle?: boolean;
+    moreIcon?: boolean;
+    closeIcon?: boolean;
+    backIcon?: boolean;
+    actionButton?: boolean;
+    actionLabel?: string;
+    handleClose?: () => void;
+    handleClick?: () => void;
+    handleBack?: () => void;
+    children?: React.ReactNode;
+    bgColor?: string;
+    options?: IAction[];
+}
+export declare const ElementHeader: FC<IElementHeader>;
+export {};

package/dist/types/components/ElementHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './ElementHeader';

package/dist/types/components/Icons/IconsPath.d.ts

@@ -1,11 +1,22 @@
 export declare const iconsPath: {
-    close: string;
-    add: string;
+    calendar: string;
+    bookmark: string;
+    forward: string;
     back: string;
-    delete: string;
-    remove: string;
-    person: string;
+    back_arrow: string;
+    add: string;
+    add_circle: string;
+    account: string;
+    visibility: string;
+    search: string;
+    more_vert: string;
     menu: string;
-    expand_more: string;
-    expand_less: string;
+    unlock: string;
+    lock: string;
+    home: string;
+    filters: string;
+    edit: string;
+    download: string;
+    delete: string;
+    close: string;
 };

package/dist/types/components/InputText/InputText.d.ts

@@ -1,11 +1,10 @@
-import { FC } from "react";
-export interface IInputTextProps {
-    label: string;
-    value: string | number;
+import { FC } from 'react';
+import { InputType, IFormElement } from 'types';
+export interface IInputTextProps extends IFormElement {
+    type: InputType;
     name: string;
-    read?: boolean;
-    disable?: boolean;
-    size?: string;
-    onChange: any;
+    handleChange: (name: string, value: string | number) => void;
+    error?: string;
+    placeholder?: string;
 }
 export declare const InputText: FC<IInputTextProps>;

package/dist/types/components/InputText/InputText.styles.d.ts

@@ -1 +1,16 @@
-export declare const InputTextField: import("styled-components").StyledComponent<"input", any, {}, never>;
+import { InputHTMLAttributes } from "react";
+import { InputSize } from "types";
+interface IInputTextElementProps extends InputHTMLAttributes<HTMLInputElement> {
+    inputSize: InputSize;
+    disabled: boolean;
+    error?: string;
+    width?: string;
+}
+export declare const InputTextElement: import("styled-components").StyledComponent<"input", any, IInputTextElementProps, never>;
+export declare const InputLabelElement: import("styled-components").StyledComponent<"div", any, import("../Typography/Typography.styles").ITextLabelProps, never>;
+interface IInputWrapperProps {
+    width?: string;
+}
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, IInputWrapperProps, never>;
+export declare const InputErrorMsg: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/types/components/InputText/index.d.ts

@@ -1 +1,2 @@
 export { InputText } from "./InputText";
+export { InputWrapper, InputLabelElement, InputErrorMsg } from './InputText.styles';

package/dist/types/components/More/More.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { IAction, InputSize } from 'types';
+interface IMoreProps {
+    options: IAction[];
+    size?: InputSize;
+    iconName?: string;
+}
+export declare const More: FC<IMoreProps>;
+export {};

package/dist/types/components/More/More.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const MoreElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MoreOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface IMoreOptionStyle {
+    onClick: any;
+}
+export declare const MoreOption: import("styled-components").StyledComponent<"div", any, IMoreOptionStyle, never>;

package/dist/types/components/More/index.d.ts

@@ -0,0 +1 @@
+export * from './More';

package/dist/types/components/Selector/Selector.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { InputSize, IOption, LabelPosition } from 'types';
+export interface ISelectorProps {
+    label?: string;
+    labelPosition?: LabelPosition;
+    size?: InputSize;
+    width?: string;
+    options: IOption[];
+    value?: string | number;
+    name: string;
+    error?: string;
+    handleSelect: (name: string, value: string | number) => void;
+    handleClear: () => void;
+    iconName?: string;
+}
+export declare const Selector: FC<ISelectorProps>;

package/dist/types/components/Selector/Selector.styles.d.ts

@@ -0,0 +1,7 @@
+import { InputSize } from "types";
+export declare const SelectorElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ISelectorValueStyle {
+    size: InputSize;
+}
+export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
+export {};

package/dist/types/components/Selector/index.d.ts

@@ -0,0 +1 @@
+export * from './Selector';

package/dist/types/components/Sidepanel/Sidepanel.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { IIconsActions } from 'types';
+interface ISidepanel {
+    children: React.ReactNode;
+    handleClose: () => void;
+    right?: boolean;
+    overlayer?: boolean;
+    top?: number;
+    iconOptions?: IIconsActions[];
+}
+export declare const Sidepanel: FC<ISidepanel>;
+export {};

package/dist/types/components/Sidepanel/Sidepanel.styles.d.ts

@@ -0,0 +1,6 @@
+interface ISidepanelElement {
+    right: boolean;
+    top: number;
+}
+export declare const SidepanelElement: import("styled-components").StyledComponent<"div", any, ISidepanelElement, never>;
+export {};

package/dist/types/components/Sidepanel/index.d.ts

@@ -0,0 +1 @@
+export * from './Sidepanel';

package/dist/types/components/Typography/Typography.styles.d.ts

@@ -1,5 +1,10 @@
+import { InputSize, LabelPosition } from 'types';
 export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextSmall: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ITextLabelProps {
+    size?: InputSize;
+    labelPosition?: LabelPosition;
+}
+export declare const TextLabel: import("styled-components").StyledComponent<"div", any, ITextLabelProps, never>;

package/dist/types/components/common/index.d.ts

@@ -1 +1,2 @@
 export * from './commonComponents';
+export * from './inputStyles';

package/dist/types/components/common/inputStyles.d.ts

@@ -0,0 +1,21 @@
+import { InputSize } from "types";
+export declare const defaultStyles: string;
+export declare const sizes: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const setSize: (size: InputSize) => string;
+export declare const colorMode: {
+    default: string;
+    disabled: string;
+    error: string;
+};
+export declare const lableFontSize: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const setLabelFontSize: (size: InputSize) => string;