@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/cjs/components/Carousel/Carousel.js

@@ -0,0 +1,313 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var icons = require('@dnanpm/icons');
+var React = require('react');
+var useWindowSize = require('../../hooks/useWindowSize.js');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var ButtonArrow = require('../Button/ButtonArrow.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const CarouselWrapper = styled["default"].div ``;
+const Header = styled["default"].div `
+    display: flex;
+    justify-content: space-between;
+    gap: 1.25rem;
+    margin-bottom: 1.25rem;
+`;
+const Title = styled["default"].h2 `
+    margin: 0;
+`;
+const Navigation = styled["default"].div `
+    display: inline-flex;
+    margin-left: auto;
+    gap: 0.625rem;
+`;
+const Content = styled["default"].div `
+    position: relative;
+    overflow: hidden;
+    touch-action: pan-y;
+`;
+const SlidesWrapper = styled["default"].div `
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    gap: ${({ gap }) => gap}rem;
+    transition-property: transform;
+    transform: translate3d(0px, 0, 0);
+    transition-duration: 0ms;
+    transition-delay: 0ms;
+    user-select: none;
+`;
+const SlideItem = styled["default"].div `
+    display: block;
+    position: relative;
+    flex-shrink: 0;
+    flex-basis: calc(
+        ${({ visibleItems, itemWidthCorrection }) => `(100% / ${visibleItems}) - ${itemWidthCorrection}px`}
+    );
+`;
+const Footer = styled["default"].div `
+    ${styledUtils.media.md `
+        display: grid;
+        grid-template-columns: [whitespace] 1fr [pagination] auto [footerButton] 1fr;
+        gap: 2rem;
+        margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)} 0;
+        align-items: center;
+    `};
+`;
+const Pagination = styled["default"].div `
+    display: none;
+
+    ${styledUtils.media.md `
+        display: flex;
+        grid-column: pagination;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem 1rem;
+        width: 100%;
+    `};
+`;
+const PaginationItem = styled["default"].button `
+    display: inline-block;
+    cursor: pointer;
+    width: 2rem;
+    height: 1rem;
+    border-radius: ${theme["default"].radius.pill};
+    border: 2px solid ${theme["default"].color.line.L01};
+    background-color: ${theme["default"].color.background.white.default};
+    transition: all 0.2s ease-in-out;
+
+    ${({ isActive }) => isActive &&
+    `
+        width: 3rem;
+        border-color: ${theme["default"].color.default.pink};
+        background-color: ${theme["default"].color.background.pink.default};
+    `}
+
+    &:focus {
+        border: 2px solid ${theme["default"].color.focus.light};
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        outline: none;
+    }
+
+    &:hover {
+        border-color: ${theme["default"].color.default.pink};
+    }
+`;
+const Scrollbar = styled["default"].div `
+    width: 100%;
+    height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.6)};
+    margin: 1rem 0;
+    border-radius: ${theme["default"].radius.pill};
+    background-color: ${theme["default"].color.background.sand.E02};
+    user-select: none;
+    touch-action: pan-y;
+
+    ${styledUtils.media.md `
+        display: none;
+    `};
+`;
+const Knob = styled["default"].div `
+    position: relative;
+    top: 0;
+    left: 0;
+    width: calc(100% / ${({ knobSize }) => knobSize});
+    height: 100%;
+    border-radius: ${theme["default"].radius.pill};
+    background-color: ${theme["default"].color.background.pink.default};
+    transform: translate3d(0px, 0, 0);
+    transition-duration: 0ms;
+    transition-delay: 0ms;
+    user-select: none;
+`;
+const FooterButton = styled["default"].div `
+    grid-column: footerButton;
+    text-align: right;
+`;
+/** @visibleName Carousel */
+const Carousel = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const slidesWrapperRef = React.useRef(null);
+    const scrollbarRef = React.useRef(null);
+    const knobRef = React.useRef(null);
+    const { isMobile } = useWindowSize["default"](theme["default"].breakpoints.md);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+    const visibleItems = props.visibleItems || (isMobile ? 1.2 : 1);
+    const slidesWrapperGapSizePx = 20;
+    const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
+        ? (visibleItems - 1) / visibleItems
+        : Math.floor(visibleItems) / visibleItems;
+    const itemWidthCorrection = itemWidthCorrectionRatio * slidesWrapperGapSizePx;
+    const data = React.useMemo(() => ({
+        startX: 0,
+        startTime: 0,
+        startTransform: 0,
+        currentTransform: 0,
+        knobStartTransform: 0,
+        knobCurrentTransform: 0,
+        direction: 0,
+        itemWidth: 0,
+        lastItemX: 0,
+        scrollWidth: 0,
+        scrollbarNavigation: false,
+        scrollbarToSlidesRatio: 1,
+    }), []);
+    const getElementTransform = (element) => {
+        const matrix = new DOMMatrix(window.getComputedStyle(element).transform);
+        return matrix.m41 || 0;
+    };
+    const setElementTransform = (element, transform, delay) => {
+        if (element.current) {
+            element.current.style.setProperty('transition-duration', `${delay !== null && delay !== void 0 ? delay : 300}ms`);
+            element.current.style.setProperty('transform', `translate3d(${Number.isNaN(transform) ? 0 : transform}px, 0px, 0px)`);
+        }
+    };
+    const handleSetCurrentIndex = (index) => {
+        if (index === currentIndex) {
+            setElementTransform(slidesWrapperRef, data.startTransform);
+            setElementTransform(knobRef, data.knobStartTransform);
+        }
+        else if (index < 0) {
+            setCurrentIndex(0);
+            setElementTransform(slidesWrapperRef, 0);
+        }
+        else if (index > slideScreensCount - 1) {
+            setCurrentIndex(slideScreensCount - 1);
+            setElementTransform(slidesWrapperRef, data.startTransform);
+        }
+        else {
+            setCurrentIndex(index);
+        }
+    };
+    const handleNavigationButtonPreviousClick = () => {
+        handleSetCurrentIndex(currentIndex - 1);
+    };
+    const handleNavigationButtonNextClick = () => {
+        handleSetCurrentIndex(currentIndex + 1);
+    };
+    const handlePaginationItemClick = (e) => {
+        if (e.currentTarget.parentElement) {
+            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+        }
+    };
+    const handlePointerMove = (e) => {
+        const diff = e.pageX - data.startX;
+        if (Math.abs(diff) < 5) {
+            return;
+        }
+        data.currentTransform =
+            diff * (data.scrollbarNavigation ? data.scrollbarToSlidesRatio * -1 : 1) +
+                data.startTransform;
+        data.knobCurrentTransform =
+            diff / (data.scrollbarNavigation ? 1 : data.scrollbarToSlidesRatio * -1) +
+                data.knobStartTransform;
+        data.direction = Math.sign(diff) * (data.scrollbarNavigation ? 1 : -1);
+        if (currentIndex <= 0) {
+            if (data.currentTransform > 0) {
+                data.currentTransform = -1 + Math.pow((data.startTransform + diff), 0.85);
+            }
+        }
+        else if (currentIndex + Math.ceil(visibleItems) >= React.Children.count(props.children)) {
+            if (data.currentTransform < -data.lastItemX) {
+                data.currentTransform =
+                    -data.lastItemX + 1 - Math.pow((-data.lastItemX - data.startTransform - diff), 0.85);
+            }
+        }
+        if (data.knobCurrentTransform < 0) {
+            data.knobCurrentTransform = 0;
+        }
+        if (data.knobCurrentTransform > data.lastItemX / data.scrollbarToSlidesRatio) {
+            data.knobCurrentTransform = data.lastItemX / data.scrollbarToSlidesRatio;
+        }
+        setElementTransform(slidesWrapperRef, data.currentTransform, 0);
+        setElementTransform(knobRef, data.knobCurrentTransform, 0);
+    };
+    const handlePointerUp = (e) => {
+        const endTime = Date.now();
+        if (endTime - data.startTime > 300) {
+            const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
+            if (swipeRatio >= 0.5) {
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+            }
+            else {
+                handleSetCurrentIndex(currentIndex);
+            }
+        }
+        else {
+            handleSetCurrentIndex(currentIndex + data.direction);
+        }
+        if (data.scrollbarNavigation && data.direction === 0) {
+            if (knobRef.current) {
+                handleSetCurrentIndex(currentIndex +
+                    Math.round((e.pageX -
+                        knobRef.current.getBoundingClientRect().x -
+                        knobRef.current.offsetWidth / 2) /
+                        knobRef.current.offsetWidth));
+            }
+        }
+        document.removeEventListener('pointermove', handlePointerMove);
+        document.removeEventListener('pointerup', handlePointerUp);
+    };
+    const handleSlidesPointerDown = (e) => {
+        if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
+            data.startX = e.pageX;
+            data.startTime = Date.now();
+            data.startTransform = getElementTransform(slidesWrapperRef.current);
+            data.scrollbarNavigation = Boolean(e.currentTarget === scrollbarRef.current);
+            data.knobStartTransform = getElementTransform(knobRef.current);
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+        }
+    };
+    const handleScrollbarPointerDown = (e) => {
+        handleSlidesPointerDown(e);
+    };
+    React.useEffect(() => {
+        if (slidesWrapperRef.current && scrollbarRef.current) {
+            const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
+            data.itemWidth =
+                slidesWrapperRef.current.offsetWidth / visibleItems - itemWidthCorrection;
+            data.scrollWidth = slidesWrapperRef.current.scrollWidth;
+            data.lastItemX =
+                (data.itemWidth + slidesWrapperGapSizePx) *
+                    (React.Children.count(props.children) - visibleItems) -
+                    (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
+            data.scrollbarToSlidesRatio =
+                data.lastItemX /
+                    (scrollbarRef.current.offsetWidth -
+                        scrollbarRef.current.offsetWidth / slideScreensCount);
+            const slidesTransform = data.itemWidth * currentIndex +
+                slidesWrapperGapSizePx * currentIndex -
+                (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
+            setElementTransform(slidesWrapperRef, -slidesTransform);
+            setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
+        }
+    }, [currentIndex, data, itemWidthCorrection, props.children, slideScreensCount, visibleItems]);
+    return (React__default["default"].createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
+            props.title && React__default["default"].createElement(Title, null, props.title),
+            React__default["default"].createElement(Navigation, null,
+                React__default["default"].createElement(ButtonArrow["default"], { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
+                React__default["default"].createElement(ButtonArrow["default"], { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
+        React__default["default"].createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
+            React__default["default"].createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default["default"].createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection }, child))))),
+        React__default["default"].createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
+            React__default["default"].createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default["default"].createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default["default"].createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
+                React__default["default"].createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
+            props.footerButton && (React__default["default"].createElement(FooterButton, null,
+                React__default["default"].createElement(ButtonIcon["default"], { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
+};
+
+exports["default"] = Carousel;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Text of the label shown next to checkbox
+     */
+    label: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: boolean;
+    /**
+     * On checkbox change callback
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * Allows to disable the checkbox
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to set checkbox as mandatory
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Allows to set checkbox to error state
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text of the error message when checkbox is in error state
+     */
+    errorMessage?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Checkbox: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Checkbox;

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

@@ -13,19 +13,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
-const SVGIconData = () => {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
-        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
-        `</svg>`;
-    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
-};
+// TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
+const SVGIconData = () => {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
+        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
+        `</svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+};
 const Container = styled["default"].div `
     display: flex;
     font-size: ${theme["default"].fontSize.default};
     line-height: ${theme["default"].lineHeight.default};
     margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
-`;
+`;
 const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
     position: relative;
     top: ${styledUtils.getDividedSize(theme["default"].base.baseWidth, 5)};
@@ -37,31 +37,31 @@ const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
             background-image: url('${SVGIconData}');
         }
     }
-`;
+`;
 const Mandatory = styled["default"].span `
     color: ${theme["default"].color.default.pink};
     margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
-`;
+`;
 const ErrorMessage = styled["default"].div `
     font-size: ${theme["default"].fontSize.s};
     line-height: ${theme["default"].lineHeight.s};
     color: ${theme["default"].color.notification.error};
     margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
-`;
-const Checkbox = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const handleChange = () => {
-        if (props.onChange && !props.disabled) {
-            props.onChange(!props.value);
-        }
-    };
-    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), "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, "*"))),
-        props.error && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+`;
+const Checkbox = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const handleChange = () => {
+        if (props.onChange && !props.disabled) {
+            props.onChange(!props.value);
+        }
+    };
+    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), "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, "*"))),
+        props.error && props.errorMessage && (React__default["default"].createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
 };
 
 exports["default"] = Checkbox;

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

@@ -0,0 +1,50 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ChipType = 'default' | 'info' | 'success' | 'warning' | 'error';
+type ChipVariant = 'outlined' | 'filled';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Allows to change the color styling of component, depending on the passed type
+     *
+     * @param {ChipType} default Uses `theme.color.line.L01` color for styling
+     * @param {ChipType} info Uses `theme.color.notification.info` color for styling
+     * @param {ChipType} success Uses `theme.color.notification.success` color for styling
+     * @param {ChipType} warning Uses `theme.color.notification.warning` color for styling
+     * @param {ChipType} error Uses `theme.color.notification.error` color for styling
+     *
+     * @default 'default'
+     */
+    type?: ChipType;
+    /**
+     * Allows to change the appearance styling of component, depending on passed variant
+     *
+     * @param {ChipVariant} outlined Displays the component with border color depending on the `type` property
+     * @param {ChipVariant} filled Displays the component with background color depending on the `type` property
+     *
+     * @default 'outlined'
+     */
+    variant?: ChipVariant;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * On component click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Chip: ({ type, variant, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Chip;

package/build/cjs/components/Chip/Chip.js

@@ -13,13 +13,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getStyling = ({ $type, $variant, }) => {
-    const stylingColor = $type === 'default' ? theme["default"].color.line.L01 : theme["default"].color.notification[$type];
-    const border = `border: 2px solid ${stylingColor};`;
-    const background = `background-color: ${$variant === 'outlined' ? theme["default"].color.background.white.default : stylingColor};`;
-    const color = `color: ${$variant === 'outlined' ? theme["default"].color.text.black : theme["default"].color.text.white};`;
-    return `${border}${background}${color}`;
-};
+const getStyling = ({ $type, $variant, }) => {
+    const stylingColor = $type === 'default' ? theme["default"].color.line.L01 : theme["default"].color.notification[$type];
+    const border = `border: 2px solid ${stylingColor};`;
+    const background = `background-color: ${$variant === 'outlined' ? theme["default"].color.background.white.default : stylingColor};`;
+    const color = `color: ${$variant === 'outlined' ? theme["default"].color.text.black : theme["default"].color.text.white};`;
+    return `${border}${background}${color}`;
+};
 const Element = styled__default["default"].div `
     display: inline-block;
     border-radius: ${theme["default"].radius.pill};
@@ -31,10 +31,10 @@ const Element = styled__default["default"].div `
     ${({ onClick }) => onClick && `cursor: pointer`};
 
     ${({ $type, $variant }) => getStyling({ $type, $variant })}
-`;
-const Chip = (_a) => {
-    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
-    return (React__default["default"].createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Chip = (_a) => {
+    var { type = 'default', variant = 'outlined', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", "variant", 'data-testid']);
+    return (React__default["default"].createElement(Element, { id: props.id, "$type": type, "$variant": variant, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = Chip;

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

@@ -0,0 +1,114 @@
+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;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
+    /**
+     * 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 clear the selected date
+     */
+    isClearable?: 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;