@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/es/components/PriorityNavigation/PriorityNavigation.js

@@ -19,7 +19,7 @@ const Container = styled.nav `
     ${media.md `
         border-bottom: 1px solid ${theme.color.line.L03};
     `}
-`;
+`;
 const ListsContainer = styled.div `
     display: flex;
     flex-direction: column;
@@ -34,7 +34,7 @@ const ListsContainer = styled.div `
         padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
         margin: 0 auto;
     `}
-`;
+`;
 const MobileDropdown = styled.button `
     display: flex;
     align-items: center;
@@ -48,13 +48,13 @@ const MobileDropdown = styled.button `
     line-height: ${theme.lineHeight.default};
     font-weight: ${theme.fontWeight.bold};
     border-bottom: 3px solid ${theme.color.default.pink};
-`;
+`;
 const CoreULStyles = styled.ul `
     list-style: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
-`;
+`;
 const NavigationList = styled(CoreULStyles) `
     display: flex;
     flex-direction: column;
@@ -78,7 +78,7 @@ const NavigationList = styled(CoreULStyles) `
         width: auto;
         height: 100%;
     `}
-`;
+`;
 const DropdownList = styled(CoreULStyles) `
     position: absolute;
     top: ${getMultipliedSize(theme.base.baseHeight, 6)};
@@ -99,155 +99,154 @@ const DropdownList = styled(CoreULStyles) `
     `}
 
     ${getElevationShadow({ elevation: 'low' })}
-`;
-const reducer = (state, action) => {
-    var _a, _b;
-    switch (action.type) {
-        case 'resetNavigationState': {
-            const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
-            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
-        }
-        case 'moveItemToDropdown': {
-            const lastChild = state.navigationItems[state.navigationItems.length - 1];
-            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
-                lastItemWidth: [
-                    ...state.lastItemWidth,
-                    action.payload.lastItem.offsetWidth + 40,
-                ],
-            }));
-        }
-        case 'moveItemToNavigation': {
-            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
-            const [, ...lastItemWidth] = state.lastItemWidth;
-            return {
-                navigationItems: [...state.navigationItems, firstItemFromList],
-                dropdownItems,
-                lastItemWidth,
-            };
-        }
-        default:
-            return state;
-    }
-};
-const getReactNodeText = (reactNode) => {
-    if (reactNode === null) {
-        return '';
-    }
-    switch (typeof reactNode) {
-        case 'string':
-        case 'number':
-            return reactNode.toString();
-        case 'boolean':
-            return '';
-        case 'object': {
-            if (reactNode instanceof Array) {
-                return reactNode.map(getReactNodeText).join('');
-            }
-            if ('props' in reactNode) {
-                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
-                // eslint-disable-next-line
-                return getReactNodeText(reactNode.props.children);
-            }
-            return '';
-        }
-        default:
-            return '';
-    }
-};
-/**
- * @visibleName Priority Navigation
- */
-const PriorityNavigation = (_a) => {
-    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
-    const listsContainerRef = useRef(null);
-    const navigationListRef = useRef(null);
-    const dropdownButtonRef = useRef(null);
-    const { isMobile } = useWindowSize(theme.breakpoints.md);
-    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
-    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
-    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
-    const navigationItems = useRef(new Map()).current;
-    const initialState = {
-        navigationItems: Children.toArray(props.children),
-        dropdownItems: [],
-        lastItemWidth: [],
-    };
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const checkHorizontalOverflow = useDebounce(() => {
-        var _a, _b;
-        if (navigationListRef.current && listsContainerRef.current) {
-            const navigationListWidth = navigationListRef.current.scrollWidth;
-            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
-            console.log('dropdownButtonWidth', dropdownButtonWidth);
-            if (state.navigationItems.length > 0 &&
-                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
-                dispatch({
-                    type: 'moveItemToDropdown',
-                    payload: {
-                        lastItem: navigationItems.get(state.navigationItems.length - 1),
-                    },
-                });
-            }
-            else if (state.dropdownItems.length > 0 &&
-                wrapperContainerWidth >
-                    navigationListWidth +
-                        state.lastItemWidth[state.lastItemWidth.length - 1] +
-                        dropdownButtonWidth +
-                        20) {
-                dispatch({
-                    type: 'moveItemToNavigation',
-                });
-            }
-        }
-    }, 100);
-    const selectedItem = isMobile &&
-        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
-            child.type === PriorityNavigationItem &&
-            child.props.isActive));
-    useOutsideClick(listsContainerRef, () => {
-        if (isMobileNavigationOpen) {
-            setIsMobileNavigationOpen(false);
-        }
-        if (isDropdownOpen) {
-            setIsDropdownOpen(false);
-        }
-    });
-    useEffect(() => {
-        if (!isMobile) {
-            checkHorizontalOverflow();
-        }
-    }, [
-        state.navigationItems,
-        state.dropdownItems,
-        wrapperContainerWidth,
-        checkHorizontalOverflow,
-        isMobile,
-    ]);
-    useEffect(() => {
-        dispatch({
-            type: 'resetNavigationState',
-            payload: {
-                navigationItems: props.children,
-            },
-        });
-        setIsMobileNavigationOpen(false);
-    }, [props.children]);
-    return (React__default.createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(ListsContainer, { ref: listsContainerRef },
-            isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
-                selectedItem,
-                React__default.createElement(Icon, { icon: isMobileNavigationOpen ? ChevronUp : ChevronDown }))),
-            React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => isValidElement(navigationItem) &&
-                navigationItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
-                navigationItem.props.children,
-                navigationItem.props.isActive && isMobile && (React__default.createElement(Icon, { icon: Check, color: theme.color.default.pink })))))),
-            !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { ref: dropdownButtonRef },
-                    React__default.createElement(ButtonIcon, { onClick: toggleDropdown, icon: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel)),
-                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
-                    dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))));
+`;
+const reducer = (state, action) => {
+    var _a, _b;
+    switch (action.type) {
+        case 'resetNavigationState': {
+            const navigationItems = Children.toArray((_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.navigationItems);
+            return Object.assign(Object.assign({}, state), { navigationItems: navigationItems.slice(0, navigationItems.length - state.lastItemWidth.length), dropdownItems: navigationItems.slice(navigationItems.length - state.lastItemWidth.length) });
+        }
+        case 'moveItemToDropdown': {
+            const lastChild = state.navigationItems[state.navigationItems.length - 1];
+            return Object.assign(Object.assign(Object.assign({}, state), { navigationItems: state.navigationItems.slice(0, -1), dropdownItems: [lastChild, ...state.dropdownItems] }), (((_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.lastItem) && {
+                lastItemWidth: [
+                    ...state.lastItemWidth,
+                    action.payload.lastItem.offsetWidth + 40,
+                ],
+            }));
+        }
+        case 'moveItemToNavigation': {
+            const [firstItemFromList, ...dropdownItems] = state.dropdownItems;
+            const [, ...lastItemWidth] = state.lastItemWidth;
+            return {
+                navigationItems: [...state.navigationItems, firstItemFromList],
+                dropdownItems,
+                lastItemWidth,
+            };
+        }
+        default:
+            return state;
+    }
+};
+const getReactNodeText = (reactNode) => {
+    if (reactNode === null) {
+        return '';
+    }
+    switch (typeof reactNode) {
+        case 'string':
+        case 'number':
+            return reactNode.toString();
+        case 'boolean':
+            return '';
+        case 'object': {
+            if (reactNode instanceof Array) {
+                return reactNode.map(getReactNodeText).join('');
+            }
+            if ('props' in reactNode) {
+                // Unsafe member access .children on an `any` value (@typescript-eslint/no-unsafe-member-access)
+                // eslint-disable-next-line
+                return getReactNodeText(reactNode.props.children);
+            }
+            return '';
+        }
+        default:
+            return '';
+    }
+};
+/**
+ * @visibleName Priority Navigation
+ */
+const PriorityNavigation = (_a) => {
+    var { dropdownButtonLabel = 'Lisää', 'data-testid': dataTestId } = _a, props = __rest(_a, ["dropdownButtonLabel", 'data-testid']);
+    const listsContainerRef = useRef(null);
+    const navigationListRef = useRef(null);
+    const dropdownButtonRef = useRef(null);
+    const { isMobile } = useWindowSize(theme.breakpoints.md);
+    const { width: wrapperContainerWidth } = useResizeObserver(listsContainerRef);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
+    const toggleMobileNavigation = () => setIsMobileNavigationOpen(!isMobileNavigationOpen);
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+    const navigationItems = useRef(new Map()).current;
+    const initialState = {
+        navigationItems: Children.toArray(props.children),
+        dropdownItems: [],
+        lastItemWidth: [],
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const checkHorizontalOverflow = useDebounce(() => {
+        var _a, _b;
+        if (navigationListRef.current && listsContainerRef.current) {
+            const navigationListWidth = navigationListRef.current.scrollWidth;
+            const dropdownButtonWidth = ((_b = (_a = dropdownButtonRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 80) + 20;
+            if (state.navigationItems.length > 0 &&
+                navigationListWidth + dropdownButtonWidth > wrapperContainerWidth) {
+                dispatch({
+                    type: 'moveItemToDropdown',
+                    payload: {
+                        lastItem: navigationItems.get(state.navigationItems.length - 1),
+                    },
+                });
+            }
+            else if (state.dropdownItems.length > 0 &&
+                wrapperContainerWidth >
+                    navigationListWidth +
+                        state.lastItemWidth[state.lastItemWidth.length - 1] +
+                        dropdownButtonWidth +
+                        20) {
+                dispatch({
+                    type: 'moveItemToNavigation',
+                });
+            }
+        }
+    }, 100);
+    const selectedItem = isMobile &&
+        getReactNodeText([...state.navigationItems, ...state.dropdownItems].find(child => isValidElement(child) &&
+            child.type === PriorityNavigationItem &&
+            child.props.isActive));
+    useOutsideClick(listsContainerRef, () => {
+        if (isMobileNavigationOpen) {
+            setIsMobileNavigationOpen(false);
+        }
+        if (isDropdownOpen) {
+            setIsDropdownOpen(false);
+        }
+    });
+    useEffect(() => {
+        if (!isMobile) {
+            checkHorizontalOverflow();
+        }
+    }, [
+        state.navigationItems,
+        state.dropdownItems,
+        wrapperContainerWidth,
+        checkHorizontalOverflow,
+        isMobile,
+    ]);
+    useEffect(() => {
+        dispatch({
+            type: 'resetNavigationState',
+            payload: {
+                navigationItems: props.children,
+            },
+        });
+        setIsMobileNavigationOpen(false);
+    }, [props.children]);
+    return (React__default.createElement(Container, { id: props.id, "aria-label": props.navigationLabel, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(ListsContainer, { ref: listsContainerRef },
+            isMobile && selectedItem && (React__default.createElement(MobileDropdown, { onClick: toggleMobileNavigation },
+                selectedItem,
+                React__default.createElement(Icon, { icon: isMobileNavigationOpen ? ChevronUp : ChevronDown }))),
+            React__default.createElement(NavigationList, { ref: navigationListRef, isMobileNavigationOpen: isMobileNavigationOpen }, Children.map([...state.navigationItems, ...(isMobile ? state.dropdownItems : [])], (navigationItem, index) => isValidElement(navigationItem) &&
+                navigationItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: navigationItem.props.id, key: navigationItem.key, onClick: navigationItem.props.onClick || props.onClick, onKeyDown: navigationItem.props.onKeyDown || props.onKeyDown, isActive: navigationItem.props.isActive, className: navigationItem.props.className, "data-testid": navigationItem.props['data-testid'], innerRef: instance => instance && navigationItems.set(index, instance) },
+                navigationItem.props.children,
+                navigationItem.props.isActive && isMobile && (React__default.createElement(Icon, { icon: Check, color: theme.color.default.pink })))))),
+            !isMobile && Boolean(state.dropdownItems.length) && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { ref: dropdownButtonRef },
+                    React__default.createElement(ButtonIcon, { onClick: toggleDropdown, icon: isDropdownOpen ? ChevronUp : ChevronDown, isReversed: true }, dropdownButtonLabel)),
+                React__default.createElement(DropdownList, { isDropdownOpen: isDropdownOpen }, state.dropdownItems.map(dropdownItem => isValidElement(dropdownItem) &&
+                    dropdownItem.type === PriorityNavigationItem && (React__default.createElement(PriorityNavigationItem, { id: dropdownItem.props.id, key: dropdownItem.key, onClick: dropdownItem.props.onClick || props.onClick, onKeyDown: dropdownItem.props.onKeyDown || props.onKeyDown, isActive: dropdownItem.props.isActive, className: dropdownItem.props.className, "data-testid": dropdownItem.props['data-testid'] }, dropdownItem.props.children)))))))));
 };
 
 export { PriorityNavigation as default };

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.d.ts

@@ -0,0 +1,42 @@
+import type { KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import React from 'react';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of the component
+     */
+    children?: ReactNode;
+    /**
+     * On component mouse click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On component keyboard key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to set component as active
+     */
+    isActive?: boolean;
+    /**
+     * A ref object, or a ref callback function
+     */
+    innerRef?: RefObject<HTMLLIElement> | ((instance: HTMLLIElement | null) => void) | null;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Priority NavigationItem
+ */
+declare const PriorityNavigationItem: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PriorityNavigationItem;

package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js

@@ -13,7 +13,7 @@ const Element = styled.li `
     padding: 0.75rem 1.25rem;
     flex-shrink: 0;
 
-    ${({ onClick }) => onClick &&
+    ${({ onClick }) => onClick &&
     `
         cursor: pointer;
     `};
@@ -46,13 +46,13 @@ const Element = styled.li `
             text-decoration: none;
         }
     }
-`;
-/**
- * @visibleName Priority NavigationItem
- */
-const PriorityNavigationItem = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+/**
+ * @visibleName Priority NavigationItem
+ */
+const PriorityNavigationItem = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    return (React__default.createElement(Element, { id: props.id, ref: props.innerRef, onClick: props.onClick, onKeyDown: props.onKeyDown, isActive: props.isActive, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { PriorityNavigationItem as default };

package/build/es/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,41 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+type ProgressIndicatorStatus = 'error';
+interface Props {
+    /**
+     * Array of strings to be used as labels or number of steps.
+     * If number is passed as a value, no labels will be generated
+     */
+    steps: string[] | number;
+    /**
+     * Allows to set the active step (zero based index) by passing the index of item from `steps` array
+     */
+    activeStep?: number;
+    /**
+     * On Progress Indicator Item label or number click callback
+     * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
+     */
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change version of component to small
+     */
+    small?: boolean;
+    /**
+     * Depending on the passed status, the styling of component changes
+     *
+     * @param {ProgressIndicatorStatus} error Displays `error` icon with `theme.color.notification.error` color in currently active step
+     */
+    status?: ProgressIndicatorStatus;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Progress Indicator */
+declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ProgressIndicator;

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -6,26 +6,26 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 
-const getBackgroundColor = ({ isActive, isError, }) => {
-    const defaultColor = theme.color.background.white.default;
-    const currentColor = isError
-        ? theme.color.notification.error
-        : theme.color.background.pink.default;
-    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
-};
-const getBorderColor = ({ isActive, isCompleted, isError }) => {
-    const defaultColor = theme.color.line.L02;
-    const currentColor = isError
-        ? theme.color.notification.error
-        : theme.color.background.pink.default;
-    return isActive || isCompleted ? currentColor : defaultColor;
-};
+const getBackgroundColor = ({ isActive, isError, }) => {
+    const defaultColor = theme.color.background.white.default;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
+};
+const getBorderColor = ({ isActive, isCompleted, isError }) => {
+    const defaultColor = theme.color.line.L02;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return isActive || isCompleted ? currentColor : defaultColor;
+};
 const ProgressIndicatorWrapper = styled.ul `
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
-`;
+`;
 const ProgressIndicatorItem = styled.li `
     position: relative;
     display: inline-flex;
@@ -59,7 +59,7 @@ const ProgressIndicatorItem = styled.li `
             }
         }
     `}
-`;
+`;
 const ProgressIndicatorItemConnector = styled.div `
     position: absolute;
     top: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 1.5 : 2)};
@@ -68,7 +68,7 @@ const ProgressIndicatorItemConnector = styled.div `
     width: 100%;
     height: ${({ small }) => (small ? '2px' : '4px')};
     background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.color.default.pink : theme.color.line.L02};
-`;
+`;
 const ProgressIndicatorItemNumber = styled.div `
     display: flex;
     justify-content: center;
@@ -84,7 +84,7 @@ const ProgressIndicatorItemNumber = styled.div `
     z-index: 1;
 
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
-`;
+`;
 const ProgressIndicatorItemLabel = styled.div `
     display: none;
     font-size: ${({ small }) => (small ? theme.fontSize.xs : theme.fontSize.s)};
@@ -95,30 +95,30 @@ const ProgressIndicatorItemLabel = styled.div `
     ${media.sm `
         display: initial;
     `}
-`;
-/** @visibleName Progress Indicator */
-const ProgressIndicator = (_a) => {
-    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = __rest(_a, ["activeStep", 'data-testid']);
-    const stepsArray = Array.isArray(props.steps)
-        ? props.steps
-        : Array(props.steps).fill('');
-    const progressIndicatorItems = stepsArray.map((label, index) => {
-        const id = `id-${label}-${index}`;
-        const stepNumber = index + 1;
-        const isActive = index === activeStep;
-        const isCompleted = index < activeStep;
-        const isError = isActive && props.status === 'error';
-        const handleClick = (e) => {
-            if (props.onStepClick) {
-                props.onStepClick(index, e);
-            }
-        };
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
-            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
-    });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+`;
+/** @visibleName Progress Indicator */
+const ProgressIndicator = (_a) => {
+    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = __rest(_a, ["activeStep", 'data-testid']);
+    const stepsArray = Array.isArray(props.steps)
+        ? props.steps
+        : Array(props.steps).fill('');
+    const progressIndicatorItems = stepsArray.map((label, index) => {
+        const id = `id-${label}-${index}`;
+        const stepNumber = index + 1;
+        const isActive = index === activeStep;
+        const isCompleted = index < activeStep;
+        const isError = isActive && props.status === 'error';
+        const handleClick = (e) => {
+            if (props.onStepClick) {
+                props.onStepClick(index, e);
+            }
+        };
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+    });
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
 };
 
 export { ProgressIndicator as default };

package/build/es/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,50 @@
+import type { ChangeEvent } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * Text of the label shown next to radio button
+     */
+    label?: string;
+    /**
+     * On radio button change callback
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set the radio button as checked
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Allows to disable the radio button
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Radio Button */
+declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default RadioButton;