@ilo-org/react 0.10.6 → 0.12.0

package/lib/cjs/components/index.js

@@ -16,8 +16,8 @@ require('react/jsx-runtime');
 require('classnames');
 require('react');
 var components_GlobalProvider_GlobalProvider = require('./GlobalProvider/GlobalProvider.js');
-require('../GlobalCtx-97e4b433.js');
-require('../TagCtx-929c7753.js');
+require('../GlobalCtx-10114bdd.js');
+require('../TagCtx-690a1d54.js');
 var components_Button_Button = require('./Button/Button.js');
 var components_ContextMenu_ContextMenu = require('./ContextMenu/ContextMenu.js');
 var components_Fieldset_Fieldset = require('./Fieldset/Fieldset.js');
@@ -46,20 +46,20 @@ var components_Video_Video = require('./Video/Video.js');
 var components_Dropdown_Dropdown = require('./Dropdown/Dropdown.js');
 var components_Icon_Icon = require('./Icon/Icon.js');
 var components_List_List = require('./List/List.js');
-require('../ListCtx-7db7fe04.js');
+require('../ListCtx-14aa546f.js');
 var components_Profile_Profile = require('./Profile/Profile.js');
 var components_TableOfContents_TableOfContents = require('./TableOfContents/TableOfContents.js');
 var components_Footer_Footer = require('./Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./Navigation/Navigation.js');
-var components_Card_Card = require('./Card/Card.js');
-var components_Card_CardGroup = require('./Card/CardGroup.js');
+var components_Cards_Card = require('./Cards/Card.js');
+var components_Cards_CardGroup = require('./Cards/CardGroup.js');
 var components_Breadcrumb_Breadcrumb = require('./Breadcrumb/Breadcrumb.js');
+var components_Tabs_Tabs = require('./Tabs/Tabs.js');
 require('../hooks/useGlobalSettings.js');
-require('../AccordionCtx-fe08ff45.js');
+require('../AccordionCtx-be704051.js');
 require('@ilo-org/utils');
 require('../utils/checkArrayDuplicates.js');
-require('../index-0af02e81.js');
 require('react-dom');
 require('../utils/createChainedFunction.js');
 require('../utils/getDefaultDimensionValue.js');
@@ -74,12 +74,20 @@ require('./Hero/HeroCard.js');
 require('./SocialMedia/SocialMedia.js');
 require('./Input/Input.js');
 require('./FormElement/FormElement.js');
-require('../VideoPlayer-5f0a64c6.js');
-require('../utils/hoursMinutesSeconds.js');
-require('screenfull');
+require('./Video/VideoPlayer.js');
+require('videojs-youtube');
+require('video.js');
 require('@ilo-org/icons-react');
 require('./Logo/Logo.js');
+require('./Cards/FeatureCard/index.js');
+require('./Cards/DataCard/index.js');
+require('./Cards/DetailCard/index.js');
+require('./Cards/FactlistCard/index.js');
 require('./List/ListItem.js');
+require('./Cards/MultilinkCard/index.js');
+require('./Cards/PromoCard/index.js');
+require('./Cards/StatCard/index.js');
+require('./Cards/TextCard/index.js');
 
 
 
@@ -124,6 +132,7 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
-exports.Card = components_Card_Card;
-exports.CardGroup = components_Card_CardGroup;
+exports.Card = components_Cards_Card;
+exports.CardGroup = components_Cards_CardGroup;
 exports.Breadcrumb = components_Breadcrumb_Breadcrumb;
+exports.Tabs = components_Tabs_Tabs;

package/lib/cjs/hooks/index.js

@@ -5,7 +5,7 @@ var hooks_useVideoPlayer = require('./useVideoPlayer.js');
 require('tslib');
 require('react');
 require('react/jsx-runtime');
-require('../GlobalCtx-97e4b433.js');
+require('../GlobalCtx-10114bdd.js');
 
 
 

package/lib/cjs/hooks/useGlobalSettings.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var tslib = require('tslib');
-var require$$0 = require('react');
+var React = require('react');
 require('react/jsx-runtime');
-var GlobalCtx = require('../GlobalCtx-97e4b433.js');
+var GlobalCtx = require('../GlobalCtx-10114bdd.js');
 
 const useGlobalSettings = () => {
-    const _a = require$$0.useContext(GlobalCtx.GlobalProviderContext), { prefix } = _a, rest = tslib.__rest(_a, ["prefix"]);
+    const _a = React.useContext(GlobalCtx.GlobalProviderContext), { prefix } = _a, rest = tslib.__rest(_a, ["prefix"]);
     return Object.assign({ prefix }, rest);
 };
 

package/lib/cjs/hooks/usePrevious.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var require$$0 = require('react');
+var React = require('react');
 
 // This code was shamelessly borrowed from the blog post
 // "How to access previous props or state with React Hooks" by
 // Ohans Emmanuel, published on LogRocket May 11, 2023
 // https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
 function usePrevious(value) {
-    const ref = require$$0.useRef();
-    require$$0.useEffect(() => {
+    const ref = React.useRef();
+    React.useEffect(() => {
         ref.current = value; //assign the value of ref to the argument
     }, [value]); //this code will run when the value of 'value' changes
     return ref.current; //in the end, return the current ref value.

package/lib/cjs/hooks/useVideoPlayer.js

@@ -1,19 +1,19 @@
 'use strict';
 
-var require$$0 = require('react');
+var React = require('react');
 
 const useVideoPlayer = (videoElement) => {
-    const [fullscreen, setFullscreen] = require$$0.useState(false);
-    const [playing, setPlaying] = require$$0.useState(false);
-    const [progress, setProgress] = require$$0.useState(0);
-    const [showvolume, showVolume] = require$$0.useState(false);
+    const [fullscreen, setFullscreen] = React.useState(false);
+    const [playing, setPlaying] = React.useState(false);
+    const [progress, setProgress] = React.useState(0);
+    const [showvolume, showVolume] = React.useState(false);
     /**
      * Fullscreen functionality
      */
     const toggleFullscreen = () => {
         setFullscreen(!fullscreen);
     };
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         if (fullscreen) {
             if (videoElement.requestFullscreen) {
                 videoElement.requestFullscreen();
@@ -29,7 +29,7 @@ const useVideoPlayer = (videoElement) => {
     const togglePlay = () => {
         setPlaying(!playing);
     };
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         playing ? videoElement.current.play() : videoElement.current.pause();
     }, [playing, videoElement]);
     /**

package/lib/cjs/index.js

@@ -16,8 +16,8 @@ require('react/jsx-runtime');
 require('classnames');
 require('react');
 var components_GlobalProvider_GlobalProvider = require('./components/GlobalProvider/GlobalProvider.js');
-require('./GlobalCtx-97e4b433.js');
-require('./TagCtx-929c7753.js');
+require('./GlobalCtx-10114bdd.js');
+require('./TagCtx-690a1d54.js');
 var components_Button_Button = require('./components/Button/Button.js');
 var components_ContextMenu_ContextMenu = require('./components/ContextMenu/ContextMenu.js');
 var components_Fieldset_Fieldset = require('./components/Fieldset/Fieldset.js');
@@ -46,20 +46,20 @@ var components_Video_Video = require('./components/Video/Video.js');
 var components_Dropdown_Dropdown = require('./components/Dropdown/Dropdown.js');
 var components_Icon_Icon = require('./components/Icon/Icon.js');
 var components_List_List = require('./components/List/List.js');
-require('./ListCtx-7db7fe04.js');
+require('./ListCtx-14aa546f.js');
 var components_Profile_Profile = require('./components/Profile/Profile.js');
 var components_TableOfContents_TableOfContents = require('./components/TableOfContents/TableOfContents.js');
 var components_Footer_Footer = require('./components/Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./components/LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./components/Navigation/Navigation.js');
-var components_Card_Card = require('./components/Card/Card.js');
-var components_Card_CardGroup = require('./components/Card/CardGroup.js');
+var components_Cards_Card = require('./components/Cards/Card.js');
+var components_Cards_CardGroup = require('./components/Cards/CardGroup.js');
 var components_Breadcrumb_Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
+var components_Tabs_Tabs = require('./components/Tabs/Tabs.js');
 require('./hooks/useGlobalSettings.js');
-require('./AccordionCtx-fe08ff45.js');
+require('./AccordionCtx-be704051.js');
 require('@ilo-org/utils');
 require('./utils/checkArrayDuplicates.js');
-require('./index-0af02e81.js');
 require('react-dom');
 require('./utils/createChainedFunction.js');
 require('./utils/getDefaultDimensionValue.js');
@@ -75,11 +75,19 @@ require('./components/Hero/HeroCard.js');
 require('./components/SocialMedia/SocialMedia.js');
 require('./components/Input/Input.js');
 require('./components/FormElement/FormElement.js');
-require('./VideoPlayer-5f0a64c6.js');
-require('./utils/hoursMinutesSeconds.js');
-require('screenfull');
+require('./components/Video/VideoPlayer.js');
+require('videojs-youtube');
+require('video.js');
 require('./components/Logo/Logo.js');
+require('./components/Cards/FeatureCard/index.js');
+require('./components/Cards/DataCard/index.js');
+require('./components/Cards/DetailCard/index.js');
+require('./components/Cards/FactlistCard/index.js');
 require('./components/List/ListItem.js');
+require('./components/Cards/MultilinkCard/index.js');
+require('./components/Cards/PromoCard/index.js');
+require('./components/Cards/StatCard/index.js');
+require('./components/Cards/TextCard/index.js');
 
 
 
@@ -124,6 +132,7 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
-exports.Card = components_Card_Card;
-exports.CardGroup = components_Card_CardGroup;
+exports.Card = components_Cards_Card;
+exports.CardGroup = components_Cards_CardGroup;
 exports.Breadcrumb = components_Breadcrumb_Breadcrumb;
+exports.Tabs = components_Tabs_Tabs;

package/lib/esm/components/Cards/Card.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import FeatureCard from './FeatureCard/index.js';
+import DataCard from './DataCard/index.js';
+import DetailCard from './DetailCard/index.js';
+import FactlistCard from './FactlistCard/index.js';
+import MultilinkCard from './MultilinkCard/index.js';
+import PromoCard from './PromoCard/index.js';
+import StatCard from './StatCard/index.js';
+import TextCard from './TextCard/index.js';
+import 'classnames';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../../hooks/useGlobalSettings.js';
+import '../LinkList/LinkList.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../Profile/Profile.js';
+
+const Card = (props) => {
+    const componentMap = {
+        data: DataCard,
+        detail: DetailCard,
+        factlist: FactlistCard,
+        featurecard: FeatureCard,
+        multilink: MultilinkCard,
+        promo: PromoCard,
+        stat: StatCard,
+        text: TextCard,
+    };
+    const { type } = props;
+    const SelectedCardComponent = componentMap[type] || FeatureCard;
+    return jsx(SelectedCardComponent, Object.assign({}, props));
+};
+
+export { Card as default };

package/lib/esm/components/{Card → Cards}/CardGroup.js

@@ -1,23 +1,31 @@
+import './FeatureCard/index.js';
+import './DataCard/index.js';
+import './DetailCard/index.js';
+import './FactlistCard/index.js';
+import './MultilinkCard/index.js';
+import './PromoCard/index.js';
+import './StatCard/index.js';
+import './TextCard/index.js';
 import Card from './Card.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import '../Link/Link.js';
 import 'tslib';
-import '../List/List.js';
 import 'react';
 import '../../ListCtx-da435fdf.js';
+import '../LinkList/LinkList.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import '../Link/Link.js';
+import '../List/List.js';
 import '../List/ListItem.js';
-import '../LinkList/LinkList.js';
 import '../Profile/Profile.js';
 
 const CardGroup = ({ cards, cardcount, cta }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--cardgroup`;
     const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
-    return (jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
-                    cards.map((card) => (jsx(Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, variant: card.variant, size: card.size }))), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })) })));
+    return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
+                    cards.map((card) => (jsx(Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, type: card.type, size: card.size }))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
 };
 
 export { CardGroup as default };

package/lib/esm/components/Cards/DataCard/index.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__type__data__columns__${columns}`]: columns,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: eyebrow }) }) }))), dataset &&
+                            dataset.content &&
+                            dataset.content.items &&
+                            dataset.content.items.map((item) => (jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                    dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
+                                        dataset.cta.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                    dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+};
+
+export { DataCard as default };

package/lib/esm/components/Cards/DetailCard/index.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
+};
+
+export { DetailCard as default };

package/lib/esm/components/Cards/FactlistCard/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import List from '../../List/List.js';
+import ListItem from '../../List/ListItem.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+import '../../../ListCtx-da435fdf.js';
+
+const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
+};
+
+export { FactlistCard as default };

package/lib/esm/components/Cards/FeatureCard/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { FeatureCard as default };

package/lib/esm/components/Cards/MultilinkCard/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
+        [`${baseClass}__align__${alignment}`]: alignment,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { MultilinkCard as default };

package/lib/esm/components/Cards/PromoCard/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__promo`, {
+        [`${baseClass}__cornercut`]: cornercut,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsx("div", Object.assign({ className: wrapperClass }, { children: jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), cta && cta.label && (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
+};
+
+export { PromoCard as default };

package/lib/esm/components/Cards/StatCard/index.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
+        [`${baseClass}__color__${color}`]: color,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsx(Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
+};
+
+export { StatCard as default };

package/lib/esm/components/Cards/TextCard/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Profile from '../../Profile/Profile.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__text`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    console.log("heloo");
+    console.log(profile);
+    return (jsx("div", Object.assign({ className: wrapperClass }, { children: jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsx(Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` }))] })) }))] })) })));
+};
+
+export { TextCard as default };

package/lib/esm/components/Cards/index.js

@@ -0,0 +1,22 @@
+export { default as FeatureCard } from './FeatureCard/index.js';
+export { default as DataCard } from './DataCard/index.js';
+export { default as DetailCard } from './DetailCard/index.js';
+export { default as FactlistCard } from './FactlistCard/index.js';
+export { default as MultilinkCard } from './MultilinkCard/index.js';
+export { default as PromoCard } from './PromoCard/index.js';
+export { default as StatCard } from './StatCard/index.js';
+export { default as TextCard } from './TextCard/index.js';
+export { default as Card } from './Card.js';
+export { default as CardGroup } from './CardGroup.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../LinkList/LinkList.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../Profile/Profile.js';