@ilo-org/react 0.17.8 → 0.18.1

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

@@ -1,14 +0,0 @@
-export { default as Hero } from './Hero.js';
-export { default as HeroCard } from './HeroCard.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../Breadcrumb/Breadcrumb.js';
-import '../ContextMenu/ContextMenu.js';
-import '../Tooltip/Tooltip.js';
-import '@popperjs/core';
-import '../SocialMedia/SocialMedia.js';
-import '../SocialMedia/index.js';

package/lib/esm/components/Icon/Icon.js

@@ -1,22 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { createElement } from 'react';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import * as icons from '@ilo-org/icons-react';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const Icon = ({ hidden, name, size }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--icon`;
-    const ariaHidden = hidden ? "hidden" : "";
-    const iconsize = size || 24;
-    const icon = name
-        ? createElement(icons[`${name.charAt(0).toUpperCase() + name.slice(1)}${iconsize}`], {
-            "aria-hidden": ariaHidden,
-            className: baseClass,
-        })
-        : false;
-    return jsx(Fragment, { children: icon });
-};
-
-export { Icon as default };

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

@@ -1,7 +0,0 @@
-export { default as Icon } from './Icon.js';
-import 'react/jsx-runtime';
-import 'react';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-import '@ilo-org/icons-react';

package/lib/esm/components/Image/Image.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Credit from '../Credit/Credit.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const Image = ({ alt, caption, className, credit, url }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--image`;
-    const imageClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    const imgClasses = classNames("", {
-        [`${baseClass}--img`]: true,
-    });
-    const captionClasses = classNames("", {
-        [`${baseClass}--caption`]: true,
-    });
-    return (jsxs("figure", Object.assign({ className: imageClasses }, { children: [jsxs("div", Object.assign({ className: `${imageClasses}--wrapper` }, { children: [jsxs("picture", Object.assign({ className: imgClasses }, { children: [url &&
-                                url
-                                    .sort((a, b) => parseFloat(a.breakpoint) - parseFloat(b.breakpoint))
-                                    .slice(1)
-                                    .reverse()
-                                    .map((item, index) => (jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), url && jsx("img", { src: url[0].src, alt: alt })] })), credit && jsx(Credit, { credit: credit })] })), caption && jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption }))] })));
-};
-
-export { Image as default };

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

@@ -1,8 +0,0 @@
-export { default as Image } from './Image.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../Credit/Credit.js';

package/lib/esm/components/Input/Input.js

@@ -1,30 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import Fieldset from '../Fieldset/Fieldset.js';
-import FormElement from '../FormElement/FormElement.js';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../Tooltip/Tooltip.js';
-import '@popperjs/core';
-
-const Input = forwardRef(({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }, ref) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--input`;
-    const InputClasses = classNames("", {
-        [baseClass]: true,
-        [`error`]: error,
-    });
-    /**
-     * On change, if there is a callback, call it
-     */
-    const handleChange = (e) => {
-        if (callback) {
-            callback(e);
-        }
-    };
-    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, value: value, className: InputClasses, ref: ref }) })) }));
-});
-
-export { Input as default };

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

@@ -1,11 +0,0 @@
-export { default as Input } from './Input.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../Fieldset/Fieldset.js';
-import '../Tooltip/Tooltip.js';
-import '@popperjs/core';
-import '../FormElement/FormElement.js';

package/lib/esm/components/Link/Link.js

@@ -1,21 +0,0 @@
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const Link = (_a) => {
-    var { children, className, label, target, theme = "light", url, style } = _a, rest = __rest(_a, ["children", "className", "label", "target", "theme", "url", "style"]);
-    const { prefix } = useGlobalSettings();
-    const baseClass = typeof className !== "undefined" && className.includes("button")
-        ? ""
-        : `${prefix}--link`;
-    const linkClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${theme}`]: theme,
-    });
-    return (jsxs("a", Object.assign({ className: linkClasses, href: url, target: target, rel: target ? "noopener noreferrer" : "", style: style }, rest, { children: [label && jsx("span", Object.assign({ className: "link__label" }, { children: label })), children] })));
-};
-
-export { Link as default };

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

@@ -1,7 +0,0 @@
-export { default as Link } from './Link.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/LinkList/LinkList.js

@@ -1,20 +0,0 @@
-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 LinkList = ({ className, headline, linkgroup, theme, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--link-list`;
-    const linkListClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass + "--" + (theme && theme === "dark" ? theme : "light")}`]: true,
-    });
-    return (jsxs("div", Object.assign({ className: linkListClasses }, { children: [headline && jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
-                    linkgroup.map((linkset, i) => (jsxs("li", Object.assign({ className: `${baseClass}--linkgroups-item` }, { children: [linkset.headline && (jsx("h4", Object.assign({ className: `${baseClass}--links--headline` }, { children: linkset.headline }))), jsx("ul", Object.assign({ className: `${baseClass}--links` }, { children: linkset.links &&
-                                    linkset.links.map((link, i) => (jsx("li", Object.assign({ className: `${baseClass}--links--item${link.indented ? " indented" : ""}` }, { children: jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--links--item-${i}`))) }))] }), `${baseClass}--linkgroups-item-${i}`))) }))] })));
-};
-
-export { LinkList as default };

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

@@ -1,7 +0,0 @@
-export { default as LinkList } from './LinkList.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';

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

@@ -1,21 +0,0 @@
-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 List = ({ children, className, alignment = "default", ordered = "unstyled", title, }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--list`;
-    const unstyledClass = `${baseClass}__unstyled`;
-    const horizontalClass = `${baseClass}__horizontal`;
-    const titleClass = `${baseClass}--title`;
-    const listClasses = classNames(className, baseClass, {
-        [unstyledClass]: ordered === "unstyled",
-        [horizontalClass]: alignment === "horizontal",
-    });
-    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

@@ -1,16 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const ListItem = (_a) => {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    const { prefix } = useGlobalSettings();
-    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

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

package/lib/esm/components/Loading/Loading.js

@@ -1,19 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const Loading = ({ className, message, size, status }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--loading`;
-    const loadingClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}--${size}`]: size,
-        [`${baseClass}--${status}`]: status,
-    });
-    return (jsx("div", Object.assign({ className: loadingClasses, role: "alert", "aria-live": "assertive" }, { children: status && message && status !== "idle" && (jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: message }))) })));
-};
-
-export { Loading as default };

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

@@ -1,7 +0,0 @@
-export { default as Loading } from './Loading.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/LocalNav/LocalNav.js

@@ -1,96 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import ContextMenu from '../ContextMenu/ContextMenu.js';
-import classNames from 'classnames';
-import Logo from '../Logo/Logo.js';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-
-var brand = {
-	"ilo-blue": {
-		value: "rgba(30, 45, 190, 1)"
-	},
-	"ilo-red": {
-		value: "rgba(250, 60, 75, 1)"
-	},
-	"ilo-dark-blue": {
-		value: "rgba(35, 0, 80, 1)"
-	},
-	"ilo-yellow": {
-		value: "rgba(255, 205, 45, 1)"
-	},
-	"ilo-green": {
-		value: "rgba(140, 225, 100, 1)"
-	},
-	"ilo-purple": {
-		value: "rgba(150, 10, 85, 1)"
-	},
-	"ilo-purple-light": {
-		value: "rgba(116, 96, 145, 1)"
-	},
-	"ilo-turquoise": {
-		value: "rgba(5, 210, 210, 1)"
-	},
-	"ilo-dark-red": {
-		value: "rgba(200, 48, 60, 1)"
-	},
-	"ilo-light-blue": {
-		value: "rgba(235, 245, 253, 1)"
-	},
-	"ilo-grey-light-alternate": {
-		value: "rgba(246, 247, 248, 1)"
-	},
-	"ilo-grey-light": {
-		value: "rgba(237, 240, 242, 1)"
-	},
-	"ilo-grey-ui": {
-		value: "rgba(184, 196, 204, 1)"
-	},
-	"ilo-grey-accessible": {
-		value: "rgba(109, 109, 109, 1)"
-	},
-	"ilo-black": {
-		value: "rgba(45, 45, 45, 1)"
-	},
-	"ilo-white": {
-		value: "rgba(255, 255, 255, 1)"
-	},
-	"ilo-ramp-blue": {
-		value: "rgba(190, 220, 250, 1)"
-	},
-	"ilo-ramp-red": {
-		value: "rgba(254, 216, 219, 1)"
-	},
-	"ilo-ramp-green": {
-		value: "rgba(232, 249, 224, 1)"
-	},
-	"ilo-ramp-yellow": {
-		value: "rgba(255, 245, 200, 1)"
-	}
-};
-
-const DEFAULT_LOGO_SIZE = 280;
-const LocalNav = ({ background, logo, primarynav, mainlink, menucloselabel, languagelabel, languagecontextmenu, }) => {
-    const { prefix } = useGlobalSettings();
-    const [toggleMenuOpen, setMenuToggleOpen] = useState(false);
-    const [toggleLanguageOpen, setLanguageToggleOpen] = useState(false);
-    const baseClass = `${prefix}--header`;
-    const localNavClasses = classNames(baseClass, `${baseClass}--local`, {
-        [`${prefix}--mobile--open`]: toggleMenuOpen,
-        [`${prefix}--select--open`]: toggleLanguageOpen,
-    });
-    const bg = background ? background : brand["ilo-dark-blue"].value;
-    const handleMenuToggle = () => {
-        setMenuToggleOpen(!toggleMenuOpen);
-    };
-    const handleLanguageToggle = () => {
-        setLanguageToggleOpen(!toggleLanguageOpen);
-    };
-    return (jsx("header", Object.assign({ className: localNavClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--utility-bar ${baseClass}--utility-bar--local`, style: { background: bg } }, { children: [jsxs("nav", Object.assign({ className: `${prefix}--nav--local` }, { children: [jsx("div", Object.assign({ className: `${prefix}--nav--local--logo-wrapper` }, { children: jsx(Logo, { url: logo.url, src: logo.src, alt: logo.alt, className: `${prefix}--nav--local--logo`, subbrand: logo.subbrand, theme: logo.theme, size: logo.size || DEFAULT_LOGO_SIZE }) })), jsx("ul", Object.assign({ className: `${prefix}--nav--local--set` }, { children: (primarynav === null || primarynav === void 0 ? void 0 : primarynav.items) &&
-                                primarynav.items.map((item, index) => (jsx("li", Object.assign({ className: `${prefix}--nav--local--item` }, { children: jsx("a", Object.assign({ href: item.url, className: `${prefix}--nav--local--link` }, { children: jsx("span", { children: item.label }) })) }), index))) }))] })), jsx("div", Object.assign({ className: `${prefix}--language-switcher` }, { children: jsxs("div", Object.assign({ className: `${prefix}--language-switcher--wrap` }, { children: [mainlink && (jsx("span", Object.assign({ className: `${prefix}--language-switcher--link--wrap` }, { children: jsx("a", Object.assign({ href: mainlink.url, className: `${prefix}--language-switcher--link` }, { children: mainlink.label })) }))), 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("button", Object.assign({ className: `${baseClass}--menu`, onClick: handleMenuToggle }, { children: "Menu" })), jsx("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(Logo, { url: logo.url, src: logo.src, alt: logo.alt, className: `${prefix}--nav--local--logo`, subbrand: logo.subbrand, theme: logo.theme, size: logo.size || DEFAULT_LOGO_SIZE }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: menucloselabel }))] })), 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", { className: `${prefix}--mobile--subnav--back`, onClick: handleLanguageToggle, type: "button" }), jsx("button", Object.assign({ className: `${baseClass}--menu--close`, onClick: handleMenuToggle }, { children: "Close" })), 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 })), jsx("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))) }))] }))] })) }))] })) })));
-};
-
-export { LocalNav as default };

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

@@ -1,9 +0,0 @@
-export { default as LocalNav } from './LocalNav.js';
-import 'react/jsx-runtime';
-import 'react';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import '../../GlobalCtx-7fb23cfa.js';
-import '../ContextMenu/ContextMenu.js';
-import 'classnames';
-import '../Logo/Logo.js';

package/lib/esm/components/Logo/Logo.js

@@ -1,151 +0,0 @@
-import { __rest } from 'tslib';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import classNames from 'classnames';
-import '../../GlobalCtx-7fb23cfa.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 = __rest(_a, ["baseClass", "className", "subbrand", "alt", "src", "style", "size", "theme"]);
-    // The logo image element
-    const imageRef = useRef(null);
-    // The lockup container
-    const lockupRef = useRef(null);
-    // The lockup text
-    const lockupTextRef = useRef(null);
-    // Initial height of the image when it's loaded
-    const initialImageHeight = useRef(null);
-    // Has the image loaded or not
-    const [imageLoaded, setImageLoaded] = useState(false);
-    // Dynamic height of the image
-    const [imageHeight, setImageHeight] = useState(0);
-    // Ratio of the font size to the height of the logo image
-    const [fontSizeRatio, setfontSizeRatio] = useState(0);
-    // Is the logo visible? Default to true if not a subbrand
-    const [isLogoVisible, setIsLogoVisible] = 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 = 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
-    useEffect(() => {
-        if (subbrand && imageLoaded && fontSizeRatio) {
-            setIsLogoVisible(true);
-        }
-    }, [imageLoaded, fontSizeRatio, subbrand]);
-    // Set up the Resize observer to watch the image
-    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
-    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
-    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 (jsxs("figure", Object.assign({ className: classNames$1, style: getStyle() }, { children: [jsx("img", Object.assign({ ref: imageRef, alt: alt, src: getImageSrc(), className: classNames({
-                    [subBrandImageClass]: hasSubbrand,
-                    [noSubBrandImageClass]: !hasSubbrand,
-                }), onLoad: handleImageLoaded }, props)), hasSubbrand && (jsxs("div", Object.assign({ ref: lockupRef, className: `${subBrandClass}--lock-up` }, { children: [jsx("span", { className: `${subBrandClass}--lock-up--separator` }), jsx("span", Object.assign({ ref: lockupTextRef }, { children: subbrand }))] })))] })));
-};
-const Logo = (_a) => {
-    var { className, url, target, style, size } = _a, props = __rest(_a, ["className", "url", "target", "style", "size"]);
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--logo`;
-    const linkClass = `${baseClass}--link`;
-    const fluidClass = `${baseClass}--size--fluid`;
-    if (url) {
-        return (jsx("a", Object.assign({ href: url, target: target, className: classNames(linkClass, className, {
-                [fluidClass]: size === "fluid",
-            }), style: style }, { children: jsx(BaseLogo, Object.assign({}, props, { baseClass: baseClass, size: size })) })));
-    }
-    return (jsx(BaseLogo, Object.assign({ baseClass: baseClass, className: className, style: style, size: size }, props)));
-};
-
-export { Logo as default };

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

@@ -1,7 +0,0 @@
-export { default as Logo } from './Logo.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import 'react';
-import '../../hooks/useGlobalSettings.js';
-import '../../GlobalCtx-7fb23cfa.js';
-import 'classnames';

package/lib/esm/components/LogoGrid/LogoGrid.js

@@ -1,28 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';
-
-const LogoGridItem = ({ url, label, src }) => {
-    const { prefix } = useGlobalSettings();
-    const itemClass = `${prefix}--logo-grid--item`;
-    const itemLinkClass = `${prefix}--logo-grid--link`;
-    const gridItemClass = classNames(itemClass, {
-        [itemLinkClass]: !!url,
-    });
-    if (!url) {
-        return (jsx("div", Object.assign({ className: gridItemClass }, { children: jsx("img", { alt: label, src: src }) })));
-    }
-    return (jsx("a", Object.assign({ className: gridItemClass, href: url, target: "_blank", rel: "noopener noreferrer" }, { children: jsx("img", { alt: label, src: src }) })));
-};
-const LogoGrid = ({ logos, theme = "light" }) => {
-    const { prefix } = useGlobalSettings();
-    const baseClass = `${prefix}--logo-grid`;
-    const themeClass = `${baseClass}__theme__${theme}`;
-    const logoGridClass = classNames(baseClass, themeClass);
-    return (jsx("div", Object.assign({ className: logoGridClass }, { children: jsx("div", Object.assign({ className: `${baseClass}--logos` }, { children: logos.map((logo) => (jsx(LogoGridItem, Object.assign({}, logo)))) })) })));
-};
-
-export { LogoGrid as default };

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

@@ -1,7 +0,0 @@
-export { default as LogoGrid } from './LogoGrid.js';
-import 'react/jsx-runtime';
-import 'classnames';
-import '../../hooks/useGlobalSettings.js';
-import 'tslib';
-import 'react';
-import '../../GlobalCtx-7fb23cfa.js';