@dnanpm/styleguide 2.0.1 → 2.2.0

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,4 +1,5 @@
 import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface TooltipMenuProps {
     /** Text selector */
     selector: string;
@@ -10,7 +11,7 @@ export interface TooltipMenuProps {
     color?: string;
     /** Text selector active color. Default: #121212 */
     activeColor?: string;
-    /** Size of chevron icon. Default: 1rem  */
+    /** Size of chevron icon. Default: 1.5rem  */
     iconSize?: string;
     /** Overlap other elements */
     zIndex?: string;
@@ -18,9 +19,17 @@ export interface TooltipMenuProps {
     tooltipTop?: string;
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
-    /** Tooltip icon for selector. Default: '' */
+    /**
+     * Tooltip icon for selector. Default: ''
+     *
+     * @deprecated Use property `tooltipIcon`
+     */
     tooltipIconName?: string;
-    /** Tooltip icon size for selector. Default: '1em' */
+    /**
+     * Tooltip icon for selector
+     */
+    tooltipIcon?: IconProps['icon'];
+    /** Tooltip icon size for selector. Default: '1.5rem' */
     tooltipIconSize?: string;
     /** Show hide animated chevron. Default: '' */
     tooltipChevron?: boolean;
@@ -28,5 +37,5 @@ export interface TooltipMenuProps {
     arrowPosition?: string;
 }
 /** @visibleName Tooltip Menu */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => JSX.Element;
+declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => JSX.Element;
 export default TooltipMenu;

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

@@ -3,13 +3,18 @@ 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';
 
 const Selector = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     color: ${p => p.color || p.theme.color.white};
-    text-align: right;
     cursor: pointer;
-    span + ${Icon} {
+
+    span + span.dnasg-icon > svg {
         transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
         transition: transform 0.15s linear;
     }
@@ -34,7 +39,7 @@ const ChildrenWrapper = styled.span `
     }
 `;
 /** @visibleName Tooltip Menu */
-const TooltipMenu = ({ selector, className, color = colors.text, children, iconSize = '1em', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName = '', tooltipIconSize = '1em', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
+const TooltipMenu = ({ selector, className, color = colors.text, children, iconSize = '1.5rem', zIndex = '1', tooltipTop = '2rem', tooltipRight = '-1.25rem', activeColor = color, tooltipIconName, tooltipIcon, tooltipIconSize = '1.5rem', tooltipChevron = true, arrowPosition = '-0.25rem', }) => {
     const [showDropdown, setShowDropdown] = useState(false);
     const ref = useRef(null);
     const toggleState = () => {
@@ -47,9 +52,10 @@ const TooltipMenu = ({ selector, className, color = colors.text, children, iconS
     });
     return (React.createElement(Container, { className: className, ref: ref },
         React.createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIconName && React.createElement(Icon, { name: tooltipIconName, size: tooltipIconSize }),
+            tooltipIcon && React.createElement(Icon, { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
+            tooltipIconName && (React.createElement(Icon, { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
             React.createElement("span", null, selector),
-            tooltipChevron && React.createElement(Icon, { name: "chevronDown", size: iconSize, right: true })),
+            tooltipChevron && React.createElement(Icon, { icon: hlChevronDown, size: iconSize, position: "right" })),
         showDropdown && (React.createElement(React.Fragment, null,
             React.createElement(TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
             React.createElement(Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),

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

@@ -9,6 +9,8 @@ export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as Footer } from './Footer/Footer';
 export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
+export * from './Icon/Icons';
+export * from './Icons';
 export { default as Image } from './Image/Image';
 export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';

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

@@ -17,15 +17,118 @@ export { default as EmptyState } from './components/EmptyState/EmptyState.js';
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as Helper } from './components/Helper/Helper.js';
 export { default as Icon } from './components/Icon/Icon.js';
+export { action, airplane, anime, antenna, apartmentBuilding1, apartmentBuilding2, apartmentBuilding3, arrows, backward, balloon, basket, book, briefcase, broadbandHome, broadbandHousing, broadbandMobile, browser, bus, cableTv, calculator, calendar1, calendar2, camera, channelPackageL, channelPackageM, channelPackageMix, channelPackageMix4, channelPackageMix8, channelPackageMixPlus, channelPackageNorra, channelPackageRossija, channelPackageS, channelPackageTurk, check, chevronDown, chevronLeft, chevronRight, chevronUp, clapperboard, clipboard, cloud1, cloud2, cogwheel, comedy, cultFilms, culture, curvedArrowLeft, curvedArrowRight, cycle, desktopComputer, devices, diamond, digibox, digiboxRec, dnaTurvapaketti, dnaTv, document1, document2, document3, documentaries, documents1, documents2, door, download, drama, dvbC, dvbT2, dwr, envelope1, envelope2, epg, error, ethernet, eu, euro, exclamationMark, eyeClosed, eyeOpen, favorites, finland, finnish, folder1, folder2, folder3, forward, fourG, gameConsole, gift, gift2, globe, google, graduation, graph, hardDrive, hd, hdmiCable, headset1, headset2, hobbies, hotdog, house, hub, idCard, info, iot1, iot2, iot3, ip, key, kids, laptop, leaf, magnifyingGlass, man1, man2, man3, man4, man5, marker, maximize, megaphone, minimize, minus, modem, molecule, money1, money2, mouse, mp3, music, newspaper, next, paperclip, pause, pdf, pen, person, person2, persons1, persons2, persons3, pg18, phone1, phone2, phonePrepaid, phonePrepaid4g, phoneWifiPrepaid, play, plus, power, previous, projector, radioMast, rec, rec2, remoteControl, romantic, router, rss, scale, shield, simCard1, simCard2, simCard4g, simCard4gWifi, simCardInfinity, simCardInfinity4g, simCardWifi, soda, speaker, speechBubble1, speechBubble2, speechBubble3, sports, star, stop, swedish, tablet, target, terrestialTv, thriller, thumbDown, thumbUp, tickets, top10, top50, trademark, trafficCone, trafficLights, train, tv1, tv2, tvCard, tvWithRecording, tvWithRemote1, tvWithRemote2, tvWithRemote3, tvWithRemote4, upgrade, upload, usb, usbCable, usbModem, van, videocamera, wall, warning, whatsapp, wifi1, wifi2, wifiAccessPoint, woman1, woman2, woman3, world, wrench1, wrench2, x } from './components/Icon/Icons.js';
+export { default as hl404 } from './components/Icons/hl404.js';
+export { default as hl4gSim } from './components/Icons/hl4gSim.js';
+export { default as hl5gSim } from './components/Icons/hl5gSim.js';
+export { default as hlBattery } from './components/Icons/hlBattery.js';
+export { default as hlBell } from './components/Icons/hlBell.js';
+export { default as hlCalendar } from './components/Icons/hlCalendar.js';
+export { default as hlCall } from './components/Icons/hlCall.js';
+export { default as hlCameraBack } from './components/Icons/hlCameraBack.js';
+export { default as hlCameraFront } from './components/Icons/hlCameraFront.js';
+export { default as hlCart } from './components/Icons/hlCart.js';
+export { default as hlCartEmpty } from './components/Icons/hlCartEmpty.js';
+export { default as hlChat } from './components/Icons/hlChat.js';
+export { default as hlCheck } from './components/Icons/hlCheck.js';
+export { default as hlChevronDown } from './components/Icons/hlChevronDown.js';
+export { default as hlChevronLeft } from './components/Icons/hlChevronLeft.js';
+export { default as hlChevronRight } from './components/Icons/hlChevronRight.js';
+export { default as hlChevronUp } from './components/Icons/hlChevronUp.js';
+export { default as hlCompensation } from './components/Icons/hlCompensation.js';
+export { default as hlCookie } from './components/Icons/hlCookie.js';
+export { default as hlCopy } from './components/Icons/hlCopy.js';
+export { default as hlCoupon } from './components/Icons/hlCoupon.js';
+export { default as hlDelivery } from './components/Icons/hlDelivery.js';
+export { default as hlDigiturva } from './components/Icons/hlDigiturva.js';
+export { default as hlDisplaySize } from './components/Icons/hlDisplaySize.js';
+export { default as hlDocument } from './components/Icons/hlDocument.js';
+export { default as hlDownload } from './components/Icons/hlDownload.js';
+export { default as hlEnvelope } from './components/Icons/hlEnvelope.js';
+export { default as hlError } from './components/Icons/hlError.js';
+export { default as hlEuro } from './components/Icons/hlEuro.js';
+export { default as hlExclamationMark } from './components/Icons/hlExclamationMark.js';
+export { default as hlExpand } from './components/Icons/hlExpand.js';
+export { default as hlExternal } from './components/Icons/hlExternal.js';
+export { default as hlEyeClosed } from './components/Icons/hlEyeClosed.js';
+export { default as hlEyeOpen } from './components/Icons/hlEyeOpen.js';
+export { default as hlFaceId } from './components/Icons/hlFaceId.js';
+export { default as hlFastDelivery } from './components/Icons/hlFastDelivery.js';
+export { default as hlFingerprint } from './components/Icons/hlFingerprint.js';
+export { default as hlGlobe } from './components/Icons/hlGlobe.js';
+export { default as hlHeadphones } from './components/Icons/hlHeadphones.js';
+export { default as hlHeadset } from './components/Icons/hlHeadset.js';
+export { default as hlHeart } from './components/Icons/hlHeart.js';
+export { default as hlHome } from './components/Icons/hlHome.js';
+export { default as hlImage } from './components/Icons/hlImage.js';
+export { default as hlInfo } from './components/Icons/hlInfo.js';
+export { default as hlInstallment } from './components/Icons/hlInstallment.js';
+export { default as hlIotSim } from './components/Icons/hlIotSim.js';
+export { default as hlLock } from './components/Icons/hlLock.js';
+export { default as hlMagnifyingGlass } from './components/Icons/hlMagnifyingGlass.js';
+export { default as hlMarker } from './components/Icons/hlMarker.js';
+export { default as hlMemory } from './components/Icons/hlMemory.js';
+export { default as hlMenu } from './components/Icons/hlMenu.js';
+export { default as hlMinimize } from './components/Icons/hlMinimize.js';
+export { default as hlMinus } from './components/Icons/hlMinus.js';
+export { default as hlMobileData } from './components/Icons/hlMobileData.js';
+export { default as hlMobilePayment } from './components/Icons/hlMobilePayment.js';
+export { default as hlModem } from './components/Icons/hlModem.js';
+export { default as hlMore } from './components/Icons/hlMore.js';
+export { default as hlOs } from './components/Icons/hlOs.js';
+export { default as hlPackage } from './components/Icons/hlPackage.js';
+export { default as hlPaperclip } from './components/Icons/hlPaperclip.js';
+export { default as hlPaytime } from './components/Icons/hlPaytime.js';
+export { default as hlPen } from './components/Icons/hlPen.js';
+export { default as hlPerson } from './components/Icons/hlPerson.js';
+export { default as hlPhone } from './components/Icons/hlPhone.js';
+export { default as hlPlus } from './components/Icons/hlPlus.js';
+export { default as hlPrepaid } from './components/Icons/hlPrepaid.js';
+export { default as hlProcessor } from './components/Icons/hlProcessor.js';
+export { default as hlServices } from './components/Icons/hlServices.js';
+export { default as hlSettings } from './components/Icons/hlSettings.js';
+export { default as hlShield } from './components/Icons/hlShield.js';
+export { default as hlSim } from './components/Icons/hlSim.js';
+export { default as hlSimSimple } from './components/Icons/hlSimSimple.js';
+export { default as hlSmile } from './components/Icons/hlSmile.js';
+export { default as hlSpeechBubble } from './components/Icons/hlSpeechBubble.js';
+export { default as hlSquaretrade } from './components/Icons/hlSquaretrade.js';
+export { default as hlStar } from './components/Icons/hlStar.js';
+export { default as hlStarFilled } from './components/Icons/hlStarFilled.js';
+export { default as hlTrash } from './components/Icons/hlTrash.js';
+export { default as hlTv } from './components/Icons/hlTv.js';
+export { default as hlUnlock } from './components/Icons/hlUnlock.js';
+export { default as hlUpload } from './components/Icons/hlUpload.js';
+export { default as hlWarning } from './components/Icons/hlWarning.js';
+export { default as hlWifi } from './components/Icons/hlWifi.js';
+export { default as hlX } from './components/Icons/hlX.js';
+export { hlArrowBack, default as hlArrowBackSmall, hlArrowSmallLeft } from './components/Icons/Small/hlArrowBackSmall.js';
+export { hlArrowForward, default as hlArrowForwardSmall, hlArrowSmallRight } from './components/Icons/Small/hlArrowForwardSmall.js';
+export { hlArrowSmallUnder, default as hlArrowUnderSmall } from './components/Icons/Small/hlArrowUnderSmall.js';
+export { default as hlCalendarSmall } from './components/Icons/Small/hlCalendarSmall.js';
+export { default as hlChevronDownSmall } from './components/Icons/Small/hlChevronDownSmall.js';
+export { default as hlChevronLeftSmall } from './components/Icons/Small/hlChevronLeftSmall.js';
+export { default as hlChevronRightSmall } from './components/Icons/Small/hlChevronRightSmall.js';
+export { default as hlChevronUpSmall } from './components/Icons/Small/hlChevronUpSmall.js';
+export { default as hlClockSmall } from './components/Icons/Small/hlClockSmall.js';
+export { default as hlDownloadSmall } from './components/Icons/Small/hlDownloadSmall.js';
+export { default as hlExternalSmall } from './components/Icons/Small/hlExternalSmall.js';
+export { default as hlUploadSmall } from './components/Icons/Small/hlUploadSmall.js';
+export { default as facebook } from './components/Icons/Social/facebook.js';
+export { default as instagram } from './components/Icons/Social/instagram.js';
+export { default as linkedin } from './components/Icons/Social/linkedin.js';
+export { default as tiktok } from './components/Icons/Social/tiktok.js';
+export { default as twitter } from './components/Icons/Social/twitter.js';
+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';

package/build/es/themes/globalStyles.d.ts

@@ -99,7 +99,7 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }>>;
-export declare const CheckboxInput_RadioInput: import("styled-components").StyledComponent<"input", {
+export declare const CheckboxAndRadioInputCore: import("styled-components").StyledComponent<"input", {
     base: {
         baseHeight: {
             value: number;

package/build/es/themes/globalStyles.js

@@ -1,5 +1,5 @@
-import styled, { css, createGlobalStyle } from './styled.js';
 import { media, getMultipliedSize, getDividedSize } from '../utils/styledUtils.js';
+import styled, { css, createGlobalStyle } from './styled.js';
 
 const globalStyles = css `
     *,
@@ -175,7 +175,7 @@ const globalStyles = css `
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
 `;
-const CheckboxInput_RadioInput = styled.input `
+const CheckboxAndRadioInputCore = styled.input `
     display: inline-grid;
     appearance: none;
     place-content: center;
@@ -185,6 +185,7 @@ const CheckboxInput_RadioInput = styled.input `
     font-family: ${props => props.theme.fontFamily.default};
     font-size: ${props => props.theme.fontSize.default};
     line-height: ${props => props.theme.lineHeight.default};
+    min-width: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
     width: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
     height: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
     color: ${props => props.theme.color.gray25};
@@ -193,7 +194,6 @@ const CheckboxInput_RadioInput = styled.input `
 
     & + label {
         cursor: pointer;
-        display: flex;
         padding-left: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
     }
 
@@ -232,4 +232,4 @@ createGlobalStyle `
     ${globalStyles}
 `;
 
-export { CheckboxInput_RadioInput, globalStyles };
+export { CheckboxAndRadioInputCore, globalStyles };

package/build/es/themes/styled.js

@@ -1,6 +1,6 @@
 import createStyled from '../utils/createStyled.js';
 
-const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = createStyled();
+const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled();
 
 export default styled;
 export { ServerStyleSheet, ThemeProvider, createGlobalStyle, css, keyframes };

package/build/es/themes/themeComponents/fontSize.js

@@ -14,10 +14,6 @@ const fontSize = {
     h4: '1.25rem',
     h5: '1rem',
 };
-var fontSize$1 = {
-    h1: fontSize.h1L,
-    h2: fontSize.h2M,
-    ...fontSize,
-};
+var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
 export default fontSize$1;

package/build/es/themes/themeComponents/lineHeight.js

@@ -15,10 +15,6 @@ const lineHeight = {
     h4: '1.5rem',
     h5: '1rem',
 };
-var lineHeight$1 = {
-    h1: lineHeight.h1L,
-    h2: lineHeight.h2M,
-    ...lineHeight,
-};
+var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
 export default lineHeight$1;

package/build/es/utils/createStyled.d.ts

@@ -1,5 +1,5 @@
 import * as styledComponents from 'styled-components';
-import { ThemeInterface } from '../themes/theme';
+import type { ThemeInterface } from '../themes/theme';
 declare function createStyled<T extends ThemeInterface>(): {
     styled: styledComponents.ThemedStyledInterface<T>;
     css: styledComponents.ThemedCssFunction<T>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "2.0.1",
+    "version": "2.2.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -20,7 +20,8 @@
         "url": "https://github.com/DNA-Online-Services/b2cwebshop-styleguide.git"
     },
     "scripts": {
-        "tslint-check": "cross-env tslint -c ./tslint.json 'src/components/**/*.{ts,tsx}'",
+        "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
+        "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
         "eject": "react-scripts eject",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
@@ -31,13 +32,10 @@
         "unlock": "echo 'check if its ours ,remove it and ours.'",
         "condtar": "npm run lock && ( [ -s dnanpm-styleguide-snapshot.tgz ] || npm run tar) && npm run unlock",
         "tar": "npm run clean && npm ci && npm run build && npm pack && mv dnanpm-styleguide*.tgz dnanpm-styleguide-snapshot.tgz",
-        "prepublishOnly": "npm run clean && npm ci && npm run tslint-check && npm run build",
+        "prepublishOnly": "npm run clean && npm ci && npm run eslint:check && npm run build",
         "format": "cross-env prettier --ignore-path .prettierignore --write --loglevel silent '**/*.{ts,tsx,js,json}'",
         "format:check": "cross-env prettier --ignore-path .prettierignore --check '**/*.{ts,tsx,js,json}'",
-        "preCommit": "npm run tslint-check && npm run format:check"
-    },
-    "eslintConfig": {
-        "extends": "react-app"
+        "preCommit": "npm run eslint:check && npm run format:check"
     },
     "browserslist": [
         ">0.2%",
@@ -51,12 +49,24 @@
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "@types/react-modal": "^3.10.6",
-        "@types/react-select": "^4.0.13",
+        "@types/react-select": "^5.0.1",
         "@types/react-sizes": "^2.0.0",
         "@types/react-tooltip": "^3.11.0",
         "@types/styled-components": "^5.1.7",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
         "cross-env": "^7.0.3",
-        "prettier": "^2.2.1",
+        "eslint": "^8.20.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jsdoc": "^39.3.3",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prefer-arrow": "^1.2.3",
+        "eslint-plugin-react": "^7.30.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "^2.7.1",
         "react": "^17.0.1",
         "react-docgen-typescript": "^1.20.5",
         "react-dom": "^17.0.1",
@@ -71,10 +81,6 @@
         "rollup-plugin-visualizer": "^4.2.0",
         "styled-components": "^5.2.1",
         "tslib": "^2.1.0",
-        "tslint": "^6.1.3",
-        "tslint-config-prettier": "^1.18.0",
-        "tslint-react": "^4.2.0",
-        "tslint-react-hooks": "^2.2.2",
         "typescript": "^4.1.3"
     },
     "dependencies": {
@@ -82,7 +88,7 @@
         "ramda": "^0.27.1",
         "react-modal": "^3.12.1",
         "react-progressive-image": "^0.6.0",
-        "react-select": "^5.2.1",
+        "react-select": "^5.4.0",
         "react-sizes": "^2.0.0",
         "react-spring": "^8.0.27",
         "react-tooltip": "4.1.0"