@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/cjs/components/Drawer/Drawer.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactModal = require('react-modal');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var common = require('../../utils/common.js');
 var styledUtils = require('../../utils/styledUtils.js');
@@ -28,12 +28,12 @@ const animationMap = {
     medium: ['0.5', '0.3'],
     large: ['0.6', '0.4'],
 };
-const GlobalStyle = styled.createGlobalStyle `
+const GlobalStyle = styledComponents.createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
     }
 `;
-const slideOut = (side) => styled.keyframes `
+const slideOut = (side) => styledComponents.keyframes `
     0% {
         transform: translateX(0%);
     }
@@ -41,12 +41,12 @@ const slideOut = (side) => styled.keyframes `
         transform: translateX(${side === 'left' && '-'}100%);
     }
 `;
-const slideIn = styled.keyframes `
+const slideIn = styledComponents.keyframes `
     100% {
         transform: translateX(0%);
     }
 `;
-const StyledReactModal = styled.default(ReactModal__default.default) `
+const StyledReactModal = styledComponents.styled(ReactModal__default.default) `
     position: fixed;
     top: 0;
     ${({ side }) => (side === 'left' ? 'left: 0' : 'right: 0')};
@@ -66,7 +66,7 @@ const StyledReactModal = styled.default(ReactModal__default.default) `
         width: 100vw;
     }
 `;
-const StyledReactModalOverlay = styled.default.div `
+const StyledReactModalOverlay = styledComponents.styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
@@ -104,12 +104,12 @@ const StyledReactModalOverlay = styled.default.div `
         }
     }
 `;
-const StyledReactModalContent = styled.default.div `
+const StyledReactModalContent = styledComponents.styled.div `
     &:focus {
         outline: none;
     }
 `;
-const StyledBox = styled.default(Box.default) `
+const StyledBox = styledComponents.styled(Box.default) `
     display: flex;
     flex-direction: column;
     border-radius: 0;
@@ -117,19 +117,19 @@ const StyledBox = styled.default(Box.default) `
     position: relative;
     border: 0;
 `;
-const ContentContainer = styled.default.div `
+const ContentContainer = styledComponents.styled.div `
     flex: 1 1 auto;
     overflow: auto;
     display: flex;
     flex-direction: column;
 `;
-const Header = styled.default.div `
+const Header = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     border-bottom: 1px solid ${theme.default.color.line.L03};
     padding: 1.25rem;
-    background-color: ${({ variant }) => variant === 'light'
+    background-color: ${({ $variant }) => $variant === 'light'
     ? theme.default.color.background.white.default
     : theme.default.color.background.plum.E02};
     width: 100%;
@@ -139,16 +139,16 @@ const Header = styled.default.div `
         margin: 0;
     }
 `;
-const Title = styled.default.h2 `
-    font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
-    line-height: ${({ size }) => (size === 'small' ? theme.default.lineHeight.h2S : theme.default.lineHeight.h2M)};
-    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
+const Title = styledComponents.styled.h2 `
+    font-size: ${({ $size }) => ($size === 'small' ? theme.default.fontSize.h2S : theme.default.fontSize.h2M)};
+    line-height: ${({ $size }) => $size === 'small' ? theme.default.lineHeight.h2S : theme.default.lineHeight.h2M};
+    color: ${({ $variant }) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
-const Subtitle = styled.default.p `
-    font-size: ${({ size }) => (size === 'small' ? theme.default.fontSize.l : theme.default.fontSize.xl)};
-    color: ${({ variant }) => variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
+const Subtitle = styledComponents.styled.p `
+    font-size: ${({ $size }) => ($size === 'small' ? theme.default.fontSize.l : theme.default.fontSize.xl)};
+    color: ${({ $variant }) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};
 `;
-const CloseButton = styled.default(ButtonClose.default) `
+const CloseButton = styledComponents.styled(ButtonClose.default) `
     margin: 0;
     padding: 0.5rem;
     border-radius: 0 0 0 ${theme.default.radius.default};
@@ -156,11 +156,11 @@ const CloseButton = styled.default(ButtonClose.default) `
     ? theme.default.color.background.sand.E01
     : theme.default.color.background.plum.default};
 `;
-const Content = styled.default.div `
-    padding: ${({ padding }) => padding};
+const Content = styledComponents.styled.div `
+    padding: ${({ $padding }) => $padding};
     margin: 0;
 `;
-const Footer = styled.default.div `
+const Footer = styledComponents.styled.div `
     padding: 1.25rem;
     margin: 0;
     width: 100%;
@@ -180,14 +180,14 @@ const Drawer = (_a) => {
         React__default.default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, closeTimeoutMS: 300, size: size, side: side },
             React__default.default.createElement(StyledBox, { "data-testid": dataTestId, elevation: "extraHigh", margin: props.margin, padding: "0" },
                 React__default.default.createElement(ContentContainer, null,
-                    React__default.default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` },
-                        React__default.default.createElement(Title, { size: size, variant: variant }, props.title),
-                        props.subtitle && (React__default.default.createElement(Subtitle, { size: size, variant: variant }, props.subtitle))),
+                    React__default.default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` },
+                        React__default.default.createElement(Title, { "$size": size, "$variant": variant }, props.title),
+                        props.subtitle && (React__default.default.createElement(Subtitle, { "$size": size, "$variant": variant }, props.subtitle))),
                     closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
                         React__default.default.createElement(icons.Close, { color: variant === 'light'
                                 ? theme.default.color.default.plum
                                 : theme.default.color.default.white }))),
-                    React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, padding: padding }, props.children)),
+                    React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content`, "$padding": padding }, props.children)),
                 props.footer && (React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.default.createElement(GlobalStyle, null)));
 };

package/build/cjs/components/EmptyState/EmptyState.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ContentWrapper = styled.default.div `
+const ContentWrapper = styledComponents.styled.div `
     display: grid;
     grid-gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
     justify-items: center;

package/build/cjs/components/EnergyLabel/EnergyLabel.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var React = require('react');
 var icons = require('@dnanpm/icons');
 var Modal = require('../Modal/Modal.js');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var styledUtils = require('../../utils/styledUtils.js');
 var Button = require('../Button/Button.js');
 var theme = require('../../themes/theme.js');
@@ -16,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const ERROR_IMAGE = 'https://res.cloudinary.com/dnaoyj/image/upload/v1731073400/Assets/KLT/Enriched%20icons/enriched-error-state.png';
-const ButtonElement = styled.default.button `
+const ButtonElement = styledComponents.styled.button `
     display: flex;
     align-items: center;
     justify-content: center;
@@ -25,7 +25,7 @@ const ButtonElement = styled.default.button `
     padding: 0;
     cursor: pointer;
 `;
-const StyledModal = styled.default(Modal.default) `
+const StyledModal = styledComponents.styled(Modal.default) `
     > div > div {
         max-height: 100%;
         height: 100%;
@@ -43,16 +43,16 @@ const StyledModal = styled.default(Modal.default) `
         }
     }
 `;
-const ModalLabel = styled.default.p `
+const ModalLabel = styledComponents.styled.p `
     font-size: ${theme.default.fontSize.s};
     margin: 0;
 `;
-const ButtonContent = styled.default.span `
+const ButtonContent = styledComponents.styled.span `
     display: inline-flex;
     align-items: center;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
 `;
-const ErrorContainer = styled.default.div `
+const ErrorContainer = styledComponents.styled.div `
     display: flex;
     padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
     flex-direction: column;
@@ -61,8 +61,8 @@ const ErrorContainer = styled.default.div `
     flex-direction: column;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
 `;
-const Image = styled.default.img `
-    width: ${p => p.imgWidth};
+const Image = styledComponents.styled.img `
+    width: ${p => p.$imgWidth};
 `;
 /** @visibleName Energy Label */
 const EnergyLabel = (_a) => {
@@ -86,12 +86,12 @@ const EnergyLabel = (_a) => {
     }
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(ButtonElement, { onClick: handleOpen, "aria-label": props.ariaLabel, "data-testid": dataTestId, id: props.id, className: props.className },
-            React__default.default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, imgWidth: "55px", onError: () => setImgError(true) })),
+            React__default.default.createElement(Image, { src: props.badgeSrc, alt: "", "aria-hidden": true, "$imgWidth": "55px", onError: () => setImgError(true) })),
         React__default.default.createElement(StyledModal, { appElement: modalAppElement, isOpen: isOpen, onRequestClose: handleClose, title: props.modalTitle, closeLabel: props.closeButtonLabel, footer: renderFooter() }, hasError || !props.modalImageSrc ? (React__default.default.createElement(ErrorContainer, null,
             React__default.default.createElement("h3", null, props.errorTitle),
-            React__default.default.createElement(Image, { src: ERROR_IMAGE, alt: "", imgWidth: "160px" }),
+            React__default.default.createElement(Image, { src: ERROR_IMAGE, alt: "", "$imgWidth": "160px" }),
             React__default.default.createElement("p", null, props.errorLabel))) : (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(Image, { src: props.modalImageSrc, alt: "", imgWidth: "100%", onError: () => setHasError(true) }),
+            React__default.default.createElement(Image, { src: props.modalImageSrc, alt: "", "$imgWidth": "100%", onError: () => setHasError(true) }),
             React__default.default.createElement(ModalLabel, null, props.modalLabel))))));
 };
 

package/build/cjs/components/Expander/Expander.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var styled = require('../../themes/styled.js');
+var styledComponents = require('styled-components');
 var theme = require('../../themes/theme.js');
 var ButtonIcon = require('../ButtonIcon/ButtonIcon.js');
 
@@ -13,11 +13,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Container = styled.default.div `
+const Container = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
 `;
-const StyledButtonIcon = styled.default(ButtonIcon.default) `
+const StyledButtonIcon = styledComponents.styled(ButtonIcon.default) `
     color: ${theme.default.color.text.pink};
     align-self: flex-end;
 
@@ -30,12 +30,12 @@ const StyledButtonIcon = styled.default(ButtonIcon.default) `
         color: ${theme.default.color.text.pink};
     }
 `;
-const ContentWrapper = styled.default.div `
+const ContentWrapper = styledComponents.styled.div `
     display: flex;
     flex-direction: column;
     margin: 0.625rem 0;
 `;
-const Content = styled.default.div `
+const Content = styledComponents.styled.div `
     padding: 0.625rem 0;
 `;
 const Expander = (_a) => {

package/build/cjs/components/Floater/Floater.js

@@ -4,28 +4,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var styled = require('styled-components');
+var styledComponents = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const getInset = ({ position, offset }) => {
+const getInset = ({ position, offset, }) => {
     const insetConfig = {
         top: [offset, 'auto', 'auto'],
         bottom: ['auto', 'auto', offset],
     };
     return `inset: ${insetConfig[position].join(' ')};`;
 };
-const Element = styled__default.default.div `
+const Element = styledComponents.styled.div `
     position: sticky;
     ${({ zIndex }) => zIndex && `z-index: ${zIndex}`};
-    ${({ position, offset }) => getInset({ position, offset })}
+    ${({ $position, offset }) => getInset({ position: $position, offset })}
 `;
 const Floater = (_a) => {
     var { position = 'top', offset = '0', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "offset", 'data-testid']);
-    return (React__default.default.createElement(Element, { id: props.id, position: position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
+    return (React__default.default.createElement(Element, { id: props.id, "$position": position, offset: offset, zIndex: props.zIndex, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports.default = Floater;

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

@@ -1,173 +1,8 @@
 import React from 'react';
 import type { ApplicationLinksProps, BottomSectionProps, CategoriesComponentProps, FooterNavigationProps, GeneralInformationComponentProps } from '../types/footerProps';
-export declare const LangLink: import("styled-components").StyledComponent<"a", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    isActive?: boolean;
-}, never>;
+export declare const LangLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $isActive?: boolean;
+}>> & 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;