@dnanpm/styleguide 3.1.0 → 3.2.0

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,272 @@
+import { __rest } from 'tslib';
+import React__default, { useState } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+import ButtonIcon from '../Button/ButtonIcon.js';
+import hlChevronLeft from '../Icons/hlChevronLeft.js';
+import hlChevronRight from '../Icons/hlChevronRight.js';
+import Input from '../Input/Input.js';
+
+/**
+ * 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.div `
+    position: relative;
+
+    & .react-datepicker {
+        position: absolute;
+        display: flex;
+        font-size: ${theme.fontSize.xs};
+        border-radius: ${theme.radius.default};
+        border: 1px solid ${theme.color.line.L03};
+        background-color: ${theme.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.color.line.L03};
+    }
+
+    & .react-datepicker__header {
+        display: flex;
+        flex-direction: column;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        color: ${theme.color.text.black};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+        border-bottom: 1px solid ${theme.color.line.L03};
+        background-color: ${theme.color.background.sand.E01};
+
+        .react-datepicker-time__header {
+            font-size: ${theme.fontSize.default};
+            line-height: ${theme.lineHeight.default};
+            font-weight: ${theme.fontWeight.bold};
+            text-align: center;
+        }
+    }
+
+    & .react-datepicker__month,
+    .react-datepicker__time-list {
+        display: grid;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+        color: ${theme.color.text.gray};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)}
+            ${getMultipliedSize(theme.base.baseWidth, 1)};
+
+        .react-datepicker__day--outside-month {
+            visibility: hidden;
+        }
+    }
+
+    & .react-datepicker__day-names,
+    & .react-datepicker__week {
+        display: flex;
+        gap: ${getMultipliedSize(theme.base.baseWidth, 0.8)};
+
+        .react-datepicker__day-name,
+        .react-datepicker__day {
+            text-align: center;
+            font-weight: ${theme.fontWeight.book};
+            line-height: ${theme.lineHeight.default};
+            width: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
+            height: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
+        }
+
+        .react-datepicker__day {
+            cursor: pointer;
+            font-weight: ${theme.fontWeight.book};
+            border: 1px solid transparent;
+            border-radius: ${theme.radius.s};
+
+            &.react-datepicker__day--today {
+                color: ${theme.color.text.pink};
+                font-weight: ${theme.fontWeight.bold};
+            }
+
+            &.react-datepicker__day--in-selecting-range {
+                color: ${theme.color.text.white};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.pink.default};
+            }
+
+            &.react-datepicker__day--selected {
+                color: ${theme.color.text.white};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.pink.default};
+            }
+
+            &:hover {
+                color: ${theme.color.text.gray};
+                font-weight: ${theme.fontWeight.bold};
+                background-color: ${theme.color.background.sand.E01};
+                border: 1px solid ${theme.color.line.L03};
+            }
+
+            &.react-datepicker__day--selecting-range-start {
+                color: ${theme.color.text.white};
+                background-color: ${theme.color.background.pink.default};
+
+                &.react-datepicker__day--selecting-range-end {
+                    color: ${theme.color.text.white};
+                    background-color: ${theme.color.background.pink.default};
+                }
+            }
+
+            &.react-datepicker__day--selecting-range-end {
+                color: ${theme.color.text.black};
+                background-color: ${theme.color.background.pink.E02};
+
+                &:hover {
+                    border: 1px solid ${theme.color.background.pink.E02};
+                }
+            }
+        }
+    }
+
+    & .react-datepicker__time {
+        width: ${getMultipliedSize(theme.base.baseWidth, 15)};
+
+        .react-datepicker__time-list {
+            padding-left: 0;
+            padding-right: 0;
+            list-style: none;
+            margin: 0;
+            gap: 0;
+            overflow-y: scroll;
+            height: ${getMultipliedSize(theme.base.baseHeight, 19)};
+
+            .react-datepicker__time-list-item {
+                cursor: pointer;
+                text-align: center;
+                font-weight: ${theme.fontWeight.book};
+                line-height: ${theme.lineHeight.h2S};
+                height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
+
+                &.react-datepicker__time-list-item--selected {
+                    color: ${theme.color.text.white};
+                    font-weight: ${theme.fontWeight.bold};
+                    background-color: ${theme.color.background.pink.default};
+                }
+
+                &:hover {
+                    color: ${theme.color.text.gray};
+                    font-weight: ${theme.fontWeight.bold};
+                    background-color: ${theme.color.background.sand.E01};
+                }
+            }
+        }
+    }
+`;
+const MonthSelector = styled__default.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span.dnasg-icon > svg {
+        fill: ${theme.color.text.gray};
+    }
+`;
+const CurrentMonth = styled__default.div `
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+`;
+const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, }) => (React__default.createElement(MonthSelector, null,
+    React__default.createElement(ButtonIcon, { icon: hlChevronLeft, onClick: decreaseMonth }),
+    React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+        month: 'long',
+        year: 'numeric',
+    }))),
+    React__default.createElement(ButtonIcon, { icon: hlChevronRight, 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 = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+    const [showReactDatePicker, setShowReactDatePicker] = 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.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(Input, { 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.createElement(ReactDatePicker, { 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 }))));
+};
+
+export { DateTimePicker as default };

package/build/es/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/es/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/es/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/es/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,7 +9,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Icon shown in the component
      *

package/build/es/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
      */

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

@@ -1,69 +1,5 @@
 import React from 'react';
-import type { LangProps } from '../../../types/language.d';
-interface PrincipalProps {
-    titles: LangProps;
-    urls: LangProps;
-    type?: string;
-}
-interface CategoriesProps {
-    description: LangProps;
-    category: CategoryProps[];
-}
-interface CategoryArrayProps {
-    currentIndex: number;
-    category: CategoriesProps;
-}
-type CategoryProps = PrincipalProps;
-interface ServicesProps extends PrincipalProps {
-    descriptions: LangProps;
-}
-export interface FooterNavigationProps {
-    services?: ServicesProps[];
-    categories?: CategoriesProps[];
-    languageSelector?: LanguageSelectorProps;
-    customLinks?: LanguageProps[];
-    generalInformation?: GeneralInformationProps;
-    socialMedia?: SocialMediaProps;
-}
-export interface LanguageProps {
-    [key: string]: string;
-    title: string;
-    url: string;
-}
-interface LanguageSelectorProps {
-    urls: LanguageProps;
-}
-interface LanguageComponentProps {
-    languages: LanguageProps[];
-}
-interface GeneralInformationComponentProps {
-    generalInformation?: GeneralInformationProps;
-}
-interface GeneralInformationProps {
-    privacyPolicy: PrincipalProps;
-    cookieSettings: Pick<PrincipalProps, 'titles' | 'type'>;
-    terms: PrincipalProps;
-}
-interface SocialMediaProps {
-    [key: string]: {
-        urls: LangProps;
-    } | undefined;
-    facebook?: {
-        urls: LangProps;
-    };
-    twitter?: {
-        urls: LangProps;
-    };
-    linkedIn?: {
-        urls: LangProps;
-    };
-    instagram?: {
-        urls: LangProps;
-    };
-    youtube?: {
-        urls: LangProps;
-    };
-}
+import type { CategoryArrayProps, FooterNavigationProps, GeneralInformationComponentProps, LanguageComponentProps, LanguageSelectorProps } from '../types/footerProps';
 export declare const mapCorporateSelector: (languagesObject: LanguageSelectorProps) => {
     title: string;
     url: string;
@@ -72,6 +8,5 @@ export declare const Services: ({ services }: FooterNavigationProps) => React.JS
 export declare const CategoryDisplay: ({ category, currentIndex }: CategoryArrayProps) => React.JSX.Element;
 export declare const Categories: ({ categories }: FooterNavigationProps) => React.JSX.Element;
 export declare const LanguageLinks: ({ languages }: LanguageComponentProps) => React.JSX.Element;
-export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element;
+export declare const GeneralInformation: ({ generalInformation }: GeneralInformationComponentProps) => React.JSX.Element | null;
 export declare const SocialMediaLinks: ({ socialMedia }: FooterNavigationProps) => React.JSX.Element;
-export {};

package/build/es/components/Footer/Components/FooterComponents.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import styled from '../../../themes/styled.js';
 import theme from '../../../themes/theme.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
@@ -6,7 +6,9 @@ import Icon from '../../Icon/Icon.js';
 import 'tslib';
 import hlPlus from '../../Icons/hlPlus.js';
 import FooterContext from '../context/FooterContext.js';
+import Button from '../../Button/Button.js';
 
+/* eslint-disable react/no-array-index-key */
 const ServicesContainer = styled.div `
     display: flex;
     justify-content: space-between;
@@ -43,7 +45,6 @@ const CategoryContainer = styled.div `
 const CategoryWrapper = styled.div `
     display: inline-flex;
     width: 100%;
-    overflow: hidden;
     flex-direction: column;
 
     span.dnasg-icon {
@@ -60,14 +61,6 @@ const CategoryWrapper = styled.div `
         }
         &:first-of-type {
             padding-left: 0;
-
-            ul {
-                margin-left: ${getMultipliedSize(theme.base.baseWidth, 2)};
-            }
-            span.dnasg-icon {
-                display: block;
-                margin-right: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-            }
         }
     }
 `;
@@ -169,44 +162,6 @@ const GeneralInformationContainer = styled.div `
     flex-grow: 1;
     flex-shrink: 1;
 `;
-const CallToActionButton = styled.a `
-    display: inline-block;
-    text-align: center;
-    font-family: ${theme.fontFamily.default};
-    font-weight: ${theme.fontWeight.bold};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    min-width: ${getMultipliedSize(theme.base.baseWidth, 12.5)};
-    width: 100%;
-    cursor: pointer;
-    color: ${theme.color.text.white};
-    background-color: transparent;
-    border-radius: ${theme.radius.pill};
-    border: 2px solid ${theme.color.default.white};
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.6)}
-        ${getMultipliedSize(theme.base.baseWidth, 4)};
-    text-decoration: none;
-
-    &:focus {
-        color: ${theme.color.text.plum};
-        background-color: ${theme.color.default.white};
-        border: 2px solid ${theme.color.focus.dark};
-        outline: 2px solid ${theme.color.focus.light};
-    }
-
-    &:hover {
-        color: ${theme.color.text.plum};
-        background-color: ${theme.color.default.white};
-        text-decoration: none;
-    }
-
-    &:active {
-        color: ${theme.color.text.plum};
-        background-color: ${theme.color.default.white + theme.color.transparency.T90};
-        border: 2px solid ${theme.color.default.white + theme.color.transparency.T90};
-        outline: none;
-    }
-`;
 const GeneralInformationLink = styled.a `
     text-decoration: underline;
 
@@ -226,23 +181,16 @@ const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.ur
     url: languagesObject.urls[e],
 }));
 const Services = ({ services }) => {
-    const { collapseSize, language } = React__default.useContext(FooterContext);
+    const { collapseSize, language } = useContext(FooterContext);
     return (React__default.createElement(ServicesContainer, { collapseSize: collapseSize }, services === null || services === void 0 ? void 0 : services.map((service, index) => (React__default.createElement(ServiceWrapper, { key: `service-section-${index}`, "data-testid": `service-section-${index}`, collapseSize: collapseSize },
-        React__default.createElement(CallToActionButton, { href: service.urls[language] }, service.titles[language]),
+        React__default.createElement(Button, { darkBg: true, href: service.urls[language] }, service.titles[language]),
         React__default.createElement(SmallText, null, service.descriptions[language]))))));
 };
 const CategoryDisplay = ({ category, currentIndex }) => {
     const categoryLinkArray = category.category;
-    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React__default.useContext(FooterContext);
+    const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = useContext(FooterContext);
     const toggleCollapse = () => {
-        if (!isMobileFooter) {
-            setIsCollapsed({
-                0: !isCollapsed[0],
-                1: !isCollapsed[0],
-                2: !isCollapsed[0],
-            });
-        }
-        else {
+        if (isMobileFooter) {
             setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
         }
     };
@@ -250,21 +198,21 @@ const CategoryDisplay = ({ category, currentIndex }) => {
         React__default.createElement(CategoryHeader, { collapseSize: collapseSize, active: isCollapsed[currentIndex], onClick: toggleCollapse },
             React__default.createElement(Icon, { icon: hlPlus, size: "1rem" }),
             category.description[language]),
-        React__default.createElement(CategoryLinks, { active: isCollapsed[currentIndex], collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
+        React__default.createElement(CategoryLinks, { active: isMobileFooter ? isCollapsed[currentIndex] : true, collapseSize: collapseSize }, categoryLinkArray.map((categoryLink, index) => (React__default.createElement(CategoryLinksListEl, { key: `category-${currentIndex}-link-${index}`, "data-testid": `category-${currentIndex}-link-${index}`, collapseSize: collapseSize },
             React__default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language])))))));
 };
 const Categories = ({ categories }) => {
-    const { collapseSize } = React__default.useContext(FooterContext);
+    const { collapseSize } = useContext(FooterContext);
     return (React__default.createElement(CategoryContainer, { collapseSize: collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.createElement(CategoryDisplay, { category: category, currentIndex: index, key: `category-${index}` })))));
 };
 const LanguageLinks = ({ languages }) => {
-    const { collapseSize } = React__default.useContext(FooterContext);
-    return (React__default.createElement(LanguageLinksContainer, { collapseSize: collapseSize, "data-testid": "language-selector-section" }, languages.map((language, index) => (React__default.createElement("a", { href: language.url, key: `language-link-${index}` }, language.title)))));
+    const { collapseSize } = useContext(FooterContext);
+    return (React__default.createElement(LanguageLinksContainer, { collapseSize: collapseSize, "data-testid": "language-selector-section" }, languages.map((language) => (React__default.createElement("a", { href: language.url, key: language.title }, language.title)))));
 };
 const GeneralInformation = ({ generalInformation }) => {
-    const { language } = React__default.useContext(FooterContext);
+    const { language } = useContext(FooterContext);
     if (!generalInformation) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
     const currentYear = new Date().getFullYear();
     const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
@@ -279,10 +227,12 @@ const GeneralInformation = ({ generalInformation }) => {
             currentYear)));
 };
 const SocialMediaLinks = ({ socialMedia }) => {
-    const { language } = React__default.useContext(FooterContext);
-    const socialMediaKeys = Object.keys(socialMedia || {}).filter((key) => key !== '__typename');
+    const { language } = useContext(FooterContext);
     return (React__default.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
-        socialMediaKeys.map((socialMediaKey) => {
+        Object.keys(socialMedia || {}).map((socialMediaKey) => {
+            if (socialMediaKey === '__typename') {
+                return null;
+            }
             const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
                 socialMediaKey.toLowerCase().slice(1);
             const currentObject = socialMedia[socialMediaKey];

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

@@ -1,21 +1,12 @@
 import React from 'react';
-import type { FooterNavigationProps } from './Components/FooterComponents';
-interface FooterItemProps {
-    businessId: string;
-    footerNavigation: FooterNavigationProps;
-}
-export interface IsCollapsedProps {
-    [key: number]: boolean;
-    0: boolean;
-    1: boolean;
-    2: boolean;
-}
+import type { FooterItemProps } from './types/footerProps';
 export interface FooterProps {
     items?: FooterItemProps;
     language: string;
     zIndex?: number;
     collapseSize: number;
 }
+/** @visibleName Footer */
+declare const Footer: ({ items, language, zIndex, collapseSize, }: FooterProps) => React.JSX.Element;
 /** @component */
-declare const _default: React.FunctionComponent<any>;
-export default _default;
+export default Footer;

package/build/es/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import React__default, { useState } from 'react';
+import React__default, { useState, useMemo } from 'react';
 import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
@@ -69,10 +69,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     const { isMobile } = useWindowSize(collapseSize);
     // Resets menu states when menu content alters between mobile and desktop
     const footerChanged = previousValue !== isMobile;
-    const services = items.footerNavigation.services || [];
-    const categories = items.footerNavigation.categories || [];
-    const { generalInformation } = items.footerNavigation;
-    const socialMedia = items.footerNavigation.socialMedia || {};
+    const { categories = [], generalInformation, services = [], socialMedia = {}, } = items.footerNavigation;
     let languages = [];
     if (items.businessId === 'Corporate') {
         const languagesObject = items.footerNavigation.languageSelector;
@@ -91,7 +88,7 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
         resetFooter();
         previousValue = isMobile;
     }
-    const footerContextData = React__default.useMemo(() => ({
+    const footerContextData = useMemo(() => ({
         language,
         collapseSize,
         isCollapsed,

package/build/es/components/Footer/context/FooterContext.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
-import type { FooterProps, IsCollapsedProps } from '../Footer';
+import type { Dispatch, SetStateAction } from 'react';
+import type { FooterProps } from '../Footer';
+import type { IsCollapsedProps } from '../types/footerProps';
 interface FooterContextProps extends Pick<FooterProps, 'collapseSize' | 'language'> {
     isCollapsed: IsCollapsedProps;
-    setIsCollapsed: React.Dispatch<React.SetStateAction<IsCollapsedProps>>;
+    setIsCollapsed: Dispatch<SetStateAction<IsCollapsedProps>>;
     isMobileFooter?: boolean;
 }
-declare const FooterContext: React.Context<FooterContextProps>;
+declare const FooterContext: import("react").Context<FooterContextProps>;
 export default FooterContext;

package/build/es/components/Footer/context/FooterContext.js

@@ -1,7 +1,7 @@
-import React__default from 'react';
+import { createContext } from 'react';
 import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 
-const FooterContext = React__default.createContext({
+const FooterContext = createContext({
     language: 'fi',
     collapseSize: breakpoints.md,
     isCollapsed: {