@dnanpm/styleguide 3.10.0 → 3.11.0

package/build/es/components/Textarea/Textarea.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default, { useRef } from 'react';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import LabelText from '../LabelText/LabelText.js';
@@ -54,7 +54,7 @@ const ErrorMessage = styled(Message) `
     color: ${theme.color.notification.error};
 `;
 const Textarea = (_a) => {
-    var { height = 3, 'data-testid': dataTestId } = _a, props = __rest(_a, ["height", 'data-testid']);
+    var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["height", 'data-testid', "ariaLabel"]);
     const inputRef = useRef(null);
     const handleOnBlur = (e) => {
         if (props.onBlur) {
@@ -72,11 +72,14 @@ const Textarea = (_a) => {
             inputRef.current.focus();
         }
     };
+    const errorId = props.status === 'error' && props.errorMessage ? `${props.id}-error` : undefined;
+    const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
+    const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
     return (React__default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-disabled": props.disabled, "aria-label": props.id, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-describedby": describedBy, "data-testid": dataTestId }),
+        props.commentMessage && (React__default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
+        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 export { Textarea as default };

package/build/es/components/Toaster/Toaster.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { Close, Info, Check, Warning, Error } from '@dnanpm/icons';
 import React__default from 'react';
-import styled__default from 'styled-components';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
@@ -14,10 +14,10 @@ const iconsMap = {
     warning: Warning,
     error: Error,
 };
-const ToasterWrapper = styled__default.div `
+const ToasterWrapper = styled.div `
     width: 300px;
 `;
-const StyledBox = styled__default(Box) `
+const StyledBox = styled(Box) `
     position: relative;
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.medium};
@@ -27,7 +27,7 @@ const StyledBox = styled__default(Box) `
     align-items: center;
     padding-right: ${getMultipliedSize(theme.base.baseWidth, 4.5)};
 `;
-const IconWrapper = styled__default.div `
+const IconWrapper = styled.div `
     display: none;
     align-items: center;
     width: ${getMultipliedSize(theme.base.baseWidth, 4)};
@@ -37,10 +37,10 @@ const IconWrapper = styled__default.div `
         display: flex;
     `}
 `;
-const ContentWrapper = styled__default.div `
+const ContentWrapper = styled.div `
     flex: 1;
 `;
-const ButtonCloseStyled = styled__default(ButtonClose) `
+const ButtonCloseStyled = styled(ButtonClose) `
     display: flex;
     top: auto;
 `;

package/build/es/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import { __rest } from 'tslib';
 import { Info } from '@dnanpm/icons';
 import React__default from 'react';
 import { Tooltip as Tooltip$1 } from 'react-tooltip';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import getElevationShadow from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
@@ -30,7 +30,7 @@ const Helper = styled.button `
         border-radius: 100%;
     }
 
-    ${({ isClickable }) => isClickable && `cursor: pointer`};
+    ${({ $isClickable }) => $isClickable && `cursor: pointer`};
 `;
 const getArrowOverrides = () => {
     const arrowConfig = {
@@ -99,9 +99,9 @@ const Tooltip = (_a) => {
         scroll: true,
     };
     return (React__default.createElement(React__default.Fragment, null,
-        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
             React__default.createElement(Icon, { icon: Info, size: "1rem", position: props.position, "aria-hidden": true }))),
-        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
 };
 
 export { Tooltip as default };

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -1,340 +1,10 @@
-export declare const Tail: import("styled-components").StyledComponent<"div", {
-    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;
-    };
-}, {
+export declare const Tail: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     tooltipTop: string;
     zIndex: string;
     arrowPosition: string;
-}, never>;
-export declare const TailShadow: import("styled-components").StyledComponent<"div", {
-    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;
-    };
-}, {
+}>> & string;
+export declare const TailShadow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     tooltipTop: string;
     zIndex: string;
     arrowPosition: string;
-}, never>;
+}>> & string;

package/build/es/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -1,4 +1,5 @@
-import styled from '../../../themes/styled.js';
+import { styled } from 'styled-components';
+import theme from '../../../themes/theme.js';
 
 // Tooltip corner tail
 const Tail = styled.div `
@@ -24,7 +25,7 @@ const TailShadow = styled.div `
     z-index: ${p => Number(p.zIndex) + 1};
     right: ${p => p.arrowPosition};
     background-color: transparent;
-    box-shadow: 0 0 5px 0 ${p => p.theme.color.default.black};
+    box-shadow: 0 0 5px 0 ${theme.color.default.black};
 `;
 
 export { Tail, TailShadow };

package/build/es/components/TooltipMenu/TooltipMenu.js

@@ -1,7 +1,7 @@
 import { ChevronDown } from '@dnanpm/icons';
 import React__default, { useState, useRef } from 'react';
 import useOutsideClick from '../../hooks/useOutsideClick.js';
-import styled from '../../themes/styled.js';
+import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import Icon from '../Icon/Icon.js';
 import { TailShadow, Tail } from './ChildComponents/TooltipMenuExportedStyles.js';

package/build/es/index.d.ts

@@ -1,6 +1,6 @@
 export * from './components';
 export { default as createStyled } from './utils/createStyled';
-export { default as styled } from './themes/styled';
+export { styled } from './themes/styled';
 export { default as theme } from './themes/theme';
 export { globalStyles } from './themes/globalStyles';
 export { default as navigation } from './themes/themeComponents/navigation';

package/build/es/index.js

@@ -161,7 +161,7 @@ export { default as Toaster } from './components/Toaster/Toaster.js';
 export { default as Tooltip } from './components/Tooltip/Tooltip.js';
 export { default as TooltipMenu } from './components/TooltipMenu/TooltipMenu.js';
 export { default as createStyled } from './utils/createStyled.js';
-export { default as styled } from './themes/styled.js';
+export { styled } from 'styled-components';
 export { default as theme } from './themes/theme.js';
 export { globalStyles } from './themes/globalStyles.js';
 export { default as navigation } from './themes/themeComponents/navigation.js';