@dnanpm/styleguide 3.3.0 → 3.4.0

package/build/cjs/components/AccordionItem/AccordionItem.js

@@ -66,8 +66,9 @@ const AccordionItemCloseButton = styled__default["default"].div `
 /** @visibleName Accordion Item */
 const AccordionItem = (_a) => {
     var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = tslib.__rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    const contentRef = React.useRef(null);
     // Get height when element dimensions change
-    const { height: contentHeight, ref: contentRef } = useResizeObserver["default"]();
+    const { height: contentHeight } = useResizeObserver["default"](contentRef);
     const itemContent = (React__default["default"].createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
         React__default["default"].createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,

package/build/cjs/components/Button/ButtonIcon.d.ts

@@ -14,6 +14,12 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * @default false
      */
     hideChildrenMobile?: boolean;
+    /**
+     * Allows to reverse order of elements
+     *
+     * @default false
+     */
+    isReversed?: boolean;
 }
 /** @visibleName Button Icon */
 declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/Button/ButtonIcon.js

@@ -29,6 +29,8 @@ const ButtonElement = styled__default["default"].button `
     border: 2px solid transparent;
     padding: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)} 0;
 
+    ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
+
     &:focus {
         border-radius: ${theme["default"].radius.s};
         text-decoration: underline;
@@ -85,8 +87,9 @@ const ButtonElement = styled__default["default"].button `
 /** @visibleName Button Icon */
 const ButtonIcon = (_a) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Icon["default"], { icon: icon, color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? 'left' : undefined }),
+    const position = props.isReversed ? 'right' : 'left';
+    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Icon["default"], { icon: icon, color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
         props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };
 

package/build/cjs/components/Footer/Components/FooterComponents.js

@@ -166,6 +166,14 @@ const GeneralInformationLink = styled["default"].a `
         text-decoration-thickness: from-font;
     }
 `;
+const socialMediaIcons = {
+    facebook: icons.Facebook,
+    instagram: icons.Instagram,
+    linkedin: icons.Linkedin,
+    tiktok: icons.Tiktok,
+    twitter: icons.X,
+    youtube: icons.Youtube,
+};
 const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
     title: e.toUpperCase(),
     url: languagesObject.urls[e],
@@ -173,12 +181,9 @@ const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.ur
 const TopSection = ({ topSection }) => {
     const { collapseSize, language } = React.useContext(FooterContext["default"]);
     return (React__default["default"].createElement(BasicContainer, { collapseSize: collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default["default"].createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
-        section.svgIconName[language] === 'user' && (React__default["default"].createElement("svg", { fill: "none", height: "48", viewBox: "0 0 48 48", width: "48", xmlns: "http://www.w3.org/2000/svg" },
-            React__default["default"].createElement("path", { clipRule: "evenodd", d: "M23.5118 4.00926C23.4678 4.01248 23.3202 4.02286 23.1838 4.03233C21.1133 4.17622 19.0449 4.97827 17.3918 6.27819C16.9212 6.64827 16.3345 7.20315 15.9518 7.63992C14.3952 9.41678 13.4837 11.5977 13.3103 13.9599C13.2856 14.2959 13.2859 15.1386 13.3107 15.4719C13.4193 16.9274 13.7872 18.2574 14.4395 19.5519C15.9609 22.5713 18.8705 24.7181 22.1999 25.2779C23.3768 25.4757 24.6229 25.4757 25.7998 25.2779C28.3766 24.8447 30.7189 23.4626 32.3721 21.3999C33.5875 19.8834 34.3737 18.0374 34.6242 16.1117C34.7058 15.4846 34.7337 14.5577 34.689 13.9599C34.5798 12.4987 34.2157 11.1801 33.5599 9.87192C32.7235 8.20302 31.3497 6.6868 29.7598 5.67785C28.2806 4.73907 26.6823 4.19782 24.9198 4.03878C24.6676 4.01601 23.6976 3.99568 23.5118 4.00926ZM23.3358 6.88816C22.0759 6.99497 20.8536 7.40673 19.7849 8.0844C19.0466 8.55249 18.3345 9.2042 17.779 9.91992C17.2639 10.5836 16.8494 11.3557 16.5676 12.1759C15.9241 14.0495 16.0229 16.1458 16.8394 17.9439C17.2255 18.7944 17.7203 19.5177 18.3758 20.1902C19.042 20.8737 19.7437 21.3808 20.5797 21.783C21.7692 22.3553 22.9879 22.6074 24.3235 22.5575C25.4075 22.5169 26.422 22.2632 27.42 21.783C28.256 21.3808 28.9577 20.8737 29.6239 20.1902C30.3854 19.409 30.9341 18.5543 31.3331 17.5279C31.9705 15.8879 32.0229 13.9945 31.4772 12.3144C31.1287 11.2412 30.5962 10.3122 29.8528 9.47992C28.7168 8.20825 27.1933 7.33803 25.5278 7.0094C24.8486 6.87539 24.0243 6.82979 23.3358 6.88816ZM23.2718 28.2736C18.9863 28.4287 14.8726 29.9588 11.5119 32.648C10.2299 33.6738 9.05275 34.8833 8.07745 36.1771C6.74067 37.9503 5.72065 39.8884 5.05084 41.9279C4.92311 42.3169 4.90487 42.4144 4.91651 42.6466C4.94915 43.2978 5.41348 43.8372 6.05556 43.9697C6.19575 43.9987 6.70486 43.9995 23.9938 43.9997C39.966 43.9999 41.8022 43.9974 41.9298 43.9752C42.2079 43.9268 42.4383 43.8015 42.6638 43.5759C42.895 43.3447 43.0217 43.1024 43.0713 42.7965C43.1154 42.5247 43.083 42.3248 42.9139 41.8239C42.2874 39.9682 41.4208 38.2713 40.2768 36.66C38.7566 34.5189 36.8283 32.7021 34.5838 31.2959C32.0252 29.693 29.0795 28.6792 26.0798 28.3693C25.132 28.2713 24.2061 28.2398 23.2718 28.2736ZM23.5278 31.1293C23.1353 31.1436 22.663 31.173 22.3678 31.2015C18.9904 31.5284 15.7768 32.8517 13.1678 34.99C12.5249 35.517 11.7427 36.2672 11.2143 36.8639C10.1538 38.0613 9.293 39.3506 8.59807 40.7824C8.50665 40.9707 8.43185 41.1273 8.43185 41.1304C8.43185 41.1334 15.4374 41.1359 23.9998 41.1359C32.5622 41.1359 39.5679 41.1334 39.5679 41.1304C39.5679 41.1273 39.4988 40.9819 39.4145 40.8071C38.7246 39.3782 37.8487 38.0646 36.7854 36.8639C36.2726 36.2848 35.4876 35.5295 34.8689 35.0195C32.1127 32.7483 28.6618 31.385 25.099 31.16C24.7394 31.1373 23.8084 31.1191 23.5278 31.1293Z", fill: "white", fillRule: "evenodd" }))),
-        section.svgIconName[language] === 'headset' && (React__default["default"].createElement("svg", { fill: "none", height: "48", viewBox: "0 0 49 48", width: "49", xmlns: "http://www.w3.org/2000/svg" },
-            React__default["default"].createElement("path", { clipRule: "evenodd", d: "M23.8819 5.79263C21.5862 5.89373 19.2963 6.65052 17.3881 7.93877C15.8061 9.00685 14.4995 10.3991 13.5328 12.0466C13.3479 12.3619 13.03 12.9858 12.8807 13.3266C12.4136 14.3931 12.0882 15.522 11.9352 16.6066C11.8286 17.3622 11.8123 17.6484 11.8027 18.9386L11.7943 20.0706L10.2487 20.0708C9.01716 20.0709 8.65928 20.0756 8.48723 20.0939C7.67757 20.1801 6.90191 20.5025 6.248 21.0246C6.07328 21.1641 5.75723 21.4803 5.61832 21.6546C5.07529 22.336 4.75318 23.1365 4.68032 23.9856C4.66804 24.1287 4.66435 25.143 4.66807 27.3426C4.6734 30.4897 4.67346 30.495 4.70814 30.706C4.7847 31.172 4.90375 31.5429 5.11273 31.9666C5.38678 32.5222 5.73842 32.9697 6.21602 33.3706C6.66178 33.7447 7.28667 34.0662 7.85473 34.2138C8.39844 34.355 8.53688 34.3624 10.4865 34.3547C12.2283 34.3478 12.1756 34.3501 12.5127 34.2639C13.0121 34.1363 13.4533 33.8848 13.8182 33.5197C14.2476 33.0902 14.4997 32.6053 14.6257 31.9666C14.6483 31.8517 14.6519 31.1231 14.6609 24.8226C14.6718 17.1614 14.6643 17.759 14.758 17.0738C14.9462 15.698 15.4684 14.3037 16.2473 13.0973C17.016 11.9068 18.1021 10.8467 19.3235 10.095C20.4965 9.37309 21.8702 8.88957 23.2341 8.71855C24.0236 8.61956 25.2916 8.61956 26.0811 8.71855C27.9217 8.94935 29.6804 9.71205 31.1063 10.8979C32.1839 11.794 33.0093 12.8373 33.6227 14.0786C34.1093 15.0632 34.4173 16.0545 34.5574 17.0866C34.6518 17.7817 34.6441 17.0044 34.6503 26.4866C34.6545 32.8145 34.6512 35.2132 34.638 35.3826C34.5518 36.4916 34.0683 37.4843 33.2484 38.2354C32.9338 38.5236 32.6604 38.708 32.247 38.9107C31.8354 39.1125 31.4585 39.2325 31.0028 39.3067C30.795 39.3405 30.7504 39.3412 28.3204 39.3502L25.8492 39.3593L25.7213 39.3953C25.1846 39.5463 24.7735 39.9895 24.6811 40.5167C24.6014 40.9718 24.7241 41.4082 25.0241 41.737C25.2153 41.9466 25.4562 42.0964 25.7213 42.1706L25.8492 42.2065L28.1764 42.2115C29.7763 42.215 30.5936 42.211 30.7915 42.1986C31.5659 42.1501 32.2643 41.9976 32.9667 41.7235C33.2421 41.6161 33.8016 41.3422 34.0384 41.1988C35.4886 40.321 36.5709 38.9878 37.1157 37.4085C37.41 36.5552 37.5163 35.844 37.5169 34.7226L37.5172 34.3586L39.0166 34.3585C39.893 34.3584 40.5959 34.3515 40.7081 34.342C41.27 34.2945 41.7494 34.1612 42.2609 33.9102C43.1131 33.492 43.7924 32.8096 44.2115 31.9506C44.3567 31.653 44.4484 31.405 44.5241 31.1053C44.5776 30.8937 44.6345 30.5398 44.6346 30.4186C44.6347 30.3768 44.6419 30.3426 44.6507 30.3426C44.6613 30.3426 44.6667 29.2836 44.6667 27.1977C44.6667 25.4678 44.6605 24.0565 44.653 24.0612C44.6456 24.0658 44.6349 24.0068 44.6294 23.9301C44.602 23.5488 44.4743 23.0592 44.2925 22.639C43.687 21.2391 42.3484 20.2557 40.828 20.0939C40.656 20.0756 40.2981 20.0709 39.0665 20.0708L37.5209 20.0706L37.5124 18.9386C37.5043 17.8446 37.4964 17.6339 37.4443 17.1186C37.2277 14.9742 36.424 12.857 35.1484 11.0706C33.6842 9.02012 31.6243 7.44613 29.2645 6.57477C28.1482 6.16261 27.0953 5.92765 25.8892 5.82159C25.6081 5.79687 24.2353 5.77706 23.8819 5.79263ZM8.66317 22.9595C8.18538 23.0619 7.80478 23.3818 7.62562 23.8314C7.52179 24.092 7.52755 23.8934 7.52769 27.2019C7.52777 29.2025 7.53335 30.2408 7.54442 30.309C7.63145 30.8456 8.04474 31.2961 8.59119 31.4502L8.71915 31.4862L10.2586 31.4909L11.7981 31.4955V27.2151V22.9346L10.2826 22.9359C9.05091 22.9369 8.74767 22.9413 8.66317 22.9595ZM37.5172 27.2146V31.4955L39.0566 31.4909L40.5961 31.4862L40.7241 31.4502C41.274 31.2951 41.689 30.8393 41.7719 30.2993C41.7832 30.2259 41.7871 29.2009 41.784 27.1426L41.7795 24.0946L41.7446 23.9826C41.5873 23.4781 41.241 23.1295 40.748 22.9797L40.6281 22.9432L39.0726 22.9385L37.5172 22.9337V27.2146ZM4.67239 27.2146C4.67239 28.9482 4.67426 29.6598 4.67655 28.7959C4.67884 27.932 4.67884 26.5136 4.67655 25.6439C4.67426 24.7742 4.67239 25.481 4.67239 27.2146Z", fill: "white", fillRule: "evenodd" }))),
-        section.svgIconName[language] === 'shop' && (React__default["default"].createElement("svg", { fill: "none", height: "48", viewBox: "0 0 49 48", width: "49", xmlns: "http://www.w3.org/2000/svg" },
-            React__default["default"].createElement("path", { clipRule: "evenodd", d: "M9.72477 4.03502C9.51624 4.07897 9.28899 4.19382 9.09386 4.35387C8.99291 4.43667 8.84262 4.62928 8.77644 4.76067C8.72718 4.85846 4.57364 14.534 4.42776 14.8908C4.32222 15.1489 4.32518 15.09 4.32536 16.9341C4.32552 18.574 4.32998 18.7528 4.38153 19.1882C4.52248 20.3793 5.01595 21.5948 5.76122 22.5868C6.13171 23.08 6.60736 23.5601 7.11609 23.9544C8.01543 24.6516 9.13462 25.1417 10.2568 25.3299C10.7664 25.4154 10.8288 25.4188 11.8662 25.4188C12.9036 25.4188 12.966 25.4154 13.4756 25.3299C14.5061 25.1571 15.5575 24.7181 16.4164 24.1021C16.9488 23.7203 17.5027 23.1904 17.8909 22.6914L17.9339 22.6361L17.9708 22.6834C18.1617 22.9277 18.446 23.2383 18.6957 23.4752C19.7464 24.472 21.0691 25.1243 22.486 25.3445C22.9486 25.4164 23.0074 25.4188 24.3173 25.4188C25.6271 25.4188 25.686 25.4164 26.1485 25.3445C27.2984 25.1658 28.4061 24.693 29.3473 23.9792C29.8087 23.6293 30.2922 23.1542 30.6453 22.7038L30.7417 22.5808L30.8863 22.7598C31.7621 23.8443 32.8914 24.6285 34.2093 25.0674C34.6843 25.2255 35.1373 25.3266 35.6568 25.3904C35.8546 25.4146 36.0248 25.4188 36.8163 25.4188C37.8011 25.4188 37.8714 25.4148 38.3778 25.3299C39.6515 25.1163 40.8823 24.5298 41.8703 23.6658C42.0679 23.493 42.4239 23.1336 42.5983 22.9308C43.5676 21.804 44.1924 20.2902 44.2874 18.8382C44.2934 18.7477 44.3043 18.6699 44.3118 18.6653C44.3192 18.6607 44.3253 17.8829 44.3253 16.9369C44.3253 15.9909 44.3197 15.2204 44.3127 15.2247C44.3058 15.229 44.2911 15.1844 44.28 15.1256C44.2689 15.0669 44.2361 14.9612 44.2071 14.8908C44.0439 14.4943 39.9059 4.85565 39.8581 4.76067C39.6782 4.40361 39.3004 4.11651 38.9022 4.03432C38.7536 4.00365 38.5512 4.00323 24.3093 4.00413C10.2545 4.00502 9.86317 4.00585 9.72477 4.03502ZM10.9682 6.89121C10.963 6.90465 10.2764 8.50846 9.44243 10.4552L7.92604 13.9948L16.1217 13.9988C20.6292 14.001 28.0053 14.001 32.5129 13.9988L40.7085 13.9948L39.1834 10.4348L37.6583 6.8748L24.3179 6.87078C12.3655 6.8672 10.9766 6.86933 10.9682 6.89121ZM4.33291 16.9548C4.33291 17.9052 4.33484 18.2916 4.33719 17.8136C4.33954 17.3355 4.33954 16.5579 4.33719 16.0856C4.33484 15.6132 4.33291 16.0044 4.33291 16.9548ZM7.19223 17.7988C7.19769 18.585 7.20301 18.7571 7.22635 18.8988C7.30139 19.3547 7.42657 19.7591 7.61012 20.1388C7.84398 20.6225 8.06074 20.926 8.4506 21.3153C8.71953 21.5838 8.91059 21.7395 9.17602 21.9064C9.71339 22.2443 10.3031 22.4546 10.9561 22.5412C11.2256 22.577 12.4382 22.5824 12.7139 22.549C13.5189 22.4516 14.2137 22.1761 14.8477 21.7031C15.0728 21.5352 15.4986 21.1128 15.6587 20.8988C16.0643 20.3564 16.3313 19.7703 16.4559 19.1489C16.4905 18.9765 16.4932 18.9369 16.4802 18.7948C16.4721 18.7068 16.4653 18.237 16.465 17.7508L16.4644 16.8668H11.8251H7.18577L7.19223 17.7988ZM19.3996 17.8548C19.3937 18.3982 19.3884 18.8932 19.3879 18.9548C19.3867 19.0889 19.4542 19.3745 19.5604 19.6847C19.75 20.2385 20.0456 20.7394 20.4294 21.1573C21.1653 21.9585 22.0619 22.4149 23.1657 22.5502C23.4021 22.5792 25.2324 22.5792 25.4688 22.5502C26.0103 22.4838 26.4654 22.3517 26.9162 22.13C28.1171 21.5396 28.966 20.4349 29.2272 19.1228C29.2984 18.7648 29.3073 18.608 29.3073 17.704V16.8668H24.3588H19.4103L19.3996 17.8548ZM32.1743 17.7668C32.1809 18.5934 32.1843 18.6851 32.2166 18.8908C32.2969 19.4038 32.4211 19.7904 32.6513 20.2444C32.8536 20.6431 33.0987 20.9802 33.4251 21.3083C33.7711 21.6562 34.119 21.9055 34.5612 22.1225C35.3013 22.4857 35.9153 22.5973 37.0402 22.5732C37.6519 22.5601 37.9454 22.5207 38.3795 22.3936C39.1 22.1827 39.711 21.8105 40.2483 21.2553C40.9215 20.5596 41.3321 19.6694 41.4299 18.6931C41.439 18.602 41.4465 18.1538 41.4465 17.6971V16.8668H36.8068H32.1672L32.1743 17.7668ZM8.45901 26.8689C8.11373 26.8992 7.81376 27.0492 7.56391 27.3167C7.37902 27.5146 7.26293 27.7339 7.20904 27.9868C7.18133 28.1168 7.18006 28.4132 7.18006 34.7468C7.18006 41.8575 7.17538 41.4472 7.26086 41.8081C7.52913 42.9404 8.45839 43.7937 9.6191 43.9737C9.82103 44.005 38.8135 44.005 39.0154 43.9737C39.9638 43.8267 40.7713 43.2259 41.1808 42.3628C41.2961 42.1198 41.3713 41.8717 41.4256 41.5548C41.4531 41.3948 41.4545 41.0707 41.4545 34.7548C41.4545 28.4135 41.4532 28.1168 41.4255 27.9868C41.3666 27.7104 41.2485 27.4992 41.0314 27.282C40.8156 27.0661 40.6002 26.9451 40.3349 26.8907C40.1741 26.8578 39.8774 26.8567 39.7248 26.8885C39.226 26.9926 38.7995 27.3883 38.6446 27.8908L38.6076 28.0108L38.6035 34.5748L38.5993 41.1388H33.6014H28.6036V34.6529C28.6036 27.576 28.6095 28.0352 28.5149 27.7831C28.3783 27.419 28.0651 27.1031 27.691 26.9519C27.4502 26.8546 27.0836 26.8348 26.8112 26.9044C26.4017 27.009 26.055 27.3025 25.87 27.7013C25.7446 27.9716 25.7511 27.8733 25.7449 29.5988L25.7395 31.1388H17.8877H10.036L10.0311 29.5748L10.0262 28.0108L9.98957 27.8908C9.91803 27.6564 9.75763 27.4008 9.58033 27.2387C9.26869 26.9538 8.89527 26.8306 8.45901 26.8689ZM10.0349 37.5708V41.1388H17.8878H25.7407V37.5708V34.0028H17.8878H10.0349V37.5708Z", fill: "white", fillRule: "evenodd" }))),
+        section.svgIconName[language] === 'user' && React__default["default"].createElement(Icon["default"], { icon: icons.User, size: "3rem" }),
+        section.svgIconName[language] === 'headset' && (React__default["default"].createElement(Icon["default"], { icon: icons.Headset, size: "3rem" })),
+        section.svgIconName[language] === 'shop' && React__default["default"].createElement(Icon["default"], { icon: icons.Shop, size: "3rem" }),
         React__default["default"].createElement("h4", null, section.title[language]),
         React__default["default"].createElement("ul", null, section.linkItems.map((item, i) => (React__default["default"].createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default["default"].createElement(ButtonIcon["default"], { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default["default"].createElement("a", { href: item.linkURL[language] },
             React__default["default"].createElement(Icon["default"], { icon: icons.ArrowRight }),
@@ -226,7 +231,7 @@ const SocialMediaLinks = ({ socialMedia }) => {
             const currentObject = socialMedia[socialMediaKey];
             const currentMediaUrl = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls[language];
             return (React__default["default"].createElement("a", { href: currentMediaUrl, key: `social-media-link-${socialMediaKey}`, "aria-label": socialMediaName },
-                React__default["default"].createElement(Icon["default"], { name: socialMediaKey.toLowerCase() })));
+                React__default["default"].createElement(Icon["default"], { icon: socialMediaIcons[socialMediaKey.toLowerCase()] })));
         })));
 };
 

package/build/cjs/components/InfoDialog/InfoDialog.d.ts

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+type Position = 'left' | 'right' | 'middle';
+type InfoDialogType = 'default' | 'sale';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the position of the component.
+     *
+     * @param {Position} left Renders component on the left
+     * @param {Position} right Renders component on the right
+     * @param {Position} middle Renders component in the middle
+     *
+     * @default 'middle'
+     */
+    position?: Position;
+    /**
+     * Allows to change the border color styling of component, depending on the passed type
+     *
+     * @param {InfoDialogType} default Uses `theme.color.default.pink` color for styling
+     * @param {InfoDialogType} sale Uses `theme.color.accent.orange` color for styling
+     *
+     * @default 'default'
+     */
+    type?: InfoDialogType;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Info Dialog */
+declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default InfoDialog;

package/build/cjs/components/InfoDialog/InfoDialog.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const positionMap = {
+    left: 'left: 1.875rem',
+    right: 'right: 1.875rem',
+    middle: 'left: 50%; transform: translateX(-50%)',
+};
+const colorMap = {
+    default: theme["default"].color.default.pink,
+    sale: theme["default"].color.accent.orange,
+};
+const InfoDialogContainer = styled["default"].div `
+    position: relative;
+    font-size: ${theme["default"].fontSize.s};
+    line-height: ${theme["default"].lineHeight.s};
+    font-weight: ${theme["default"].fontWeight.medium};
+    background-color: ${theme["default"].color.background.white.default};
+    color: ${theme["default"].color.text.black};
+    border-radius: ${theme["default"].radius.default};
+    border: 2px solid ${({ type }) => colorMap[type]};
+    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.5)};
+    margin-top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
+    width: 100%;
+
+    &:before,
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.9)};
+        z-index: 2;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        border: 20px solid transparent;
+        border-top: 0;
+        width: auto;
+        border-bottom-color: ${theme["default"].color.default.white};
+        ${({ position }) => positionMap[position]};
+        border-width: 0px ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
+    }
+
+    &:before {
+        top: -${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.2)};
+        z-index: 1;
+        border-bottom-color: ${({ type }) => colorMap[type]};
+    }
+`;
+/** @visibleName Info Dialog */
+const InfoDialog = (_a) => {
+    var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
+    return (React__default["default"].createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+};
+
+exports["default"] = InfoDialog;

package/build/cjs/components/PriorityNavigation/PriorityNavigation.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to define aria-label attribute for nav HTML element
+     */
+    navigationLabel?: string;
+    /**
+     * Allows to change label of ButtonIcon
+     *
+     * @default 'Lisää'
+     */
+    dropdownButtonLabel?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority Navigation
+ */
+declare const PriorityNavigation: ({ dropdownButtonLabel, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigation;

package/build/cjs/components/PriorityNavigation/PriorityNavigation.js

@@ -0,0 +1,230 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
+var React = require('react');
+var useDebounce = require('../../hooks/useDebounce.js');
+var useOutsideClick = require('../../hooks/useOutsideClick.js');
+var useResizeObserver = require('../../hooks/useResizeObserver.js');
+var useWindowSize = require('../../hooks/useWindowSize.js');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var common = require('../../utils/common.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
+var Icon = require('../Icon/Icon.js');
+var PriorityNavigationItem = require('../PriorityNavigationItem/PriorityNavigationItem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Container = styled["default"].nav `
+    width: 100%;
+
+    ${styledUtils.media.md `
+        border-bottom: 1px solid ${theme["default"].color.line.L03};
+    `}
+`;
+const ListsContainer = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background-color: ${theme["default"].color.background.white.default};
+
+    ${styledUtils.media.md `
+        justify-content: space-between;
+        flex-direction: row;
+        height: 100%;
+        align-items: center;
+        padding: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        margin: 0 auto;
+    `}
+`;
+const MobileDropdown = styled["default"].button `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 1rem 1.25rem;
+    color: ${theme["default"].color.text.pink};
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+    border-bottom: 3px solid ${theme["default"].color.default.pink};
+`;
+const CoreULStyles = styled["default"].ul `
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+`;
+const NavigationList = styled["default"](CoreULStyles) `
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    width: 100%;
+    background-color: ${theme["default"].color.background.white.default};
+    position: absolute;
+    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5.6)};
+    z-index: 1;
+    visibility: ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? 'visible' : 'hidden')};
+    clip-path: inset(
+        0% 0% ${({ isMobileNavigationOpen }) => (isMobileNavigationOpen ? '0%' : '100%')} 0%
+    );
+    transition: all 0.2s ease-in-out;
+
+    ${styledUtils.media.md `
+        position: static;
+        flex-direction: row;
+        visibility: visible;
+        clip-path: none;
+        width: auto;
+        height: 100%;
+    `}
+`;
+const DropdownList = styled["default"](CoreULStyles) `
+    position: absolute;
+    top: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5.6)};
+    right: 0;
+    z-index: 1;
+    padding-bottom: 0.5rem;
+    background-color: ${theme["default"].color.background.white.default};
+    border: 1px solid ${theme["default"].color.line.L04};
+    border-radius: 0 0 ${theme["default"].radius.default} ${theme["default"].radius.default};
+    visibility: ${({ isDropdownOpen }) => (isDropdownOpen ? 'visible' : 'hidden')};
+    clip-path: inset(0% 0% ${({ isDropdownOpen }) => (isDropdownOpen ? '0%' : '100%')} 0%);
+    transition: all 0.2s ease-in-out;
+
+    ${common["default"]({ elevation: 'low' })}
+`;
+const reducer = (state, action) => {
+    var _a;
+    switch (action.type) {
+        case 'moveItemToDropdown': {
+            const lastChild = state.navigationItems[state.navigationItems.length - 1];
+            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.lastItem) && {
+                lastItemWidth: [...state.lastItemWidth, action.payload.lastItem.clientWidth],
+            }));
+        }
+        case 'moveItemToNavigation': {
+            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
+            const [, ...lastItemWidth] = state.lastItemWidth;
+            return {
+                navigationItems: [...state.navigationItems, firstItemFromList],
+                dropdownItems,
+                lastItemWidth,
+            };
+        }
+        default:
+            return state;
+    }
+};
+const getReactNodeText = (reactNode) => {
+    if (reactNode === null) {
+        return '';
+    }
+    switch (typeof reactNode) {
+        case 'string':
+        case 'number':
+            return reactNode.toString();
+        case 'boolean':
+            return '';
+        case 'object': {
+            if (reactNode instanceof Array) {
+                return reactNode.map(getReactNodeText).join('');
+            }
+            if ('props' in reactNode) {
+                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
+                // eslint-disable-next-line
+                return getReactNodeText(reactNode.props.children);
+            }
+            return '';
+        }
+        default:
+            return '';
+    }
+};
+/**
+ * @visibleName Priority Navigation
+ */
+const PriorityNavigation = (_a) => {
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    const listsContainerRef = React.useRef(null);
+    const navigationListRef = React.useRef(null);
+    const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
+    const { width: listsContainerWidth } = useResizeObserver["default"](listsContainerRef);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = React.useState(false);
+    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const navigationItems = React.useRef(new Map()).current;
+    const initialState = {
+        navigationItems: props.children,
+        dropdownItems: [],
+        lastItemWidth: [],
+    };
+    const [state, dispatch] = React.useReducer(reducer, initialState);
+    const checkHorizontalOverflow = useDebounce["default"](() => {
+        if (navigationListRef.current && listsContainerRef.current) {
+            const listsContainerRefWidth = navigationListRef.current.scrollWidth;
+            if (state.navigationItems.length > 0 &&
+                listsContainerRefWidth + 80 > listsContainerWidth) {
+                dispatch({
+                    type: 'moveItemToDropdown',
+                    payload: {
+                        lastItem: navigationItems.get(state.navigationItems.length - 1),
+                    },
+                });
+            }
+            else if (state.dropdownItems.length > 0 &&
+                listsContainerWidth >
+                    listsContainerRefWidth +
+                        state.lastItemWidth[state.lastItemWidth.length - 1] +
+                        100) {
+                dispatch({
+                    type: 'moveItemToNavigation',
+                });
+            }
+        }
+    }, 100);
+    const selectedItem = isMobile &&
+        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => React.isValidElement(child) &&
+            child.type === PriorityNavigationItem["default"] &&
+            child.props.isActive));
+    useOutsideClick["default"](listsContainerRef, () => {
+        if (isDropdownOpen) {
+            setIsDropdownOpen(false);
+        }
+    });
+    React.useEffect(() => {
+        if (!isMobile) {
+            checkHorizontalOverflow();
+        }
+    }, [
+        state.navigationItems,
+        state.dropdownItems,
+        listsContainerWidth,
+        checkHorizontalOverflow,
+        isMobile,
+    ]);
+    const navigationListItems = React.Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => React.isValidElement(navigationItem) &&
+        navigationItem.type === PriorityNavigationItem["default"] && (React__default["default"].createElement(PriorityNavigationItem["default"], { id: navigationItem.props.id, key: navigationItem.key, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+        navigationItem.props.children,
+        navigationItem.props.isActive && isMobile && (React__default["default"].createElement(Icon["default"], { icon: icons.Check, color: theme["default"].color.default.pink })))));
+    return (React__default["default"].createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(ListsContainer, { ref: listsContainerRef },
+            isMobile && selectedItem && (React__default["default"].createElement(MobileDropdown, { onClick: toggleMobileNavigation },
+                selectedItem,
+                React__default["default"].createElement(Icon["default"], { icon: isMobileNavigationOpen ? icons.ChevronUp : icons.ChevronDown }))),
+            React__default["default"].createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, navigationListItems),
+            !isMobile && Boolean(state.dropdownItems.length) && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement(ButtonIcon["default"], { onClick: toggleDropdown, icon: isDropdownOpen ? icons.ChevronUp : icons.ChevronDown, isReversed: true }, dropdownButtonLabel),
+                React__default["default"].createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems))))));
+};
+
+exports["default"] = PriorityNavigation;

package/build/cjs/components/PriorityNavigation/__tests__/PriorityNavigation.spec.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode, RefObject } from 'react';
+import React from 'react';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * A ref object, or a ref callback function
+     */
+    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
+    /**
+     * Allows to set component as active
+     */
+    isActive?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority NavigationItem
+ */
+declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigationItem;

package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Element = styled["default"].li `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    list-style: none;
+    position: relative;
+    padding: 1rem 1.25rem;
+    flex-shrink: 0;
+
+    ${({ isActive }) => styledUtils.media.md `
+        justify-content: center;
+        padding: 1rem 0;
+        margin: auto 1.25rem;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid ${isActive ? theme["default"].color.text.pink : 'transparent'};
+    `}
+
+    & a {
+        display: block;
+        color: ${({ isActive }) => (isActive ? theme["default"].color.text.pink : theme["default"].color.text.black)};
+        ${({ isActive }) => isActive && `font-weight: ${theme["default"].fontWeight.bold}`};
+        border: 2px solid transparent;
+
+        &:focus {
+            border-radius: ${theme["default"].radius.s};
+            border: 2px solid ${theme["default"].color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+            outline: none;
+        }
+
+        ${styledUtils.media.md `
+            margin: auto;
+        `}
+
+        &:hover {
+            color: ${theme["default"].color.hover.pink};
+        }
+    }
+`;
+/**
+ * @visibleName Priority NavigationItem
+ */
+const PriorityNavigationItem = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(Element, { id: props.id, ref: props.innerRef, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+};
+
+exports["default"] = PriorityNavigationItem;

package/build/cjs/components/PriorityNavigationItem/__tests__/PriorityNavigationItem.spec.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';