@inera/ids-react 9.3.0 → 9.4.0

package/components/accordion/accordion-base.d.ts

@@ -15,7 +15,7 @@ interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     client?: boolean;
     accordionRef?: React.Ref<HTMLDivElement>;
 }
-export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): React.JSX.Element;
 export declare namespace IDSAccordionBase {
     var displayName: string;
 }

package/components/accordion/accordion.d.ts

@@ -13,7 +13,7 @@ interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onExpandedChange?: (expanded: boolean) => void;
 }
-export declare function IDSAccordion({ headline, subtitle, accordions, level, headlineSize, expanded, defaultExpanded, lean, noBorder, onCollapsed, onExpanded, onExpandedChange, children, ...props }: IDSAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordion({ headline, subtitle, accordions, level, headlineSize, expanded, defaultExpanded, lean, noBorder, onCollapsed, onExpanded, onExpandedChange, children, ...props }: IDSAccordionProps): React.JSX.Element;
 export declare namespace IDSAccordion {
     var displayName: string;
 }

package/components/alert/alert-base.d.ts

@@ -18,7 +18,7 @@ export interface IDSAlertBaseProps extends React.HTMLAttributes<HTMLDivElement>
     onToggleCollapse?: () => void;
     client?: boolean;
 }
-export declare function IDSAlertBase({ collapsible, ribbon, collapsed, dismissible, headline, collapsableHeadline, compact, type, srCloseText, srCollapseText, srExpandText, noRole, onClose, onToggleCollapse, client, children, className, ...props }: IDSAlertBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAlertBase({ collapsible, ribbon, collapsed, dismissible, headline, collapsableHeadline, compact, type, srCloseText, srCollapseText, srExpandText, noRole, onClose, onToggleCollapse, client, children, className, ...props }: IDSAlertBaseProps): React.JSX.Element;
 export declare namespace IDSAlertBase {
     var displayName: string;
 }

package/components/alert/alert.d.ts

@@ -4,7 +4,7 @@ export interface IDSAlertProps extends Omit<IDSAlertBaseProps, "contentId" | "on
     defaultCollapsed?: boolean;
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSAlert({ collapsed, defaultCollapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAlert({ collapsed, defaultCollapsed, onCollapsedChange, onClose, children, className, ...props }: IDSAlertProps): import("react").JSX.Element;
 export declare namespace IDSAlert {
     var displayName: string;
 }

package/components/badge/badge.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/badge/badge.css';
 
 const IDSBadge = React.memo(function IDSBadge(props) {
     const { type = "primary", icon, children, className, ...rest } = props;
-    return (jsx("div", { ...rest, className: clsx(`ids-badge ids-badge--${type}`, className), children: jsxs("div", { className: "ids-badge__inner", children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), icon && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
+    return (jsx("div", { ...rest, className: clsx(`ids-badge ids-badge--${type}`, className), children: jsxs("div", { className: "ids-badge__inner", children: [icon && (jsx("span", { className: "ids-badge__icon", children: jsx("span", { className: `ids-icon-${icon}-small`, "aria-hidden": "true" }) })), children] }) }));
 });
 IDSBadge.displayName = "IDSBadge";
 

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -4,7 +4,7 @@ interface IDSBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     lead?: string;
     mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;
 }
-export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): React.JSX.Element;
 export declare namespace IDSBreadcrumbs {
     var displayName: string;
 }

package/components/breadcrumbs/breadcrumbs.js

@@ -25,12 +25,11 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
         }
     };
     const getMobileLink = () => {
-        if (mobileLink) {
-            return React.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
-        }
-        else {
+        if (!mobileLink)
             return null;
-        }
+        return React.cloneElement(mobileLink, {
+            className: "ids-breadcrumbs__mobile-link"
+        });
     };
     const getLinks = () => {
         const links = React.Children.toArray(children);

package/components/button/button-group.d.ts

@@ -8,7 +8,7 @@ interface IDSButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     unresponsive?: boolean;
     break?: Break;
 }
-export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): React.JSX.Element;
 export declare namespace IDSButtonGroup {
     var displayName: string;
 }

package/components/button/button.js

@@ -26,7 +26,12 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
             "ids-focus-anchor": focusAnchor
         }, className);
     }
-    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children, endIcon && jsx("span", { className: `ids-icon-${endIcon}` })] }));
+    const loadingHandler = !!loading
+        ? {
+            tabIndex: -1
+        }
+        : {};
+    return (jsxs("button", { ...props, ref: ref, className: classNames, ...(toggle ? { "aria-pressed": active } : {}), ...loadingHandler, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}${size === "s" ? "-small" : ""}`, "aria-hidden": "true" }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children, endIcon && jsx("span", { className: `ids-icon-${endIcon}` })] }));
 });
 IDSButton.displayName = "IDSButton";
 

package/components/button/control-button.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 
 const IDSControlButton = forwardRef(({ disabled = false, icon, className, ...props }, ref) => {
-    return (jsx("button", { className: "ids-control-button", ...props, ref: ref, "aria-disabled": disabled, disabled: disabled, children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) }));
+    return (jsx("button", { className: clsx("ids-control-button", className), ...props, ref: ref, "aria-disabled": disabled, disabled: disabled, children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) }));
 });
 IDSControlButton.displayName = "IDSControlButton";
 

package/components/card/card.d.ts

@@ -9,7 +9,7 @@ interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
     lean?: boolean;
     interactive?: boolean;
 }
-export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): React.JSX.Element;
 export declare namespace IDSCard {
     var displayName: string;
 }

package/components/carousel/carousel-item.d.ts

@@ -8,7 +8,7 @@ export interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElemen
     nextSlide?: boolean;
     children: React.ReactNode;
 }
-export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCarouselItem({ headline, step, description, activeSlide, previousSlide, nextSlide, children, className, ...props }: IDSCarouselItemProps): React.JSX.Element;
 export declare namespace IDSCarouselItem {
     var displayName: string;
 }

package/components/carousel/carousel.d.ts

@@ -5,7 +5,7 @@ interface IDSCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     srPrevLabel?: string;
     children: React.ReactNode;
 }
-export declare function IDSCarousel({ srNextLabel, srPrevLabel, className, children, ...props }: IDSCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCarousel({ srNextLabel, srPrevLabel, className, children, ...props }: IDSCarouselProps): React.JSX.Element;
 export declare namespace IDSCarousel {
     var displayName: string;
 }

package/components/carousel/carousel.js

@@ -51,10 +51,12 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
         const firstImage = carouselRef.current?.querySelector(".ids-carousel-item__image img");
         const buttons = carouselRef.current?.querySelectorAll("button");
         const handleImageLoad = () => {
-            setButtonLocation();
-            buttons?.forEach(btn => {
-                setTimeout(() => {
-                    btn.style.opacity = "1";
+            setTimeout(() => {
+                setButtonLocation();
+                buttons?.forEach(btn => {
+                    setTimeout(() => {
+                        btn.style.opacity = "1";
+                    }, 200);
                 }, 200);
             });
         };
@@ -124,7 +126,7 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
                     "ids-carousel__button-prev--mobile": isMobile
                 }), onClick: handlePrev, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("button", { "aria-label": srNextLabel, className: clsx("ids-carousel__button-next", {
                     "ids-carousel__button-next--mobile": isMobile
-                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-content", {
+                }), onClick: handleNext, style: buttonPosition, children: isMobile && jsx("div", { className: "ids-carousel-btn__inner" }) }), jsx("div", { className: clsx("ids-carousel-content", "js-carousel-slide", {
                     "animating-left": isAnimatingLeft,
                     "animating-right": isAnimatingRight
                 }), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: jsx("div", { "aria-live": "polite", children: slides }) })] }));

package/components/date-label/date-label.d.ts

@@ -13,8 +13,9 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     dayTo?: number;
     srText?: string;
 }
-export declare function IDSDateLabel({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace IDSDateLabel {
+declare function IDSDateLabelBase({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react").JSX.Element;
+declare namespace IDSDateLabelBase {
     var displayName: string;
 }
+export declare const IDSDateLabel: import("react").MemoExoticComponent<typeof IDSDateLabelBase>;
 export {};

package/components/date-label/date-label.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
 import '@inera/ids-design/components/date-label/date-label.css';
 
-function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
+function IDSDateLabelBase({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
     const getYear = () => (date ? date.getFullYear() : year);
     const getYearTo = () => (dateTo ? dateTo.getFullYear() : yearTo);
     const getMonth = () => (date ? date.getMonth() + 1 : month);
@@ -14,6 +15,7 @@ function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel =
     const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
     return (jsxs("span", { ...props, className: clsx("ids-date-label", className), "aria-label": srText, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: "ids-date-label__time ids-date-label__time--separator", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
 }
-IDSDateLabel.displayName = "IDSDateLabel";
+IDSDateLabelBase.displayName = "IDSDateLabel";
+const IDSDateLabel = memo(IDSDateLabelBase);
 
 export { IDSDateLabel };

package/components/dialog/dialog.d.ts

@@ -17,7 +17,7 @@ export interface IDSDialogProps extends HTMLAttributes<HTMLDivElement> {
     noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
 }
-export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDialog({ show, srClose, headline, width, maxWidth, height, trigger, actions, noOverlay, dismissible, autoFocus, noFocusTrap, persistent, keepScrollbar, noScrollAreaFocus, onVisibilityChange, children, className, ...props }: IDSDialogProps): import("react").JSX.Element;
 export declare namespace IDSDialog {
     var displayName: string;
 }

package/components/dialog/dialog.js

@@ -68,7 +68,7 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
             }
         }
     }, [isVisible, autoFocus]);
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, ref: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, srClose: srClose, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, ref: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
 }
 IDSDialog.displayName = "IDSDialog";
 

package/components/district-selector/district-selector.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/district-selector/district-selector.css";
+export interface IDSDistrictSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    srSelectedText?: string;
+    districtIcon?: ReactNode;
+    districtText?: string | ReactNode;
+    selected?: boolean;
+}
+export declare const IDSDistrictSelector: React.NamedExoticComponent<IDSDistrictSelectorProps>;

package/components/district-selector/district-selector.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/district-selector/district-selector.css';
+
+const IDSDistrictSelector = React.memo(function IDSDistrictSelector({ label = "Anpassa innehållet", srSelectedText, districtIcon, districtText, selected, children, className, ...props }) {
+    return (jsx("div", { className: clsx("ids-district-selector", className), ...props, children: jsxs("div", { className: "ids-district-selector__inner", children: [jsxs("div", { className: "ids-district-selector__content", children: [selected && districtIcon && (jsx("div", { className: "ids-district-selector__district-icon", "aria-label": srSelectedText, children: districtIcon })), selected && districtText && (jsx("div", { className: "ids-district-selector__district-text", "aria-label": srSelectedText, children: districtText })), !selected && jsx("div", { className: "ids-district-selector__label", children: label })] }), jsx("div", { className: "ids-district-selector__button", children: children })] }) }));
+});
+IDSDistrictSelector.displayName = "IDSDistrictSelector";
+
+export { IDSDistrictSelector };

package/components/dropdown/dropdown-base.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import "@inera/ids-design/components/dropdown/dropdown.css";
 type Position = "left" | "right";
 export interface IDSDropdownBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
-    expanded: boolean;
+    expanded?: boolean;
     mBlock?: boolean;
     sBlock?: boolean;
     position?: Position;
@@ -14,5 +14,5 @@ export interface IDSDropdownBaseProps extends React.HTMLAttributes<HTMLSpanEleme
     onTriggerClick?: () => void;
     client?: boolean;
 }
-export declare function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock, sBlock, client, children, className, maxHeight, minWidth, contentRef, ...props }: IDSDropdownBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock, sBlock, client, children, className, maxHeight, minWidth, contentRef, ...props }: IDSDropdownBaseProps): React.JSX.Element;
 export {};

package/components/dropdown/dropdown-base.js

@@ -3,7 +3,7 @@ import React, { useId } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 
-function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
+function IDSDropdownBase({ expanded = false, trigger, triggerRef, onTriggerClick, position, mBlock = false, sBlock = false, client = false, children, className, maxHeight, minWidth, contentRef, ...props }) {
     const reactId = useId();
     const triggerId = `dropdown-trigger-${reactId}`;
     const contentId = `dropdown-trigger-${reactId}`;

package/components/dropdown/dropdown.d.ts

@@ -8,10 +8,11 @@ type Props = Omit<IDSDropdownBaseProps, "onTriggerClick" | "triggerRef" | "conte
     persistent?: boolean;
     sBlock?: boolean;
     mBlock?: boolean;
+    expaneded?: boolean;
     onClosed?: () => void;
     onOpened?: () => void;
 };
-export declare function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded, persistent, onClosed, onOpened, children, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded, persistent, onClosed, onOpened, children, className, ...props }: Props): React.JSX.Element;
 export declare namespace IDSDropdown {
     var displayName: string;
 }

package/components/dropdown/dropdown.js

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from 'react';
 import { IDSDropdownBase } from './dropdown-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 
 function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, expanded = false, persistent = false, onClosed, onOpened, children, className, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -15,6 +16,7 @@ function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, ex
         onClosed?.();
     };
     useEsc(closeMenu, triggerRef, contentRef, isExpanded);
+    useClickOutside(closeMenu, contentRef, triggerRef, !persistent && isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);

package/components/footer-1177/footer-1177-columns.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface Footer1177ColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177Columns({ col1, col2, col3 }: Footer1177ColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177Columns {
+    var displayName: string;
+}

package/components/footer-1177/footer-1177-columns.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177Columns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
+    }
+    if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooter1177Columns.displayName = "IDSFooter1177Columns";
+
+export { IDSFooter1177Columns };

package/components/footer-1177/footer-1177-headline.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface Footer1177HeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    subHeadline?: string;
+}
+export declare function IDSFooter1177Headline({ headline, srHeadline, subHeadline }: Footer1177HeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177Headline {
+    var displayName: string;
+}

package/components/footer-1177/footer-1177-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177Headline({ headline = "", srHeadline = "", subHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
+    }
+    return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
+}
+IDSFooter1177Headline.displayName = "IDSFooter1177Headline";
+
+export { IDSFooter1177Headline };

package/components/footer-1177/footer-1177.d.ts

@@ -15,7 +15,7 @@ export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177({ headline, srHeadline, subHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177({ headline, srHeadline, subHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): React.JSX.Element;
 export declare namespace IDSFooter1177 {
     var displayName: string;
 }

package/components/footer-1177/footer-1177.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
+import { IDSFooter1177Headline } from './footer-1177-headline.js';
+import { IDSFooter1177Columns } from './footer-1177-columns.js';
 
 function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
-        }
-        return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
-        }
-        if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsxs("div", { className: "ids-footer-1177__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: jsx(IDSFooter1177Headline, { headline: headline, subHeadline: subHeadline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-1177__content", children: [jsxs("div", { className: "ids-footer-1177__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177__cols", children: jsx(IDSFooter1177Columns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
 IDSFooter1177.displayName = "IDSFooter1177";
 

package/components/footer-1177-admin/footer-1177-admin-columns.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface Footer1177AdminColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177AdminColumns({ col1, col2, col3 }: Footer1177AdminColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177AdminColumns {
+    var displayName: string;
+}

package/components/footer-1177-admin/footer-1177-admin-columns.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177AdminColumns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: col1 });
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooter1177AdminColumns.displayName = "IDSFooter1177AdminColumns";
+
+export { IDSFooter1177AdminColumns };

package/components/footer-1177-admin/footer-1177-admin-headline.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Footer1177AdminHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooter1177AdminHeadline({ headline, srHeadline }: Footer1177AdminHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177AdminHeadline {
+    var displayName: string;
+}

package/components/footer-1177-admin/footer-1177-admin-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177AdminHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-admin__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
+}
+IDSFooter1177AdminHeadline.displayName = "IDSFooter1177AdminHeadline";
+
+export { IDSFooter1177AdminHeadline };

package/components/footer-1177-admin/footer-1177-admin.d.ts

@@ -14,7 +14,7 @@ interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177Admin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177AdminProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177Admin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177AdminProps): React.JSX.Element;
 export declare namespace IDSFooter1177Admin {
     var displayName: string;
 }

package/components/footer-1177-admin/footer-1177-admin.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css';
+import { IDSFooter1177AdminColumns } from './footer-1177-admin-columns.js';
+import { IDSFooter1177AdminHeadline } from './footer-1177-admin-headline.js';
 
 function IDSFooter1177Admin({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-admin__headline", children: headline })] }));
-        }
-        return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: col1 });
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsxs("div", { className: "ids-footer-1177-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: jsx(IDSFooter1177AdminHeadline, { headline: headline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsxs("div", { className: "ids-footer-1177-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-admin__cols", children: jsx(IDSFooter1177AdminColumns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 }
 IDSFooter1177Admin.displayName = "IDSFooter1177Admin";
 

package/components/footer-1177-pro/footer-1177-pro-columns.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export interface Footer1177ProColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1Headline?: ReactNode;
+    col2Headline?: ReactNode;
+    col3Headline?: ReactNode;
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177ProColumns({ col1, col2, col3, col1Headline, col2Headline, col3Headline }: Footer1177ProColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177ProColumns {
+    var displayName: string;
+}

package/components/footer-1177-pro/footer-1177-pro-columns.js

@@ -0,0 +1,18 @@
+import { jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177ProColumns({ col1, col2, col3, col1Headline, col2Headline, col3Headline }) {
+    if (!!col1 && !col2 && !col3) {
+        return (jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--100"), children: [col1Headline, col1] }));
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col2Headline, col2] })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col2Headline, col2] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col3Headline, col3] })] }));
+    }
+    return null;
+}
+IDSFooter1177ProColumns.displayName = "IDSFooter1177ProColumns";
+
+export { IDSFooter1177ProColumns };

package/components/footer-1177-pro/footer-1177-pro-headline.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Footer1177ProHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooter1177ProHeadline({ headline, srHeadline }: Footer1177ProHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177ProHeadline {
+    var displayName: string;
+}

package/components/footer-1177-pro/footer-1177-pro-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177ProHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-pro__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-pro__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-1177-pro__headline", children: headline });
+}
+IDSFooter1177ProHeadline.displayName = "IDSFooter1177ProHeadline";
+
+export { IDSFooter1177ProHeadline };

package/components/footer-1177-pro/footer-1177-pro.d.ts

@@ -18,7 +18,7 @@ interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177Pro({ headline, srHeadline, mobileHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177Pro({ headline, srHeadline, mobileHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): React.JSX.Element;
 export declare namespace IDSFooter1177Pro {
     var displayName: string;
 }