@ilo-org/react 0.12.0 → 0.14.0

package/lib/esm/components/Footer/Footer.js

@@ -16,7 +16,7 @@ const Footer = ({ className, logo, tagline, subtagline, address, linkgroup, soci
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--footer`;
     const footerClasses = classNames(className, baseClass);
-    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), (socialmedia || subscribe) && (jsxs("div", Object.assign({ className: "connect" }, { children: [socialmedia && (jsx("div", Object.assign({ className: "social--links" }, { children: jsx(SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) }))), subscribe && (jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }))] })))] })), jsxs("div", Object.assign({ className: `${baseClass}--secondary` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) }))), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] }))] })));
+    return (jsxs("footer", Object.assign({ className: footerClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--main ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: "site--info" }, { children: [jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }), jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: tagline })), jsx("h4", Object.assign({ className: `${baseClass}--subhead` }, { children: subtagline }))] })), address && (jsx("div", Object.assign({ className: "address" }, { children: address.map((line, i) => (jsx("p", Object.assign({ className: "address--line" }, { children: line }), i))) }))), linkgroup && (jsx("nav", Object.assign({ className: "links" }, { children: jsx(LinkList, { linkgroup: linkgroup, theme: "dark" }) }))), socialmedia && (jsx("div", Object.assign({ className: "connect" }, { children: jsx("div", Object.assign({ className: "social--links" }, { children: jsx(SocialMedia, Object.assign({}, socialmedia, { theme: "dark" })) })) }))), subscribe && (jsx("div", Object.assign({ className: "subscribe" }, { children: jsx(Button, { label: subscribe === null || subscribe === void 0 ? void 0 : subscribe.label, url: subscribe === null || subscribe === void 0 ? void 0 : subscribe.url, type: "primary", size: "large", target: "_blank" }) })))] })), jsx("div", Object.assign({ className: `${baseClass}--secondary` }, { children: jsxs("div", Object.assign({ className: `${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--secondary--details` }, { children: [jsx("div", Object.assign({ className: "legal" }, { children: legal })), secondarylinks && (jsx("nav", Object.assign({ className: "secondarylinks" }, { children: jsx("ul", Object.assign({ className: "secondarylinks--list" }, { children: secondarylinks.map((link, i) => (jsx("li", Object.assign({ className: "secondarylinks--list--item" }, { children: jsx("a", Object.assign({ href: link.url, className: "secondarylinks--list--link" }, { children: link === null || link === void 0 ? void 0 : link.label }), i) })))) })) })))] })), jsx("a", Object.assign({ href: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.url, className: "anchorlink" }, { children: anchorlink === null || anchorlink === void 0 ? void 0 : anchorlink.label }))] })) }))] })));
 };
 
 export { Footer as default };

package/lib/esm/components/List/List.js

@@ -1,23 +1,21 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
-import { useState } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import { L as ListContext } from '../../ListCtx-da435fdf.js';
 import 'tslib';
+import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const List = ({ children, className, alignment, ordered, title, }) => {
+const List = ({ children, className, alignment = "default", ordered = "unstyled", title, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--list`;
-    const [activeItems] = useState([]);
-    const listClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${alignment}`]: alignment,
-        [`${baseClass}--${ordered}`]: true,
+    const unstyledClass = `${baseClass}__unstyled`;
+    const horizontalClass = `${baseClass}__horizontal`;
+    const titleClass = `${baseClass}--title`;
+    const listClasses = classNames(className, baseClass, {
+        [unstyledClass]: ordered === "unstyled",
+        [horizontalClass]: alignment === "horizontal",
     });
-    return (jsx(ListContext.Provider, Object.assign({ value: {
-            activeItems,
-        } }, { children: jsxs("div", Object.assign({ className: listClasses }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), ordered && ordered === "ordered" && jsx("ol", { children: children }), ordered && ordered !== "ordered" && (jsx("ul", Object.assign({ className: `${baseClass}--${alignment}` }, { children: children })))] })) })));
+    return (jsxs("div", Object.assign({ className: listClasses }, { children: [title && jsx("h2", Object.assign({ className: titleClass }, { children: title })), ordered && ordered === "ordered" ? (jsx("ol", { children: children })) : (jsx("ul", { children: children }))] })));
 };
 
 export { List as default };

package/lib/esm/components/List/ListItem.js

@@ -2,18 +2,15 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import { a as ListItemContext } from '../../ListCtx-da435fdf.js';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 
 const ListItem = (_a) => {
-    var { children, id, className } = _a, rest = __rest(_a, ["children", "id", "className"]);
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
     const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--list__item`;
-    const listItemClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    return (jsx(ListItemContext.Provider, Object.assign({ value: { id } }, { children: jsx("li", Object.assign({ className: listItemClasses }, rest, { children: children })) })));
+    const baseClass = `${prefix}--list--item`;
+    const listItemClasses = classNames(className, baseClass);
+    return (jsx("li", Object.assign({ className: listItemClasses }, rest, { children: children })));
 };
 
 export { ListItem as default };

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

@@ -2,8 +2,7 @@ export { default as List } from './List.js';
 export { default as ListItem } from './ListItem.js';
 import 'react/jsx-runtime';
 import 'classnames';
-import 'react';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
+import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../../ListCtx-da435fdf.js';

package/lib/esm/components/Navigation/Navigation.js

@@ -39,10 +39,10 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     const handleSubnavToggle = () => {
         setSubnavToggleOpen(!toggleSubnavOpen);
     };
-    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
+    return (jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button" }, { children: languagelabel })), jsx(ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
                                                         languagecontextmenu.links.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
+                                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsx("nav", Object.assign({ className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
+                                        subnav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsx("div", Object.assign({ className: `${prefix}--search-box` }, { children: jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsx(SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })) }))] }))] })));
 };
 
 export { Navigation as default };

package/lib/esm/components/Pagination/Pagination.js

@@ -41,7 +41,7 @@ const Pagination = ({ className, callback, currentPage, firstPageUrl, firstPageT
             callback(e);
         }
     };
-    return (jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsx("span", { children: currentPage + 1 }), " ", pageCountPreposition, " ", jsx("span", { children: totalPages })] })), jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
+    return (jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsx("span", { children: currentPage + 1 }), jsx("span", { children: pageCountPreposition }), jsx("span", { children: totalPages })] })), jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
 };
 
 export { Pagination as default };

package/lib/esm/components/index.js

@@ -44,14 +44,12 @@ export { default as Video } from './Video/Video.js';
 export { default as Dropdown } from './Dropdown/Dropdown.js';
 export { default as Icon } from './Icon/Icon.js';
 export { default as List } from './List/List.js';
-import '../ListCtx-da435fdf.js';
 export { default as Profile } from './Profile/Profile.js';
 export { default as TableOfContents } from './TableOfContents/TableOfContents.js';
 export { default as Footer } from './Footer/Footer.js';
 export { default as LocalNav } from './LocalNav/LocalNav.js';
 export { default as Navigation } from './Navigation/Navigation.js';
-export { default as Card } from './Cards/Card.js';
-export { default as CardGroup } from './Cards/CardGroup.js';
+export { default as CardGroup } from './Cards/CardGroup/CardGroup.js';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './Tabs/Tabs.js';
 import '../hooks/useGlobalSettings.js';
@@ -77,12 +75,12 @@ import 'videojs-youtube';
 import 'video.js';
 import '@ilo-org/icons-react';
 import './Logo/Logo.js';
-import './Cards/FeatureCard/index.js';
-import './Cards/DataCard/index.js';
-import './Cards/DetailCard/index.js';
-import './Cards/FactlistCard/index.js';
+import './Cards/DataCard/DataCard.js';
+import './Cards/DetailCard/DetailCard.js';
+import './Cards/FactlistCard/FactListCard.js';
 import './List/ListItem.js';
-import './Cards/MultilinkCard/index.js';
-import './Cards/PromoCard/index.js';
-import './Cards/StatCard/index.js';
-import './Cards/TextCard/index.js';
+import './Cards/FeatureCard/FeatureCard.js';
+import './Cards/MultilinkCard/MultiLinkCard.js';
+import './Cards/PromoCard/PromoCard.js';
+import './Cards/StatCard/StatCard.js';
+import './Cards/TextCard/TextCard.js';

package/lib/esm/index.js

@@ -44,14 +44,12 @@ export { default as Video } from './components/Video/Video.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as Icon } from './components/Icon/Icon.js';
 export { default as List } from './components/List/List.js';
-import './ListCtx-da435fdf.js';
 export { default as Profile } from './components/Profile/Profile.js';
 export { default as TableOfContents } from './components/TableOfContents/TableOfContents.js';
 export { default as Footer } from './components/Footer/Footer.js';
 export { default as LocalNav } from './components/LocalNav/LocalNav.js';
 export { default as Navigation } from './components/Navigation/Navigation.js';
-export { default as Card } from './components/Cards/Card.js';
-export { default as CardGroup } from './components/Cards/CardGroup.js';
+export { default as CardGroup } from './components/Cards/CardGroup/CardGroup.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as Tabs } from './components/Tabs/Tabs.js';
 import './hooks/useGlobalSettings.js';
@@ -77,12 +75,12 @@ import './components/Video/VideoPlayer.js';
 import 'videojs-youtube';
 import 'video.js';
 import './components/Logo/Logo.js';
-import './components/Cards/FeatureCard/index.js';
-import './components/Cards/DataCard/index.js';
-import './components/Cards/DetailCard/index.js';
-import './components/Cards/FactlistCard/index.js';
+import './components/Cards/DataCard/DataCard.js';
+import './components/Cards/DetailCard/DetailCard.js';
+import './components/Cards/FactlistCard/FactListCard.js';
 import './components/List/ListItem.js';
-import './components/Cards/MultilinkCard/index.js';
-import './components/Cards/PromoCard/index.js';
-import './components/Cards/StatCard/index.js';
-import './components/Cards/TextCard/index.js';
+import './components/Cards/FeatureCard/FeatureCard.js';
+import './components/Cards/MultilinkCard/MultiLinkCard.js';
+import './components/Cards/PromoCard/PromoCard.js';
+import './components/Cards/StatCard/StatCard.js';
+import './components/Cards/TextCard/TextCard.js';

package/lib/types/react/src/components/Cards/CardGroup/CardGroup.args.d.ts

@@ -0,0 +1,13 @@
+import { CardGroupProps } from "./CardGroup.props";
+export declare const textCardGroup: CardGroupProps;
+declare const CardGroupArgs: {
+    textCardGroup: import("./CardGroup.props").TextCardGroup;
+    statCardGroup: import("./CardGroup.props").StatCardGroup;
+    multilinkCardGroup: import("./CardGroup.props").MultilinkCardGroup;
+    promoCardGroup: import("./CardGroup.props").PromoCardGroup;
+    featureCardGroup: import("./CardGroup.props").FeatureCardGroup;
+    detailCardGroup: import("./CardGroup.props").DetailCardGroup;
+    factListCardGroup: import("./CardGroup.props").FactlistCardGroup;
+    dataCardGroup: import("./CardGroup.props").DataCardGroup;
+};
+export default CardGroupArgs;

package/lib/types/react/src/components/Cards/CardGroup/CardGroup.props.d.ts

@@ -0,0 +1,58 @@
+import { LinkProps } from "../../LinkList/LinkList.props";
+import { StatCardProps } from "../StatCard";
+import { MultilinkCardProps } from "../MultilinkCard";
+import { TextCardProps } from "../TextCard";
+import { PromoCardProps } from "../PromoCard";
+import { FeatureCardProps } from "../FeatureCard";
+import { DetailCardProps } from "../DetailCard";
+import { FactlistCardProps } from "../FactlistCard";
+import { DataCardProps } from "../DataCard";
+export interface CommonCardGroupProps {
+    /**
+     * Number of cards in the group
+     */
+    cardCount: string;
+    /**
+     * A Button to display after all the cards in the group
+     */
+    cta?: LinkProps;
+}
+export interface StatCardGroup extends CommonCardGroupProps {
+    /**
+     * Represents different types of card groups:
+     */
+    type: "stat";
+    /**
+     * An array of card objects corresponding to the respective card type:
+     */
+    cards: StatCardProps[];
+}
+export interface MultilinkCardGroup extends CommonCardGroupProps {
+    type: "multilink";
+    cards: MultilinkCardProps[];
+}
+export interface TextCardGroup extends CommonCardGroupProps {
+    type: "text";
+    cards: TextCardProps[];
+}
+export interface PromoCardGroup extends CommonCardGroupProps {
+    type: "promo";
+    cards: PromoCardProps[];
+}
+export interface FeatureCardGroup extends CommonCardGroupProps {
+    type: "feature";
+    cards: FeatureCardProps[];
+}
+export interface DetailCardGroup extends CommonCardGroupProps {
+    type: "detail";
+    cards: DetailCardProps[];
+}
+export interface FactlistCardGroup extends CommonCardGroupProps {
+    type: "factlist";
+    cards: FactlistCardProps[];
+}
+export interface DataCardGroup extends CommonCardGroupProps {
+    type: "data";
+    cards: DataCardProps[];
+}
+export type CardGroupProps = StatCardGroup | MultilinkCardGroup | TextCardGroup | PromoCardGroup | FeatureCardGroup | DetailCardGroup | FactlistCardGroup | DataCardGroup;

package/lib/types/react/src/components/Cards/CardGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CardGroup } from "./CardGroup";
+export type { CardGroupProps } from "./CardGroup.props";
+export { default as CardGroupArgs } from "./CardGroup.args";

package/lib/types/react/src/components/Cards/DataCard/DataCard.args.d.ts

@@ -0,0 +1,2 @@
+import { DataCardProps } from ".";
+export declare const DataCardArgs: DataCardProps;

package/lib/types/react/src/components/Cards/DataCard/DataCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DataCardProps } from "./DataCard.props";
+declare const DataCard: FC<DataCardProps>;
+export default DataCard;

package/lib/types/react/src/components/Cards/DataCard/DataCard.props.d.ts

@@ -0,0 +1,50 @@
+import { CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+export type DataCardProps = {
+    /**
+     * A line of text that appears as a small heading at the top of the card
+     */
+    eyebrow?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links * * object (optional headline, array of items with label and url)
+     */
+    dataset?: CardDataset;
+    /**
+     * Make the content appear in one or two columns. Only applies when the size is set to `wide` or `fluid`
+     */
+    columns?: string;
+};
+interface CardDataset {
+    content?: DataContent;
+    files?: DataFile;
+    links?: DataLink;
+    cta?: Cta;
+}
+interface DataContent {
+    items?: Array<ContentItem>;
+}
+interface ContentItem {
+    label?: string;
+    copy?: string;
+}
+interface DataFile {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+interface DataLink {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+interface Cta {
+    headline?: string;
+    items?: Array<LinkProps>;
+}
+export {};

package/lib/types/react/src/components/Cards/DataCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { DataCardProps } from "../Card.props";
-declare const DataCard: FC<DataCardProps>;
-export default DataCard;
+export { default as DataCard } from "./DataCard";
+export type { DataCardProps } from "./DataCard.props";
+export { DataCardArgs } from "./DataCard.args";

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.args.d.ts

@@ -0,0 +1,3 @@
+import { DetailCardProps } from ".";
+export declare const DetailCardArgs: DetailCardProps;
+export default DetailCardArgs;

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DetailCardProps } from "./DetailCard.props";
+declare const DetailCard: FC<DetailCardProps>;
+export default DetailCard;

package/lib/types/react/src/components/Cards/DetailCard/DetailCard.props.d.ts

@@ -0,0 +1,35 @@
+import { CardSize, EventDate } from "../../../types";
+export type DetailCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    /**
+     * Information about an event
+     */
+    eventdetails?: string;
+    /**
+     * A URL to link to
+     */
+    link?: string;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+};

package/lib/types/react/src/components/Cards/DetailCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { DetailCardProps } from "../Card.props";
-declare const DetailCard: FC<DetailCardProps>;
-export default DetailCard;
+export { default as DetailCard } from "./DetailCard";
+export type { DetailCardProps } from "./DetailCard.props";
+export { DetailCardArgs } from "./DetailCard.args";

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.args.d.ts

@@ -0,0 +1,3 @@
+import { FactlistCardProps } from ".";
+export declare const FactlistCardArgs: FactlistCardProps;
+export default FactlistCardArgs;

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FactlistCardProps } from "./FactListCard.props";
+declare const FactlistCard: FC<FactlistCardProps>;
+export default FactlistCard;

package/lib/types/react/src/components/Cards/FactlistCard/FactListCard.props.d.ts

@@ -0,0 +1,16 @@
+import { ThemeTypes, CardSize } from "../../../types";
+export type FactlistCardProps = {
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    list?: string[];
+};

package/lib/types/react/src/components/Cards/FactlistCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { FactlistCardProps } from "../Card.props";
-declare const FactlistCard: FC<FactlistCardProps>;
-export default FactlistCard;
+export { default as FactlistCard } from "./FactListCard";
+export type { FactlistCardProps } from "./FactListCard.props";
+export { FactlistCardArgs } from "./FactListCard.args";

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.args.d.ts

@@ -0,0 +1,3 @@
+import { FeatureCardProps } from ".";
+export declare const FeatureCardArgs: FeatureCardProps;
+export default FeatureCardArgs;

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { FeatureCardProps } from "./FeatureCard.props";
+declare const FeatureCard: FC<FeatureCardProps>;
+export default FeatureCard;

package/lib/types/react/src/components/Cards/FeatureCard/FeatureCard.props.d.ts

@@ -0,0 +1,31 @@
+import { ThemeTypes, CardSize, EventDate } from "../../../types";
+import { LinkListProps } from "../../LinkList/LinkList.props";
+export type FeatureCardProps = {
+    isvideo?: boolean;
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: Omit<CardSize, "standard">;
+    /**
+     * Specify the event Date, in both human and Unix format.
+     */
+    date?: EventDate;
+    link?: string;
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+};

package/lib/types/react/src/components/Cards/FeatureCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { FeatureCardProps } from "../Card.props";
-declare const FeatureCard: FC<FeatureCardProps>;
-export default FeatureCard;
+export { default as FeatureCard } from "./FeatureCard";
+export type { FeatureCardProps } from "./FeatureCard.props";
+export { FeatureCardArgs } from "./FeatureCard.args";

package/lib/types/react/src/components/Cards/MultilinkCard/MultiLinkCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MultilinkCardProps } from "./MultilinkCard.props";
+declare const MultilinkCard: FC<MultilinkCardProps>;
+export default MultilinkCard;

package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.args.d.ts

@@ -0,0 +1,2 @@
+import { MultilinkCardProps } from ".";
+export declare const MultilinkCardArgs: MultilinkCardProps;

package/lib/types/react/src/components/Cards/MultilinkCard/MultilinkCard.props.d.ts

@@ -0,0 +1,25 @@
+import { CardAlignment, CardSize } from "../../../types";
+import { LinkListProps } from "../../LinkList/LinkList.props";
+export type MultilinkCardProps = {
+    isvideo?: boolean;
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * How big should the card be
+     */
+    size?: CardSize;
+    alignment?: CardAlignment;
+    intro?: string;
+    link?: string;
+    linklist?: LinkListProps;
+    /**
+     * The image to show in the card
+     */
+    image?: string;
+};

package/lib/types/react/src/components/Cards/MultilinkCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { MultilinkCardProps } from "../Card.props";
-declare const MultilinkCard: FC<MultilinkCardProps>;
-export default MultilinkCard;
+export { default as MultilinkCard } from "./MultiLinkCard";
+export type { MultilinkCardProps } from "./MultilinkCard.props";
+export { MultilinkCardArgs } from "./MultilinkCard.args";

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.args.d.ts

@@ -0,0 +1,3 @@
+import { PromoCardProps } from ".";
+export declare const PromoCardArgs: PromoCardProps;
+export default PromoCardArgs;

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { PromoCardProps } from "./PromoCard.props";
+declare const PromoCard: FC<PromoCardProps>;
+export default PromoCard;

package/lib/types/react/src/components/Cards/PromoCard/PromoCard.props.d.ts

@@ -0,0 +1,30 @@
+import { ThemeTypes, CardCornerType, CardSize } from "../../../types";
+import { LinkProps } from "../../LinkList/LinkList.props";
+export type PromoCardProps = {
+    /**
+     * A line of text that appears as a small heading above the title of the card
+     */
+    eyebrow?: string;
+    /**
+     * The title of the card
+     */
+    title: string;
+    /**
+     * Will render the card to appear on light or dark backgrounds
+     */
+    theme?: ThemeTypes;
+    /**
+     * How big should the card be
+     */
+    size?: CardSize;
+    /**
+     * Apply an optional corner cut to the top of the card
+     */
+    cornercut?: CardCornerType;
+    /**
+     * Introductory text in the card
+     */
+    intro?: string;
+    link?: string;
+    cta?: LinkProps;
+};

package/lib/types/react/src/components/Cards/PromoCard/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
-import { PromoCardProps } from "../Card.props";
-declare const PromoCard: FC<PromoCardProps>;
-export default PromoCard;
+export { default as PromoCard } from "./PromoCard";
+export type { PromoCardProps } from "./PromoCard.props";
+export { PromoCardArgs } from "./PromoCard.args";

package/lib/types/react/src/components/Cards/StatCard/StatCard.args.d.ts

@@ -0,0 +1,3 @@
+import { StatCardProps } from ".";
+export declare const StatCardArgs: StatCardProps;
+export default StatCardArgs;