@hlf-fe/pulmo-ui 1.5.1 → 1.5.2

package/dist/components/buttons/button/button.d.ts

@@ -17,9 +17,9 @@ export type ButtonProps = {
     children: ReactNode;
 };
 export type StyledButtonProps = {
-    inverted?: boolean;
-    btnSize?: "s" | "m" | "l";
-    fullWidthMobile?: boolean;
-    fullWidth?: boolean;
+    $inverted?: boolean;
+    $btnSize?: "s" | "m" | "l";
+    $fullWidthMobile?: boolean;
+    $fullWidth?: boolean;
 };
 export declare const Button: ({ type, onClick, className, inverted, disabled, btnSize, fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/button/button.js

@@ -4,18 +4,8 @@ import { media, buttonSize } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import { Link } from "gatsby";
 export const Button = ({ type = "submit", onClick, className = "", inverted = false, disabled = false, btnSize = "m", fullWidth, fullWidthMobile, dataTest, tabIndex, children, to, href, target, }) => {
-    const commonProps = {
-        className,
-        onClick,
-        inverted,
-        btnSize,
-        fullWidth,
-        fullWidthMobile,
-        "data-test": dataTest,
-        tabIndex,
-    };
     const asElement = to ? Link : href ? "a" : "button";
-    return (_jsx(StyledButton, { as: asElement, ...commonProps, ...(to ? { to } : {}), ...(href
+    return (_jsx(StyledButton, { "$inverted": inverted, "$btnSize": btnSize, "$fullWidthMobile": fullWidthMobile, "$fullWidth": fullWidth, as: asElement, className: className, onClick: onClick, "data-test": dataTest, tabIndex: tabIndex, ...(to ? { to } : {}), ...(href
             ? {
                 href,
                 target,
@@ -31,22 +21,23 @@ const StyledButton = styled.button `
   font-family: ${({ theme }) => theme.valueBold};
   font-weight: 400;
   text-decoration: none;
-  color: ${({ theme, inverted }) => (inverted ? theme.red : theme.white)};
-  width: ${({ fullWidthMobile }) => (fullWidthMobile ? "100%" : "fit-content")};
-  background-color: ${({ theme, inverted }) => inverted ? theme.white : theme.red};
+  color: ${({ theme, $inverted }) => ($inverted ? theme.red : theme.white)};
+  width: ${({ $fullWidthMobile }) => $fullWidthMobile ? "100%" : "fit-content"};
+  background-color: ${({ theme, $inverted }) => $inverted ? theme.white : theme.red};
   line-height: 2.5;
   border-radius: ${rem(5)};
-  border-color: ${({ theme, inverted }) => inverted ? theme.red : "transparent"};
+  border-color: ${({ theme, $inverted }) => $inverted ? theme.red : "transparent"};
   transition: background-color 0.3s ease-out;
   border-style: solid;
+  cursor: pointer;
 
   &:disabled {
     cursor: default;
     opacity: 0.6;
   }
 
-  ${({ btnSize }) => {
-    switch (btnSize) {
+  ${({ $btnSize }) => {
+    switch ($btnSize) {
         case "s":
             return buttonSize.S;
         case "m":
@@ -58,16 +49,16 @@ const StyledButton = styled.button `
     }
 }}
 
-  ${({ theme, inverted, fullWidth }) => css `
+  ${({ theme, $inverted, $fullWidth }) => css `
     ${media.M `
-      width: ${fullWidth ? "100%" : "fit-content"};
+      width: ${$fullWidth ? "100%" : "fit-content"};
       font-size: ${rem(18)};
     `}
 
     &:not(:disabled) {
       ${media.L `
         &:hover, :active, :focus-visible {
-          background-color: ${inverted ? theme.red : theme.redHover};
+          background-color: ${$inverted ? theme.red : theme.redHover};
           color: ${theme.white};
         }
 

package/dist/components/icons/external-icon/external-icon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ExternalIcon = ({ className = "" }) => (_jsx("svg", { className: className, width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", "stroke-width": "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-428.000000, -10860.000000)", fill: "currentColor", fillRule: "nonzero", children: _jsx("path", { d: "M433,10861 C433.552285,10861 434,10861.4477 434,10862 C434,10862.5523 433.552285,10863 433,10863 L431,10863 C430.447715,10863 430,10863.4477 430,10864 L430,10873 C430,10873.5523 430.447715,10874 431,10874 L440,10874 C440.552285,10874 441,10873.5523 441,10873 L441,10871 C441,10870.4477 441.447715,10870 442,10870 C442.552285,10870 443,10870.4477 443,10871 L443,10873 C443,10874.6569 441.656854,10876 440,10876 L431,10876 C429.343146,10876 428,10874.6569 428,10873 L428,10864 C428,10862.3431 429.343146,10861 431,10861 L433,10861 Z M443,10860 L443.019354,10860.0002 C443.042681,10860.0006 443.065995,10860.0019 443.08925,10860.004 L443,10860 C443.05062,10860 443.100362,10860.0038 443.148961,10860.011 C443.165949,10860.0136 443.183375,10860.0167 443.200726,10860.0202 C443.222746,10860.0246 443.244436,10860.0298 443.26584,10860.0357 C443.281463,10860.0401 443.296851,10860.0447 443.312143,10860.0497 C443.331798,10860.0561 443.351579,10860.0633 443.371059,10860.0711 C443.388796,10860.0782 443.406098,10860.0857 443.423222,10860.0937 C443.443891,10860.1034 443.464294,10860.1138 443.484277,10860.1249 C443.496394,10860.1315 443.508613,10860.1386 443.520709,10860.146 C443.546275,10860.1617 443.571131,10860.1785 443.595159,10860.1963 C443.602603,10860.2018 443.609842,10860.2073 443.617022,10860.2129 C443.680182,10860.2626 443.737448,10860.3198 443.787214,10860.3832 L443.707107,10860.2929 C443.742501,10860.3283 443.774687,10860.3657 443.803665,10860.4047 C443.82151,10860.4289 443.838281,10860.4537 443.853933,10860.4793 C443.861393,10860.4914 443.868501,10860.5036 443.875329,10860.5159 C443.886206,10860.5357 443.896623,10860.5561 443.906346,10860.5769 C443.914321,10860.5939 443.921804,10860.6112 443.928775,10860.6287 C443.936684,10860.6484 443.943878,10860.6682 443.950453,10860.6883 C443.955271,10860.7031 443.959902,10860.7185 443.964155,10860.734 C443.970166,10860.7556 443.97536,10860.7773 443.979835,10860.7992 C443.983298,10860.8166 443.986372,10860.8341 443.988982,10860.8515 C443.992033,10860.8715 443.994467,10860.8921 443.996262,10860.9129 C443.997844,10860.9317 443.998905,10860.9497 443.999483,10860.9677 C443.999818,10860.9778 444,10860.9889 444,10861 L444,10867 C444,10867.5523 443.552285,10868 443,10868 C442.447715,10868 442,10867.5523 442,10867 L442,10863.414 L433.707107,10871.7071 C433.316582,10872.0976 432.683418,10872.0976 432.292893,10871.7071 C431.902369,10871.3166 431.902369,10870.6834 432.292893,10870.2929 L440.584,10862 L437,10862 C436.487164,10862 436.064493,10861.614 436.006728,10861.1166 L436,10861 C436,10860.4477 436.447715,10860 437,10860 L443,10860 Z" }) }) }) }));
+export const ExternalIcon = ({ className = "" }) => (_jsx("svg", { className: className, width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-428.000000, -10860.000000)", fill: "currentColor", fillRule: "nonzero", children: _jsx("path", { d: "M433,10861 C433.552285,10861 434,10861.4477 434,10862 C434,10862.5523 433.552285,10863 433,10863 L431,10863 C430.447715,10863 430,10863.4477 430,10864 L430,10873 C430,10873.5523 430.447715,10874 431,10874 L440,10874 C440.552285,10874 441,10873.5523 441,10873 L441,10871 C441,10870.4477 441.447715,10870 442,10870 C442.552285,10870 443,10870.4477 443,10871 L443,10873 C443,10874.6569 441.656854,10876 440,10876 L431,10876 C429.343146,10876 428,10874.6569 428,10873 L428,10864 C428,10862.3431 429.343146,10861 431,10861 L433,10861 Z M443,10860 L443.019354,10860.0002 C443.042681,10860.0006 443.065995,10860.0019 443.08925,10860.004 L443,10860 C443.05062,10860 443.100362,10860.0038 443.148961,10860.011 C443.165949,10860.0136 443.183375,10860.0167 443.200726,10860.0202 C443.222746,10860.0246 443.244436,10860.0298 443.26584,10860.0357 C443.281463,10860.0401 443.296851,10860.0447 443.312143,10860.0497 C443.331798,10860.0561 443.351579,10860.0633 443.371059,10860.0711 C443.388796,10860.0782 443.406098,10860.0857 443.423222,10860.0937 C443.443891,10860.1034 443.464294,10860.1138 443.484277,10860.1249 C443.496394,10860.1315 443.508613,10860.1386 443.520709,10860.146 C443.546275,10860.1617 443.571131,10860.1785 443.595159,10860.1963 C443.602603,10860.2018 443.609842,10860.2073 443.617022,10860.2129 C443.680182,10860.2626 443.737448,10860.3198 443.787214,10860.3832 L443.707107,10860.2929 C443.742501,10860.3283 443.774687,10860.3657 443.803665,10860.4047 C443.82151,10860.4289 443.838281,10860.4537 443.853933,10860.4793 C443.861393,10860.4914 443.868501,10860.5036 443.875329,10860.5159 C443.886206,10860.5357 443.896623,10860.5561 443.906346,10860.5769 C443.914321,10860.5939 443.921804,10860.6112 443.928775,10860.6287 C443.936684,10860.6484 443.943878,10860.6682 443.950453,10860.6883 C443.955271,10860.7031 443.959902,10860.7185 443.964155,10860.734 C443.970166,10860.7556 443.97536,10860.7773 443.979835,10860.7992 C443.983298,10860.8166 443.986372,10860.8341 443.988982,10860.8515 C443.992033,10860.8715 443.994467,10860.8921 443.996262,10860.9129 C443.997844,10860.9317 443.998905,10860.9497 443.999483,10860.9677 C443.999818,10860.9778 444,10860.9889 444,10861 L444,10867 C444,10867.5523 443.552285,10868 443,10868 C442.447715,10868 442,10867.5523 442,10867 L442,10863.414 L433.707107,10871.7071 C433.316582,10872.0976 432.683418,10872.0976 432.292893,10871.7071 C431.902369,10871.3166 431.902369,10870.6834 432.292893,10870.2929 L440.584,10862 L437,10862 C436.487164,10862 436.064493,10861.614 436.006728,10861.1166 L436,10861 C436,10860.4477 436.447715,10860 437,10860 L443,10860 Z" }) }) }) }));

package/dist/components/icons/toggable-chevron/toggable-chevron.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 export const ChevronDownIcon = ({ className }) => (_jsx("svg", { width: "16px", height: "16px", viewBox: "0 0 16 16", version: "1.1", xmlns: "http://www.w3.org/2000/svg", fill: "#333333", className: className, children: _jsx("path", { d: "M2.29289322,5.29289322 C2.65337718,4.93240926 3.22060824,4.90467972 3.61289944,5.20970461 L3.70710678,5.29289322 L8,9.585 L12.2928932,5.29289322 C12.6533772,4.93240926 13.2206082,4.90467972 13.6128994,5.20970461 L13.7071068,5.29289322 C14.0675907,5.65337718 14.0953203,6.22060824 13.7902954,6.61289944 L13.7071068,6.70710678 L8.70710678,11.7071068 C8.34662282,12.0675907 7.77939176,12.0953203 7.38710056,11.7902954 L7.29289322,11.7071068 L2.29289322,6.70710678 C1.90236893,6.31658249 1.90236893,5.68341751 2.29289322,5.29289322 Z" }) }));
-export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, }) => (_jsx(Chevron, { toggled: toggled, disableCircle: disableCircle, rotation: rotation, className: className, children: _jsx(ChevronDownIcon, {}) }));
+export const ToggableChevron = ({ toggled, disableCircle = true, rotation, className, }) => (_jsx(Chevron, { "$isToggled": toggled, "$disableCircle": disableCircle, "$rotation": rotation, className: className, children: _jsx(ChevronDownIcon, {}) }));
 const Chevron = styled.div `
   width: 22px;
   height: 22px;
@@ -12,9 +12,9 @@ const Chevron = styled.div `
   justify-content: center;
   align-items: center;
 
-  ${({ toggled, disableCircle, rotation }) => css `
-    transform: scaleY(${toggled ? -1 : 1})
-      ${rotation && `rotate(${rotation}deg)`};
-    border-width: ${toggled || disableCircle ? 0 : 1};
+  ${({ $isToggled, $disableCircle, $rotation }) => css `
+    transform: scaleY(${$isToggled ? -1 : 1})
+      ${$rotation && `rotate(${$rotation}deg)`};
+    border-width: ${$isToggled || $disableCircle ? 0 : 1};
   `};
 `;

package/dist/components/icons/toggable-plus-minus-icon/toggable-plus-minus-icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 export const ToggablePlusMinusIcon = ({ isOpen = false, width = 14, height = 14, className = "", }) => {
-    return (_jsxs(Svg, { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 160 160", width: width, height: height, isOpen: isOpen, children: [_jsx(Rect, { isOpen: isOpen, x: "70", width: "20", height: "160" }), _jsx(Rect, { y: "70", width: "160", height: "20" })] }));
+    return (_jsxs(Svg, { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 160 160", width: width, height: height, "$isOpen": isOpen, children: [_jsx(Rect, { "$isOpen": isOpen, x: "70", width: "20", height: "160" }), _jsx(Rect, { y: "70", width: "160", height: "20" })] }));
 };
 const Svg = styled.svg `
   cursor: pointer;
@@ -9,5 +9,5 @@ const Svg = styled.svg `
 const Rect = styled.rect `
   transition: transform 250ms ease-in-out;
   transform-origin: 50% 50%;
-  transform: ${({ isOpen }) => (!isOpen ? "scaleY(1)" : "scaleY(0)")};
+  transform: ${({ $isOpen }) => (!$isOpen ? "scaleY(1)" : "scaleY(0)")};
 `;

package/dist/components/inputs/dropdown/dropdown.js

@@ -29,7 +29,7 @@ export const Dropdown = ({ prefix, items, id, className, onItemSelected, initial
             });
         }
     }, [isOpen]);
-    return (_jsxs(Container, { className: className, ref: ref, children: [_jsxs(DropdownButton, { id: id, onClick: () => setIsOpen(!isOpen), "aria-haspopup": "menu", "aria-controls": "dropdown-menu", isOpen: isOpen, children: [_jsxs(TextContainer, { children: [prefix && _jsx(Prefix, { children: `${prefix}:` }), _jsx(Label, { children: selectedItem?.label })] }), _jsx(StyledToggle, { toggled: isOpen })] }), _jsx(Content, { id: "dropdown-menu", "aria-expanded": isOpen, "aria-hidden": !isOpen, role: "menu", children: items.map((item, i) => (_jsx(DropdownListItem, { label: item.label, onClick: () => {
+    return (_jsxs(Container, { className: className, ref: ref, children: [_jsxs(DropdownButton, { id: id, onClick: () => setIsOpen(!isOpen), "aria-haspopup": "menu", "aria-controls": "dropdown-menu", "$isOpen": isOpen, children: [_jsxs(TextContainer, { children: [prefix && _jsx(Prefix, { children: `${prefix}:` }), _jsx(Label, { children: selectedItem?.label })] }), _jsx(StyledToggle, { toggled: isOpen })] }), _jsx(Content, { id: "dropdown-menu", "aria-expanded": isOpen, "aria-hidden": !isOpen, role: "menu", children: items.map((item, i) => (_jsx(DropdownListItem, { label: item.label, onClick: () => {
                         setIsOpen(false);
                         setItem(item);
                         onItemSelected(item);
@@ -48,17 +48,17 @@ const DropdownButton = styled.button `
   font-size: ${rem(16)};
   background-color: ${({ theme }) => theme.white};
   border: ${rem(1)} solid ${({ theme }) => theme.grayTransparent};
-  border-radius: ${({ isOpen }) => isOpen ? `${rem(5)} ${rem(5)} 0 0` : rem(5)};
-  border-bottom: ${({ isOpen, theme }) => isOpen ? "none" : `$(${rem(1)}) solid ${theme.grayTransparent}`};
+  border-radius: ${({ $isOpen }) => $isOpen ? `${rem(5)} ${rem(5)} 0 0` : rem(5)};
+  border-bottom: ${({ $isOpen, theme }) => $isOpen ? "none" : `$(${rem(1)}) solid ${theme.grayTransparent}`};
   padding: 0 ${rem(14)};
   cursor: pointer;
 
-  ${({ isOpen, theme }) => {
+  ${({ $isOpen, theme }) => {
     return css `
       ${media.M `
       &:hover, :focus-visible {
         border: ${rem(1)} solid ${theme.gray};
-        border-bottom: ${isOpen ? "none" : `${rem(1)} solid ${theme.gray}`};
+        border-bottom: ${$isOpen ? "none" : `${rem(1)} solid ${theme.gray}`};
       }
   `}
     `;

package/dist/components/inputs/text-field/text-field.d.ts

@@ -27,6 +27,6 @@ export type TextFieldProps = {
 export type StyledTextFieldProps = {
     icon?: string;
     variant?: "default" | "rounded";
-    startAdornment?: ReactNode;
+    $startAdornment?: ReactNode;
 };
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/text-field/text-field.js

@@ -20,7 +20,7 @@ const variantInputStyles = {
   `,
 };
 export const TextField = forwardRef(({ dataTest, value, name, type = "text", variant = "default", placeholder, onChange, onBlur, onFocus, onKeyDown, className, ariaLabel, ariaDescribedBy, register, errors, pattern, inputMode = "text", startAdornment, endAdornment, }, ref) => {
-    return (_jsxs(InputContainer, { children: [_jsxs(InputWrapper, { className: className, variant: variant, startAdornment: startAdornment, children: [startAdornment && _jsx(StartAdornment, { children: startAdornment }), _jsx(StyledInput, { "data-test": dataTest, variant: variant, value: value, ref: ref, type: type, id: name, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, inputMode: inputMode, pattern: pattern, startAdornment: startAdornment, ...register }), endAdornment && _jsx(EndAdornment, { children: endAdornment })] }), errors && name && _jsx(FormError, { errors: errors, name: name })] }));
+    return (_jsxs(InputContainer, { children: [_jsxs(InputWrapper, { className: className, variant: variant, "$startAdornment": startAdornment, children: [startAdornment && _jsx(StartAdornment, { children: startAdornment }), _jsx(StyledInput, { "data-test": dataTest, variant: variant, value: value, ref: ref, type: type, id: name, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, inputMode: inputMode, pattern: pattern, "$startAdornment": startAdornment, ...register }), endAdornment && _jsx(EndAdornment, { children: endAdornment })] }), errors && name && _jsx(FormError, { errors: errors, name: name })] }));
 });
 TextField.displayName = "TextField";
 const InputContainer = styled.div `
@@ -45,7 +45,7 @@ const StyledInput = styled.input `
   }
 
   ${({ variant }) => variantInputStyles[variant]};
-  padding-left: ${({ startAdornment }) => (startAdornment ? rem(40) : rem(20))};
+  padding-left: ${({ $startAdornment }) => $startAdornment ? rem(40) : rem(20)};
 `;
 const StartAdornment = styled.div `
   position: absolute;

package/dist/components/layout/accordion/accordion.js

@@ -39,13 +39,13 @@ export const AccordionItem = ({ heading, headingLevel, panelId, regionId, initia
         setPanelState(isClosed ? PanelState.OPENING : PanelState.CLOSING);
     };
     const isExpanded = panelState !== PanelState.CLOSED;
-    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded })] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, contentHeight: height, useAutoHeight: panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
+    return (_jsxs(AccordionPanel, { children: [_jsx(StyledHeading, { as: headingLevel, children: _jsxs(StyledButton, { "data-test": `accordion-header${isExpanded ? "-expanded" : ""}`, id: panelId, "aria-expanded": isExpanded, "aria-controls": regionId, onClick: togglePanel, children: [_jsx(Text, { children: heading }), _jsx(StyledToggablePlusMinusIcon, { isOpen: isExpanded })] }) }), _jsx(AccodrionContent, { "data-test": "accordion-content", ref: ref, id: regionId, role: "region", "aria-labelledby": panelId, "$contentHeight": height, "$useAutoHeight": panelState === PanelState.OPENED, onTransitionEnd: onAnimationComplete, children: _jsx(Content, { hidden: !isExpanded, children: children }) })] }));
 };
 const AccodrionContent = styled.div `
   overflow: hidden;
   transition: height 0.3s ease-in-out;
-  height: ${({ contentHeight }) => `${contentHeight}px`};
-  height: ${({ useAutoHeight }) => useAutoHeight && "auto"};
+  height: ${({ $contentHeight }) => `${$contentHeight}px`};
+  height: ${({ $useAutoHeight }) => $useAutoHeight && "auto"};
 `;
 const Content = styled.div `
   padding: ${rem(15)} 0;

package/dist/components/layout/container/container.js

@@ -11,10 +11,10 @@ const getMaxWidth = (size) => {
     return MAX_WIDTH?.[size];
 };
 export const Container = forwardRef(({ children, className, maxWidth = "lg", position = "static", display = "block", }, ref) => {
-    return (_jsx(Div, { ref: ref, className: className, maxWidth: getMaxWidth(maxWidth), display: display, position: position, children: children }));
+    return (_jsx(Div, { ref: ref, className: className, "$maxWidth": getMaxWidth(maxWidth), display: display, position: position, children: children }));
 });
 const Div = styled.div `
-  ${({ maxWidth }) => maxWidth};
+  ${({ $maxWidth }) => $maxWidth};
   display: ${({ display }) => display};
   position: ${({ position }) => position};
 `;

package/dist/components/modules/entry-list/entry-list.js

@@ -9,10 +9,10 @@ export const EntryListItem = ({ children, as = "li" }) => {
     return _jsx(ListItem, { as: as, children: children });
 };
 export const EntryListText = ({ children, fontSizeMobile = 14, fontSizeDesktop = 16, breakpoint = "M", bold = false, as = "p", color, }) => {
-    return (_jsx(Text, { as: as, fontSizeMobile: fontSizeMobile, fontSizeDesktop: fontSizeDesktop, breakpoint: breakpoint, bold: bold, color: color, children: children }));
+    return (_jsx(Text, { as: as, "$fontSizeMobile": fontSizeMobile, "$fontSizeDesktop": fontSizeDesktop, "$breakpoint": breakpoint, "$bold": bold, color: color, children: children }));
 };
 export const EntryListHeading = ({ children, fontSizeMobile = 18, fontSizeDesktop = 20, as = "h2", breakpoint = "M", }) => {
-    return (_jsx(Heading, { as: as, fontSizeMobile: fontSizeMobile, fontSizeDesktop: fontSizeDesktop, breakpoint: breakpoint, children: children }));
+    return (_jsx(Heading, { as: as, "$fontSizeMobile": fontSizeMobile, "$fontSizeDesktop": fontSizeDesktop, "$breakpoint": breakpoint, children: children }));
 };
 const List = styled.ul `
   list-style: none;
@@ -27,10 +27,10 @@ const ListItem = styled.li `
   }
 `;
 const responsiveFont = css `
-  font-size: ${({ fontSizeMobile }) => rem(fontSizeMobile)};
+  font-size: ${({ $fontSizeMobile }) => rem($fontSizeMobile)};
 
-  ${({ fontSizeDesktop, breakpoint }) => media[breakpoint] `
-    font-size: ${rem(fontSizeDesktop)};
+  ${({ $fontSizeDesktop, $breakpoint }) => media[$breakpoint] `
+    font-size: ${rem($fontSizeDesktop)};
   `}
 `;
 const Heading = styled.h2 `
@@ -41,7 +41,7 @@ const Heading = styled.h2 `
 `;
 const Text = styled.p `
   color: ${({ theme, color }) => (color ? color : theme.blackLight)};
-  font-family: ${({ theme, bold }) => bold ? theme.valueBold : theme.valueRegular};
+  font-family: ${({ theme, $bold }) => $bold ? theme.valueBold : theme.valueRegular};
 
   ${responsiveFont}
   &:last-child {

package/dist/components/modules/footer/footer.d.ts

@@ -1,5 +1,6 @@
 import { SanityImage } from "../../../models/sanity-types";
 type LinkItem = {
+    id?: string;
     externalUrl: string;
     internalLink: {
         slug: {

package/dist/components/modules/footer/footer.js

@@ -5,10 +5,10 @@ import { media } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import styled from "styled-components";
 export const Footer = ({ linkColumns, footerLogo }) => {
-    return (_jsxs(OuterContainer, { children: [_jsx(ColumnContainer, { children: linkColumns.map(({ heading, items }) => {
-                    return (_jsxs(Column, { children: [heading && _jsx(Heading, { children: heading }), items?.map((item) => {
-                                return (_jsx(StyledLink, { value: { reference: item }, children: item?.webUrlName }));
-                            })] }));
+    return (_jsxs(OuterContainer, { children: [_jsx(ColumnContainer, { children: linkColumns.map(({ heading, items }, i) => {
+                    return (_jsxs(Column, { children: [heading && _jsx(Heading, { children: heading }), items?.map((item, i) => {
+                                return (_jsx(StyledLink, { value: { reference: item }, children: item?.webUrlName }, `${item?.id}${i}`));
+                            })] }, `${heading}-${i}`));
                 }) }), _jsx(StyledImage, { image: footerLogo?.asset })] }));
 };
 const OuterContainer = styled.div `

package/dist/components/navigation/nav-cell/nav-cell.d.ts

@@ -3,4 +3,4 @@ export type NavigationCellProps = {
     active?: boolean;
     onToggleCell: () => void;
 };
-export declare const NavigationCell: ({ title, active, onToggleCell }: NavigationCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavigationCell: ({ title, active, onToggleCell, }: NavigationCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/nav-cell/nav-cell.js

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { media } from "../../../styles/mixins";
 import { rem } from "../../../styles/units";
 import { ToggableChevron } from "../../../components/icons/toggable-chevron/toggable-chevron";
-export const NavigationCell = ({ title, active, onToggleCell }) => (_jsx(StyledListItem, { children: _jsxs(NavCell, { "data-test": "nav-cell", active: active, onClick: onToggleCell, children: [title, _jsx(StyledToggle, { toggled: active })] }) }));
+export const NavigationCell = ({ title, active, onToggleCell, }) => (_jsx(StyledListItem, { children: _jsxs(NavCell, { "data-test": "nav-cell", "$active": active, onClick: onToggleCell, children: [title, _jsx(StyledToggle, { toggled: active })] }) }));
 const StyledListItem = styled.li `
   display: inline-block;
   height: 100%;
@@ -45,12 +45,13 @@ const NavCell = styled.button `
     font-family: ${theme.valueBold};
   `};
 
-  ${({ active }) => active && css `
-    ${({ theme }) => css `
-      color: ${theme.red};
-      box-shadow: inset 0 -4px 0 ${theme.red};
+  ${({ $active }) => $active &&
+    css `
+      ${({ theme }) => css `
+        color: ${theme.red};
+        box-shadow: inset 0 -4px 0 ${theme.red};
+      `};
     `};
-  `};
 `;
 const StyledToggle = styled(ToggableChevron).attrs({
     disableCircle: true,
@@ -58,10 +59,11 @@ const StyledToggle = styled(ToggableChevron).attrs({
   margin-left: ${rem(4)};
 
   svg {
-    ${(props) => props.toggled && css `
-      ${({ theme }) => css `
-        fill: ${theme.red};
+    ${(props) => props.toggled &&
+    css `
+        ${({ theme }) => css `
+          fill: ${theme.red};
+        `};
       `};
-    `};
   }
 `;

package/dist/components/navigation/pagination/pagination.js

@@ -41,7 +41,7 @@ export const Pagination = ({ numberOfPages, currentPage, isMobile = true, locale
             total - 1,
         ];
     };
-    return (numberOfPages > 0 && (_jsxs(StyledList, { children: [_jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isFirstPage, "aria-label": prePage, onClick: (e) => goToPage(e, pageIndex - 1), children: _jsx(ChevronLeftIcon, { width: 12, height: 12, color: isFirstPage ? COLORS.grayDark : COLORS.blackLight }) }) }), getVisiblePages(pageIndex, numberOfPages, isMobile).map((page, index) => (_jsx(StyleListItem, { children: page === "..." ? (_jsx(Ellipsis, { children: "\u2026" })) : (_jsx(PaginationItem, { isSelected: pageIndex === page, onClick: (e) => goToPage(e, page), children: page + 1 })) }, index))), _jsx(StyleListItem, { children: _jsx(PaginationArrow, { isDisabled: isLastPage, "aria-label": nextPage, onClick: (e) => goToPage(e, pageIndex + 1), children: _jsx(ChevronRightIcon, { width: 12, height: 12, color: isLastPage ? COLORS.grayDark : COLORS.blackLight }) }) })] })));
+    return (numberOfPages > 0 && (_jsxs(StyledList, { children: [_jsx(StyleListItem, { children: _jsx(PaginationArrow, { "$isDisabled": isFirstPage, "aria-label": prePage, onClick: (e) => goToPage(e, pageIndex - 1), children: _jsx(ChevronLeftIcon, { width: 12, height: 12, color: isFirstPage ? COLORS.grayDark : COLORS.blackLight }) }) }), getVisiblePages(pageIndex, numberOfPages, isMobile).map((page, index) => (_jsx(StyleListItem, { children: page === "..." ? (_jsx(Ellipsis, { children: "\u2026" })) : (_jsx(PaginationItem, { "$isSelected": pageIndex === page, onClick: (e) => goToPage(e, page), children: page + 1 })) }, index))), _jsx(StyleListItem, { children: _jsx(PaginationArrow, { "$isDisabled": isLastPage, "aria-label": nextPage, onClick: (e) => goToPage(e, pageIndex + 1), children: _jsx(ChevronRightIcon, { width: 12, height: 12, color: isLastPage ? COLORS.grayDark : COLORS.blackLight }) }) })] })));
 };
 const StyledList = styled.ul `
   margin: 0 auto;
@@ -77,7 +77,7 @@ const PaginationItem = styled.button `
     border: ${rem(1)} solid ${theme.blackLight};
   `};
 
-  ${({ theme, isSelected }) => isSelected &&
+  ${({ theme, $isSelected }) => $isSelected &&
     css `
       background-color: ${theme.blackLight};
       border-color: transparent;
@@ -95,7 +95,7 @@ const PaginationArrow = styled.button `
   border-radius: ${rem(5)};
   background-color: ${({ theme }) => theme.white};
 
-  ${({ isDisabled }) => isDisabled &&
+  ${({ $isDisabled }) => $isDisabled &&
     css `
       pointer-events: none;
       cursor: default;

package/dist/components/surfaces/paper/paper.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { themeColors, themeBorderRadius, themeElevation, } from "../../../styles/mixins/theme-mixins";
 export const Paper = ({ className, children, backgroundColor = "white", borderRadius = "md", elevation = backgroundColor === "#ffffff" ? 1 : 0, }) => {
-    return (_jsx(Container, { className: className, backgroundColor: backgroundColor, borderRadius: borderRadius, elevation: elevation, children: children }));
+    return (_jsx(Container, { className: className, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$elevation": elevation, children: children }));
 };
 const Container = styled.div `
-  background-color: ${({ backgroundColor }) => themeColors(backgroundColor)};
-  border-radius: ${({ borderRadius }) => themeBorderRadius(borderRadius)};
-  box-shadow: ${({ elevation }) => themeElevation(elevation)};
+  background-color: ${({ $backgroundColor }) => themeColors($backgroundColor)};
+  border-radius: ${({ $borderRadius }) => themeBorderRadius($borderRadius)};
+  box-shadow: ${({ $elevation }) => themeElevation($elevation)};
 `;

package/dist/hoc/withDefaultTheme.d.ts

@@ -1 +1,3 @@
-export declare const withDefaultTheme: <T extends object>(Component: React.ComponentType<T>) => React.FC<T>;
+import React from "react";
+export declare function withDefaultTheme<P>(Component: React.ComponentType<P>): React.FC<P>;
+export declare function withDefaultThemeWithRef<P>(Component: React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;

package/dist/hoc/withDefaultTheme.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { THEME_SETTINGS } from "../styles/theme";
+import { useContext, forwardRef } from "react";
 import { ThemeContext, ThemeProvider } from "styled-components";
-export const withDefaultTheme = (Component) => (props) => {
-    const theme = useContext(ThemeContext);
-    return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
-};
+import { THEME_SETTINGS } from "../styles/theme";
+export function withDefaultTheme(Component) {
+    const ComponentWithTheme = (props) => {
+        const theme = useContext(ThemeContext);
+        return theme ? (_jsx(Component, { ...props })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props }) }));
+    };
+    return ComponentWithTheme;
+}
+export function withDefaultThemeWithRef(Component) {
+    const ComponentWithTheme = forwardRef((props, ref) => {
+        const theme = useContext(ThemeContext);
+        return theme ? (_jsx(Component, { ...props, ref: ref })) : (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, { ...props, ref: ref }) }));
+    });
+    return ComponentWithTheme;
+}

package/dist/index.d.ts

@@ -39,7 +39,14 @@ export declare const FormLabel: import("react").FC<FormLabelProps>;
 export declare const TextField: import("react").FC<TextFieldProps>;
 export declare const EmailSignupForm: import("react").FC<EmailSignupFormProps>;
 export declare const Image: import("react").FC<ImageProps>;
-export declare const Container: import("react").FC<ContainerProps>;
+export declare const Container: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+    maxWidth?: "sm" | "lg" | "xl";
+    className?: string;
+} & {
+    position?: import("csstype").Property.Position | undefined;
+    display?: import("csstype").Property.Display | undefined;
+} & import("react").RefAttributes<any>>;
 export declare const EntryList: import("react").FC<EntryListProps>;
 export declare const EntryListItem: import("react").FC<EntryListItemProps>;
 export declare const EntryListText: import("react").FC<EntryListTextProps>;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { withDefaultTheme } from "./hoc/withDefaultTheme";
+import { withDefaultTheme, withDefaultThemeWithRef, } from "./hoc/withDefaultTheme";
 // Buttons
 import { Button as ButtonComponent, } from "./components/buttons/button/button";
 import { TextButton as TextButtonComponent, } from "./components/buttons/text-button/text-button";
@@ -46,7 +46,7 @@ export const FormLabel = withDefaultTheme(FormLabelComponent);
 export const TextField = withDefaultTheme(TextFieldComponent);
 export const EmailSignupForm = withDefaultTheme(EmailSignupFormComponent);
 export const Image = withDefaultTheme(ImageComponent);
-export const Container = withDefaultTheme(ContainerComponent);
+export const Container = withDefaultThemeWithRef(ContainerComponent);
 export const EntryList = withDefaultTheme(EntryListComponent);
 export const EntryListItem = withDefaultTheme(EntryListItemComponent);
 export const EntryListText = withDefaultTheme(EntryListTextComponent);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hlf-fe/pulmo-ui",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",