@dnanpm/styleguide 2.0.1 → 2.1.0

package/build/cjs/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/cjs/components/TooltipMenu/TooltipMenu.js

@@ -7,6 +7,7 @@ var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
 var colors = require('../../themes/themeComponents/colors.js');
 var Icon = require('../Icon/Icon.js');
+var hlChevronDown = require('../Icons/hlChevronDown.js');
 var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,10 +15,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Selector = styled['default'].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['default']} {
+
+    span + span.dnasg-icon > svg {
         transform: ${p => (p.showDropdown ? 'rotate(180deg)' : 'rotate(0deg)')};
         transition: transform 0.15s linear;
     }
@@ -42,7 +46,7 @@ const ChildrenWrapper = styled['default'].span `
     }
 `;
 /** @visibleName Tooltip Menu */
-const TooltipMenu = ({ selector, className, color = colors['default'].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['default'].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] = React.useState(false);
     const ref = React.useRef(null);
     const toggleState = () => {
@@ -55,9 +59,10 @@ const TooltipMenu = ({ selector, className, color = colors['default'].text, chil
     });
     return (React__default['default'].createElement(Container, { className: className, ref: ref },
         React__default['default'].createElement(Selector, { color: showDropdown ? activeColor : color, onClick: toggleState, showDropdown: showDropdown },
-            tooltipIconName && React__default['default'].createElement(Icon['default'], { name: tooltipIconName, size: tooltipIconSize }),
+            tooltipIcon && React__default['default'].createElement(Icon['default'], { icon: tooltipIcon, size: tooltipIconSize, position: "left" }),
+            tooltipIconName && (React__default['default'].createElement(Icon['default'], { name: tooltipIconName, size: tooltipIconSize, position: "left" })),
             React__default['default'].createElement("span", null, selector),
-            tooltipChevron && React__default['default'].createElement(Icon['default'], { name: "chevronDown", size: iconSize, right: true })),
+            tooltipChevron && React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'], size: iconSize, position: "right" })),
         showDropdown && (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement(TooltipMenuExportedStyles.TailShadow, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }),
             React__default['default'].createElement(TooltipMenuExportedStyles.Tail, { zIndex: zIndex, tooltipTop: tooltipTop, arrowPosition: arrowPosition }))),

package/build/cjs/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/cjs/index.js

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

package/build/cjs/themes/globalStyles.js

@@ -189,6 +189,7 @@ const CheckboxInput_RadioInput = styled['default'].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 => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
     width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
     height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 2)};
     color: ${props => props.theme.color.gray25};
@@ -197,7 +198,6 @@ const CheckboxInput_RadioInput = styled['default'].input `
 
     & + label {
         cursor: pointer;
-        display: flex;
         padding-left: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
     }
 

package/build/es/components/Accordion/AccordionItem.js

@@ -3,6 +3,9 @@ import styled__default, { css } from 'styled-components';
 import useResizeObserver from '../../hooks/useElementDimensions.js';
 import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
+import hlChevronDown from '../Icons/hlChevronDown.js';
+import hlChevronUp from '../Icons/hlChevronUp.js';
+import hlX from '../Icons/hlX.js';
 
 const AccordionItemContainer = styled__default.div `
     margin: ${p => `0 ${getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
@@ -57,12 +60,12 @@ const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...pr
     return (React.createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
         React.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            Boolean(props.isExpanded) ? (React.createElement(Icon, { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": props.closeLabel })) : (React.createElement(Icon, { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": props.openLabel }))),
+            Boolean(props.isExpanded) ? (React.createElement(Icon, { icon: hlChevronUp, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon, { icon: hlChevronDown, position: "right", "aria-label": props.openLabel }))),
         React.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
             React.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
             React.createElement("span", null, props.closeLabel),
-            React.createElement(Icon, { name: "hlX", size: "1.5rem" })))));
+            React.createElement(Icon, { icon: hlX })))));
 };
 
 export default AccordionItem;

package/build/es/components/AmountSelector/AmountSelector.js

@@ -8,9 +8,12 @@ import ButtonSecondary from '../Buttons/ButtonSecondary.js';
 import '../Buttons/ButtonTertiary.js';
 import '../Buttons/ButtonRoundStyles.js';
 import '../Buttons/CloseButton.js';
-import '../Buttons/ButtonIconStyles.js';
 import Icon from '../Icon/Icon.js';
+import '../Buttons/ButtonIconStyles.js';
 import '../Buttons/ButtonIconPrimaryStyles.js';
+import hlMinus from '../Icons/hlMinus.js';
+import hlPlus from '../Icons/hlPlus.js';
+import hlTrash from '../Icons/hlTrash.js';
 
 const Container = styled.div `
     display: flex;
@@ -18,6 +21,8 @@ const Container = styled.div `
 
     input {
         width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.default};
         border: 0 none;
         text-align: center;
         outline: none;
@@ -31,6 +36,9 @@ const Container = styled.div `
 `;
 const StyledButtonSecondary = styled(ButtonSecondary) `
     min-width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 0.6)};
 `;
 /** @visibleName Amount Selector */
 const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
@@ -66,10 +74,10 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
     return (React.createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
         React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React.createElement(Icon, { color: theme.color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
+            React.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? hlTrash : hlMinus, color: theme.color.black })),
         React.createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
         React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
-            React.createElement(Icon, { color: theme.color.black, name: "hlPlus" }))));
+            React.createElement(Icon, { icon: hlPlus, color: theme.color.black }))));
 };
 
 export default AmountSelector;

package/build/es/components/Buttons/ButtonBasicStyles.js

@@ -29,7 +29,7 @@ const ButtonBasicStyle = styled.button `
     &:focus {
         outline: none;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: ${props => `${props.theme.button.border} solid`};
         }
     }
@@ -37,7 +37,7 @@ const ButtonBasicStyle = styled.button `
         background: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
         color: ${props => props && props.darkBg ? props.theme.color.black : props.theme.color.white};
         text-decoration: none;
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -45,7 +45,7 @@ const ButtonBasicStyle = styled.button `
         opacity: 0.7;
         background: transparent;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -58,7 +58,7 @@ const ButtonBasicStyle = styled.button `
         pointer-events: none;
     }
 
-    span {
+    span:not(span.dnasg-icon) {
         border-bottom: 0;
         font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
     }