@dnanpm/styleguide 2.0.1 → 2.1.0

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -4,11 +4,12 @@ import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import HlCheck from '../Icons/hlCheck.js';
+import hlChevronDown from '../Icons/hlChevronDown.js';
 
 const SecondaryNavigationWrapper = styled.nav `
-    line-height: 1.2rem;
-    padding: 0;
     font-size: ${theme.fontSize.s};
+    padding: 0;
     background: ${theme.color.white};
     position: relative;
     z-index: 1000;
@@ -20,40 +21,41 @@ const SecondaryNavigationWrapper = styled.nav `
     }
 `;
 const MobileSelector = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
     color: ${theme.color.hotPink};
     padding: 1rem 1.25rem;
-    align-items: center;
-    display: flex;
-    line-height: 1.2rem;
     position: relative;
     border-bottom: 1px solid ${theme.color.hotPink};
     width: 100%;
-    height: 3.25rem;
     &:hover {
         cursor: pointer;
     }
-    svg + span {
-        margin-left: 1rem;
-    }
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
 `;
+const MobileSelectorTitleWrapper = styled.div `
+    display: flex;
+`;
 const MobileSelectorArrow = styled.span `
-    svg {
-        position: absolute;
-        right: 0.75rem;
-        bottom: 0.75rem;
+    display: flex;
+
+    .dnasg-icon svg {
         transition: transform 0.15s ease-in-out;
         transform: rotate(${p => (p.isOpen ? '180deg' : '0deg')});
     }
 `;
 const MobileSelectorCheck = styled.span `
-    svg {
+    .dnasg-icon {
         position: absolute;
         right: 0;
         bottom: 1rem;
     }
+
     @media (min-width: ${p => p.collapseSize + 1}px) {
         display: none;
     }
@@ -70,12 +72,8 @@ const SecondaryNavigationList = styled.ul `
     position: absolute;
     width: 100%;
     max-height: ${p => (p.isOpen ? '500vh' : '0')};
-    top: 3.25rem;
     border-bottom: ${p => p.isOpen ? `2px solid ${theme.color.gray10}` : `0px solid ${theme.color.white}`};
     @media (min-width: ${p => p.collapseSize + 1}px) {
-        svg {
-            display: none;
-        }
         padding: 0 1rem;
         max-height: none;
         position: static;
@@ -172,11 +170,12 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
     const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
     return (React.createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly },
         selectedElement && (React.createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            selectedElement.icon && selectedElement.icon.length > 0 && (React.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
-                React.createElement(Icon, { name: selectedElement.icon, size: "1.5em" }))),
-            React.createElement("span", null, selectedElement.titles[lang]),
+            React.createElement(MobileSelectorTitleWrapper, null,
+                selectedElement.icon && selectedElement.icon.length > 0 && (React.createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                    React.createElement(Icon, { name: selectedElement.icon }))),
+                React.createElement("span", null, selectedElement.titles[lang])),
             React.createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
-                React.createElement(Icon, { name: "hlChevronDown", size: "1.5em" })))),
+                React.createElement(Icon, { icon: hlChevronDown })))),
         React.createElement(SecondaryNavigationList, { id: data.name || 'secondary-navigation-category-' + data.categoryId, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
             ? data.pages.map((listElement, index) => {
                 const linkUrl = listElement.urls[lang];
@@ -189,13 +188,13 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
                 const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
                 return (React.createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
                     isNextJsLink && (React.createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React.createElement(Icon, { name: "hlCheck", size: "1.2em" }))))),
+                        React.createElement(Icon, { icon: HlCheck }))))),
                     !isNextJsLink && (React.createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
                         iconName.length > 0 && (React.createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React.createElement(Icon, { name: iconName, size: "1.5em" }))),
+                            React.createElement(Icon, { name: iconName }))),
                         React.createElement("span", null, linkTitle),
                         isActive && (React.createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React.createElement(Icon, { name: "hlCheck", size: "1.2em" })))))));
+                            React.createElement(Icon, { icon: HlCheck })))))));
             })
             : null)));
 };

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

@@ -57,6 +57,8 @@ interface Props {
     /**
      * Allows to define icon color and icon size of dropdown indicator
      *
+     * @deprecated Icon color and size should use values only according to Selectbox design prototypes
+     *
      * @default color '#000000'
      * @default iconSize '1rem'
      */

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

@@ -1,17 +1,15 @@
 import React from 'react';
-import Select, { components } from 'react-select';
+import Select, { defaultTheme, components } from 'react-select';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 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';
 
-const borderStyles = {
-    border: `1px solid ${theme.color.gray25}`,
-    borderRadius: 0,
-    boxShadow: 'none',
-};
 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)};
@@ -32,23 +30,35 @@ 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,
-        ...borderStyles,
+        boxShadow: 'none',
         height: getMultipliedSize(theme.base.baseHeight, 4),
-        borderBottomColor: state.menuIsOpen ? theme.color.white : theme.color.gray25,
+        borderColor: state.isFocused && !state.menuIsOpen ? theme.color.gray40 : theme.color.gray25,
         ':hover': {
             borderColor: theme.color.gray25,
         },
     }),
     menu: styles => ({
         ...styles,
-        ...borderStyles,
+        border: `1px solid ${theme.color.gray25}`,
+        boxShadow: 'none',
         marginTop: '-2px',
-        borderTop: 'none',
     }),
-    indicatorSeparator: () => ({
+    indicatorSeparator: styles => ({
+        ...styles,
+        backgroundColor: 'transparent',
         border: 'none',
     }),
     option: (styles, { isDisabled, isSelected }) => ({
@@ -56,44 +66,47 @@ const selectBoxStyles = {
         display: 'flex',
         justifyContent: 'space-between',
         color: isDisabled ? theme.color.gray40 : theme.color.text,
-        backgroundColor: isDisabled || isSelected ? theme.color.gray5 : theme.color.white,
-        fontWeight: theme.fontWeight.book,
+        fontWeight: isSelected ? theme.fontWeight.medium : theme.fontWeight.book,
         fontSize: theme.fontSize.default,
         textOverflow: 'ellipsis',
         whiteSpace: 'pre-wrap',
         overflow: 'hidden',
         cursor: isDisabled ? 'not-allowed' : 'default',
-        ':active': {
-            backgroundColor: theme.color.gray10,
-        },
-        ':hover': {
-            backgroundColor: isDisabled ? theme.color.gray5 : theme.color.grayBg,
-        },
     }),
+    dropdownIndicator: (styles, { isDisabled, selectProps: { isSearchable } }) => {
+        const enabledColorsSet = isSearchable ? theme.color.hotPink : theme.color.text;
+        return {
+            ...styles,
+            color: isDisabled ? theme.color.gray40 : enabledColorsSet,
+            ':hover': {
+                color: theme.color.text,
+            },
+        };
+    },
 };
 const SelectBox = ({ dropDownIndicator, 'data-testid': dataTestId, isSearchable = false, isClearable = false, isMulti = false, noOptionsText = '', isLoading = false, isDisabled = false, isRequired = false, error = false, ...props }) => {
     const getNoOptionsText = () => noOptionsText;
     const DropdownIndicator = (dropdownIndicatorProps) => {
-        const { color = isDisabled ? theme.color.gray40 : theme.color.black, iconSize = '1rem' } = {
+        const { color = 'currentColor', iconSize = '1.5rem' } = {
             ...dropDownIndicator,
         };
-        const getIconName = () => {
+        const getIcon = () => {
             if (isSearchable) {
-                return 'hlMagnifyingGlass';
+                return hlMagnifyingGlass;
             }
             else {
-                return dropdownIndicatorProps.selectProps.menuIsOpen ? 'chevronUp' : 'chevronDown';
+                return dropdownIndicatorProps.selectProps.menuIsOpen ? hlChevronUp : hlChevronDown;
             }
         };
         return (components.DropdownIndicator && (React.createElement(components.DropdownIndicator, Object.assign({}, dropdownIndicatorProps),
-            React.createElement(Icon, { color: color, name: getIconName(), size: iconSize }))));
+            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, 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: 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 }),
         error && props.errorMessage && (React.createElement(ErrorMessage, null, props.errorMessage)))) : (React.createElement(PixelLoader, null))));
 };
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { 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,17 @@ 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 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 +38,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 +51,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/index.js

@@ -17,6 +17,109 @@ 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';

package/build/es/themes/globalStyles.js

@@ -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)};
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "2.0.1",
+    "version": "2.1.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",