@dnanpm/styleguide 3.1.0 → 3.3.0

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ButtonProps } from './Button';
 type ButtonArrowDirection = 'up' | 'right' | 'down' | 'left';
@@ -7,10 +8,10 @@ type Props = ({
      * Allows to change the direction of chevron icon.
      * Either `direction` or `icon` has to be defined
      *
-     * @param {ButtonArrowDirection} up Uses `hlChevronUp` icon as content of component
-     * @param {ButtonArrowDirection} right Uses `hlChevronRight` icon as content of component
-     * @param {ButtonArrowDirection} down Uses `hlChevronDown` icon as content of component
-     * @param {ButtonArrowDirection} left Uses `hlChevronLeft` icon as content of component
+     * @param {ButtonArrowDirection} up Uses `ChevronUp` icon as content of component
+     * @param {ButtonArrowDirection} right Uses `ChevronRight` icon as content of component
+     * @param {ButtonArrowDirection} down Uses `ChevronDown` icon as content of component
+     * @param {ButtonArrowDirection} left Uses `ChevronLeft` icon as content of component
      */
     direction: ButtonArrowDirection;
     icon?: never;
@@ -21,7 +22,7 @@ type Props = ({
      *
      * @type Icon | undefined
      */
-    icon: React.ReactNode;
+    icon: ReactNode;
     direction?: never;
 }) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
     /**

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

@@ -3,15 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronLeft = require('../Icons/hlChevronLeft.js');
-var hlChevronRight = require('../Icons/hlChevronRight.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
 var ButtonPrimary = require('./ButtonPrimary.js');
 var ButtonSecondary = require('./ButtonSecondary.js');
 
@@ -21,10 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const iconsMap = {
-    up: hlChevronUp["default"],
-    right: hlChevronRight["default"],
-    down: hlChevronDown["default"],
-    left: hlChevronLeft["default"],
+    up: icons.ChevronUp,
+    right: icons.ChevronRight,
+    down: icons.ChevronDown,
+    left: icons.ChevronLeft,
 };
 const overrideStyles = `
     display: flex;
@@ -76,9 +73,7 @@ const buttonsMap = {
 const ButtonArrow = (_a) => {
     var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
     const Element = buttonsMap[variant];
-    return (React__default["default"].createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.direction], size: "1rem" })) : (React__default["default"].isValidElement(props.icon) &&
-        props.icon.type === Icon["default"] &&
-        props.icon)));
+    return (React__default["default"].createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon["default"] && props.icon)));
 };
 
 exports["default"] = ButtonArrow;

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

@@ -5,7 +5,7 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
     /**
      * Icon shown in icon button component
      *
-     * @default `hlPen`
+     * @default `EditUnderline`
      */
     icon?: IconProps['icon'];
     /**

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('styled-components');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-var hlPen = require('../Icons/hlPen.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -84,7 +84,7 @@ const ButtonElement = styled__default["default"].button `
 `;
 /** @visibleName Button Icon */
 const ButtonIcon = (_a) => {
-    var { icon = hlPen["default"], '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']);
+    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 }),
         props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));

package/build/cjs/components/Checkbox/Checkbox.js

@@ -57,7 +57,7 @@ const Checkbox = (_a) => {
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Container, null,
-            React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
             React__default["default"].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default["default"].createElement(Mandatory, null, "*"))),

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

@@ -1,3 +1,4 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
 type ChipVariant = 'outlined' | 'filled';
@@ -30,11 +31,11 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * On component click callback
      */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to pass a custom className
      */

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

@@ -0,0 +1,102 @@
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import type { ReactDatePickerProps } from 'react-datepicker';
+import type { LocaleCode } from '../../types/locale.d';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id: string;
+    /**
+     * Default selected date value
+     */
+    date?: Date;
+    /**
+     * Allows to enable range picker functionality.
+     * By passing `null` as value, range picker functionality will be enabled but no value will be provided as default
+     */
+    endDate?: ReactDatePickerProps['endDate'];
+    /**
+     * Input label content
+     */
+    label?: string;
+    /**
+     * Input placeholder content
+     */
+    placeholder?: string;
+    /**
+     * Allows to change formatting of date value in input
+     *
+     * @param {LocaleCode} fi-FI Finnish (Finland)
+     * @param {LocaleCode} en-GB English (United Kingdom)
+     *
+     * @default 'fi-FI'
+     */
+    locale?: LocaleCode;
+    /**
+     * On datetime picker change callback
+     */
+    onChange: ReactDatePickerProps['onChange'];
+    /**
+     * On input change callback
+     */
+    onInputChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to define time intervals in time picker
+     *
+     * @default 30
+     */
+    timeInterval?: ReactDatePickerProps['timeIntervals'];
+    /**
+     * Text of the error message when input element is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to enable or disable date picker functionality
+     *
+     * @default true
+     */
+    isDatePicker?: boolean;
+    /**
+     * Allows to enable or disable time picker functionality. Ignored when endDate prop is defined
+     *
+     * @default false
+     */
+    isTimePicker?: boolean;
+    /**
+     * Allows to set input element as editable
+     *
+     * @default false
+     */
+    isEditable?: boolean;
+    /**
+     * Allows to disable the component functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Allows to set input element as mandatory
+     *
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Allows to displays error icon with `theme.color.notification.error` color in the input element and error message underneath the input
+     *
+     * @default false
+     */
+    isInError?: boolean;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName DateTime Picker */
+declare const DateTimePicker: ({ date: startDate, locale, isDatePicker, isTimePicker, timeInterval, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default DateTimePicker;

package/build/cjs/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
+var React = require('react');
+var ReactDatePicker = require('react-datepicker');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
+var Input = require('../Input/Input.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/**
+ * Customized local copy of date-fns/locale/fi object to avoid importing unnecessary libraries
+ * Contains only used and functionality wise necessary properties
+ */
+const localeData = {
+    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
+    'fi-FI': {
+        code: 'fi',
+        formatLong: {
+            date: () => 'eeee d. MMMM y',
+            time: () => 'HH.mm',
+        },
+        localize: {
+            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
+            month: (i) => [
+                'Tammikuu',
+                'Helmikuu',
+                'Maaliskuu',
+                'Huhtikuu',
+                'Toukokuu',
+                'Kesäkuu',
+                'Heinäkuu',
+                'Elokuu',
+                'Syyskuu',
+                'Lokakuu',
+                'Marraskuu',
+                'Joulukuu',
+            ][i],
+            timeCaption: 'Aika',
+        },
+        options: {
+            weekStartsOn: 1,
+            firstWeekContainsDate: 4,
+        },
+    },
+    // Use react-datepicker default language
+    'en-GB': undefined,
+};
+const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
+const Wrapper = styled__default["default"].div `
+    position: relative;
+
+    & .react-datepicker {
+        position: absolute;
+        display: flex;
+        font-size: ${theme["default"].fontSize.xs};
+        border-radius: ${theme["default"].radius.default};
+        border: 1px solid ${theme["default"].color.line.L03};
+        background-color: ${theme["default"].color.background.white.default};
+        z-index: 1;
+
+        .react-datepicker__aria-live {
+            display: none;
+        }
+    }
+
+    & .react-datepicker__month-container + .react-datepicker__time-container {
+        border-left: 1px solid ${theme["default"].color.line.L03};
+    }
+
+    & .react-datepicker__header {
+        display: flex;
+        flex-direction: column;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        color: ${theme["default"].color.text.black};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        border-bottom: 1px solid ${theme["default"].color.line.L03};
+        background-color: ${theme["default"].color.background.sand.E01};
+
+        .react-datepicker-time__header {
+            font-size: ${theme["default"].fontSize.default};
+            line-height: ${theme["default"].lineHeight.default};
+            font-weight: ${theme["default"].fontWeight.bold};
+            text-align: center;
+        }
+    }
+
+    & .react-datepicker__month,
+    .react-datepicker__time-list {
+        display: grid;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+        color: ${theme["default"].color.text.gray};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+
+        .react-datepicker__day--outside-month {
+            visibility: hidden;
+        }
+    }
+
+    & .react-datepicker__day-names,
+    & .react-datepicker__week {
+        display: flex;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.8)};
+
+        .react-datepicker__day-name,
+        .react-datepicker__day {
+            text-align: center;
+            font-weight: ${theme["default"].fontWeight.book};
+            line-height: ${theme["default"].lineHeight.default};
+            width: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.4)};
+            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.4)};
+        }
+
+        .react-datepicker__day {
+            cursor: pointer;
+            font-weight: ${theme["default"].fontWeight.book};
+            border: 1px solid transparent;
+            border-radius: ${theme["default"].radius.s};
+
+            &.react-datepicker__day--today {
+                color: ${theme["default"].color.text.pink};
+                font-weight: ${theme["default"].fontWeight.bold};
+            }
+
+            &.react-datepicker__day--in-selecting-range {
+                color: ${theme["default"].color.text.white};
+                font-weight: ${theme["default"].fontWeight.bold};
+                background-color: ${theme["default"].color.background.pink.default};
+            }
+
+            &.react-datepicker__day--selected {
+                color: ${theme["default"].color.text.white};
+                font-weight: ${theme["default"].fontWeight.bold};
+                background-color: ${theme["default"].color.background.pink.default};
+            }
+
+            &:hover {
+                color: ${theme["default"].color.text.gray};
+                font-weight: ${theme["default"].fontWeight.bold};
+                background-color: ${theme["default"].color.background.sand.E01};
+                border: 1px solid ${theme["default"].color.line.L03};
+            }
+
+            &.react-datepicker__day--selecting-range-start {
+                color: ${theme["default"].color.text.white};
+                background-color: ${theme["default"].color.background.pink.default};
+
+                &.react-datepicker__day--selecting-range-end {
+                    color: ${theme["default"].color.text.white};
+                    background-color: ${theme["default"].color.background.pink.default};
+                }
+            }
+
+            &.react-datepicker__day--selecting-range-end {
+                color: ${theme["default"].color.text.black};
+                background-color: ${theme["default"].color.background.pink.E02};
+
+                &:hover {
+                    border: 1px solid ${theme["default"].color.background.pink.E02};
+                }
+            }
+        }
+    }
+
+    & .react-datepicker__time {
+        width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 15)};
+
+        .react-datepicker__time-list {
+            padding-left: 0;
+            padding-right: 0;
+            list-style: none;
+            margin: 0;
+            gap: 0;
+            overflow-y: scroll;
+            height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 19)};
+
+            .react-datepicker__time-list-item {
+                cursor: pointer;
+                text-align: center;
+                font-weight: ${theme["default"].fontWeight.book};
+                line-height: ${theme["default"].lineHeight.h2S};
+                height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3.2)};
+
+                &.react-datepicker__time-list-item--selected {
+                    color: ${theme["default"].color.text.white};
+                    font-weight: ${theme["default"].fontWeight.bold};
+                    background-color: ${theme["default"].color.background.pink.default};
+                }
+
+                &:hover {
+                    color: ${theme["default"].color.text.gray};
+                    font-weight: ${theme["default"].fontWeight.bold};
+                    background-color: ${theme["default"].color.background.sand.E01};
+                }
+            }
+        }
+    }
+`;
+const MonthSelector = styled__default["default"].div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span.dnasg-icon > svg {
+        fill: ${theme["default"].color.text.gray};
+    }
+`;
+const CurrentMonth = styled__default["default"].div `
+    font-size: ${theme["default"].fontSize.default};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.bold};
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default["default"].createElement(MonthSelector, null,
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronLeft, onClick: decreaseMonth }),
+    React__default["default"].createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ChevronRight, onClick: increaseMonth })));
+/** @visibleName DateTime Picker */
+const DateTimePicker = (_a) => {
+    var _b;
+    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = React.useState(false);
+    const handleOnInputFocus = () => {
+        setShowReactDatePicker(true);
+    };
+    const handleOnInputChange = (_, e) => {
+        if (props.onInputChange) {
+            props.onInputChange(e);
+        }
+    };
+    const handleOnKeyDown = (e) => {
+        if (!props.isEditable &&
+            (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Clear')) {
+            props.onChange(null, e);
+        }
+    };
+    const handleClearable = (e) => {
+        props.onChange(null, e);
+    };
+    const handleOnReactDatePickerChange = (date, e) => {
+        setShowReactDatePicker(false);
+        props.onChange(date, e);
+    };
+    const handleOnReactDatePickerClickOutside = () => {
+        setShowReactDatePicker(false);
+    };
+    const formatInputValue = [startDate, props.endDate]
+        .filter(Boolean)
+        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
+        dateStyle: 'medium',
+    })), (props.endDate === undefined &&
+        isTimePicker && {
+        timeStyle: 'short',
+    }))))
+        .join(' - ');
+    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale }));
+    return (React__default["default"].createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Input["default"], { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: handleClearable, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonly: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage }),
+        showReactDatePicker && (React__default["default"].createElement(ReactDatePicker__default["default"], { inline: true, selected: startDate, startDate: startDate, endDate: props.endDate, onChange: handleOnReactDatePickerChange, selectsRange: props.endDate !== undefined, showTimeSelect: props.endDate === undefined && isTimePicker, showTimeSelectOnly: props.endDate === undefined && !isDatePicker && isTimePicker, timeCaption: (_b = localeData[locale]) === null || _b === void 0 ? void 0 : _b.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], 
+            // Used to format the date/time in internal ReactDatePicker input
+            // Currently ignored as date/time is shown in Styleguide Input instead, and formatted by using Intl.DateTimeFormat
+            dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''), renderCustomHeader: getDateTimePickerCustomHeader }))));
+};
+
+exports["default"] = DateTimePicker;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -7,7 +8,7 @@ interface Props {
     /**
      * Content of Divider component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass a custom margin
      *

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

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import React from 'react';
 type TypeEmblem = 'default' | 'white';
 type TypeLogotype = 'logotype-pink' | 'logotype-white' | 'logotype-black';
@@ -28,7 +29,7 @@ interface Props {
     /**
      * On Logo click callback
      */
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
     /**
      * Minimum protected area of a DNA logo from another element or edge is 1/4 of the height.
      * When activated, value is calculated automatically from size property.

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 type Size = 'small' | 'medium' | 'large';
@@ -13,7 +14,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to hide application from assistive screenreaders and other assistive technologies while the drawer is open
      *

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
 var React = require('react');
 var ReactModal = require('react-modal');
 var styled = require('../../themes/styled.js');
@@ -11,7 +12,6 @@ var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var ButtonClose = require('../Button/ButtonClose.js');
 var Icon = require('../Icon/Icon.js');
-var hlX = require('../Icons/hlX.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -124,7 +124,7 @@ const Drawer = (_a) => {
             React__default["default"].createElement(StyledBox, { elevation: "extraHigh", margin: props.margin, padding: props.padding, "data-testid": dataTestId },
                 props.children,
                 closeButton && isClosable && (React__default["default"].createElement(ButtonClose["default"], { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default["default"].createElement(Icon["default"], { icon: hlX["default"] }))))),
+                    React__default["default"].createElement(Icon["default"], { icon: icons.Close }))))),
         React__default["default"].createElement(GlobalStyle, null)));
 };
 

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as IconProps } from '../Icon/Icon';
 interface Props {
@@ -8,11 +9,11 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Icon shown in the component
      *
-     * @default `hlInfo`
+     * @default `Info`
      */
     icon?: IconProps['icon'];
     /**

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

@@ -3,13 +3,13 @@
 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 theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Box = require('../Box/Box.js');
 var Icon = require('../Icon/Icon.js');
-var hlInfo = require('../Icons/hlInfo.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,7 +23,7 @@ const ContentWrapper = styled["default"].div `
 `;
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
-    var { icon = hlInfo["default"], iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
+    var { icon = icons.Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["icon", "iconSize", 'data-testid']);
     return (React__default["default"].createElement(Box["default"], { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(ContentWrapper, null,
             React__default["default"].createElement(Icon["default"], { icon: icon, size: iconSize, color: theme["default"].color.default.pink }),

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 type Position = 'top' | 'bottom';
 interface Props {
@@ -27,7 +28,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass a custom className
      */