@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/EnergyLabel/EnergyLabel.js

@@ -8,83 +8,87 @@ import Button from '../Button/Button.js';
 import theme from '../../themes/theme.js';
 
 const ERROR_IMAGE = 'https://res.cloudinary.com/dnaoyj/image/upload/v1731073400/Assets/KLT/Enriched%20icons/enriched-error-state.png';
-const ButtonElement = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-`;
-const StyledModal = styled(Modal) `
-    > div > div {
-        max-height: 100%;
-        height: 100%;
-        width: 100%;
-        margin: 0;
-
-        ${media.xs `
+const ButtonElement = styled.button.withConfig({
+  displayName: "EnergyLabel__ButtonElement",
+  componentId: "sc-10cp6sk-0"
+})(["display:flex;align-items:center;justify-content:center;background-color:transparent;border:0;padding:0;cursor:pointer;"]);
+const StyledModal = styled(Modal).withConfig({
+  displayName: "EnergyLabel__StyledModal",
+  componentId: "sc-10cp6sk-1"
+})(["> div > div{max-height:100%;height:100%;width:100%;margin:0;", ";> div{border-radius:0;}}"], media.xs`
             width: 23.438rem;
             height: 50rem;
             border-radius: ${theme.radius.default};
-        `};
-
-        > div {
-            border-radius: 0;
-        }
-    }
-`;
-const ModalLabel = styled.p `
-    font-size: ${theme.fontSize.s};
-    margin: 0;
-`;
-const ButtonContent = styled.span `
-    display: inline-flex;
-    align-items: center;
-    gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-`;
-const ErrorContainer = styled.div `
-    display: flex;
-    padding-top: ${getMultipliedSize(theme.base.baseHeight, 2)};
-    flex-direction: column;
-    text-align: center;
-    align-items: center;
-    flex-direction: column;
-    gap: ${getMultipliedSize(theme.base.baseHeight, 3)};
-`;
-const Image = styled.img `
-    width: ${p => p.$imgWidth};
-`;
+        `);
+const ModalLabel = styled.p.withConfig({
+  displayName: "EnergyLabel__ModalLabel",
+  componentId: "sc-10cp6sk-2"
+})(["font-size:", ";margin:0;"], theme.fontSize.s);
+const ButtonContent = styled.span.withConfig({
+  displayName: "EnergyLabel__ButtonContent",
+  componentId: "sc-10cp6sk-3"
+})(["display:inline-flex;align-items:center;gap:", ";"], getMultipliedSize(theme.base.baseWidth, 0.5));
+const ErrorContainer = styled.div.withConfig({
+  displayName: "EnergyLabel__ErrorContainer",
+  componentId: "sc-10cp6sk-4"
+})(["display:flex;padding-top:", ";flex-direction:column;text-align:center;align-items:center;flex-direction:column;gap:", ";"], getMultipliedSize(theme.base.baseHeight, 2), getMultipliedSize(theme.base.baseHeight, 3));
+const Image = styled.img.withConfig({
+  displayName: "EnergyLabel__Image",
+  componentId: "sc-10cp6sk-5"
+})(["width:", ";"], p => p.$imgWidth);
 /** @visibleName Energy Label */
-const EnergyLabel = (_a) => {
-    var { 'data-testid': dataTestId, modalAppElement = '#__next' } = _a, props = __rest(_a, ['data-testid', "modalAppElement"]);
-    const [isOpen, setIsOpen] = useState(false);
-    const [hasError, setHasError] = useState(false);
-    const [imgError, setImgError] = useState(false);
-    const handleOpen = () => {
-        setIsOpen(true);
-    };
-    const handleClose = () => {
-        setIsOpen(false);
-    };
-    const renderFooter = () => (React__default.createElement(Button, { fullWidth: true, href: props.pdfHref, target: "_blank" },
-        React__default.createElement(ButtonContent, null,
-            props.pdfButtonLabel,
-            " ",
-            React__default.createElement(Open, null))));
-    if (imgError) {
-        return null;
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(ButtonElement, { onClick: handleOpen, "aria-label": props.ariaLabel, "data-testid": dataTestId, id: props.id, className: props.className },
-            React__default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, "$imgWidth": "55px", onError: () => setImgError(true) })),
-        React__default.createElement(StyledModal, { appElement: modalAppElement, isOpen: isOpen, onRequestClose: handleClose, title: props.modalTitle, closeLabel: props.closeButtonLabel, footer: renderFooter() }, hasError || !props.modalImageSrc ? (React__default.createElement(ErrorContainer, null,
-            React__default.createElement("h3", null, props.errorTitle),
-            React__default.createElement(Image, { src: ERROR_IMAGE, alt: "", "$imgWidth": "160px" }),
-            React__default.createElement("p", null, props.errorLabel))) : (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(Image, { src: props.modalImageSrc, alt: "", "$imgWidth": "100%", onError: () => setHasError(true) }),
-            React__default.createElement(ModalLabel, null, props.modalLabel))))));
+const EnergyLabel = _a => {
+  var {
+      'data-testid': dataTestId,
+      modalAppElement = '#__next'
+    } = _a,
+    props = __rest(_a, ['data-testid', "modalAppElement"]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [imgError, setImgError] = useState(false);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  const renderFooter = () => (/*#__PURE__*/React__default.createElement(Button, {
+    fullWidth: true,
+    href: props.pdfHref,
+    target: "_blank"
+  }, /*#__PURE__*/React__default.createElement(ButtonContent, null, props.pdfButtonLabel, " ", /*#__PURE__*/React__default.createElement(Open, null))));
+  if (imgError) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ButtonElement, {
+    onClick: handleOpen,
+    "aria-label": props.ariaLabel,
+    "data-testid": dataTestId,
+    id: props.id,
+    className: props.className
+  }, /*#__PURE__*/React__default.createElement(Image, {
+    src: props.badgeSrc,
+    alt: "",
+    "aria-hidden": true,
+    "$imgWidth": "55px",
+    onError: () => setImgError(true)
+  })), /*#__PURE__*/React__default.createElement(StyledModal, {
+    appElement: modalAppElement,
+    isOpen: isOpen,
+    onRequestClose: handleClose,
+    title: props.modalTitle,
+    closeLabel: props.closeButtonLabel,
+    footer: renderFooter()
+  }, hasError || !props.modalImageSrc ? (/*#__PURE__*/React__default.createElement(ErrorContainer, null, /*#__PURE__*/React__default.createElement("h3", null, props.errorTitle), /*#__PURE__*/React__default.createElement(Image, {
+    src: ERROR_IMAGE,
+    alt: "",
+    "$imgWidth": "160px"
+  }), /*#__PURE__*/React__default.createElement("p", null, props.errorLabel))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Image, {
+    src: props.modalImageSrc,
+    alt: "",
+    "$imgWidth": "100%",
+    onError: () => setHasError(true)
+  }), /*#__PURE__*/React__default.createElement(ModalLabel, null, props.modalLabel)))));
 };
 
 export { EnergyLabel as default };

package/build/es/components/Expander/Expander.js

@@ -5,44 +5,49 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
 
-const Container = styled.div `
-    display: flex;
-    flex-direction: column;
-`;
-const StyledButtonIcon = styled(ButtonIcon) `
-    color: ${theme.color.text.pink};
-    align-self: flex-end;
-
-    &:hover {
-        color: ${theme.color.hover.pink};
-        text-decoration: none;
-    }
-
-    &:active {
-        color: ${theme.color.text.pink};
-    }
-`;
-const ContentWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    margin: 0.625rem 0;
-`;
-const Content = styled.div `
-    padding: 0.625rem 0;
-`;
-const Expander = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const handleCloseButtonClick = (e) => {
-        var _a, _b;
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-        const toggleButton = (_b = e.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
-        toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.focus();
-    };
-    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledButtonIcon, { icon: props.isExpanded ? ChevronUp : ChevronDown, onClick: props.onClick, isReversed: true, ariaExpanded: props.isExpanded }, props.buttonLabel),
-        props.isExpanded && (React__default.createElement(ContentWrapper, null,
-            React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            props.closeButtonLabel && (React__default.createElement(StyledButtonIcon, { icon: Close, onClick: handleCloseButtonClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
+const Container = styled.div.withConfig({
+  displayName: "Expander__Container",
+  componentId: "sc-btv3r-0"
+})(["display:flex;flex-direction:column;"]);
+const StyledButtonIcon = styled(ButtonIcon).withConfig({
+  displayName: "Expander__StyledButtonIcon",
+  componentId: "sc-btv3r-1"
+})(["color:", ";align-self:flex-end;&:hover{color:", ";text-decoration:none;}&:active{color:", ";}"], theme.color.text.pink, theme.color.hover.pink, theme.color.text.pink);
+const ContentWrapper = styled.div.withConfig({
+  displayName: "Expander__ContentWrapper",
+  componentId: "sc-btv3r-2"
+})(["display:flex;flex-direction:column;margin:0.625rem 0;"]);
+const Content = styled.div.withConfig({
+  displayName: "Expander__Content",
+  componentId: "sc-btv3r-3"
+})(["padding:0.625rem 0;"]);
+const Expander = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  const handleCloseButtonClick = e => {
+    var _a, _b;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    const toggleButton = (_b = e.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
+    toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.focus();
+  };
+  return /*#__PURE__*/React__default.createElement(Container, {
+    id: props.id,
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
+    icon: props.isExpanded ? ChevronUp : ChevronDown,
+    onClick: props.onClick,
+    isReversed: true,
+    ariaExpanded: props.isExpanded
+  }, props.buttonLabel), props.isExpanded && (/*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(Content, {
+    "data-testid": dataTestId && `${dataTestId}-content`
+  }, props.children), props.closeButtonLabel && (/*#__PURE__*/React__default.createElement(StyledButtonIcon, {
+    icon: Close,
+    onClick: handleCloseButtonClick,
+    "data-testid": dataTestId && `${dataTestId}-close-button`
+  }, props.closeButtonLabel)))));
 };
 
 export { Expander as default };

package/build/es/components/Floater/Floater.js

@@ -2,21 +2,43 @@ import { __rest } from 'tslib';
 import React__default from 'react';
 import { styled } from 'styled-components';
 
-const getInset = ({ position, offset, }) => {
-    const insetConfig = {
-        top: [offset, 'auto', 'auto'],
-        bottom: ['auto', 'auto', offset],
-    };
-    return `inset: ${insetConfig[position].join(' ')};`;
+const getInset = ({
+  position,
+  offset
+}) => {
+  const insetConfig = {
+    top: [offset, 'auto', 'auto'],
+    bottom: ['auto', 'auto', offset]
+  };
+  return `inset: ${insetConfig[position].join(' ')};`;
 };
-const Element = styled.div `
-    position: sticky;
-    ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex}`};
-    ${({ $position = 'top', $offset }) => getInset({ position: $position, offset: $offset })}
-`;
-const Floater = (_a) => {
-    var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default.createElement(Element, { id: props.id, "$position": position, "$offset": offset, "$zIndex": props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+const Element = styled.div.withConfig({
+  displayName: "Floater__Element",
+  componentId: "sc-1fejuld-0"
+})(["position:sticky;", ";", ""], ({
+  $zIndex
+}) => $zIndex && `z-index: ${$zIndex}`, ({
+  $position = 'top',
+  $offset
+}) => getInset({
+  position: $position,
+  offset: $offset
+}));
+const Floater = _a => {
+  var {
+      position = 'top',
+      offset = '0',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["position", "offset", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(Element, {
+    id: props.id,
+    "$position": position,
+    "$offset": offset,
+    "$zIndex": props.zIndex,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.children);
 };
 
 export { Floater as default };

package/build/es/components/Footer/Components/FooterComponents.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ApplicationLinksProps, BottomSectionProps, CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps } from '../types/footerProps';
-export declare const LangLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+export declare const LangLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isActive"> & {
     $isActive?: boolean;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "$isActive"> & {
+    $isActive?: boolean;
+}, never>>> & string;
 export declare const TopSection: ({ topSection }: FooterNavigationProps) => React.JSX.Element;
 export declare const Categories: ({ categories }: CategoriesComponentProps) => React.JSX.Element;
 export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element;