@dnanpm/styleguide 2.1.0 → 2.2.1

package/build/es/components/Selectbox/Selectbox.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import Select, { defaultTheme, components } from 'react-select';
 import styled from '../../themes/styled.js';
@@ -7,19 +8,16 @@ import Icon from '../Icon/Icon.js';
 import hlChevronDown from '../Icons/hlChevronDown.js';
 import hlChevronUp from '../Icons/hlChevronUp.js';
 import hlMagnifyingGlass from '../Icons/hlMagnifyingGlass.js';
-import { LabelText } from '../LabelText/LabelText.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import LabelText from '../LabelText/LabelText.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
 
 const FieldContainer = styled.div `
     color: ${props => (props.isDisabled ? props.theme.color.gray40 : props.theme.color.text)};
     margin-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
 
     ${LabelText} {
-        color: ${props => {
-    if (props.error) {
-        return props.theme.color.error;
-    }
-}}
+        color: ${props => (props.error ? props.theme.color.error : 'inherit')};
+    }
 `;
 const ErrorMessage = styled.div `
     font-size: ${props => props.theme.fontSize.s};
@@ -30,83 +28,55 @@ const ErrorMessage = styled.div `
 const Mandatory = styled.span `
     color: ${props => props.theme.color.hotPink};
 `;
-const customTheme = {
-    ...defaultTheme,
-    borderRadius: 0,
-    colors: {
-        ...defaultTheme.colors,
-        primary50: theme.color.gray10,
-        primary25: theme.color.grayBg,
-        primary: theme.color.gray5,
-    },
-};
-const selectBoxStyles = {
-    control: (styles, state) => ({
-        ...styles,
-        boxShadow: 'none',
-        height: getMultipliedSize(theme.base.baseHeight, 4),
-        borderColor: state.isFocused && !state.menuIsOpen ? theme.color.gray40 : theme.color.gray25,
-        ':hover': {
+const customTheme = Object.assign(Object.assign({}, defaultTheme), { borderRadius: 0, colors: Object.assign(Object.assign({}, defaultTheme.colors), { primary50: theme.color.gray10, primary25: theme.color.grayBg, primary: theme.color.gray5 }) });
+const getStyles = () => ({
+    control: (styles, state) => (Object.assign(Object.assign({}, styles), { boxShadow: 'none', height: getMultipliedSize(theme.base.baseHeight, 4), borderColor: state.isFocused && !state.menuIsOpen ? theme.color.gray40 : theme.color.gray25, ':hover': {
             borderColor: theme.color.gray25,
-        },
-    }),
-    menu: styles => ({
-        ...styles,
-        border: `1px solid ${theme.color.gray25}`,
-        boxShadow: 'none',
-        marginTop: '-2px',
-    }),
-    indicatorSeparator: styles => ({
-        ...styles,
-        backgroundColor: 'transparent',
-        border: 'none',
-    }),
-    option: (styles, { isDisabled, isSelected }) => ({
-        ...styles,
-        display: 'flex',
-        justifyContent: 'space-between',
-        color: isDisabled ? theme.color.gray40 : theme.color.text,
-        fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book,
-        fontSize: theme.fontSize.default,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre-wrap',
-        overflow: 'hidden',
-        cursor: isDisabled ? 'not-allowed' : 'default',
-    }),
+        } })),
+    menu: styles => (Object.assign(Object.assign({}, styles), { border: `1px solid ${theme.color.gray25}`, boxShadow: 'none', marginTop: '-2px' })),
+    indicatorsContainer: styles => (Object.assign(Object.assign({}, styles), { pointerEvents: 'none' })),
+    indicatorSeparator: styles => (Object.assign(Object.assign({}, styles), { backgroundColor: 'transparent', border: 'none' })),
+    option: (styles, { isDisabled, isSelected }) => (Object.assign(Object.assign({}, styles), { display: 'flex', justifyContent: 'space-between', color: isDisabled ? theme.color.gray40 : theme.color.text, fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book, fontSize: theme.fontSize.default, textOverflow: 'ellipsis', whiteSpace: 'pre-wrap', overflow: 'hidden', cursor: isDisabled ? 'not-allowed' : 'default' })),
     dropdownIndicator: (styles, { isDisabled, selectProps: { isSearchable } }) => {
         const enabledColorsSet = isSearchable ? theme.color.hotPink : theme.color.text;
-        return {
-            ...styles,
-            color: isDisabled ? theme.color.gray40 : enabledColorsSet,
-            ':hover': {
+        return Object.assign(Object.assign({}, styles), { color: isDisabled ? theme.color.gray40 : enabledColorsSet, ':hover': {
                 color: theme.color.text,
-            },
-        };
+            } });
     },
+});
+const DropdownIndicator = (dropdownIndicatorProps) => {
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
+    // eslint-disable-next-line
+    // @ts-ignore
+    const { customDropDownIndicator } = 
+    // eslint-disable-next-line
+    dropdownIndicatorProps.selectProps;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
+    // eslint-disable-next-line
+    const { isSearchable, menuIsOpen } = dropdownIndicatorProps.selectProps;
+    const { color = 'currentColor', iconSize = '1.5rem' } = Object.assign({}, customDropDownIndicator);
+    const getIcon = () => {
+        if (isSearchable) {
+            return hlMagnifyingGlass;
+        }
+        return menuIsOpen ? hlChevronUp : hlChevronDown;
+    };
+    return (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
+        React.createElement(Icon, { icon: getIcon(), color: color, size: iconSize }))));
 };
-const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
+const SelectBox = (_a) => {
+    var { dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false } = _a, props = __rest(_a, ["dropDownIndicator", 'data-testid', "isSearchable", "isClearable", "noOptionsText", "isLoading", "isDisabled", "isRequired", "error"]);
     const getNoOptionsText = () => noOptionsText;
-    const DropdownIndicator = (dropdownIndicatorProps) => {
-        const { color = 'currentColor', iconSize = '1.5rem' } = {
-            ...dropDownIndicator,
-        };
-        const getIcon = () => {
-            if (isSearchable) {
-                return hlMagnifyingGlass;
-            }
-            else {
-                return dropdownIndicatorProps.selectProps.menuIsOpen ? hlChevronUp : hlChevronDown;
-            }
-        };
-        return (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
-            React.createElement(Icon, { icon: getIcon(), color: color, size: iconSize }))));
-    };
     return (React.createElement("div", { className: props.className, "data-testid": dataTestId }, !isLoading ? (React.createElement(FieldContainer, { isDisabled: isDisabled, error: error },
         props.label && (React.createElement(LabelText, { htmlFor: props.inputId },
             props.label,
             " ",
             isRequired && React.createElement(Mandatory, null, "*"))),
-        React.createElement(Select, { inputId: props.inputId, styles: selectBoxStyles, theme: customTheme, components: { DropdownIndicator }, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: isMulti, isDisabled: isDisabled }),
+        React.createElement(Select, { inputId: props.inputId, styles: getStyles(), theme: customTheme, components: { DropdownIndicator }, 
+            // eslint-disable-next-line
+            // @ts-ignore
+            // TODO: Remove once https://jira.dna.fi/browse/STYLE-307 is done
+            customDropDownIndicator: dropDownIndicator, options: props.options, classNamePrefix: "react_select", onChange: props.onChange, onInputChange: props.onInputChange, value: props.value, placeholder: props.placeholder, noOptionsMessage: getNoOptionsText, menuPortalTarget: props.menuPortalTarget, menuPlacement: props.menuPlacement, isSearchable: isSearchable, isClearable: isClearable, isMulti: props.isMulti, isDisabled: isDisabled }),
         error && props.errorMessage && (React.createElement(ErrorMessage, null, props.errorMessage)))) : (React.createElement(PixelLoader, null))));
 };
 

package/build/es/components/Switch/Switch.d.ts

@@ -1,29 +1,49 @@
-import * as React from 'react';
-export interface SwitchProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Is the switch on? */
+/// <reference types="react" />
+interface Props {
+    /**
+     * Unique ID for the checkbox (switch) element
+     */
+    id: string;
+    /**
+     * Name of the checkbox (switch) element
+     */
+    name?: string;
+    /**
+     * Text of the checkbox (switch) element label
+     */
+    label?: string;
     /**
+     * On checkbox (switch) element change callback
+     */
+    onChange?: (isChecked: boolean) => void;
+    /**
+     * Is the switch on?
+     *
      * @default false
+     * @deprecated Use property `isChecked`
      */
     on?: boolean | string;
-    /** A change handler. Passes the new `on` boolean */
-    onChange?: (on: boolean) => void;
-    /** The label of the switch */
-    label?: string;
-    /** Disabled switch */
     /**
+     * Allows to set the switch as checked
+     *
      * @default false
      */
-    name?: string;
-    /** Unique id for the switch and label */
-    id: string;
-    /** Is switch disabled */
+    isChecked?: boolean;
     /**
+     * Allows to disable the component functionality
+     *
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
 }
-declare const Switch: React.FunctionComponent<SwitchProps>;
+declare const Switch: ({ onChange, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
 /** @component */
 export default Switch;

package/build/es/components/Switch/Switch.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import { createElement } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -6,7 +7,7 @@ const height = 1.625; // 26px
 const borderRadius = 1.875; // 30px
 const borderSize = 0.125; // 2px
 const railWidth = 3; // 48px
-const railHeight = height + borderSize * 2; // 40px
+const railHeight = height + borderSize * 2; // 30px
 const Container = styled.div `
     display: inline-flex;
     min-height: ${railHeight}rem;
@@ -21,28 +22,14 @@ const Button = styled.div `
     content: ' ';
     width: ${height}rem;
     border-radius: 50%;
-    ${({ on, theme }) => `
-        transform: translate3d(${on ? railWidth - height : 0}rem, 0, 0);
-        background-color: ${on ? theme.color.hotPink : theme.color.gray25};
-        border: ${borderSize}rem solid ${on ? theme.color.white : theme.color.white};
+    ${({ isChecked, theme }) => `
+        transform: translate3d(${isChecked ? railWidth - height : 0}rem, 0, 0);
+        background-color: ${isChecked ? theme.color.hotPink : theme.color.gray25};
+        border: ${borderSize}rem solid ${theme.color.white};
         z-index: 2;
-        left: ${on ? -borderSize * 2 : 0}rem;
+        left: ${isChecked ? -borderSize * 2 : 0}rem;
     `};
 `;
-const Rail = styled.div `
-    width: ${railWidth}rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: ${borderRadius}rem;
-    overflow: hidden;
-    ${({ on, theme }) => `
-        height: ${railHeight}rem;
-        border: ${borderSize}rem solid ${on ? theme.color.hotPink : theme.color.gray25};
-        background-color: ${theme.color.white};
-        z-index: 0;
-   `};
-`;
 const Checkbox = styled.input `
     opacity: 0;
     position: absolute;
@@ -83,18 +70,36 @@ const LabelText = styled.div `
     flex: 1;
     margin-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
 `;
-const Switch = ({ id, name, label, on, disabled, onChange, ...props }) => {
+const Rail = styled.div `
+    width: ${railWidth}rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: ${borderRadius}rem;
+    overflow: hidden;
+    ${({ isChecked, theme }) => `
+        height: ${railHeight}rem;
+        border: ${borderSize}rem solid ${isChecked ? theme.color.hotPink : theme.color.gray25};
+        background-color: ${theme.color.white};
+        z-index: 0;
+   `};
+`;
+const Switch = (_a) => {
+    var { onChange, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", 'data-testid']);
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-379 is done
+    // Replace all occurences of `isCheckedInternal` with props.isChecked
+    const isCheckedInternal = Boolean(props.on) || props.isChecked;
     const handleChange = () => {
-        if (onChange && !disabled) {
-            onChange(!on);
+        if (onChange && !props.disabled) {
+            onChange(!isCheckedInternal);
         }
     };
-    return (createElement(Container, Object.assign({}, props),
-        createElement(Checkbox, { "aria-checked": Boolean(on), checked: Boolean(on), disabled: disabled, id: id, name: name, onChange: handleChange, role: "switch", type: "checkbox" }),
-        createElement(Label, { htmlFor: id },
-            createElement(Rail, { on: on ? on.toString() : undefined },
-                createElement(Button, { on: on ? on.toString() : undefined })),
-            label && createElement(LabelText, null, label))));
+    return (createElement(Container, { className: props.className, "data-testid": dataTestId },
+        createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(isCheckedInternal), "aria-checked": Boolean(isCheckedInternal), disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox" }),
+        createElement(Label, { htmlFor: props.id },
+            createElement(Rail, { isChecked: isCheckedInternal },
+                createElement(Button, { isChecked: isCheckedInternal })),
+            props.label && createElement(LabelText, null, props.label))));
 };
 
 export default Switch;

package/build/es/components/Tabs/Tab.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Type } from './Tabs';
+import type { Type } from './Tabs';
 export interface TabProps {
     activeTab?: string;
-    label?: string;
+    label: string;
     tabStyle?: Type;
-    onClick?: (...args: any[]) => any;
+    onClick?: (tab: string) => void;
 }
 export interface TabStyleProps {
     isActive?: boolean;

package/build/es/components/Tabs/Tabs.d.ts

@@ -8,10 +8,10 @@ interface TabsProps {
     /**
      * Style of the tabs
      *
-     * @deprecated Underlined is provided only as legacy style
-     * @default 'gray'
      * @param {Type} gray Default
      * @param {Type} underlined Legacy style (should not be used in new projects)
+     * @default 'gray'
+     * @deprecated Underlined is provided only as legacy style
      */
     tabStyle?: Type;
     /**
@@ -21,7 +21,7 @@ interface TabsProps {
     /**
      * Handles when tab is switched/changed
      */
-    onChange?: (...args: any[]) => any;
+    onChange?: (tab: string) => void;
     /**
      * Allows to pass default tab explicitly
      *
@@ -44,6 +44,9 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
     button: {
         border: string;
     };
+    /**
+     * Handles when tab is switched/changed
+     */
     color: {
         black: string;
         white: string;
@@ -67,7 +70,11 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         gray70: string;
         gray55: string;
         gray40: string;
-        gray25: string;
+        gray25: string; /**
+         * Allows to pass default tab explicitly
+         *
+         * @default children[0].props.label
+         */
         gray15: string;
         gray10: string;
         gray5: string;
@@ -83,9 +90,7 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         l: string;
         s: string;
         xs: string;
-        h1XL: string; /**
-         * Allows to pass a custom className
-         */
+        h1XL: string;
         h1L: string;
         h1M: string;
         h1S: string;
@@ -120,14 +125,6 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         h1XL: string;
         h1L: string;
         h1M: string;
-        /**
-         * Style of the tabs
-         *
-         * @deprecated Underlined is provided only as legacy style
-         * @default 'gray'
-         * @param {Type} gray Default
-         * @param {Type} underlined Legacy style (should not be used in new projects)
-         */
         h1S: string;
         h2M: string;
         h2S: string;
@@ -137,11 +134,15 @@ export declare const Tablist: import("styled-components").StyledComponent<"ul",
         h1: string;
         h2: string;
     };
-    media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<React.ReactText, (l: TemplateStringsArray, ...p: any[]) => string>; /**
+     * Allows to pass default tab explicitly
+     *
+     * @default children[0].props.label
+     */
 }, {
     tabStyle?: "gray" | "underlined" | undefined;
 }, never>;
 /** @visibleName Tabs */
-declare const Tabs: ({ children, className, tabStyle, onChange, defaultTab }: TabsProps) => JSX.Element;
+declare const Tabs: ({ children, className, tabStyle, onChange, defaultTab }: TabsProps) => JSX.Element | null;
 /** @component */
 export default Tabs;

package/build/es/components/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from '../../themes/styled.js';
 import Tab from './Tab.js';
 
@@ -13,17 +13,13 @@ const TabContent = styled.div `
 `;
 /** @visibleName Tabs */
 const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab }) => {
+    const [activeTab, setActiveTab] = React.useState(defaultTab);
     const tabs = React.Children.map(children, child => {
         if (React.isValidElement(child) && child.type === Tab) {
             return child;
         }
+        return null;
     });
-    const activeTabState = defaultTab || tabs[0].props.label;
-    const [activeTab, setActiveTab] = React.useState(activeTabState);
-    useEffect(() => {
-        // Update active tab if tab labels have been updated
-        setActiveTab(activeTabState);
-    }, [activeTabState]);
     const onClickTabItem = (tab) => {
         setActiveTab(tab);
         if (tab !== activeTab && onChange) {
@@ -31,18 +27,13 @@ const Tabs = ({ children, className, tabStyle = 'gray', onChange, defaultTab })
         }
     };
     if (!tabs) {
-        return React.createElement(React.Fragment, null);
+        return null;
     }
-    const renderTab = () => {
-        return tabs.map(child => {
-            return (React.createElement(Tab, { activeTab: activeTab, key: child.props.label, label: child.props.label, tabStyle: tabStyle, onClick: onClickTabItem }));
-        });
-    };
-    const renderTabContent = () => {
-        return tabs.map(child => {
-            return child.props.label !== activeTab ? undefined : child.props.children;
-        });
-    };
+    if (!activeTab) {
+        setActiveTab(tabs[0].props.label);
+    }
+    const renderTab = () => tabs.map(child => (React.createElement(Tab, { activeTab: activeTab, key: child.props.label, label: child.props.label, tabStyle: tabStyle, onClick: onClickTabItem })));
+    const renderTabContent = () => tabs.map(child => (child.props.label !== activeTab ? undefined : child.props.children));
     return (React.createElement("div", { className: className ? `tabs ${className}` : 'tabs' },
         React.createElement(Tablist, { role: "tablist", tabStyle: tabStyle }, renderTab()),
         React.createElement(TabContent, { role: "tabpanel" }, renderTabContent())));

package/build/es/components/Textarea/Textarea.js

@@ -1,7 +1,8 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import { LabelText } from '../LabelText/LabelText.js';
+import LabelText from '../LabelText/LabelText.js';
 
 const Tag = styled.textarea `
     display: block;
@@ -44,7 +45,8 @@ const CommentMessage = styled.div `
     color: ${props => props.theme.color.gray40};
     margin-top: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
 `;
-const Textarea = ({ id, label, name, required, disabled, onBlur, onFocus, onChange, onKeyPress, onKeyDown, value, placeholder, commentMessage, height = 3, 'data-testid': dataTestId, ...props }) => {
+const Textarea = (_a) => {
+    var { id, label, name, required, disabled, onBlur, onFocus, onChange, onKeyPress, onKeyDown, value, placeholder, commentMessage, height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["id", "label", "name", "required", "disabled", "onBlur", "onFocus", "onChange", "onKeyPress", "onKeyDown", "value", "placeholder", "commentMessage", "height", 'data-testid']);
     const inputId = id || name;
     const inputRef = React.useRef(null);
     const handleOnBlur = React.useCallback((e) => {
@@ -63,13 +65,13 @@ const Textarea = ({ id, label, name, required, disabled, onBlur, onFocus, onChan
             inputRef.current.focus();
         }
     }, []);
-    const renderField = () => (React.createElement(Tag, Object.assign({ name: name, id: inputId, value: value, rows: height, placeholder: placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: onFocus, onClick: onClick, onKeyDown: onKeyDown, onKeyPress: onKeyPress, required: required, disabled: disabled, "aria-disabled": disabled, "aria-label": inputId, ref: inputRef, "data-testid": dataTestId }, props)));
     return (React.createElement(FieldContainer, { disabled: disabled },
         label && (React.createElement(LabelText, { htmlFor: id, "data-testid": dataTestId && `${dataTestId}-label` },
             label,
             " ",
             required && React.createElement(Mandatory, null, "*"))),
-        React.createElement(FieldWrapper, null, renderField()),
+        React.createElement(FieldWrapper, null,
+            React.createElement(Tag, { id: inputId, name: name, ref: inputRef, value: value, rows: height, placeholder: placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: onFocus, onClick: onClick, onKeyDown: onKeyDown, onKeyPress: onKeyPress, required: required, disabled: disabled, "aria-disabled": disabled, "aria-label": inputId, "data-testid": dataTestId })),
         commentMessage && (React.createElement(CommentMessage, { "data-testid": dataTestId && `${dataTestId}-comment` }, commentMessage))));
 };
 

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -8,7 +8,7 @@ const Tail = styled.div `
     right: ${p => p.arrowPosition};
     margin-top: -17.5px;
     top: ${p => p.tooltipTop};
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => Number(p.zIndex) + 1};
     border: 10px solid transparent;
     border-right-color: white;
     transform: rotate(90deg);
@@ -21,7 +21,7 @@ const TailShadow = styled.div `
     margin-top: -5px;
     margin-right: 8.5px;
     top: ${p => p.tooltipTop};
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => Number(p.zIndex) + 1};
     right: ${p => p.arrowPosition};
     background-color: transparent;
     box-shadow: 0 0 5px 0 ${p => p.theme.color.black};

package/build/es/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Props as IconProps } from '../Icon/Icon';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface TooltipMenuProps {
     /** Text selector */
     selector: string;

package/build/es/components/TooltipMenu/TooltipMenu.js

@@ -3,6 +3,7 @@ import useOutsideClick from '../../hooks/useOutsideClick.js';
 import styled from '../../themes/styled.js';
 import colors from '../../themes/themeComponents/colors.js';
 import Icon from '../Icon/Icon.js';
+import 'tslib';
 import hlChevronDown from '../Icons/hlChevronDown.js';
 import { TailShadow, Tail } from './ChildComponents/TooltipMenuExportedStyles.js';
 

package/build/es/hooks/useCloseOutsideOrElementClicked.d.ts

@@ -1,6 +1,7 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 /**
  * Hook to handle the click outside the referenced element
+ *
  * @param ref - reference to the targeted element
  * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
  * @param callback - callback

package/build/es/hooks/useCloseOutsideOrElementClicked.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 /**
  * Hook to handle the click outside the referenced element
+ *
  * @param ref - reference to the targeted element
  * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
  * @param callback - callback

package/build/es/hooks/useDocHeight.js

@@ -4,7 +4,7 @@ import { useDebounceFunc } from './useDebounceFunc.js';
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
     const setDocHeight = useCallback(() => {
-        document.documentElement.style.setProperty('--vh100', window.innerHeight + 'px');
+        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
     const debounceSetDocHeight = useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
     useEffect(() => {

package/build/es/hooks/useOutsideClick.d.ts

@@ -1,8 +1,9 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 /**
  * Hook to handle the click outside the referenced element
- * @param ref - reference to the targeted element
- * @param callback - callback
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
  */
 declare const useOutsideClick: (ref: RefObject<Element>, callback: () => void) => void;
 export default useOutsideClick;

package/build/es/hooks/useOutsideClick.js

@@ -2,8 +2,9 @@ import { useEffect } from 'react';
 
 /**
  * Hook to handle the click outside the referenced element
- * @param ref - reference to the targeted element
- * @param callback - callback
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
  */
 const useOutsideClick = (ref, callback) => {
     const handleClick = (e) => {

package/build/es/hooks/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import react, { MutableRefObject } from 'react';
+import type { DependencyList, MutableRefObject } from 'react';
 /**
  * Hook to follow scroll position without rerendering the view.
  * Modified to ES6 and work with SSR (fixed window undefined error) and Rocket architecture from https://www.npmjs.com/package/@n8tb1t/use-scroll-position
@@ -12,7 +12,7 @@ interface ScrollPositionProps {
     currPos: ScrollPosition;
 }
 declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, deps: react.DependencyList, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, deps: DependencyList, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
     defaultProps: {
         deps: never[];
         element: boolean;

package/build/es/hooks/useScrollPosition.js

@@ -3,8 +3,8 @@ import React from 'react';
 /* eslint-disable react-hooks/exhaustive-deps */
 const isBrowser = typeof window !== 'undefined';
 const getScrollPosition = (ref) => {
-    const element = ref.element;
-    const useWindow = ref.useWindow;
+    const { element } = ref;
+    const { useWindow } = ref;
     if (!isBrowser) {
         return {
             x: 0,
@@ -42,7 +42,7 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
     };
     React.useEffect(() => {
         if (!isBrowser) {
-            return;
+            return undefined;
         }
         const handleScroll = () => {
             if (wait) {
@@ -55,9 +55,7 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
             }
         };
         window.addEventListener('scroll', handleScroll);
-        return () => {
-            return window.removeEventListener('scroll', handleScroll);
-        };
+        return () => window.removeEventListener('scroll', handleScroll);
     }, deps);
 };
 useScrollPosition.defaultProps = {

package/build/es/index.js

@@ -123,12 +123,12 @@ export { default as youtube } from './components/Icons/Social/youtube.js';
 export { default as Image } from './components/Image/Image.js';
 export { default as Input } from './components/Input/Input.js';
 export { default as Label } from './components/Label/Label.js';
-export { LabelText } from './components/LabelText/LabelText.js';
+export { default as LabelText } from './components/LabelText/LabelText.js';
 export { default as MainNavigation } from './components/MainNavigation/MainNavigation.js';
 export { default as Modal } from './components/Modal/Modal.js';
 export { default as Notification } from './components/Notification/Notification.js';
 export { NotificationBadge } from './components/NotificationBadge/NotificationBadge.js';
-export { PixelLoader } from './components/PixelLoader/PixelLoader.js';
+export { default as PixelLoader } from './components/PixelLoader/PixelLoader.js';
 export { default as ProgressIndicator } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as ReadMore } from './components/ReadMore/ReadMore.js';