@ilo-org/react 0.17.7 → 0.18.0

package/lib/cjs/components/Logo/Logo.js

@@ -1,153 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var classNames = require('classnames');
-require('../../GlobalCtx-10114bdd.js');
-
-const isOverflown = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, }) => scrollHeight > clientHeight || scrollWidth > clientWidth;
-const getFullFontSize = (container, { maxSize = 600, startingHeight = 9, step = 0.5 }) => {
-    let i = startingHeight;
-    let overflow = false;
-    while (!overflow && i < maxSize) {
-        container.style.fontSize = `${i}px`;
-        container.style.lineHeight = `${i}px`;
-        overflow = isOverflown(container);
-        if (!overflow) {
-            i = i + step;
-        }
-    }
-    // Reset styles to the way they were
-    container.style.fontSize = "";
-    container.style.lineHeight = "";
-    // Return the ideal font size
-    return i - step;
-};
-const BaseLogo = (_a) => {
-    var { baseClass, className, subbrand, alt, src, style: userStyles, size = "fluid", theme = "light" } = _a, props = tslib.__rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
-    // The logo image element
-    const imageRef = React.useRef(null);
-    // The lockup container
-    const lockupRef = React.useRef(null);
-    // The lockup text
-    const lockupTextRef = React.useRef(null);
-    // Initial height of the image when it's loaded
-    const initialImageHeight = React.useRef(null);
-    // Has the image loaded or not
-    const [imageLoaded, setImageLoaded] = React.useState(false);
-    // Dynamic height of the image
-    const [imageHeight, setImageHeight] = React.useState(0);
-    // Ratio of the font size to the height of the logo image
-    const [fontSizeRatio, setfontSizeRatio] = React.useState(0);
-    // Is the logo visible? Default to true if not a subbrand
-    const [isLogoVisible, setIsLogoVisible] = React.useState(!subbrand);
-    // Resize observer gets the initial height of the image when
-    // it loads and updates the height when it changes in state
-    const observer = React.useRef(new ResizeObserver((entries) => {
-        const { height } = entries[0].contentRect;
-        if (!initialImageHeight.current) {
-            initialImageHeight.current = height;
-        }
-        setImageHeight(height);
-    }));
-    // Make the logo visible for subrand when everything is ready
-    React.useEffect(() => {
-        if (subbrand && imageLoaded && fontSizeRatio) {
-            setIsLogoVisible(true);
-        }
-    }, [imageLoaded, fontSizeRatio, subbrand]);
-    // Set up the Resize observer to watch the image
-    React.useLayoutEffect(() => {
-        if (imageLoaded && lockupRef.current && imageRef.current) {
-            const imageEl = imageRef.current;
-            observer.current.observe(imageEl);
-            return () => observer.current.unobserve(imageEl);
-        }
-    }, [imageLoaded]);
-    // Gets the font size necessary for the lockup text to fill the
-    // the lockup container as much as possible without overflowing.
-    // Then gets the ratio of full font size to image height which will
-    // be used to calculate the font size if the image gets resized
-    React.useLayoutEffect(() => {
-        setFontSize();
-    }, [imageLoaded, initialImageHeight.current]);
-    // Adjust the font size if for some weird reason the subbrand changes
-    // This is mostly just to illustrate how the component works on Storybook
-    React.useLayoutEffect(() => {
-        setFontSize();
-    }, [subbrand]);
-    function setFontSize() {
-        if (lockupRef.current &&
-            lockupTextRef.current &&
-            initialImageHeight.current) {
-            const fullFontSize = getFullFontSize(lockupRef.current, {
-                maxSize: initialImageHeight.current,
-            });
-            const ratio = fullFontSize / initialImageHeight.current;
-            setfontSizeRatio(ratio);
-        }
-    }
-    // Has the image loaded or not
-    function handleImageLoaded() {
-        setImageLoaded(true);
-    }
-    // Conditions for different CSS classes
-    const hasSubbrand = !!subbrand;
-    const hasFluidWidth = size === "fluid";
-    const hasFixedWidth = !hasFluidWidth && typeof size === "number";
-    // Classes for the outer figure container
-    const subBrandClass = `${baseClass}--sub-brand`;
-    const fluidWidthClass = `${baseClass}--size--fluid`;
-    const visibilityHidden = `${baseClass}--visibility--hidden`;
-    // Outer figure classes
-    const classNames$1 = classNames(baseClass, className, `${baseClass}--theme--${theme}`, {
-        [visibilityHidden]: !isLogoVisible,
-        [fluidWidthClass]: hasFluidWidth,
-        [subBrandClass]: hasSubbrand,
-    });
-    // Classes for the image element
-    const noSubBrandImageClass = `${baseClass}--image`;
-    const subBrandImageClass = `${subBrandClass}--image`;
-    // Set inline CSS including variables on the outer figure element
-    const getStyle = () => {
-        const conditionalStyles = {};
-        // Add CSS vars if this is a sub-brand
-        if (hasSubbrand) {
-            conditionalStyles["--logo-image-height"] = `${imageHeight}px`;
-            conditionalStyles["--logo-font-size"] = `${fontSizeRatio * imageHeight}px`;
-        }
-        // Add fixed width if it has fixed width
-        if (hasFixedWidth) {
-            conditionalStyles.width = `${size}px`;
-        }
-        // User styles may be overriden
-        return Object.assign({ userStyles }, conditionalStyles);
-    };
-    const getImageSrc = () => {
-        if (typeof src === "string") {
-            return src;
-        }
-        return src[theme];
-    };
-    return (jsxRuntime.jsxs("figure", Object.assign({ className: classNames$1, style: getStyle() }, { children: [jsxRuntime.jsx("img", Object.assign({ ref: imageRef, alt: alt, src: getImageSrc(), className: classNames({
-                    [subBrandImageClass]: hasSubbrand,
-                    [noSubBrandImageClass]: !hasSubbrand,
-                }), onLoad: handleImageLoaded }, props)), hasSubbrand && (jsxRuntime.jsxs("div", Object.assign({ ref: lockupRef, className: `${subBrandClass}--lock-up` }, { children: [jsxRuntime.jsx("span", { className: `${subBrandClass}--lock-up--separator` }), jsxRuntime.jsx("span", Object.assign({ ref: lockupTextRef }, { children: subbrand }))] })))] })));
-};
-const Logo = (_a) => {
-    var { className, url, target, style, size } = _a, props = tslib.__rest(_a, ["className", "url", "target", "style", "size"]);
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--logo`;
-    const linkClass = `${baseClass}--link`;
-    const fluidClass = `${baseClass}--size--fluid`;
-    if (url) {
-        return (jsxRuntime.jsx("a", Object.assign({ href: url, target: target, className: classNames(linkClass, className, {
-                [fluidClass]: size === "fluid",
-            }), style: style }, { children: jsxRuntime.jsx(BaseLogo, Object.assign({}, props, { baseClass: baseClass, size: size })) })));
-    }
-    return (jsxRuntime.jsx(BaseLogo, Object.assign({ baseClass: baseClass, className: className, style: style, size: size }, props)));
-};
-
-module.exports = Logo;

package/lib/cjs/components/Logo/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var components_Logo_Logo = require('./Logo.js');
-require('tslib');
-require('react/jsx-runtime');
-require('react');
-require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-10114bdd.js');
-require('classnames');
-
-
-
-exports.Logo = components_Logo_Logo;

package/lib/cjs/components/LogoGrid/LogoGrid.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-const LogoGridItem = ({ url, label, src }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const itemClass = `${prefix}--logo-grid--item`;
-    const itemLinkClass = `${prefix}--logo-grid--link`;
-    const gridItemClass = classNames(itemClass, {
-        [itemLinkClass]: !!url,
-    });
-    if (!url) {
-        return (jsxRuntime.jsx("div", Object.assign({ className: gridItemClass }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
-    }
-    return (jsxRuntime.jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("img", { alt: label, src: src }) })));
-};
-const LogoGrid = ({ logos, theme = "light" }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--logo-grid`;
-    const themeClass = `${baseClass}__theme__${theme}`;
-    const logoGridClass = classNames(baseClass, themeClass);
-    return (jsxRuntime.jsx("div", Object.assign({ className: logoGridClass }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsxRuntime.jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
-};
-
-module.exports = LogoGrid;

package/lib/cjs/components/LogoGrid/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var components_LogoGrid_LogoGrid = require('./LogoGrid.js');
-require('react/jsx-runtime');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-
-
-exports.LogoGrid = components_LogoGrid_LogoGrid;

package/lib/cjs/components/Navigation/Navigation.js

@@ -1,83 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
-var components_SearchField_SearchField = require('../SearchField/SearchField.js');
-var classNames = require('classnames');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-require('../Input/Input.js');
-require('../Fieldset/Fieldset.js');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-require('../FormElement/FormElement.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-
-const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const [toggleMenuOpen, setMenuToggleOpen] = React.useState(false);
-    const [toggleSearchOpen, setSearchToggleOpen] = React.useState(false);
-    const [searchTabbable, setSearchTabbable] = React.useState(false);
-    const [toggleSubnavOpen, setSubnavToggleOpen] = React.useState(false);
-    const [subnavTabbable, setSubnavTabbable] = React.useState(false);
-    const [toggleLanguageOpen, setLanguageToggleOpen] = React.useState(false);
-    const baseClass = `${prefix}--header`;
-    const NavigationClasses = classNames(baseClass, {
-        [`${prefix}--mobile--open`]: toggleMenuOpen,
-        [`${prefix}--search--open`]: toggleSearchOpen,
-        [`${prefix}--subnav--open`]: toggleSubnavOpen,
-        [`${prefix}--select--open`]: toggleLanguageOpen,
-        [`${prefix}--context--open`]: toggleLanguageOpen,
-    });
-    const searchInputRef = React.useRef(null);
-    const handleSearchInputFocus = () => {
-        if (searchInputRef.current) {
-            searchInputRef.current.focus();
-        }
-    };
-    const handleMenuToggle = () => {
-        setMenuToggleOpen(!toggleMenuOpen);
-    };
-    const handleLanguageToggle = React.useCallback(() => {
-        setLanguageToggleOpen(!toggleLanguageOpen);
-    }, [toggleLanguageOpen]);
-    const handleSearchToggle = () => {
-        if (toggleSearchOpen) {
-            setSearchToggleOpen(false);
-            setTimeout(() => setSearchTabbable(false), 225);
-            return;
-        }
-        setSearchTabbable(true);
-        setTimeout(() => setSearchToggleOpen(true), 10);
-        setTimeout(() => handleSearchInputFocus(), 50);
-    };
-    const handleSubnavToggle = () => {
-        if (toggleSubnavOpen) {
-            setSubnavToggleOpen(false);
-            setTimeout(() => setSubnavTabbable(false), 125);
-            return;
-        }
-        setSubnavTabbable(true);
-        setTimeout(() => setSubnavToggleOpen(true), 10);
-    };
-    React.useEffect(() => {
-        if (window) {
-            if (toggleLanguageOpen) {
-                window.addEventListener("click", handleLanguageToggle);
-            }
-            else {
-                window.removeEventListener("click", handleLanguageToggle);
-            }
-            return () => window.removeEventListener("click", handleLanguageToggle);
-        }
-    }, [toggleLanguageOpen, handleLanguageToggle]);
-    return (jsxRuntime.jsxs("header", Object.assign({ className: NavigationClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--utility-bar` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--language-switcher--button`, type: "button", onClick: handleLanguageToggle }, { children: languagelabel })), jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links })] })) })) })), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--logo-bar` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: logo, alt: "ILO Logo" }) })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--logo-tagline` }, { children: [tagline === null || tagline === void 0 ? void 0 : tagline.tag, jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--logo-tagline--small` }, { children: tagline === null || tagline === void 0 ? void 0 : tagline.small }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: menulabel }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--navigation` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--nav--logo` }, { children: [jsxRuntime.jsx("a", Object.assign({ href: siteurl, className: `${baseClass}--logo-link` }, { children: jsxRuntime.jsx("img", { className: `${baseClass}--logo`, src: mobilelogo, alt: "ILO Logo" }) })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--search` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action }) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--switcher` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--nav--language--switcher--button`, onClick: handleLanguageToggle, type: "button" }, { children: languagelabel })) })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--nav--language--select` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--inner ${prefix}--container` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: subnav === null || subnav === void 0 ? void 0 : subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: languagelabel }))] })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: (languagecontextmenu === null || languagecontextmenu === void 0 ? void 0 : languagecontextmenu.links) &&
-                                                        languagecontextmenu.links.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link ${prefix}--nav--language` }, { children: item.label })) }), index))) }))] })) }))] })), jsxRuntime.jsxs("nav", Object.assign({ className: `${prefix}--nav`, "aria-labelledby": "primary-navigation" }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "primary-navigation" }, { children: primarynav === null || primarynav === void 0 ? void 0 : primarynav.navlabel })), jsxRuntime.jsxs("ul", Object.assign({ className: `${prefix}--nav--set` }, { children: [(primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                                primarynav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--link` }, { children: item.label })) }), index))), subnav && (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--nav--items` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--nav--trigger`, onClick: handleSubnavToggle }, { children: subnav.buttonlabel })) })))] }))] })), jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--search` }, { children: jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--search--button`, type: "button", onClick: handleSearchToggle }, { children: searchlabel })) }))] })), subnav && (jsxRuntime.jsx("nav", Object.assign({ style: { display: subnavTabbable ? "block" : "none" }, className: `${prefix}--subnav`, "aria-labelledby": "secondary-navigation" }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--subnav--inner ${prefix}--container` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--mobile--subnav` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${prefix}--mobile--subnav--menu` }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--mobile--subnav--back`, onClick: handleSubnavToggle, type: "button" }, { children: subnav.mobilebacklabel })), jsxRuntime.jsx("button", Object.assign({ className: `${prefix}--header--menu--close`, onClick: handleMenuToggle }, { children: subnav.mobilecloselabel })), jsxRuntime.jsx("h6", Object.assign({ className: `${prefix}--mobile--subnav--label` }, { children: subnav.buttonlabel }))] })) })), jsxRuntime.jsx("h2", Object.assign({ className: `${prefix}--nav--label`, id: "secondary-navigation" }, { children: subnav.navlabel })), jsxRuntime.jsx("ul", Object.assign({ className: `${prefix}--subnav--set` }, { children: (subnav === null || subnav === void 0 ? void 0 : subnav.items) &&
-                                        subnav.items.map((item, index) => (jsxRuntime.jsx("li", Object.assign({ className: `${prefix}--subnav--items` }, { children: jsxRuntime.jsx("a", Object.assign({ href: item.url, className: `${prefix}--subnav--link` }, { children: item.label })) }), index))) }))] })) }))), jsxRuntime.jsx("div", Object.assign({ style: { display: searchTabbable ? "block" : "none" }, className: `${prefix}--search-box` }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--header--inner ${prefix}--container` }, { children: jsxRuntime.jsx(components_SearchField_SearchField, { input: searchfield === null || searchfield === void 0 ? void 0 : searchfield.input, action: searchfield === null || searchfield === void 0 ? void 0 : searchfield.action, ref: searchInputRef }) })) }))] }))] })));
-};
-
-module.exports = Navigation;

package/lib/cjs/components/Navigation/index.js

@@ -1,22 +0,0 @@
-'use strict';
-
-var components_Navigation_Navigation = require('./Navigation.js');
-require('react/jsx-runtime');
-require('react');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-require('../ContextMenu/ContextMenu.js');
-require('classnames');
-require('../SearchField/SearchField.js');
-require('../Input/Input.js');
-require('../Fieldset/Fieldset.js');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-require('../FormElement/FormElement.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-
-
-
-exports.Navigation = components_Navigation_Navigation;

package/lib/cjs/components/Notification/Notification.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Button_Button = require('../Button/Button.js');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-require('../Link/Link.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-
-const Notification = ({ className, closelabel, copy, cta, headline, placement, timestamp, type, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const [display, setDisplay] = React.useState(true);
-    const baseClass = `${prefix}--notification`;
-    const notificationClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${placement}`]: placement,
-        [`icon icon--${type}`]: type,
-    });
-    const ctaprops = {
-        callback: () => { },
-        className: `${baseClass}--cta`,
-        children: false,
-        label: cta === null || cta === void 0 ? void 0 : cta.label,
-        size: "small",
-        type: "secondary",
-        url: cta === null || cta === void 0 ? void 0 : cta.url,
-    };
-    /**
-     * On click, close
-     */
-    const handleClick = () => {
-        setDisplay(false);
-    };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: display && (jsxRuntime.jsxs("div", Object.assign({ className: notificationClasses, role: "status", "aria-live": "polite", "aria-relevant": "additions" }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: copy })), timestamp && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: timestamp.unix }, { children: timestamp.human }))), cta && jsxRuntime.jsx(components_Button_Button, Object.assign({}, ctaprops))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--close`, type: "button", onClick: () => handleClick() }, { children: jsxRuntime.jsx("span", { children: closelabel }) }))] }))) }));
-};
-
-module.exports = Notification;

package/lib/cjs/components/Notification/index.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var components_Notification_Notification = require('./Notification.js');
-require('react/jsx-runtime');
-require('react');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-require('../Button/Button.js');
-require('../Link/Link.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-
-
-
-exports.Notification = components_Notification_Notification;

package/lib/cjs/components/NumberPicker/NumberPicker.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_FormControl_FormControl = require('../FormControl/FormControl.js');
-require('../../GlobalCtx-10114bdd.js');
-require('nanoid');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-
-const NumberPicker = React.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const formControlCtx = components_FormControl_FormControl.useFormControl();
-    const { ariaDescribedBy } = formControlCtx;
-    const inputClass = `${prefix}--input`;
-    const baseClass = `${prefix}--numberpicker`;
-    const hasError = !disabled && !!error;
-    const numberPickerClasses = classNames(inputClass, baseClass, {
-        error: hasError,
-    });
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e);
-        }
-    };
-    return (jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy, max: max, min: min, step: step }));
-});
-const LabelledNumberPicker = React.forwardRef((props, ref) => {
-    const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);
-    const fieldId = props.id ? props.id : props.name;
-    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className }, rest, { children: jsxRuntime.jsx(NumberPicker, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
-});
-
-module.exports = LabelledNumberPicker;

package/lib/cjs/components/NumberPicker/index.js

@@ -1,17 +0,0 @@
-'use strict';
-
-var components_NumberPicker_NumberPicker = require('./NumberPicker.js');
-require('tslib');
-require('react/jsx-runtime');
-require('react');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../FormControl/FormControl.js');
-require('nanoid');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-
-
-
-exports.NumberPicker = components_NumberPicker_NumberPicker;

package/lib/cjs/components/Pagination/Pagination.js

@@ -1,49 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-const Pagination = ({ className, callback, currentPage, firstPageUrl, firstPageTitle = "First page", lastPageUrl, lastPageTitle = "Last page", nextPageUrl, nextPageTitle = "Next page", pageCountPreposition = "of", prevPageUrl, prevPageTitle = "Previous page", totalPages, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--pagination`;
-    const paginationClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    const isFirst = currentPage === 0;
-    const isLast = currentPage + 1 === totalPages;
-    const firstClasses = classNames(className, {
-        [`${baseClass}--first-page`]: true,
-        [`${baseClass}--link`]: true,
-        [`${baseClass}--disable`]: isFirst,
-    });
-    const prevClasses = classNames(className, {
-        [`${baseClass}--prev-page`]: true,
-        [`${baseClass}--link`]: true,
-        [`${baseClass}--disable`]: isFirst,
-    });
-    const nextClasses = classNames(className, {
-        [`${baseClass}--next-page`]: true,
-        [`${baseClass}--link`]: true,
-        [`${baseClass}--disable`]: isLast,
-    });
-    const lastClasses = classNames(className, {
-        [`${baseClass}--last-page`]: true,
-        [`${baseClass}--link`]: true,
-        [`${baseClass}--disable`]: isLast,
-    });
-    /**
-     * On click, if there is a callback, call it
-     */
-    const handleClick = (e) => {
-        if (callback) {
-            callback(e);
-        }
-    };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsxRuntime.jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsxRuntime.jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsxRuntime.jsx("span", { children: currentPage + 1 }), jsxRuntime.jsx("span", { children: pageCountPreposition }), jsxRuntime.jsx("span", { children: totalPages })] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsxRuntime.jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsxRuntime.jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
-};
-
-module.exports = Pagination;

package/lib/cjs/components/Pagination/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var components_Pagination_Pagination = require('./Pagination.js');
-require('react/jsx-runtime');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-
-
-exports.Pagination = components_Pagination_Pagination;

package/lib/cjs/components/Profile/Profile.js

@@ -1,21 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-const Profile = ({ avatar, className, description, link, name, role, theme = "light", size = "large", }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--profile`;
-    const profileClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}__theme__${theme}`]: theme,
-        [`${baseClass}__size__${size}`]: size,
-    });
-    return (jsxRuntime.jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsxRuntime.jsx("figcaption", { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--figcaption--content` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--name` }, { children: name })), role && jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--role` }, { children: role }))] })) }), description && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--description` }, { children: description }))), link && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--link` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, target: "__blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) })))] })));
-};
-
-module.exports = Profile;

package/lib/cjs/components/Profile/index.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var components_Profile_Profile = require('./Profile.js');
-require('react/jsx-runtime');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-
-
-exports.Profile = components_Profile_Profile;

package/lib/cjs/components/Radio/Radio.js

@@ -1,47 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var classNames = require('classnames');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
-var components_FormControl_FormControl = require('../FormControl/FormControl.js');
-var hooks_usePrevious = require('../../hooks/usePrevious.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-require('nanoid');
-
-const Radio = React.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const { setHasError } = components_Fieldset_Fieldset.useFieldsetError();
-    const formControlCtx = components_FormControl_FormControl.useFormControl();
-    const prevError = hooks_usePrevious.usePrevious(error);
-    React.useEffect(() => {
-        if (error !== prevError) {
-            setHasError(!!error);
-        }
-    }, [error, prevError, setHasError]);
-    const { ariaDescribedBy } = formControlCtx;
-    const handleChange = (e) => {
-        console.log(e.target.value);
-        if (onChange) {
-            onChange(e);
-        }
-    };
-    const baseClass = `${prefix}--radio`;
-    const controlClass = `${baseClass}--control`;
-    const errorClass = `${baseClass}__error`;
-    const RadioClasses = classNames(baseClass, {
-        [errorClass]: error,
-    });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: RadioClasses }, { children: [jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }), jsxRuntime.jsx("span", { className: controlClass })] })));
-});
-const LabelledRadio = React.forwardRef((props, ref) => {
-    const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);
-    const fieldId = props.id ? props.id : props.name;
-    return (jsxRuntime.jsx(components_FormControl_FormControl.default, Object.assign({ fieldId: fieldId, style: style, className: className, labelPlacement: labelPlacement, labelSize: labelSize }, rest, { children: jsxRuntime.jsx(Radio, Object.assign({ ref: ref, style: inputStyle }, rest)) })));
-});
-
-module.exports = LabelledRadio;

package/lib/cjs/components/Radio/index.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var components_Radio_Radio = require('./Radio.js');
-require('tslib');
-require('react/jsx-runtime');
-require('react');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../Fieldset/Fieldset.js');
-require('../Tooltip/Tooltip.js');
-require('@popperjs/core');
-require('../FormControl/FormControl.js');
-require('nanoid');
-require('../../hooks/usePrevious.js');
-
-const basic = {
-    className: "Radio",
-    name: "radio",
-};
-/**
- * Sample prop definitions Radio's enumerable properties (imported in stories and test)
- */
-const RadioArgs = {
-    basic,
-};
-
-exports.Radio = components_Radio_Radio;
-exports.RadioArgs = RadioArgs;