@ilo-org/react 0.17.5 → 0.17.7

package/lib/cjs/components/Button/Button.js

@@ -17,10 +17,10 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
     const icoPos = iconPosition || "left";
     const ButtonClasses = classNames(className, {
         [baseClass]: true,
-        [`${baseClass}--${size}`]: size,
-        [`${baseClass}--${type}`]: type,
-        [`icon icon__position--${icoPos}`]: icon && !icononly,
-        [`icon icon--only`]: icon && icononly,
+        [`${baseClass}__${size}`]: size,
+        [`${baseClass}__${type}`]: type,
+        [`${baseClass}--icon ${baseClass}--icon--position__${icoPos}`]: icon && !icononly,
+        [`${baseClass}--icon ${baseClass}--icon--only`]: icon && icononly,
     });
     /**
      * On click, if there is a callback, call it

package/lib/cjs/components/Callout/Callout.js

@@ -22,11 +22,11 @@ const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpe
     }, [isOpen]);
     const calloutClasses = classNames(className, {
         [baseClass]: true,
-        [`${baseClass}--${type}`]: type,
+        [`${baseClass}__${type}`]: type,
         [`${baseClass}--open`]: toggleOpen,
         [`${baseClass}--collapse`]: isCollapsible,
     });
-    const iconClasses = `icon icon--${type}`;
+    const iconClasses = `icon icon__${type}`;
     const ctaprops = {
         callback: undefined,
         className: `${baseClass}--cta`,
@@ -41,7 +41,7 @@ const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpe
         toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
         setToggleOpen(!toggleOpen);
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: calloutClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--sidebar` }, { children: jsxRuntime.jsx("span", { className: iconClasses }) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--header` }, { children: [jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), isCollapsible && (jsxRuntime.jsxs("button", Object.assign({ className: `${baseClass}--toggle`, onClick: handleToggle, type: "button" }, { children: [toggleLabel, jsxRuntime.jsx("span", { className: `${baseClass}--toggle--icon` })] })))] })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: copy })), cta && jsxRuntime.jsx(components_Button_Button, Object.assign({}, ctaprops))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: calloutClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}__sidebar` }, { children: jsxRuntime.jsx("span", { className: iconClasses }) })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}__content` }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}__header` }, { children: [jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: headline })), isCollapsible && (jsxRuntime.jsxs("button", Object.assign({ className: `${baseClass}--toggle`, onClick: handleToggle, type: "button" }, { children: [toggleLabel, jsxRuntime.jsx("span", { className: `${baseClass}--toggle--icon` })] })))] })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__description` }, { children: copy })), cta && jsxRuntime.jsx(components_Button_Button, Object.assign({}, ctaprops))] }))] })));
 };
 
 module.exports = Callout;

package/lib/cjs/components/Collapse/Collapse.js

@@ -11,31 +11,24 @@ var utils_transitionEndListener = require('../../utils/transitionEndListener.js'
 var utils_triggerBrowserReflow = require('../../utils/triggerBrowserReflow.js');
 require('../../css-9c93400b.js');
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
 
 var propTypes = {exports: {}};

package/lib/cjs/components/Input/Input.js

@@ -1,17 +1,17 @@
 '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_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
 var components_FormElement_FormElement = require('../FormElement/FormElement.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
+const Input = React.forwardRef(({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--input`;
     const InputClasses = classNames("", {
@@ -26,7 +26,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    return (jsxRuntime.jsx(components_Fieldset_Fieldset.default, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, value: value, className: InputClasses }) })) }));
-};
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset.default, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, value: value, className: InputClasses, ref: ref }) })) }));
+});
 
 module.exports = Input;

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

@@ -2,10 +2,10 @@
 
 var components_Input_Input = require('./Input.js');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-10114bdd.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');

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

@@ -32,6 +32,12 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         [`${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);
     };
@@ -46,6 +52,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         }
         setSearchTabbable(true);
         setTimeout(() => setSearchToggleOpen(true), 10);
+        setTimeout(() => handleSearchInputFocus(), 50);
     };
     const handleSubnavToggle = () => {
         if (toggleSubnavOpen) {
@@ -70,7 +77,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     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 }) })) }))] }))] })));
+                                        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/SearchField/SearchField.js

@@ -14,7 +14,7 @@ require('@popperjs/core');
 require('../FormElement/FormElement.js');
 require('@ilo-org/icons-react');
 
-const SearchField = ({ action, callback, className, input, }) => {
+const SearchField = React.forwardRef(({ action, callback, className, input }, ref) => {
     const [searchValue, setSearchValue] = React.useState("");
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
@@ -42,7 +42,7 @@ const SearchField = ({ action, callback, className, input, }) => {
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsxRuntime.jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsxRuntime.jsx(components_Icon_Icon, { name: "close", hidden: true }) }))] })), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
-};
+    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input`, ref: ref }), jsxRuntime.jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsxRuntime.jsx(components_Icon_Icon, { name: "close", hidden: true }) }))] })), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+});
 
 module.exports = SearchField;

package/lib/esm/components/Button/Button.js

@@ -15,10 +15,10 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
     const icoPos = iconPosition || "left";
     const ButtonClasses = classNames(className, {
         [baseClass]: true,
-        [`${baseClass}--${size}`]: size,
-        [`${baseClass}--${type}`]: type,
-        [`icon icon__position--${icoPos}`]: icon && !icononly,
-        [`icon icon--only`]: icon && icononly,
+        [`${baseClass}__${size}`]: size,
+        [`${baseClass}__${type}`]: type,
+        [`${baseClass}--icon ${baseClass}--icon--position__${icoPos}`]: icon && !icononly,
+        [`${baseClass}--icon ${baseClass}--icon--only`]: icon && icononly,
     });
     /**
      * On click, if there is a callback, call it

package/lib/esm/components/Callout/Callout.js

@@ -20,11 +20,11 @@ const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpe
     }, [isOpen]);
     const calloutClasses = classNames(className, {
         [baseClass]: true,
-        [`${baseClass}--${type}`]: type,
+        [`${baseClass}__${type}`]: type,
         [`${baseClass}--open`]: toggleOpen,
         [`${baseClass}--collapse`]: isCollapsible,
     });
-    const iconClasses = `icon icon--${type}`;
+    const iconClasses = `icon icon__${type}`;
     const ctaprops = {
         callback: undefined,
         className: `${baseClass}--cta`,
@@ -39,7 +39,7 @@ const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpe
         toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
         setToggleOpen(!toggleOpen);
     };
-    return (jsxs("div", Object.assign({ className: calloutClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--sidebar` }, { children: jsx("span", { className: iconClasses }) })), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}--header` }, { children: [jsx("h5", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), isCollapsible && (jsxs("button", Object.assign({ className: `${baseClass}--toggle`, onClick: handleToggle, type: "button" }, { children: [toggleLabel, jsx("span", { className: `${baseClass}--toggle--icon` })] })))] })), jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: copy })), cta && jsx(Button, Object.assign({}, ctaprops))] }))] })));
+    return (jsxs("div", Object.assign({ className: calloutClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}__sidebar` }, { children: jsx("span", { className: iconClasses }) })), jsxs("div", Object.assign({ className: `${baseClass}__content` }, { children: [jsxs("div", Object.assign({ className: `${baseClass}__header` }, { children: [jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: headline })), isCollapsible && (jsxs("button", Object.assign({ className: `${baseClass}--toggle`, onClick: handleToggle, type: "button" }, { children: [toggleLabel, jsx("span", { className: `${baseClass}--toggle--icon` })] })))] })), jsx("p", Object.assign({ className: `${baseClass}__description` }, { children: copy })), cta && jsx(Button, Object.assign({}, ctaprops))] }))] })));
 };
 
 export { Callout as default };

package/lib/esm/components/Collapse/Collapse.js

@@ -9,31 +9,24 @@ import transitionEndListener from '../../utils/transitionEndListener.js';
 import triggerBrowserReflow from '../../utils/triggerBrowserReflow.js';
 import '../../css-7414f50b.js';
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
 }
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
 
 var propTypes = {exports: {}};

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

@@ -1,15 +1,15 @@
 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 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
+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("", {
@@ -24,7 +24,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             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 }) })) }));
-};
+    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,9 +1,9 @@
 export { default as Input } from './Input.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import ContextMenu from '../ContextMenu/ContextMenu.js';
 import SearchField from '../SearchField/SearchField.js';
@@ -30,6 +30,12 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         [`${prefix}--select--open`]: toggleLanguageOpen,
         [`${prefix}--context--open`]: toggleLanguageOpen,
     });
+    const searchInputRef = useRef(null);
+    const handleSearchInputFocus = () => {
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
     const handleMenuToggle = () => {
         setMenuToggleOpen(!toggleMenuOpen);
     };
@@ -44,6 +50,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
         }
         setSearchTabbable(true);
         setTimeout(() => setSearchToggleOpen(true), 10);
+        setTimeout(() => handleSearchInputFocus(), 50);
     };
     const handleSubnavToggle = () => {
         if (toggleSubnavOpen) {
@@ -68,7 +75,7 @@ const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, me
     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", onClick: handleLanguageToggle }, { 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({ style: { display: subnavTabbable ? "block" : "none" }, 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({ style: { display: searchTabbable ? "block" : "none" }, 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 }) })) }))] }))] })));
+                                        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({ style: { display: searchTabbable ? "block" : "none" }, 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, ref: searchInputRef }) })) }))] }))] })));
 };
 
 export { Navigation as default };

package/lib/esm/components/SearchField/SearchField.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Input from '../Input/Input.js';
@@ -12,7 +12,7 @@ import '@popperjs/core';
 import '../FormElement/FormElement.js';
 import '@ilo-org/icons-react';
 
-const SearchField = ({ action, callback, className, input, }) => {
+const SearchField = forwardRef(({ action, callback, className, input }, ref) => {
     const [searchValue, setSearchValue] = useState("");
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
@@ -40,7 +40,7 @@ const SearchField = ({ action, callback, className, input, }) => {
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
-};
+    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input`, ref: ref }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+});
 
 export { SearchField as default };

package/lib/styles/components/accordion.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:calc(4 * var(--ilo-spacing-base));padding-inline-end:calc(11 * var(--ilo-spacing-base));background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;color:#230050;font-weight:500;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding-block:calc(5 * var(--ilo-spacing-base));padding-inline-end:calc(11 * var(--ilo-spacing-base))}.ilo--accordion--button:focus,.ilo--accordion--button:hover{border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{color:#230050;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:calc(5 * var(--ilo-spacing-base)) 0;padding-inline-end:calc(11 * var(--ilo-spacing-base))}}.ilo--accordion--button[aria-expanded=true]{background-color:#ebf5fd;color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:calc(9 * var(--ilo-spacing-base));padding-top:calc(2 * var(--ilo-spacing-base));padding-inline-end:calc(8 * var(--ilo-spacing-base))}.ilo--accordion--panel__open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto}
+.ilo--accordion--button{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:0;padding-block:calc(4 * var(--ilo-spacing-base));padding-inline-end:calc(11 * var(--ilo-spacing-base));background-color:#fff;background-position:calc(100% - .3215434084rem) 50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border:none;border-top:2px solid #edf0f2;fill:#230050;font-family:var(--ilo-fonts-display);color:#230050;font-weight:500;transition:all .5s ease-in-out;font-size:16px;letter-spacing:-.02em;line-height:21.6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding-block:calc(5 * var(--ilo-spacing-base));padding-inline-end:calc(11 * var(--ilo-spacing-base))}.ilo--accordion--button:focus,.ilo--accordion--button:hover{border-top-color:#1e2dbe;color:#1e2dbe;fill:#1e2dbe;cursor:pointer}.ilo--accordion--button:focus[aria-expanded=true],.ilo--accordion--button:hover[aria-expanded=true]{color:#230050;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button:focus[aria-expanded=false],.ilo--accordion--button:hover[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}@media screen and (min-width:610px){.ilo--accordion--button{font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--accordion--button__large{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;padding:calc(5 * var(--ilo-spacing-base)) 0;padding-inline-end:calc(11 * var(--ilo-spacing-base))}}.ilo--accordion--button[aria-expanded=true]{background-color:#ebf5fd;color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M18 11H6v2h12v-2z'/%3E%3C/svg%3E")}.ilo--accordion--button[aria-expanded=false]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M18 11h-5V6h-2v5H6v2h5v5h2v-5h5v-2z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--accordion--button{background-position:calc(0% + .3215434084rem) 50%}.ilo--accordion--panel{max-height:0;transition:all .5s cubic-bezier(0,1,0,1);overflow:hidden}.ilo--accordion--panel .ilo--accordion--innerpanel{padding-bottom:calc(9 * var(--ilo-spacing-base));padding-top:calc(2 * var(--ilo-spacing-base));padding-inline-end:calc(8 * var(--ilo-spacing-base))}.ilo--accordion--panel__open{max-height:100vh;transition:all .5s ease-in-out}.ilo--accordion--panel__open.ilo--accordion--panel__scroll{max-height:300px;overflow-y:auto}

package/lib/styles/components/breadcrumb.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--inner{display:inline-flex;padding-inline-start:var(--breadcrumb-padding);padding-inline-end:calc(12 * var(--ilo-spacing-base));padding-block:calc(4 * var(--ilo-spacing-base));background-color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - (12 * var(--ilo-spacing-base))) 100%,0 100%)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,calc(12 * var(--ilo-spacing-base)) 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E");background-position:0;padding-inline:calc(6 * var(--ilo-spacing-base)) calc(4 * var(--ilo-spacing-base))}[dir=rtl] .ilo--breadcrumb--context__collapse,[dir=rtl] .ilo--breadcrumb--item{background-position:100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{display:none;padding:0;margin:0;border:none;background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;height:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--button:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:calc(3 * var(--ilo-spacing-base)) calc(1 * var(--ilo-spacing-base))}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{position:relative;background:0 0!important;padding-inline-start:2px}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;width:.857449089rem;height:.857449089rem;position:relative}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link{display:inline-flex;align-items:center;color:#230050;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{white-space:nowrap;overflow-x:clip;text-overflow:ellipsis;max-width:30ch;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-underline-offset:.2143622722rem;text-decoration-thickness:.1071811361rem}
+.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--inner{display:inline-flex;padding-inline-start:var(--breadcrumb-padding);padding-inline-end:calc(12 * var(--ilo-spacing-base));padding-block:calc(4 * var(--ilo-spacing-base));background-color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - (12 * var(--ilo-spacing-base))) 100%,0 100%)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,calc(12 * var(--ilo-spacing-base)) 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E");background-position:0;padding-inline:calc(6 * var(--ilo-spacing-base)) calc(4 * var(--ilo-spacing-base))}[dir=rtl] .ilo--breadcrumb--context__collapse,[dir=rtl] .ilo--breadcrumb--item{background-position:100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{display:none;padding:0;margin:0;border:none;background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;height:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--button:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:calc(3 * var(--ilo-spacing-base)) calc(1 * var(--ilo-spacing-base))}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{position:relative;background:0 0!important;padding-inline-start:2px}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;width:.857449089rem;height:.857449089rem;position:relative}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link{display:inline-flex;align-items:center;color:#230050;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{white-space:nowrap;overflow-x:clip;text-overflow:ellipsis;max-width:30ch;font-family:var(--ilo-fonts-copy);font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-underline-offset:.2143622722rem;text-decoration-thickness:.1071811361rem}

package/lib/styles/components/button.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--button{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;padding:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px}.ilo--button,.ilo--button .button__label,.ilo--button .link__label{display:inline-block}.ilo--button.icon{position:relative}.ilo--button.icon .ilo--icon{height:100%;max-height:1.7148981779rem;max-width:1.7148981779rem;position:absolute;width:100%}.ilo--button.icon.icon__position--left .button__label,.ilo--button.icon.icon__position--left .link__label{padding-left:calc(12 * var(--ilo-spacing-base))}.ilo--button.icon.icon__position--left .ilo--icon{left:.6966773848rem;top:.3751339764rem}.ilo--button.icon.icon__position--right .button__label,.ilo--button.icon.icon__position--right .link__label{padding-right:calc(12 * var(--ilo-spacing-base))}.ilo--button.icon.icon__position--right .ilo--icon{right:.6966773848rem;top:.3751339764rem}.ilo--button.icon--only .button__label{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--button--large .button__label,.ilo--button--large .link__label{padding:calc(3 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base));font-size:18.66px;letter-spacing:-.02em;line-height:120%}.ilo--button--large.icon--only{height:2.4115755627rem;width:2.4115755627rem}.ilo--button--large.icon--only .ilo--icon{left:.2411575563rem;top:.2411575563rem}.ilo--button--medium .button__label,.ilo--button--medium .link__label{padding:calc(2 * var(--ilo-spacing-base)) calc(5 * var(--ilo-spacing-base));font-size:16px;letter-spacing:-.02em;line-height:120%}.ilo--button--medium.icon .ilo--icon{max-height:1.6077170418rem;max-width:1.6077170418rem;position:absolute}.ilo--button--medium.icon.icon__position--left .button__label,.ilo--button--medium.icon.icon__position--left .link__label{padding-left:calc(11 * var(--ilo-spacing-base))}.ilo--button--medium.icon.icon__position--left .ilo--icon{left:.5359056806rem;top:.1607717042rem}.ilo--button--medium.icon.icon__position--right .button__label,.ilo--button--medium.icon.icon__position--right .link__label{padding-right:calc(11 * var(--ilo-spacing-base))}.ilo--button--medium.icon.icon__position--right .ilo--icon{right:.5359056806rem;top:.1607717042rem}.ilo--button--medium.icon--only{height:1.9292604502rem;width:1.9292604502rem}.ilo--button--medium.icon--only .ilo--icon{left:.1071811361rem;top:.1071811361rem}.ilo--button--small .button__label,.ilo--button--small .link__label{padding:calc(1 * var(--ilo-spacing-base)) calc(4 * var(--ilo-spacing-base));font-size:14.93px;letter-spacing:-.02em;line-height:120%}.ilo--button--small.icon .ilo--icon{max-height:1.5005359057rem;max-width:1.5005359057rem;position:absolute}.ilo--button--small.icon.icon__position--left .button__label,.ilo--button--small.icon.icon__position--left .link__label{padding-left:calc(9 * var(--ilo-spacing-base))}.ilo--button--small.icon.icon__position--left .ilo--icon{left:.3215434084rem;top:.0535905681rem}.ilo--button--small.icon.icon__position--right .button__label,.ilo--button--small.icon.icon__position--right .link__label{padding-right:calc(9 * var(--ilo-spacing-base))}.ilo--button--small.icon.icon__position--right .ilo--icon{right:.3215434084rem;top:.0535905681rem}.ilo--button--small.icon--only{height:1.3933547696rem;width:1.3933547696rem}.ilo--button--small.icon--only .ilo--icon{left:.026795284rem;top:.026795284rem}.ilo--button--primary{background-color:#ffcd2d;border:2px solid #ffcd2d;color:#230050}.ilo--button:focus{background-color:#fff;border:2px solid #ffcd2d;box-shadow:inset 4px 4px 0 1px #ffcd2d,inset -4px -4px 0 1px #ffcd2d;color:#230050;outline:0;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:focus.ilo--button--small{box-shadow:inset 3px 3px 0 1px #ffcd2d,inset -3px -3px 0 1px #ffcd2d}.ilo--button:hover{background-color:#ebf5fd;border:2px solid #1e2dbe;box-shadow:none;color:#1e2dbe;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:hover.ilo--button--small{box-shadow:none}.ilo--button:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:active.ilo--button--small{box-shadow:none}.ilo--button:disabled{opacity:.45;pointer-events:none}.ilo--button--secondary{background-color:#fff;border:1.5px solid #b8c4cc;color:#230050}.ilo--button--secondary,.ilo--button--secondary:hover{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--secondary:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe}.ilo--button--secondary:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--secondary:active.ilo--button--small{box-shadow:none}.ilo--button--tertiary{background-color:#edf0f2;border:2px solid #edf0f2;color:#230050}.ilo--button--alert,.ilo--button--tertiary{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert{background-color:#c8303c;border:1.5px solid #c8303c;color:#fff}.ilo--button--alert:hover{background-color:#ebf5fd;border:1.5px solid #1e2dbe;color:#1e2dbe}.ilo--button--alert:focus,.ilo--button--alert:hover{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert:focus{background-color:#fff;border:2px solid #ffcd2d;color:#230050;outline:0}.ilo--button--alert:active{background-color:#1e2dbe;border:2px solid #1e2dbe;box-shadow:none;color:#ebf5fd;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button--alert:active.ilo--button--small{box-shadow:none}[id*=story--components-button] div .ilo--button{margin-right:10px;margin-bottom:10px}[id*=story--components-button] div .ilo--button--large.icon--only{transform:translateY(-6px)}[id*=story--components-button] div .ilo--button--medium.icon--only,[id*=story--components-button] div .ilo--button--small.icon--only{transform:translateY(-5px)}
+.ilo--button{--ilo-button-label-weight:700;--ilo-button-labels-actionable-color:var(--ilo-color-blue-dark);--ilo-button-labels-active-color:var(--ilo-color-blue-light);--ilo-button-labels-alert-color:var(--ilo-color-white);--ilo-button-labels-hover-color:var(--ilo-color-blue);display:inline-block;font-family:var(--ilo-fonts-display);font-weight:var(--ilo-button-label-weight);padding:0;border-radius:var(--ilo-border-md);transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button .button__label,.ilo--button .link__label{display:inline-block;position:relative;top:.1071811361rem}.ilo--button--icon{position:relative}.ilo--button--icon .ilo--icon{height:100%;max-height:1.7148981779rem;max-width:1.7148981779rem;position:absolute;width:100%}.ilo--button--icon--position__left .button__label,.ilo--button--icon--position__left .link__label{padding-inline-start:calc(6 * var(--ilo-spacing-base))}.ilo--button--icon--position__left .ilo--icon{left:.6966773848rem;top:.3751339764rem}.ilo--button--icon--position__right .button__label,.ilo--button--icon--position__right .link__label{padding-inline-end:calc(6 * var(--ilo-spacing-base))}.ilo--button--icon--position__right .ilo--icon{right:.6966773848rem;top:.3751339764rem}.ilo--button--icon--only .button__label{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--button__large{padding:calc(3 * var(--ilo-spacing-base)) calc(6 * var(--ilo-spacing-base));font-size:18.66px;letter-spacing:-.02em;line-height:120%}.ilo--button__large.ilo--button--icon--only{height:2.4115755627rem;width:2.4115755627rem;padding:unset}.ilo--button__large.ilo--button--icon--only .ilo--icon{left:.2411575563rem;top:.2411575563rem}.ilo--button__medium{padding:calc(2 * var(--ilo-spacing-base)) calc(5 * var(--ilo-spacing-base));font-size:16px;letter-spacing:-.02em;line-height:120%}.ilo--button__medium .ilo--icon{max-height:1.6077170418rem;max-width:1.6077170418rem;position:absolute}.ilo--button__medium.ilo--button--icon--position__left .button__label,.ilo--button__medium.ilo--button--icon--position__left .link__label{padding-inline-start:calc(6 * var(--ilo-spacing-base))}.ilo--button__medium.ilo--button--icon--position__left .ilo--icon{left:.5359056806rem;top:.1607717042rem}.ilo--button__medium.ilo--button--icon--position__right .button__label,.ilo--button__medium.ilo--button--icon--position__right .link__label{padding-inline-end:calc(6 * var(--ilo-spacing-base))}.ilo--button__medium.ilo--button--icon--position__right .ilo--icon{right:.5359056806rem;top:.1607717042rem}.ilo--button__medium.ilo--button--icon--only{height:1.9292604502rem;width:1.9292604502rem;padding:unset}.ilo--button__medium.ilo--button--icon--only .ilo--icon{left:.1071811361rem;top:.1071811361rem}.ilo--button__small{padding:calc(1 * var(--ilo-spacing-base)) calc(4 * var(--ilo-spacing-base));font-size:14.93px;letter-spacing:-.02em;line-height:120%}.ilo--button__small .ilo--icon{max-height:1.5005359057rem;max-width:1.5005359057rem;position:absolute}.ilo--button__small.ilo--button--icon--position__left .button__label,.ilo--button__small.ilo--button--icon--position__left .link__label{padding-inline-start:calc(5 * var(--ilo-spacing-base))}.ilo--button__small.ilo--button--icon--position__left .ilo--icon{left:.3215434084rem;top:0}.ilo--button__small.ilo--button--icon--position__right .button__label,.ilo--button__small.ilo--button--icon--position__right .link__label{padding-inline-end:calc(9 * var(--ilo-spacing-base))}.ilo--button__small.ilo--button--icon--position__right .ilo--icon{right:6;top:0}.ilo--button__small.ilo--button--icon--only{height:1.3933547696rem;width:1.3933547696rem;padding:unset}.ilo--button__small.ilo--button--icon--only .ilo--icon{left:.026795284rem;top:.026795284rem}.ilo--button__primary{background-color:var(--ilo-color-yellow);border:var(--ilo-border-md) var(--ilo-color-yellow) solid}.ilo--button__primary,.ilo--button__secondary{color:var(--ilo-button-labels-actionable-color)}.ilo--button__secondary{background-color:var(--ilo-color-background-default);border:var(--ilo-border-md) var(--ilo-color-borders-default) solid}.ilo--button__secondary:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid}.ilo--button__secondary:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;box-shadow:none;color:var(--ilo-button-labels-active-color)}.ilo--button__tertiary{background-color:var(--ilo-color-background-highlight);border:var(--ilo-border-md) var(--ilo-color-background-highlight) solid;color:var(--ilo-button-labels-actionable-color)}.ilo--button__alert{background-color:var(--ilo-color-red-dark);border:var(--ilo-border-md) var(--ilo-color-red-dark) solid;color:var(--ilo-button-labels-alert-color)}.ilo--button__alert:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid;color:var(--ilo-button-labels-hover-color)}.ilo--button__alert:focus{background-color:var(--ilo-color-background-focus);border:var(--ilo-border-md) var(--ilo-color-borders-focus) solid;color:var(--ilo-button-labels-focus-color);outline:0}.ilo--button__alert:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;box-shadow:none;color:var(--ilo-button-labels-active-color)}.ilo--button:focus{background-color:var(--ilo-color-background-focus);border:var(--ilo-border-md) var(--ilo-color-borders-focus) solid;box-shadow:4px 4px 0 1px var(--ilo-color-borders-focus) inset,-4px -4px 0 1px var(--ilo-color-borders-focus) inset;color:var(--ilo-button-labels-focus-color);outline:0;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:focus.ilo--small{box-shadow:3px 3px 0 1px var(--ilo-color-borders-focus) inset,-3px -3px 0 1px var(--ilo-color-borders-focus) inset}.ilo--button:hover{background-color:var(--ilo-color-background-hover);border:var(--ilo-border-md) var(--ilo-color-borders-hover) solid;color:var(--ilo-button-labels-hover-color);cursor:pointer}.ilo--button:active,.ilo--button:hover{box-shadow:none;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--button:active{background-color:var(--ilo-color-background-active);border:var(--ilo-border-md) var(--ilo-color-borders-active) solid;color:var(--ilo-button-labels-active-color)}.ilo--button:disabled{opacity:.45;pointer-events:none}

package/lib/styles/components/callout.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--callout{display:flex;transition:max-height 225ms ease-out}.ilo--callout--collapse:not(.ilo--callout--open){max-height:64px;overflow:hidden}.ilo--callout--open{max-height:300px;overflow:hidden}.ilo--callout--open .ilo--callout--toggle--icon{transform:translateY(-50%) rotate(180deg)}.ilo--callout--sidebar{display:flex;flex-direction:column;align-items:center;padding:calc(5 * var(--ilo-spacing-base)) calc(2 * var(--ilo-spacing-base));width:2.1436227224rem}.ilo--callout--sidebar .ilo--callout--icon{margin:calc(1 * var(--ilo-spacing-base))}.ilo--callout--content{padding:calc(6 * var(--ilo-spacing-base));width:100%;font-size:.8001071811rem}.ilo--callout--header{display:flex;justify-content:space-between;padding-bottom:calc(3 * var(--ilo-spacing-base))}.ilo--callout--title{font-weight:700}.ilo--callout--title,.ilo--callout--toggle{font-size:16px;letter-spacing:-.02em;line-height:21.6px;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif}.ilo--callout--toggle{background:0 0;border:none;color:#230050;cursor:pointer;font-weight:500;padding-right:calc(8 * var(--ilo-spacing-base));position:relative}.ilo--callout--toggle--icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E");background-position:100%;background-repeat:no-repeat;display:inline-block;height:24px;position:absolute;right:0;top:11px;transform:translateY(-50%) rotate(0);transition:transform 225ms ease-out;width:24px}.ilo--callout--footer{padding-top:calc(5 * var(--ilo-spacing-base))}.ilo--callout .icon{background-repeat:no-repeat;background-size:contain;display:block;height:16px;width:16px}.ilo--callout .icon--error{background-color:#fa3c4b;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M11.31 0H4.69L0 4.69v6.62L4.69 16h6.62L16 11.31V4.69L11.31 0zM8 12a1 1 0 0 1-1-.89V11a1 1 0 0 1 .89-1H8a1 1 0 0 1 1 .89V11a1 1 0 0 1-.89 1H8zm1-3H7V4h2v5z'/%3E%3C/svg%3E")}.ilo--callout .icon--info{background-color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23FFF' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23FFF' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--callout .icon--success{background-color:#8ce164;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFF' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E")}.ilo--callout .icon--warning{background-color:#ffcd2d;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill='%23FFF' d='M16.797 13.03l-6.32-11.65a1.59 1.59 0 0 0-.68-.68 1.69 1.69 0 0 0-2.28.68l-6.32 11.65a1.68 1.68 0 0 0 .68 2.27c.25.13.528.2.81.2h12.62c.28 0 .554-.068.8-.2a1.671 1.671 0 0 0 .7-2.26l-.01-.01zm-7.8.47a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4z'/%3E%3C/svg%3E")}.ilo--callout--error{background:#fed8db}.ilo--callout--error .ilo--callout--sidebar{background:#fa3c4b}.ilo--callout--info{background:#bedcfa}.ilo--callout--info .ilo--callout--sidebar{background:#1e2dbe}.ilo--callout--success{background:#e8f9e0}.ilo--callout--success .ilo--callout--sidebar{background:#8ce164}.ilo--callout--warning{background:#fff5c8}.ilo--callout--warning .ilo--callout--sidebar{background:#ffcd2d}
+.ilo--callout{display:flex;transition:max-height 225ms ease-out}.ilo--callout--collapse:not(.ilo--callout--open){max-height:64px;overflow:hidden}.ilo--callout--open{max-height:300px;overflow:hidden}.ilo--callout--open .ilo--callout--toggle--icon{transform:translateY(-50%) rotate(180deg)}.ilo--callout__sidebar{display:flex;flex-direction:column;align-items:center;padding:calc(5 * var(--ilo-spacing-base)) calc(2 * var(--ilo-spacing-base));width:2.1436227224rem}.ilo--callout__sidebar .ilo--callout__icon{margin:calc(1 * var(--ilo-spacing-base))}.ilo--callout__content{padding:calc(6 * var(--ilo-spacing-base));width:100%;font-size:.7502679528rem}.ilo--callout__header{display:flex;justify-content:space-between;padding-block-end:calc(3 * var(--ilo-spacing-base))}.ilo--callout__title{font-size:16px;letter-spacing:-.02em;line-height:21.6px;font-family:var(--ilo-fonts-display);font-weight:700}.ilo--callout__description{font-weight:400}.ilo--callout--toggle{font-size:16px;letter-spacing:-.02em;line-height:21.6px;background:0 0;border:none;color:var(--ilo-color-blue-dark);cursor:pointer;font-family:var(--ilo-fonts-display);font-weight:500;padding-inline-end:calc(8 * var(--ilo-spacing-base));position:relative}.ilo--callout--toggle__icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E");background-position:100%;background-repeat:no-repeat;display:inline-block;height:24px;position:absolute;right:0;top:11px;transform:translateY(-50%) rotate(0);transition:transform 225ms ease-out;width:24px}.ilo--callout__footer{padding-block-start:calc(5 * var(--ilo-spacing-base))}.ilo--callout .icon{background-repeat:no-repeat;background-size:contain;display:block;height:16px;width:16px}.ilo--callout .icon__error{background-color:var(--ilo-color-notification-type-error);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M11.31 0H4.69L0 4.69v6.62L4.69 16h6.62L16 11.31V4.69L11.31 0zM8 12a1 1 0 0 1-1-.89V11a1 1 0 0 1 .89-1H8a1 1 0 0 1 1 .89V11a1 1 0 0 1-.89 1H8zm1-3H7V4h2v5z'/%3E%3C/svg%3E")}.ilo--callout .icon__info{background-color:var(--ilo-color-notification-type-info);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23fff' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23fff' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--callout .icon__success{background-color:var(--ilo-color-notification-type-success);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E")}.ilo--callout .icon__warning{background-color:var(--ilo-color-notification-type-warning);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath fill='%23fff' d='M16.797 13.03l-6.32-11.65a1.59 1.59 0 0 0-.68-.68 1.69 1.69 0 0 0-2.28.68l-6.32 11.65a1.68 1.68 0 0 0 .68 2.27c.25.13.528.2.81.2h12.62c.28 0 .554-.068.8-.2a1.671 1.671 0 0 0 .7-2.26l-.01-.01zm-7.8.47a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm1-3.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4z'/%3E%3C/svg%3E")}.ilo--callout__error{background:var(--ilo-color-red-ramp)}.ilo--callout__error .ilo--callout__sidebar{background:var(--ilo-color-red)}.ilo--callout__info{background:var(--ilo-color-blue-ramp)}.ilo--callout__info .ilo--callout__sidebar{background:var(--ilo-color-blue)}.ilo--callout__success{background:var(--ilo-ramp-green)}.ilo--callout__success .ilo--callout__sidebar{background:var(--ilo-color-green)}.ilo--callout__warning{background:var(--ilo-color-yellow-ramp)}.ilo--callout__warning .ilo--callout__sidebar{background:var(--ilo-color-yellow)}

package/lib/styles/components/card.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--card{box-sizing:border-box;position:relative;background-color:#fff;max-width:var(--max-width);flex:1 1 var(--max-width)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__action:focus,.ilo--card__action:focus-within,.ilo--card__action:hover{background:#fff;outline:0;text-decoration:none}.ilo--card__action:focus-within.ilo--card__dark,.ilo--card__action:focus.ilo--card__dark,.ilo--card__action:hover.ilo--card__dark{background:#fff}.ilo--card__action:focus-within .ilo--card--date,.ilo--card__action:focus-within .ilo--card--date-extra,.ilo--card__action:focus-within .ilo--card--eyebrow,.ilo--card__action:focus-within .ilo--card--intro,.ilo--card__action:focus-within .ilo--card--title,.ilo--card__action:focus .ilo--card--date,.ilo--card__action:focus .ilo--card--date-extra,.ilo--card__action:focus .ilo--card--eyebrow,.ilo--card__action:focus .ilo--card--intro,.ilo--card__action:focus .ilo--card--title,.ilo--card__action:hover .ilo--card--date,.ilo--card__action:hover .ilo--card--date-extra,.ilo--card__action:hover .ilo--card--eyebrow,.ilo--card__action:hover .ilo--card--intro,.ilo--card__action:hover .ilo--card--title{color:#1e2dbe}.ilo--card__theme__light{background:#fff}.ilo--card__theme__dark{background:#230050;transition:background .25s ease-out}.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--eventdate,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro,.ilo--card__theme__dark .ilo--card--title{color:#edf0f2;transition:color .25s ease-out}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M22 12L4 2v20l18-10z'/%3E%3C/svg%3E");background-color:#2d2d2d;background-position:50%;background-size:18px 20px;background-repeat:no-repeat;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition:filter .25s ease-out}.ilo--card--wrapper:focus,.ilo--card--wrapper:focus-within,.ilo--card--wrapper:hover{filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card--link{background:0 0;color:transparent;height:100%;left:0;position:absolute;text-decoration:none;top:0;width:100%;z-index:2;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus,.ilo--card--link:focus-within,.ilo--card--link:hover{outline:0;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eyebrow{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--title,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--title,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--title{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--intro{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--date,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--date,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--date{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eventdate{color:#1e2dbe}.ilo--card--link--text{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:#960a55;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(3 * var(--ilo-spacing-base));transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--eyebrow,.ilo--card--link:focus .ilo--card--eyebrow,.ilo--card--link:hover .ilo--card--eyebrow{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--title{color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:-.0313772776rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--title,.ilo--card--link:focus .ilo--card--title,.ilo--card--link:hover .ilo--card--title{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--intro{color:#2d2d2d;font-size:16px;letter-spacing:normal;line-height:23.36px;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out;margin-bottom:calc(8 * var(--ilo-spacing-base))}.ilo--card--link:focus-within .ilo--card--intro,.ilo--card--link:focus .ilo--card--intro,.ilo--card--link:hover .ilo--card--intro{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--date{color:#6d6d6d;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--date,.ilo--card--link:focus .ilo--card--date,.ilo--card--link:hover .ilo--card--date{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--event-date{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem}.ilo--card--picture{max-width:100%;width:100%}.ilo--card--cta{position:relative;z-index:2}
+.ilo--card{box-sizing:border-box;position:relative;background-color:#fff;max-width:var(--max-width);flex:1 1 var(--max-width)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__action:focus,.ilo--card__action:focus-within,.ilo--card__action:hover{background:#fff;outline:0;text-decoration:none}.ilo--card__action:focus-within.ilo--card__dark,.ilo--card__action:focus.ilo--card__dark,.ilo--card__action:hover.ilo--card__dark{background:#fff}.ilo--card__action:focus-within .ilo--card--date,.ilo--card__action:focus-within .ilo--card--date-extra,.ilo--card__action:focus-within .ilo--card--eyebrow,.ilo--card__action:focus-within .ilo--card--intro,.ilo--card__action:focus-within .ilo--card--title,.ilo--card__action:focus .ilo--card--date,.ilo--card__action:focus .ilo--card--date-extra,.ilo--card__action:focus .ilo--card--eyebrow,.ilo--card__action:focus .ilo--card--intro,.ilo--card__action:focus .ilo--card--title,.ilo--card__action:hover .ilo--card--date,.ilo--card__action:hover .ilo--card--date-extra,.ilo--card__action:hover .ilo--card--eyebrow,.ilo--card__action:hover .ilo--card--intro,.ilo--card__action:hover .ilo--card--title{color:#1e2dbe}.ilo--card__theme__light{background:#fff}.ilo--card__theme__dark{background:#230050;transition:background .25s ease-out}.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--eventdate,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro,.ilo--card__theme__dark .ilo--card--title{color:#edf0f2;transition:color .25s ease-out}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M22 12L4 2v20l18-10z'/%3E%3C/svg%3E");background-color:#2d2d2d;background-position:50%;background-size:18px 20px;background-repeat:no-repeat;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition:filter .25s ease-out}.ilo--card--wrapper:focus,.ilo--card--wrapper:focus-within,.ilo--card--wrapper:hover{filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card--link{background:0 0;color:transparent;height:100%;left:0;position:absolute;text-decoration:none;top:0;width:100%;z-index:2;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus,.ilo--card--link:focus-within,.ilo--card--link:hover{outline:0;transition-property:color,background-color,border-color,opacity;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eyebrow,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eyebrow{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--title,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--title,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--title{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--intro,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--intro{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--date,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--date,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--date{color:#1e2dbe}.ilo--card--link:focus+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:focus-within+.ilo--card--wrap .ilo--card--eventdate,.ilo--card--link:hover+.ilo--card--wrap .ilo--card--eventdate{color:#1e2dbe}.ilo--card--link--text{width:1px;height:1px;margin:-1px;padding:0;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:#960a55;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:calc(3 * var(--ilo-spacing-base));transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--eyebrow,.ilo--card--link:focus .ilo--card--eyebrow,.ilo--card--link:hover .ilo--card--eyebrow{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--title{color:#230050;font-family:var(--ilo-fonts-display);font-weight:700;font-size:23.32px;letter-spacing:-.035em;line-height:29.15px;margin-bottom:-.0313772776rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--title,.ilo--card--link:focus .ilo--card--title,.ilo--card--link:hover .ilo--card--title{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--intro{color:#2d2d2d;font-size:16px;letter-spacing:normal;line-height:23.36px;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out;margin-bottom:calc(8 * var(--ilo-spacing-base))}.ilo--card--link:focus-within .ilo--card--intro,.ilo--card--link:focus .ilo--card--intro,.ilo--card--link:hover .ilo--card--intro{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--date{color:#6d6d6d;font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--link:focus-within .ilo--card--date,.ilo--card--link:focus .ilo--card--date,.ilo--card--link:hover .ilo--card--date{color:#1e2dbe;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card--event-date{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.3742266073rem}.ilo--card--picture{max-width:100%;width:100%}.ilo--card--cta{position:relative;z-index:2}

package/lib/styles/components/checkbox.css

@@ -1 +1 @@
-.ilo--checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:grid;height:1.2861736334rem;margin:0;position:relative;place-content:center;width:1.2861736334rem;transform:none;cursor:pointer}.ilo--checkbox:before{height:.857449089rem;left:.2143622722rem;top:.2143622722rem;width:.857449089rem;z-index:1}.ilo--checkbox:after,.ilo--checkbox:before{content:"";background-color:#b8c4cc;position:absolute}.ilo--checkbox:after{border:.2143622722rem solid #b8c4cc;height:1.2861736334rem;left:0;top:0;width:1.2861736334rem;z-index:0}.ilo--checkbox:checked:before{background-color:#230050;background-repeat:no-repeat;background-size:contain;background-position:50%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath fill='%23EDF0F2' d='M4.375 6.25l-2.5-2.5L0 5.625 4.375 10 12.5 1.875 10.625 0l-6.25 6.25z'/%3E%3C/svg%3E")}.ilo--checkbox:checked:after{background-color:#230050;border-color:#230050}.ilo--checkbox:focus{outline:0}.ilo--checkbox:focus:after{background-color:#ffcd2d;border-color:#ffcd2d}.ilo--checkbox:focus:checked:after{border-color:#ffcd2d}.ilo--checkbox:disabled{opacity:.45;pointer-events:none}.ilo--checkbox:invalid:after,.ilo--checkbox__error .ilo--checkbox:after,.ilo--checkbox__error:after{border-color:#fa3c4b}.ilo--checkbox:invalid:checked:after,.ilo--checkbox__error .ilo--checkbox:checked:after,.ilo--checkbox__error:checked:after{border-color:#230050}
+.ilo--checkbox{-moz-appearance:none;appearance:none;border:none;display:grid;height:1.2861736334rem;margin:0;position:relative;place-content:center;width:1.2861736334rem;transform:none;cursor:pointer}.ilo--checkbox:before{height:.857449089rem;left:.2143622722rem;top:.2143622722rem;width:.857449089rem;z-index:1}.ilo--checkbox:after,.ilo--checkbox:before{content:"";background-color:#b8c4cc;position:absolute}.ilo--checkbox:after{border:.2143622722rem solid #b8c4cc;height:1.2861736334rem;left:0;top:0;width:1.2861736334rem;z-index:0}.ilo--checkbox:checked:before{background-color:#230050;background-repeat:no-repeat;background-size:contain;background-position:50%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath fill='%23EDF0F2' d='M4.375 6.25l-2.5-2.5L0 5.625 4.375 10 12.5 1.875 10.625 0l-6.25 6.25z'/%3E%3C/svg%3E")}.ilo--checkbox:checked:after{background-color:#230050;border-color:#230050}.ilo--checkbox:focus{outline:0}.ilo--checkbox:focus:after{background-color:#ffcd2d;border-color:#ffcd2d}.ilo--checkbox:focus:checked:after{border-color:#ffcd2d}.ilo--checkbox:disabled{opacity:.45;pointer-events:none}.ilo--checkbox:invalid:after,.ilo--checkbox__error .ilo--checkbox:after,.ilo--checkbox__error:after{border-color:#fa3c4b}.ilo--checkbox:invalid:checked:after,.ilo--checkbox__error .ilo--checkbox:checked:after,.ilo--checkbox__error:checked:after{border-color:#230050}

package/lib/styles/components/contextmenu.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--context-menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;position:relative;width:auto;list-style:none}.ilo--context-menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--context-menu--item{padding:0 calc(2 * var(--ilo-spacing-base))}.ilo--context-menu--item:first-of-type{border-top-left-radius:2px;border-top-right-radius:2px}.ilo--context-menu--item:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ilo--context-menu--item:last-of-type a{border-bottom:none}.ilo--context-menu--item:focus,.ilo--context-menu--item:hover{background-color:#ebf5fd}.ilo--context-menu--item.endsection{border-bottom:.1607717042rem solid #fff}.ilo--context-menu--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--context-menu--link{border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:500;padding:calc(4 * var(--ilo-spacing-base)) calc(2 * var(--ilo-spacing-base));text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px;letter-spacing:-.1px}.ilo--context-menu--link:visited{color:#230050}.ilo--context-menu--link:active{color:#230050;outline:0}.ilo--context-menu--link:focus,.ilo--context-menu--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}
+.ilo--context-menu{border-radius:.1071811361rem;background-color:#edf0f2;display:inline-block;position:relative;width:auto;list-style:none}.ilo--context-menu:before{background-position:top;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M24 24L0 0v24h24z'/%3E%3C/svg%3E");content:"";height:.6430868167rem;position:absolute;left:50%;top:-.3215434084rem;transform:translateX(-50%) rotate(135deg);width:.6430868167rem}.ilo--context-menu--item{padding:0 calc(2 * var(--ilo-spacing-base))}.ilo--context-menu--item:first-of-type{border-top-left-radius:2px;border-top-right-radius:2px}.ilo--context-menu--item:last-of-type{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ilo--context-menu--item:last-of-type a{border-bottom:none}.ilo--context-menu--item:focus,.ilo--context-menu--item:hover{background-color:#ebf5fd}.ilo--context-menu--item.endsection{border-bottom:.1607717042rem solid #fff}.ilo--context-menu--item.endsection .ilo--context-menu--link{border-bottom:none}.ilo--context-menu--link{border-bottom:.1071811361rem solid #fff;color:#230050;display:inline-block;font-family:var(--ilo-fonts-copy);font-weight:500;padding:calc(4 * var(--ilo-spacing-base)) calc(2 * var(--ilo-spacing-base));text-decoration:none;width:100%;font-size:11.94px;letter-spacing:normal;line-height:16.24px;letter-spacing:-.1px}.ilo--context-menu--link:visited{color:#230050}.ilo--context-menu--link:active{color:#230050;outline:0}.ilo--context-menu--link:focus,.ilo--context-menu--link:hover{color:#1e2dbe;outline:0;text-decoration:underline;text-decoration-thickness:.1071811361rem}