@uob-web-and-digital/component-library 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +79 -6
  2. package/dist/main.css +1884 -0
  3. package/dist/main.js +16 -16
  4. package/dist/module.js +16 -16
  5. package/package.json +4 -2
package/dist/main.js CHANGED
@@ -27,7 +27,7 @@ function styleInject(css, ref) {
27
27
  }
28
28
  }
29
29
 
30
- var css_248z$f = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\nhtml,\nbody {\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 16px;\n}\n\nbody {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n}\n@media screen and (min-width: 1248px) {\n body {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\nbody.lock-scroll {\n overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nbody,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nol,\nul {\n padding: 0;\n margin: 0;\n font-weight: normal;\n}\n\nol,\nul {\n list-style: none;\n}\n\nbutton {\n padding: 0;\n border: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n outline: none;\n}\n\na {\n color: inherit;\n outline: none;\n}\n\nbutton,\na {\n color: inherit;\n cursor: pointer;\n}\n\nblockquote {\n margin: 0;\n}\n\nfigure {\n margin: 0;\n}\n\n.sr-only {\n position: absolute;\n top: auto;\n left: -10000px;\n overflow: hidden;\n width: 1px;\n height: 1px;\n font-size: 1rem;\n}\n\n::-moz-selection.theme-uobmain {\n background: #dcc266;\n}\n\n::selection.theme-uobmain {\n background: #dcc266;\n}\n::-moz-selection.theme-redexample {\n background: #dcc266;\n}\n::selection.theme-redexample {\n background: #dcc266;\n}";
30
+ var css_248z$f = "";
31
31
  styleInject(css_248z$f);
32
32
 
33
33
  function getDefaultExportFromCjs (x) {
@@ -2858,7 +2858,7 @@ var React$1 = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
2858
2858
 
2859
2859
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
2860
2860
 
2861
- var css_248z$e = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.icon--facebook.theme-uobmain, .icon--twitter.theme-uobmain, .icon--instagram.theme-uobmain, .icon--weibo.theme-uobmain, .icon--wechat.theme-uobmain, .icon--youtube.theme-uobmain, .icon--hamburger.theme-uobmain, .icon--cross.theme-uobmain {\n fill: #fff;\n}\n.icon--facebook.theme-uobmain path, .icon--twitter.theme-uobmain path, .icon--instagram.theme-uobmain path, .icon--weibo.theme-uobmain path, .icon--wechat.theme-uobmain path, .icon--youtube.theme-uobmain path, .icon--hamburger.theme-uobmain path, .icon--cross.theme-uobmain path {\n fill: #fff;\n}\n.icon--facebook.theme-uobmain--inverse, .icon--twitter.theme-uobmain--inverse, .icon--instagram.theme-uobmain--inverse, .icon--weibo.theme-uobmain--inverse, .icon--wechat.theme-uobmain--inverse, .icon--youtube.theme-uobmain--inverse, .icon--hamburger.theme-uobmain--inverse, .icon--cross.theme-uobmain--inverse {\n fill: #000;\n}\n.icon--facebook.theme-uobmain--inverse path, .icon--twitter.theme-uobmain--inverse path, .icon--instagram.theme-uobmain--inverse path, .icon--weibo.theme-uobmain--inverse path, .icon--wechat.theme-uobmain--inverse path, .icon--youtube.theme-uobmain--inverse path, .icon--hamburger.theme-uobmain--inverse path, .icon--cross.theme-uobmain--inverse path {\n fill: #000;\n}\n.icon--facebook.theme-redexample, .icon--twitter.theme-redexample, .icon--instagram.theme-redexample, .icon--weibo.theme-redexample, .icon--wechat.theme-redexample, .icon--youtube.theme-redexample, .icon--hamburger.theme-redexample, .icon--cross.theme-redexample {\n fill: #fff;\n}\n.icon--facebook.theme-redexample path, .icon--twitter.theme-redexample path, .icon--instagram.theme-redexample path, .icon--weibo.theme-redexample path, .icon--wechat.theme-redexample path, .icon--youtube.theme-redexample path, .icon--hamburger.theme-redexample path, .icon--cross.theme-redexample path {\n fill: #fff;\n}\n.icon--facebook.theme-redexample--inverse, .icon--twitter.theme-redexample--inverse, .icon--instagram.theme-redexample--inverse, .icon--weibo.theme-redexample--inverse, .icon--wechat.theme-redexample--inverse, .icon--youtube.theme-redexample--inverse, .icon--hamburger.theme-redexample--inverse, .icon--cross.theme-redexample--inverse {\n fill: #000;\n}\n.icon--facebook.theme-redexample--inverse path, .icon--twitter.theme-redexample--inverse path, .icon--instagram.theme-redexample--inverse path, .icon--weibo.theme-redexample--inverse path, .icon--wechat.theme-redexample--inverse path, .icon--youtube.theme-redexample--inverse path, .icon--hamburger.theme-redexample--inverse path, .icon--cross.theme-redexample--inverse path {\n fill: #fff;\n}\n.icon--chevron-down.theme-uobmain, .icon--arrow-right.theme-uobmain, .icon--arrow-right-large.theme-uobmain, .icon--chevron-right.theme-uobmain, .icon--arrow-left.theme-uobmain {\n stroke: #fff;\n}\n.icon--chevron-down.theme-uobmain path, .icon--arrow-right.theme-uobmain path, .icon--arrow-right-large.theme-uobmain path, .icon--chevron-right.theme-uobmain path, .icon--arrow-left.theme-uobmain path {\n stroke: #fff;\n}\n.icon--chevron-down.theme-uobmain--inverse, .icon--arrow-right.theme-uobmain--inverse, .icon--arrow-right-large.theme-uobmain--inverse, .icon--chevron-right.theme-uobmain--inverse, .icon--arrow-left.theme-uobmain--inverse {\n stroke: #000;\n}\n.icon--chevron-down.theme-uobmain--inverse path, .icon--arrow-right.theme-uobmain--inverse path, .icon--arrow-right-large.theme-uobmain--inverse path, .icon--chevron-right.theme-uobmain--inverse path, .icon--arrow-left.theme-uobmain--inverse path {\n stroke: #000;\n}\n.icon--chevron-down.theme-redexample, .icon--arrow-right.theme-redexample, .icon--arrow-right-large.theme-redexample, .icon--chevron-right.theme-redexample, .icon--arrow-left.theme-redexample {\n stroke: #fff;\n}\n.icon--chevron-down.theme-redexample path, .icon--arrow-right.theme-redexample path, .icon--arrow-right-large.theme-redexample path, .icon--chevron-right.theme-redexample path, .icon--arrow-left.theme-redexample path {\n stroke: #fff;\n}\n.icon--chevron-down.theme-redexample--inverse, .icon--arrow-right.theme-redexample--inverse, .icon--arrow-right-large.theme-redexample--inverse, .icon--chevron-right.theme-redexample--inverse, .icon--arrow-left.theme-redexample--inverse {\n stroke: #000;\n}\n.icon--chevron-down.theme-redexample--inverse path, .icon--arrow-right.theme-redexample--inverse path, .icon--arrow-right-large.theme-redexample--inverse path, .icon--chevron-right.theme-redexample--inverse path, .icon--arrow-left.theme-redexample--inverse path {\n stroke: #000;\n}";
2861
+ var css_248z$e = "";
2862
2862
  styleInject(css_248z$e);
2863
2863
 
2864
2864
  function Icon(_a) {
@@ -2923,7 +2923,7 @@ function Icon(_a) {
2923
2923
  }
2924
2924
  }
2925
2925
 
2926
- var css_248z$d = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.icon-button {\n display: flex;\n width: 2.75rem;\n height: 2.75rem;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n}\n@media screen and (min-width: 768px) {\n .icon-button {\n width: 3rem;\n height: 3rem;\n }\n}\n.icon-button.theme-uobmain {\n border: 2px solid #fff;\n background: #000;\n color: #fff;\n transition: filter 0.3s ease-in;\n}\n.icon-button.theme-uobmain:focus-visible {\n border: 2px solid #dcc266;\n background: #000;\n color: #fff;\n outline: 2px solid #000;\n}\n.icon-button.theme-uobmain:focus-visible path {\n fill: #fff;\n}\n.icon-button.theme-uobmain:hover {\n filter: invert(100%);\n}\n.icon-button.theme-uobmain--inverse {\n border: 2px solid #000;\n background: #fff;\n color: #000;\n}\n.icon-button.theme-uobmain--inverse:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #000;\n}\n.icon-button.theme-redexample {\n border: 2px solid #fff;\n background: #f00;\n color: #fff;\n transition: filter 0.3s ease-in;\n}\n.icon-button.theme-redexample:focus-visible {\n border: 2px solid #dcc266;\n background: #f00;\n color: #fff;\n outline: 2px solid #f00;\n}\n.icon-button.theme-redexample:focus-visible path {\n fill: #fff;\n}\n.icon-button.theme-redexample:hover {\n filter: invert(100%);\n}\n.icon-button.theme-redexample--inverse {\n border: 2px solid #fff;\n background: #00f;\n color: #fff;\n}\n.icon-button.theme-redexample--inverse:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #f00;\n}";
2926
+ var css_248z$d = "";
2927
2927
  styleInject(css_248z$d);
2928
2928
 
2929
2929
  var IconButton = reactExports.forwardRef(function (_a, ref) {
@@ -2936,7 +2936,7 @@ var IconButton = reactExports.forwardRef(function (_a, ref) {
2936
2936
  });
2937
2937
  IconButton.displayName = 'IconButton';
2938
2938
 
2939
- var css_248z$c = ".image {\n display: block;\n width: 100%;\n height: auto;\n -o-object-fit: cover;\n object-fit: cover;\n}";
2939
+ var css_248z$c = "";
2940
2940
  styleInject(css_248z$c);
2941
2941
 
2942
2942
  function Image(_a) {
@@ -2944,7 +2944,7 @@ function Image(_a) {
2944
2944
  return (React$1.createElement("img", { className: "image", src: src.default, srcSet: "".concat(src.small, " 576w, ").concat(src.medium, " 992w, ").concat(src.default, " 1440w"), alt: altText || '', title: title || '', loading: loadingAttr }));
2945
2945
  }
2946
2946
 
2947
- var css_248z$b = "@charset \"UTF-8\";\n@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.link-with-arrow {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-right: 1.5rem;\n border-bottom: 2px solid transparent;\n text-decoration: none;\n transition: all 0.3s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .link-with-arrow {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.link-with-arrow.lock-scroll {\n overflow: hidden;\n}\n.link-with-arrow::before {\n position: absolute;\n top: 50%;\n left: -1.25rem;\n width: 0.875rem;\n content: \"•\";\n opacity: 0;\n transform: translateY(-50%);\n transition: all 0.3s ease-in;\n}\n.link-with-arrow__icon {\n position: absolute;\n width: 1.0625rem;\n height: 1.5rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n margin-left: 0.375rem;\n transition: all 0.3s ease-in;\n}\n.link-with-arrow__icon path:first-child {\n transition: transform 0.3s ease-in;\n}\n.link-with-arrow__icon path:nth-child(2) {\n transition: transform 0.5s ease-in;\n}\n.link-with-arrow__icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.link-with-arrow__title {\n position: relative;\n text-decoration: underline;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 5px;\n}\n.link-with-arrow:hover {\n transform: translateX(1.25rem);\n}\n.link-with-arrow:hover::before {\n opacity: 1;\n}\n.link-with-arrow:hover .link-with-arrow__icon path:first-child {\n transform: scaleX(2);\n transition: transform 0.5s ease-in;\n}\n.link-with-arrow:hover .link-with-arrow__icon path:nth-child(2) {\n transform: translateX(5px);\n transition: transform 0.3s ease-in;\n}\n.link-with-arrow.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.link-with-arrow.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-with-arrow.theme-uobmain:focus-visible .link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.link-with-arrow.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.link-with-arrow.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.link-with-arrow.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.link-with-arrow.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.link-with-arrow.theme-redexample:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-with-arrow.theme-redexample:focus-visible .link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.link-with-arrow.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.link-with-arrow.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.link-with-arrow.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
2947
+ var css_248z$b = "";
2948
2948
  styleInject(css_248z$b);
2949
2949
 
2950
2950
  function LinkWithArrow(_a) {
@@ -2956,7 +2956,7 @@ function LinkWithArrow(_a) {
2956
2956
  React$1.createElement(Icon, { icon: "arrow-right", theme: theme, inverse: inverse, ariaHidden: true })))));
2957
2957
  }
2958
2958
 
2959
- var css_248z$a = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.link-standard {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 0.3s ease-in;\n}\n.link-standard.theme-uobmain {\n border-bottom: 2px solid transparent;\n color: #fff;\n}\n.link-standard.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-standard.theme-uobmain:hover {\n border-bottom: 2px solid #fff;\n}\n.link-standard.theme-uobmain--inverse {\n color: #000;\n}\n.link-standard.theme-uobmain--inverse:hover {\n border-bottom: 2px solid #000;\n}\n.link-standard.theme-redexample {\n border-bottom: 2px solid transparent;\n color: #fff;\n}\n.link-standard.theme-redexample:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #fff;\n}\n.link-standard.theme-redexample:hover {\n border-bottom: 2px solid #fff;\n}\n.link-standard.theme-redexample--inverse {\n color: #fff;\n}\n.link-standard.theme-redexample--inverse:hover {\n border-bottom: 2px solid #000;\n}";
2959
+ var css_248z$a = "";
2960
2960
  styleInject(css_248z$a);
2961
2961
 
2962
2962
  function LinkStandard(_a) {
@@ -2964,7 +2964,7 @@ function LinkStandard(_a) {
2964
2964
  return (React$1.createElement("a", { className: clsx('link-standard', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), href: url, target: externalLink ? '_blank' : '_self', rel: externalLink ? 'noopener noreferrer' : '' }, title));
2965
2965
  }
2966
2966
 
2967
- var css_248z$9 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.footer.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.footer.theme-uobmain summary:focus-visible {\n outline-color: #dcc266;\n outline-offset: 0.625rem;\n}\n.footer.theme-uobmain .footer__bottom-container {\n padding: 0.75rem 0;\n background: #1a1a1a;\n}\n.footer.theme-uobmain .footer__details {\n padding-bottom: 1.75rem;\n border-bottom: 1px solid #58595b;\n margin-bottom: 1.5rem;\n}\n.footer.theme-uobmain .footer__details[open] > summary .icon--chevron-down {\n transform: rotate(180deg);\n}\n.footer.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.footer.theme-redexample summary:focus-visible {\n outline-color: #dcc266;\n outline-offset: 0.625rem;\n}\n.footer.theme-redexample .footer__bottom-container {\n padding: 0.75rem 0;\n background: #00f;\n}\n.footer.theme-redexample .footer__details {\n padding-bottom: 1.75rem;\n border-bottom: 1px solid #fff;\n margin-bottom: 1.5rem;\n}\n.footer.theme-redexample .footer__details[open] > summary .icon--chevron-down {\n transform: rotate(180deg);\n}\n.footer__bottom-wrapper {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n}\n@media screen and (min-width: 768px) {\n .footer__bottom-wrapper {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__bottom-wrapper {\n padding: 0;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__bottom-wrapper {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n }\n}\n.footer__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .footer__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .footer__container {\n padding-top: 3.75rem;\n padding-bottom: 3.75rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__container {\n padding-top: 4.5rem;\n padding-bottom: 4.5rem;\n }\n}\n@media screen and (min-width: 768px) {\n .footer__column-container {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-container {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(3, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-left {\n flex-basis: 22%;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-middle {\n flex-basis: 30%;\n }\n}\n.footer__logo-wrapper {\n width: 8.75rem;\n margin-bottom: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .footer__logo-wrapper {\n width: 15rem;\n }\n}\n.footer__address {\n margin-bottom: 1.5rem;\n}\n.footer__telephone {\n margin-bottom: 1.5rem;\n}\n.footer__telephone a {\n text-decoration: none;\n}\n.footer__social-wrapper {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(4, 40px);\n margin: 1.875rem 0;\n}\n.footer__social-wrapper li {\n margin-right: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .footer__social-wrapper li {\n margin-right: 0.5rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__social-wrapper li {\n margin-right: 1.125rem;\n }\n}\n.footer__summary-links {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n@media screen and (min-width: 768px) {\n .footer__summary-links {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__summary-links {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n.footer__summary-links::marker {\n display: none;\n content: \"\";\n}\n.footer__summary-icon {\n width: 2.25rem;\n margin-top: 0.5rem;\n margin-left: 0.625rem;\n}\n.footer__summary-icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n transition: transform 0.3s ease-out;\n}\n.footer__location {\n display: flex;\n align-items: center;\n}\n.footer__location a {\n text-decoration: none;\n}\n.footer__location-icon {\n width: 1.5rem;\n margin-top: 0.5rem;\n}\n.footer__location-icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.footer__arrow-link {\n margin-bottom: 1.5rem;\n}\n.footer__hygiene-link-wrapper {\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 2.5rem;\n}\n@media screen and (min-width: 1248px) {\n .footer__hygiene-link-wrapper {\n margin-right: 1.875rem;\n margin-bottom: 0;\n }\n}\n.footer__hygiene-link {\n display: inline;\n padding: 0.625rem 0;\n margin-right: 0.625rem;\n font-size: 0.75rem;\n line-height: 1.4166666667;\n}\n.footer__hygiene-link a {\n text-decoration: none;\n}\n.footer__map {\n display: none;\n}\n@media screen and (min-width: 1248px) {\n .footer__map {\n display: block;\n flex-basis: 40%;\n }\n}\n.footer__copyright {\n font-size: 0.75rem;\n line-height: 1.4166666667;\n}\n@media screen and (min-width: 1248px) {\n .footer__copyright {\n flex-basis: 40%;\n padding-bottom: 0.625rem;\n text-align: right;\n }\n}";
2967
+ var css_248z$9 = "";
2968
2968
  styleInject(css_248z$9);
2969
2969
 
2970
2970
  function Footer(_a) {
@@ -15396,7 +15396,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
15396
15396
  : childrenToRender.map((child) => reactExports.cloneElement(child))));
15397
15397
  };
15398
15398
 
15399
- var css_248z$8 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.nav-link {\n position: relative;\n text-decoration: none;\n text-decoration-color: transparent;\n transition: all 0.3s ease-in;\n}\n.nav-link:hover {\n text-decoration: underline;\n text-decoration-color: inherit;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 7px;\n}\n@media screen and (min-width: 768px) {\n .nav-link:hover {\n text-underline-offset: 10px;\n }\n}\n.nav-link__icon {\n position: absolute;\n transition: all 0.3s ease-in;\n}\n.nav-link__icon svg {\n overflow: visible;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.nav-link--level-one {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.75rem;\n line-height: 2.1rem;\n padding-right: 1.875rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-one {\n font-size: 2.25rem;\n line-height: 2.25rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-one {\n font-size: 3rem;\n line-height: 3.6rem;\n }\n}\n.nav-link--level-one .nav-link__icon {\n width: 0.75rem;\n height: 1.125rem;\n margin-left: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-one .nav-link__icon {\n width: 0.875rem;\n height: 1.4375rem;\n margin-left: 0.625rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-one .nav-link__icon {\n width: 0.9375rem;\n height: 1.625rem;\n }\n}\n.nav-link--level-two {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-two {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two {\n padding-right: 1.5rem;\n }\n}\n.nav-link--level-two .nav-link__icon {\n width: 0.4375rem;\n height: 0.875rem;\n margin-left: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two .nav-link__icon {\n width: 0.625rem;\n height: 1rem;\n margin-left: 0.625rem;\n }\n}\n.nav-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.nav-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n transition: none;\n}\n.nav-link.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.nav-link.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.nav-link.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.nav-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.nav-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #f00;\n transition: none;\n}\n.nav-link.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.nav-link.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.nav-link.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
15399
+ var css_248z$8 = "";
15400
15400
  styleInject(css_248z$8);
15401
15401
 
15402
15402
  var NavLink = function (_a) {
@@ -15408,7 +15408,7 @@ var NavLink = function (_a) {
15408
15408
  React$1.createElement(Icon, { icon: "chevron-right", theme: theme, ariaHidden: true })))));
15409
15409
  };
15410
15410
 
15411
- var css_248z$7 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.page-link {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n text-decoration-color: transparent;\n transition: all 0.3s ease-in;\n}\n.page-link--level-one {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.75rem;\n line-height: 2.1rem;\n}\n@media screen and (min-width: 768px) {\n .page-link--level-one {\n font-size: 2.25rem;\n line-height: 2.25rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .page-link--level-one {\n font-size: 3rem;\n line-height: 3.6rem;\n }\n}\n.page-link--level-two {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n}\n@media screen and (min-width: 768px) {\n .page-link--level-two {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .page-link--level-two {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n.page-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.page-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n}\n.page-link.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.page-link.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.page-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.page-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #f00;\n}\n.page-link.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.page-link.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}\n.page-link:hover {\n text-decoration: underline;\n text-decoration-color: inherit;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 7px;\n}\n@media screen and (min-width: 768px) {\n .page-link:hover {\n text-underline-offset: 10px;\n }\n}";
15411
+ var css_248z$7 = "";
15412
15412
  styleInject(css_248z$7);
15413
15413
 
15414
15414
  var PageLink = function (_a) {
@@ -15438,7 +15438,7 @@ var MainMenu = function (_a) {
15438
15438
  }))));
15439
15439
  };
15440
15440
 
15441
- var css_248z$6 = "@charset \"UTF-8\";\n@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.reverse-link-with-arrow {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-left: 1.25rem;\n border-bottom: 2px solid transparent;\n text-decoration: none;\n transition: all 0.3s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .reverse-link-with-arrow {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.reverse-link-with-arrow.lock-scroll {\n overflow: hidden;\n}\n.reverse-link-with-arrow::after {\n position: absolute;\n top: 50%;\n right: -1.25rem;\n width: 0.875rem;\n content: \"•\";\n opacity: 0;\n transform: translateY(-50%);\n transition: all 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon {\n position: absolute;\n left: -1.25rem;\n width: 0.75rem;\n height: 0.625rem;\n flex-shrink: 0;\n transition: all 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon path:first-child {\n transform-origin: right;\n transition: transform 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon path:nth-child(2) {\n transition: transform 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon svg {\n overflow: visible;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.reverse-link-with-arrow__title {\n position: relative;\n text-decoration: underline;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 5px;\n}\n.reverse-link-with-arrow:hover {\n transform: translateX(-1.25rem);\n}\n.reverse-link-with-arrow:hover::after {\n opacity: 1;\n}\n.reverse-link-with-arrow:hover .reverse-link-with-arrow__icon path:first-child {\n transform: scaleX(1.3);\n}\n.reverse-link-with-arrow:hover .reverse-link-with-arrow__icon path:nth-child(2) {\n transform: translateX(-5px);\n}\n.reverse-link-with-arrow.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible .reverse-link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.reverse-link-with-arrow.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.reverse-link-with-arrow.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.reverse-link-with-arrow.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible {\n border-bottom: 2px solid #f00;\n background: #dcc266;\n color: #f00;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible .reverse-link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.reverse-link-with-arrow.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
15441
+ var css_248z$6 = "";
15442
15442
  styleInject(css_248z$6);
15443
15443
 
15444
15444
  /**
@@ -15486,7 +15486,7 @@ function useScrollDirection() {
15486
15486
  return scrollDirection;
15487
15487
  }
15488
15488
 
15489
- var css_248z$5 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.text-button {\n padding: 0.6875rem 1.5rem;\n border-radius: 3.75rem;\n text-decoration: none;\n transition: all 0.2s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n.text-button.theme-uobmain {\n border: 2px solid #000;\n background: #000;\n color: #fff;\n}\n.text-button.theme-uobmain:hover {\n background: none;\n color: #000;\n}\n.text-button.theme-uobmain--inverse {\n border: 2px solid #fff;\n background: #fff;\n color: #000;\n}\n.text-button.theme-uobmain--inverse:hover {\n background: none;\n color: #fff;\n}\n.text-button.theme-uobmain:focus-visible {\n border: 2px solid #dcc266;\n background: #000;\n color: #fff;\n outline: 2px solid #000;\n}\n.text-button.theme-redexample {\n border: 2px solid #f00;\n background: #f00;\n color: #fff;\n}\n.text-button.theme-redexample:hover {\n background: none;\n color: #f00;\n}\n.text-button.theme-redexample--inverse {\n border: 2px solid #00f;\n background: #00f;\n color: #fff;\n}\n.text-button.theme-redexample--inverse:hover {\n background: none;\n color: #00f;\n}\n.text-button.theme-redexample:focus-visible {\n border: 2px solid #dcc266;\n background: #f00;\n color: #fff;\n outline: 2px solid #f00;\n}\n.text-button--hollow.theme-uobmain {\n background: none;\n color: #000;\n}\n.text-button--hollow.theme-uobmain:hover {\n background: #000;\n color: #fff;\n}\n.text-button--hollow.theme-uobmain--inverse {\n background: none;\n color: #fff;\n}\n.text-button--hollow.theme-uobmain--inverse:hover {\n background: #fff;\n color: #000;\n}\n.text-button--hollow.theme-redexample {\n background: none;\n color: #f00;\n}\n.text-button--hollow.theme-redexample:hover {\n background: #f00;\n color: #fff;\n}\n.text-button--hollow.theme-redexample--inverse {\n background: none;\n color: #00f;\n}\n.text-button--hollow.theme-redexample--inverse:hover {\n background: #00f;\n color: #fff;\n}\n@media screen and (min-width: 1248px) {\n .text-button {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .text-button {\n padding: 1rem 2.25rem;\n }\n}";
15489
+ var css_248z$5 = "";
15490
15490
  styleInject(css_248z$5);
15491
15491
 
15492
15492
  function TextButton(_a) {
@@ -15494,7 +15494,7 @@ function TextButton(_a) {
15494
15494
  return onClick ? (React$1.createElement("button", { className: clsx('text-button', hollow && 'text-button--hollow', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), onClick: onClick }, label)) : (React$1.createElement("a", { className: clsx('text-button', hollow && 'text-button--hollow', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), href: url, target: externalLink ? '_blank' : '_self', rel: externalLink ? 'noopener noreferrer' : '' }, label));
15495
15495
  }
15496
15496
 
15497
- var css_248z$4 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.campus-selector-link {\n padding-bottom: 0.0625rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n text-decoration-thickness: 0.125rem;\n text-underline-offset: 0.3125rem;\n transition: all 0.2s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n.campus-selector-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.campus-selector-link.theme-uobmain:hover {\n background: #58595b;\n}\n.campus-selector-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n}\n.campus-selector-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.campus-selector-link.theme-redexample:hover {\n background: #fff;\n}\n.campus-selector-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #000;\n}\n@media screen and (min-width: 1248px) {\n .campus-selector-link {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.campus-selector-link.lock-scroll {\n overflow: hidden;\n}\n.campus-selector-link--active {\n text-decoration-color: currentcolor;\n}";
15497
+ var css_248z$4 = "";
15498
15498
  styleInject(css_248z$4);
15499
15499
 
15500
15500
  function CampusSelectorLink(_a) {
@@ -15502,7 +15502,7 @@ function CampusSelectorLink(_a) {
15502
15502
  return (React$1.createElement("a", { className: clsx('campus-selector-link', theme && "theme-".concat(theme), active && 'campus-selector-link--active'), href: url, target: externalLink ? '_blank' : '_self', rel: "noreferrer" }, label));
15503
15503
  }
15504
15504
 
15505
- var css_248z$3 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.campus-selector.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.campus-selector.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.campus-selector__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}\n@media screen and (min-width: 768px) {\n .campus-selector__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .campus-selector__container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .campus-selector__container {\n justify-content: flex-end;\n padding-top: 1.0625rem;\n padding-bottom: 1.0625rem;\n gap: 1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .campus-selector__container {\n gap: 1.5rem;\n }\n}\n.campus-selector--desktop {\n display: none;\n}\n@media screen and (min-width: 768px) {\n .campus-selector--desktop {\n display: block;\n }\n}\n@media screen and (min-width: 768px) {\n .campus-selector--mobile {\n display: none;\n }\n}";
15505
+ var css_248z$3 = "";
15506
15506
  styleInject(css_248z$3);
15507
15507
 
15508
15508
  function CampusSelector(_a) {
@@ -15517,7 +15517,7 @@ function CampusSelector(_a) {
15517
15517
  React$1.createElement(CampusSelectorLink, { label: "Dubai", theme: theme, url: dubaiUrl, active: active === 'dubai' }))))));
15518
15518
  }
15519
15519
 
15520
- var css_248z$2 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.header {\n z-index: 10;\n}\n.header--is-closed {\n position: sticky;\n top: 0;\n transition: top 0.2s ease-out;\n}\n.header.theme-uobmain .header__closed {\n background: #fff;\n color: #000;\n}\n.header.theme-uobmain .header__open {\n background: #000;\n color: #fff;\n}\n.header.theme-uobmain .header__logo-link:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #000;\n}\n.header.theme-uobmain .header__content-wrapper {\n border-color: #fff;\n}\n.header.theme-redexample .header__closed {\n background: #00f;\n color: #fff;\n}\n.header.theme-redexample .header__open {\n background: #f00;\n color: #fff;\n}\n.header.theme-redexample .header__logo-link:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #f00;\n}\n.header.theme-redexample .header__content-wrapper {\n border-color: #fff;\n}\n.header__top-container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n@media screen and (min-width: 768px) {\n .header__top-container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__top-container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .header__top-container {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__top-container {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n}\n.header__logo-wrapper img {\n height: 2.875rem;\n}\n@media screen and (min-width: 768px) {\n .header__logo-wrapper img {\n height: 4.3125rem;\n }\n}\n.header__logo-link {\n display: block;\n border: 2px solid transparent;\n}\n.header__menu-button {\n display: flex;\n align-items: center;\n gap: 0.8125rem;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n@media screen and (min-width: 1248px) {\n .header__menu-button {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n.header__open {\n position: fixed;\n z-index: 10;\n padding-bottom: 1.5rem;\n inset: 0;\n overflow-x: auto;\n}\n@media screen and (min-width: 768px) {\n .header__open {\n padding-bottom: 9.125rem;\n }\n}\n.header__main-menu {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n margin-top: 1rem;\n}\n@media screen and (min-width: 768px) {\n .header__main-menu {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__main-menu {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .header__main-menu {\n margin-top: 3rem;\n }\n}\n.header__main-menu-primary-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 1rem;\n}\n.header__main-menu-secondary-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n margin-top: 1.5rem;\n gap: 1rem;\n}\n@media screen and (min-width: 1248px) {\n .header__main-menu-secondary-list {\n margin-top: 2.25rem;\n }\n}\n.header__nested-menu {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n margin-top: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .header__nested-menu {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__nested-menu {\n padding: 0;\n }\n}\n.header__heading-link {\n margin-top: 2.25rem;\n}\n@media screen and (min-width: 1248px) {\n .header__heading-link {\n margin-top: 1.5rem;\n }\n}\n.header__content-wrapper {\n margin-top: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .header__content-wrapper {\n padding-top: 2.25rem;\n border-top: 1px solid;\n margin-top: 2.25rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(12, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .header__content-wrapper {\n padding-top: 1.5rem;\n }\n}\n.header__description {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.575rem;\n}\n@media screen and (min-width: 1248px) {\n .header__description {\n font-size: 1.5rem;\n line-height: 1.95rem;\n }\n}\n@media screen and (min-width: 768px) {\n .header__description {\n grid-column: 1/span 6;\n }\n}\n.header__link-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n margin-top: 2.25rem;\n gap: 1rem;\n}\n@media screen and (min-width: 768px) {\n .header__link-list {\n margin-top: 0;\n grid-column: 1/span 6;\n }\n}\n@media screen and (min-width: 768px) {\n .header__link-list--with-desc {\n grid-column: 7/span 6;\n }\n}\n.header__campus-selector--mobile {\n margin-top: 1.5rem;\n}";
15520
+ var css_248z$2 = "";
15521
15521
  styleInject(css_248z$2);
15522
15522
 
15523
15523
  var Header = function (_a) {
@@ -15638,7 +15638,7 @@ function MainWrapper(_a) {
15638
15638
  return React$1.createElement("main", { id: "main" }, children);
15639
15639
  }
15640
15640
 
15641
- var css_248z$1 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.signpost.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.signpost.theme-uobmain,\n.signpost.theme-uobmain .signpost__item {\n border-color: #fff;\n}\n.signpost.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.signpost.theme-uobmain--inverse,\n.signpost.theme-uobmain--inverse .signpost__item {\n border-color: #000;\n}\n.signpost.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.signpost.theme-redexample,\n.signpost.theme-redexample .signpost__item {\n border-color: #fff;\n}\n.signpost.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.signpost.theme-redexample--inverse,\n.signpost.theme-redexample--inverse .signpost__item {\n border-color: #000;\n}\n.signpost__item {\n display: flex;\n flex-direction: column;\n align-items: start;\n padding: 1.5rem 0 1.625rem;\n border-top: 1.5px solid;\n gap: 1.5rem;\n}\n.signpost__item:first-child {\n border-top: 0;\n}\n@media screen and (min-width: 768px) {\n .signpost__item {\n padding: 0;\n border-top: 0;\n margin: 2.25rem 0;\n grid-column: 1/span 6;\n }\n .signpost__item:first-child {\n padding-right: 3rem;\n }\n .signpost__item:nth-child(2n) {\n padding-left: 3rem;\n border-left: 1.5px solid;\n grid-column: 7/span 6;\n }\n}\n.signpost + .signpost .signpost__item {\n border-top: 1.5px solid;\n}\n@media screen and (min-width: 768px) {\n .signpost + .signpost .signpost__item {\n border-top: 0;\n }\n .signpost + .signpost .signpost__grid {\n border-top: 1.5px solid;\n }\n}\n.signpost__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n}\n@media screen and (min-width: 768px) {\n .signpost__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .signpost__container {\n padding: 0;\n }\n}\n.signpost__grid {\n display: flex;\n flex-direction: column;\n}\n@media screen and (min-width: 768px) {\n .signpost__grid {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(12, 1fr);\n gap: 0;\n }\n}\n.signpost__tag {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n@media screen and (min-width: 1248px) {\n .signpost__tag {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n.signpost__title {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1.25rem;\n line-height: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .signpost__title {\n font-size: 1.375rem;\n line-height: 1.65rem;\n }\n}\n@media screen and (min-width: 768px) {\n .signpost__title {\n font-size: 1.875rem;\n line-height: 2.4375rem;\n }\n}";
15641
+ var css_248z$1 = "";
15642
15642
  styleInject(css_248z$1);
15643
15643
 
15644
15644
  /**
@@ -15654,7 +15654,7 @@ function SignPost(_a) {
15654
15654
  React$1.createElement(LinkWithArrow, { url: item.linkUrl, title: item.linkLabel, theme: theme, inverse: inverse, externalLink: item.external }))); })))));
15655
15655
  }
15656
15656
 
15657
- var css_248z = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.skip-to-content {\n position: relative;\n width: 100%;\n}\n.skip-to-content.theme-uobmain {\n background: #dcc266;\n}\n.skip-to-content.theme-redexample {\n background: #dcc266;\n}\n.skip-to-content__link {\n position: absolute;\n top: 0;\n left: -1000px;\n display: block;\n padding: 0.625rem 1.5rem;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .skip-to-content__link {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.skip-to-content__link.lock-scroll {\n overflow: hidden;\n}\n@media screen and (min-width: 768px) {\n .skip-to-content__link {\n padding: 0.625rem 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .skip-to-content__link {\n padding: 0.625rem 1rem;\n }\n}\n.skip-to-content__link:focus {\n position: static;\n}";
15657
+ var css_248z = "";
15658
15658
  styleInject(css_248z);
15659
15659
 
15660
15660
  function SkipToContent(_a) {
package/dist/module.js CHANGED
@@ -25,7 +25,7 @@ function styleInject(css, ref) {
25
25
  }
26
26
  }
27
27
 
28
- var css_248z$f = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\nhtml,\nbody {\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 16px;\n}\n\nbody {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4rem;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n}\n@media screen and (min-width: 1248px) {\n body {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\nbody.lock-scroll {\n overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nbody,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nol,\nul {\n padding: 0;\n margin: 0;\n font-weight: normal;\n}\n\nol,\nul {\n list-style: none;\n}\n\nbutton {\n padding: 0;\n border: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: transparent;\n outline: none;\n}\n\na {\n color: inherit;\n outline: none;\n}\n\nbutton,\na {\n color: inherit;\n cursor: pointer;\n}\n\nblockquote {\n margin: 0;\n}\n\nfigure {\n margin: 0;\n}\n\n.sr-only {\n position: absolute;\n top: auto;\n left: -10000px;\n overflow: hidden;\n width: 1px;\n height: 1px;\n font-size: 1rem;\n}\n\n::-moz-selection.theme-uobmain {\n background: #dcc266;\n}\n\n::selection.theme-uobmain {\n background: #dcc266;\n}\n::-moz-selection.theme-redexample {\n background: #dcc266;\n}\n::selection.theme-redexample {\n background: #dcc266;\n}";
28
+ var css_248z$f = "";
29
29
  styleInject(css_248z$f);
30
30
 
31
31
  function getDefaultExportFromCjs (x) {
@@ -2856,7 +2856,7 @@ var React$1 = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
2856
2856
 
2857
2857
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
2858
2858
 
2859
- var css_248z$e = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.icon--facebook.theme-uobmain, .icon--twitter.theme-uobmain, .icon--instagram.theme-uobmain, .icon--weibo.theme-uobmain, .icon--wechat.theme-uobmain, .icon--youtube.theme-uobmain, .icon--hamburger.theme-uobmain, .icon--cross.theme-uobmain {\n fill: #fff;\n}\n.icon--facebook.theme-uobmain path, .icon--twitter.theme-uobmain path, .icon--instagram.theme-uobmain path, .icon--weibo.theme-uobmain path, .icon--wechat.theme-uobmain path, .icon--youtube.theme-uobmain path, .icon--hamburger.theme-uobmain path, .icon--cross.theme-uobmain path {\n fill: #fff;\n}\n.icon--facebook.theme-uobmain--inverse, .icon--twitter.theme-uobmain--inverse, .icon--instagram.theme-uobmain--inverse, .icon--weibo.theme-uobmain--inverse, .icon--wechat.theme-uobmain--inverse, .icon--youtube.theme-uobmain--inverse, .icon--hamburger.theme-uobmain--inverse, .icon--cross.theme-uobmain--inverse {\n fill: #000;\n}\n.icon--facebook.theme-uobmain--inverse path, .icon--twitter.theme-uobmain--inverse path, .icon--instagram.theme-uobmain--inverse path, .icon--weibo.theme-uobmain--inverse path, .icon--wechat.theme-uobmain--inverse path, .icon--youtube.theme-uobmain--inverse path, .icon--hamburger.theme-uobmain--inverse path, .icon--cross.theme-uobmain--inverse path {\n fill: #000;\n}\n.icon--facebook.theme-redexample, .icon--twitter.theme-redexample, .icon--instagram.theme-redexample, .icon--weibo.theme-redexample, .icon--wechat.theme-redexample, .icon--youtube.theme-redexample, .icon--hamburger.theme-redexample, .icon--cross.theme-redexample {\n fill: #fff;\n}\n.icon--facebook.theme-redexample path, .icon--twitter.theme-redexample path, .icon--instagram.theme-redexample path, .icon--weibo.theme-redexample path, .icon--wechat.theme-redexample path, .icon--youtube.theme-redexample path, .icon--hamburger.theme-redexample path, .icon--cross.theme-redexample path {\n fill: #fff;\n}\n.icon--facebook.theme-redexample--inverse, .icon--twitter.theme-redexample--inverse, .icon--instagram.theme-redexample--inverse, .icon--weibo.theme-redexample--inverse, .icon--wechat.theme-redexample--inverse, .icon--youtube.theme-redexample--inverse, .icon--hamburger.theme-redexample--inverse, .icon--cross.theme-redexample--inverse {\n fill: #000;\n}\n.icon--facebook.theme-redexample--inverse path, .icon--twitter.theme-redexample--inverse path, .icon--instagram.theme-redexample--inverse path, .icon--weibo.theme-redexample--inverse path, .icon--wechat.theme-redexample--inverse path, .icon--youtube.theme-redexample--inverse path, .icon--hamburger.theme-redexample--inverse path, .icon--cross.theme-redexample--inverse path {\n fill: #fff;\n}\n.icon--chevron-down.theme-uobmain, .icon--arrow-right.theme-uobmain, .icon--arrow-right-large.theme-uobmain, .icon--chevron-right.theme-uobmain, .icon--arrow-left.theme-uobmain {\n stroke: #fff;\n}\n.icon--chevron-down.theme-uobmain path, .icon--arrow-right.theme-uobmain path, .icon--arrow-right-large.theme-uobmain path, .icon--chevron-right.theme-uobmain path, .icon--arrow-left.theme-uobmain path {\n stroke: #fff;\n}\n.icon--chevron-down.theme-uobmain--inverse, .icon--arrow-right.theme-uobmain--inverse, .icon--arrow-right-large.theme-uobmain--inverse, .icon--chevron-right.theme-uobmain--inverse, .icon--arrow-left.theme-uobmain--inverse {\n stroke: #000;\n}\n.icon--chevron-down.theme-uobmain--inverse path, .icon--arrow-right.theme-uobmain--inverse path, .icon--arrow-right-large.theme-uobmain--inverse path, .icon--chevron-right.theme-uobmain--inverse path, .icon--arrow-left.theme-uobmain--inverse path {\n stroke: #000;\n}\n.icon--chevron-down.theme-redexample, .icon--arrow-right.theme-redexample, .icon--arrow-right-large.theme-redexample, .icon--chevron-right.theme-redexample, .icon--arrow-left.theme-redexample {\n stroke: #fff;\n}\n.icon--chevron-down.theme-redexample path, .icon--arrow-right.theme-redexample path, .icon--arrow-right-large.theme-redexample path, .icon--chevron-right.theme-redexample path, .icon--arrow-left.theme-redexample path {\n stroke: #fff;\n}\n.icon--chevron-down.theme-redexample--inverse, .icon--arrow-right.theme-redexample--inverse, .icon--arrow-right-large.theme-redexample--inverse, .icon--chevron-right.theme-redexample--inverse, .icon--arrow-left.theme-redexample--inverse {\n stroke: #000;\n}\n.icon--chevron-down.theme-redexample--inverse path, .icon--arrow-right.theme-redexample--inverse path, .icon--arrow-right-large.theme-redexample--inverse path, .icon--chevron-right.theme-redexample--inverse path, .icon--arrow-left.theme-redexample--inverse path {\n stroke: #000;\n}";
2859
+ var css_248z$e = "";
2860
2860
  styleInject(css_248z$e);
2861
2861
 
2862
2862
  function Icon(_a) {
@@ -2921,7 +2921,7 @@ function Icon(_a) {
2921
2921
  }
2922
2922
  }
2923
2923
 
2924
- var css_248z$d = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.icon-button {\n display: flex;\n width: 2.75rem;\n height: 2.75rem;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n}\n@media screen and (min-width: 768px) {\n .icon-button {\n width: 3rem;\n height: 3rem;\n }\n}\n.icon-button.theme-uobmain {\n border: 2px solid #fff;\n background: #000;\n color: #fff;\n transition: filter 0.3s ease-in;\n}\n.icon-button.theme-uobmain:focus-visible {\n border: 2px solid #dcc266;\n background: #000;\n color: #fff;\n outline: 2px solid #000;\n}\n.icon-button.theme-uobmain:focus-visible path {\n fill: #fff;\n}\n.icon-button.theme-uobmain:hover {\n filter: invert(100%);\n}\n.icon-button.theme-uobmain--inverse {\n border: 2px solid #000;\n background: #fff;\n color: #000;\n}\n.icon-button.theme-uobmain--inverse:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #000;\n}\n.icon-button.theme-redexample {\n border: 2px solid #fff;\n background: #f00;\n color: #fff;\n transition: filter 0.3s ease-in;\n}\n.icon-button.theme-redexample:focus-visible {\n border: 2px solid #dcc266;\n background: #f00;\n color: #fff;\n outline: 2px solid #f00;\n}\n.icon-button.theme-redexample:focus-visible path {\n fill: #fff;\n}\n.icon-button.theme-redexample:hover {\n filter: invert(100%);\n}\n.icon-button.theme-redexample--inverse {\n border: 2px solid #fff;\n background: #00f;\n color: #fff;\n}\n.icon-button.theme-redexample--inverse:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #f00;\n}";
2924
+ var css_248z$d = "";
2925
2925
  styleInject(css_248z$d);
2926
2926
 
2927
2927
  var IconButton = reactExports.forwardRef(function (_a, ref) {
@@ -2934,7 +2934,7 @@ var IconButton = reactExports.forwardRef(function (_a, ref) {
2934
2934
  });
2935
2935
  IconButton.displayName = 'IconButton';
2936
2936
 
2937
- var css_248z$c = ".image {\n display: block;\n width: 100%;\n height: auto;\n -o-object-fit: cover;\n object-fit: cover;\n}";
2937
+ var css_248z$c = "";
2938
2938
  styleInject(css_248z$c);
2939
2939
 
2940
2940
  function Image(_a) {
@@ -2942,7 +2942,7 @@ function Image(_a) {
2942
2942
  return (React$1.createElement("img", { className: "image", src: src.default, srcSet: "".concat(src.small, " 576w, ").concat(src.medium, " 992w, ").concat(src.default, " 1440w"), alt: altText || '', title: title || '', loading: loadingAttr }));
2943
2943
  }
2944
2944
 
2945
- var css_248z$b = "@charset \"UTF-8\";\n@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.link-with-arrow {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-right: 1.5rem;\n border-bottom: 2px solid transparent;\n text-decoration: none;\n transition: all 0.3s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .link-with-arrow {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.link-with-arrow.lock-scroll {\n overflow: hidden;\n}\n.link-with-arrow::before {\n position: absolute;\n top: 50%;\n left: -1.25rem;\n width: 0.875rem;\n content: \"•\";\n opacity: 0;\n transform: translateY(-50%);\n transition: all 0.3s ease-in;\n}\n.link-with-arrow__icon {\n position: absolute;\n width: 1.0625rem;\n height: 1.5rem;\n flex-shrink: 0;\n margin-top: 0.125rem;\n margin-left: 0.375rem;\n transition: all 0.3s ease-in;\n}\n.link-with-arrow__icon path:first-child {\n transition: transform 0.3s ease-in;\n}\n.link-with-arrow__icon path:nth-child(2) {\n transition: transform 0.5s ease-in;\n}\n.link-with-arrow__icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.link-with-arrow__title {\n position: relative;\n text-decoration: underline;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 5px;\n}\n.link-with-arrow:hover {\n transform: translateX(1.25rem);\n}\n.link-with-arrow:hover::before {\n opacity: 1;\n}\n.link-with-arrow:hover .link-with-arrow__icon path:first-child {\n transform: scaleX(2);\n transition: transform 0.5s ease-in;\n}\n.link-with-arrow:hover .link-with-arrow__icon path:nth-child(2) {\n transform: translateX(5px);\n transition: transform 0.3s ease-in;\n}\n.link-with-arrow.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.link-with-arrow.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-with-arrow.theme-uobmain:focus-visible .link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.link-with-arrow.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.link-with-arrow.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.link-with-arrow.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.link-with-arrow.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.link-with-arrow.theme-redexample:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-with-arrow.theme-redexample:focus-visible .link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.link-with-arrow.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.link-with-arrow.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.link-with-arrow.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
2945
+ var css_248z$b = "";
2946
2946
  styleInject(css_248z$b);
2947
2947
 
2948
2948
  function LinkWithArrow(_a) {
@@ -2954,7 +2954,7 @@ function LinkWithArrow(_a) {
2954
2954
  React$1.createElement(Icon, { icon: "arrow-right", theme: theme, inverse: inverse, ariaHidden: true })))));
2955
2955
  }
2956
2956
 
2957
- var css_248z$a = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.link-standard {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 0.3s ease-in;\n}\n.link-standard.theme-uobmain {\n border-bottom: 2px solid transparent;\n color: #fff;\n}\n.link-standard.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.link-standard.theme-uobmain:hover {\n border-bottom: 2px solid #fff;\n}\n.link-standard.theme-uobmain--inverse {\n color: #000;\n}\n.link-standard.theme-uobmain--inverse:hover {\n border-bottom: 2px solid #000;\n}\n.link-standard.theme-redexample {\n border-bottom: 2px solid transparent;\n color: #fff;\n}\n.link-standard.theme-redexample:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #fff;\n}\n.link-standard.theme-redexample:hover {\n border-bottom: 2px solid #fff;\n}\n.link-standard.theme-redexample--inverse {\n color: #fff;\n}\n.link-standard.theme-redexample--inverse:hover {\n border-bottom: 2px solid #000;\n}";
2957
+ var css_248z$a = "";
2958
2958
  styleInject(css_248z$a);
2959
2959
 
2960
2960
  function LinkStandard(_a) {
@@ -2962,7 +2962,7 @@ function LinkStandard(_a) {
2962
2962
  return (React$1.createElement("a", { className: clsx('link-standard', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), href: url, target: externalLink ? '_blank' : '_self', rel: externalLink ? 'noopener noreferrer' : '' }, title));
2963
2963
  }
2964
2964
 
2965
- var css_248z$9 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.footer.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.footer.theme-uobmain summary:focus-visible {\n outline-color: #dcc266;\n outline-offset: 0.625rem;\n}\n.footer.theme-uobmain .footer__bottom-container {\n padding: 0.75rem 0;\n background: #1a1a1a;\n}\n.footer.theme-uobmain .footer__details {\n padding-bottom: 1.75rem;\n border-bottom: 1px solid #58595b;\n margin-bottom: 1.5rem;\n}\n.footer.theme-uobmain .footer__details[open] > summary .icon--chevron-down {\n transform: rotate(180deg);\n}\n.footer.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.footer.theme-redexample summary:focus-visible {\n outline-color: #dcc266;\n outline-offset: 0.625rem;\n}\n.footer.theme-redexample .footer__bottom-container {\n padding: 0.75rem 0;\n background: #00f;\n}\n.footer.theme-redexample .footer__details {\n padding-bottom: 1.75rem;\n border-bottom: 1px solid #fff;\n margin-bottom: 1.5rem;\n}\n.footer.theme-redexample .footer__details[open] > summary .icon--chevron-down {\n transform: rotate(180deg);\n}\n.footer__bottom-wrapper {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n}\n@media screen and (min-width: 768px) {\n .footer__bottom-wrapper {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__bottom-wrapper {\n padding: 0;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__bottom-wrapper {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n }\n}\n.footer__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .footer__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .footer__container {\n padding-top: 3.75rem;\n padding-bottom: 3.75rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__container {\n padding-top: 4.5rem;\n padding-bottom: 4.5rem;\n }\n}\n@media screen and (min-width: 768px) {\n .footer__column-container {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-container {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(3, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-left {\n flex-basis: 22%;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__column-middle {\n flex-basis: 30%;\n }\n}\n.footer__logo-wrapper {\n width: 8.75rem;\n margin-bottom: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .footer__logo-wrapper {\n width: 15rem;\n }\n}\n.footer__address {\n margin-bottom: 1.5rem;\n}\n.footer__telephone {\n margin-bottom: 1.5rem;\n}\n.footer__telephone a {\n text-decoration: none;\n}\n.footer__social-wrapper {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(4, 40px);\n margin: 1.875rem 0;\n}\n.footer__social-wrapper li {\n margin-right: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .footer__social-wrapper li {\n margin-right: 0.5rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__social-wrapper li {\n margin-right: 1.125rem;\n }\n}\n.footer__summary-links {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n@media screen and (min-width: 768px) {\n .footer__summary-links {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .footer__summary-links {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n.footer__summary-links::marker {\n display: none;\n content: \"\";\n}\n.footer__summary-icon {\n width: 2.25rem;\n margin-top: 0.5rem;\n margin-left: 0.625rem;\n}\n.footer__summary-icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n transition: transform 0.3s ease-out;\n}\n.footer__location {\n display: flex;\n align-items: center;\n}\n.footer__location a {\n text-decoration: none;\n}\n.footer__location-icon {\n width: 1.5rem;\n margin-top: 0.5rem;\n}\n.footer__location-icon svg {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.footer__arrow-link {\n margin-bottom: 1.5rem;\n}\n.footer__hygiene-link-wrapper {\n display: flex;\n flex-wrap: wrap;\n margin-bottom: 2.5rem;\n}\n@media screen and (min-width: 1248px) {\n .footer__hygiene-link-wrapper {\n margin-right: 1.875rem;\n margin-bottom: 0;\n }\n}\n.footer__hygiene-link {\n display: inline;\n padding: 0.625rem 0;\n margin-right: 0.625rem;\n font-size: 0.75rem;\n line-height: 1.4166666667;\n}\n.footer__hygiene-link a {\n text-decoration: none;\n}\n.footer__map {\n display: none;\n}\n@media screen and (min-width: 1248px) {\n .footer__map {\n display: block;\n flex-basis: 40%;\n }\n}\n.footer__copyright {\n font-size: 0.75rem;\n line-height: 1.4166666667;\n}\n@media screen and (min-width: 1248px) {\n .footer__copyright {\n flex-basis: 40%;\n padding-bottom: 0.625rem;\n text-align: right;\n }\n}";
2965
+ var css_248z$9 = "";
2966
2966
  styleInject(css_248z$9);
2967
2967
 
2968
2968
  function Footer(_a) {
@@ -15394,7 +15394,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
15394
15394
  : childrenToRender.map((child) => reactExports.cloneElement(child))));
15395
15395
  };
15396
15396
 
15397
- var css_248z$8 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.nav-link {\n position: relative;\n text-decoration: none;\n text-decoration-color: transparent;\n transition: all 0.3s ease-in;\n}\n.nav-link:hover {\n text-decoration: underline;\n text-decoration-color: inherit;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 7px;\n}\n@media screen and (min-width: 768px) {\n .nav-link:hover {\n text-underline-offset: 10px;\n }\n}\n.nav-link__icon {\n position: absolute;\n transition: all 0.3s ease-in;\n}\n.nav-link__icon svg {\n overflow: visible;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.nav-link--level-one {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.75rem;\n line-height: 2.1rem;\n padding-right: 1.875rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-one {\n font-size: 2.25rem;\n line-height: 2.25rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-one {\n font-size: 3rem;\n line-height: 3.6rem;\n }\n}\n.nav-link--level-one .nav-link__icon {\n width: 0.75rem;\n height: 1.125rem;\n margin-left: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-one .nav-link__icon {\n width: 0.875rem;\n height: 1.4375rem;\n margin-left: 0.625rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-one .nav-link__icon {\n width: 0.9375rem;\n height: 1.625rem;\n }\n}\n.nav-link--level-two {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .nav-link--level-two {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two {\n padding-right: 1.5rem;\n }\n}\n.nav-link--level-two .nav-link__icon {\n width: 0.4375rem;\n height: 0.875rem;\n margin-left: 0.375rem;\n}\n@media screen and (min-width: 768px) {\n .nav-link--level-two .nav-link__icon {\n width: 0.625rem;\n height: 1rem;\n margin-left: 0.625rem;\n }\n}\n.nav-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.nav-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n transition: none;\n}\n.nav-link.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.nav-link.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.nav-link.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.nav-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.nav-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #f00;\n transition: none;\n}\n.nav-link.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.nav-link.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.nav-link.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
15397
+ var css_248z$8 = "";
15398
15398
  styleInject(css_248z$8);
15399
15399
 
15400
15400
  var NavLink = function (_a) {
@@ -15406,7 +15406,7 @@ var NavLink = function (_a) {
15406
15406
  React$1.createElement(Icon, { icon: "chevron-right", theme: theme, ariaHidden: true })))));
15407
15407
  };
15408
15408
 
15409
- var css_248z$7 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.page-link {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n text-decoration-color: transparent;\n transition: all 0.3s ease-in;\n}\n.page-link--level-one {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.75rem;\n line-height: 2.1rem;\n}\n@media screen and (min-width: 768px) {\n .page-link--level-one {\n font-size: 2.25rem;\n line-height: 2.25rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .page-link--level-one {\n font-size: 3rem;\n line-height: 3.6rem;\n }\n}\n.page-link--level-two {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.5rem;\n line-height: 1.8rem;\n}\n@media screen and (min-width: 768px) {\n .page-link--level-two {\n font-size: 1.75rem;\n line-height: 2.1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .page-link--level-two {\n font-size: 2.25rem;\n line-height: 2.7rem;\n }\n}\n.page-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.page-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n}\n.page-link.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.page-link.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.page-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.page-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #f00;\n}\n.page-link.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.page-link.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}\n.page-link:hover {\n text-decoration: underline;\n text-decoration-color: inherit;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 7px;\n}\n@media screen and (min-width: 768px) {\n .page-link:hover {\n text-underline-offset: 10px;\n }\n}";
15409
+ var css_248z$7 = "";
15410
15410
  styleInject(css_248z$7);
15411
15411
 
15412
15412
  var PageLink = function (_a) {
@@ -15436,7 +15436,7 @@ var MainMenu = function (_a) {
15436
15436
  }))));
15437
15437
  };
15438
15438
 
15439
- var css_248z$6 = "@charset \"UTF-8\";\n@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.reverse-link-with-arrow {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-left: 1.25rem;\n border-bottom: 2px solid transparent;\n text-decoration: none;\n transition: all 0.3s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .reverse-link-with-arrow {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.reverse-link-with-arrow.lock-scroll {\n overflow: hidden;\n}\n.reverse-link-with-arrow::after {\n position: absolute;\n top: 50%;\n right: -1.25rem;\n width: 0.875rem;\n content: \"•\";\n opacity: 0;\n transform: translateY(-50%);\n transition: all 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon {\n position: absolute;\n left: -1.25rem;\n width: 0.75rem;\n height: 0.625rem;\n flex-shrink: 0;\n transition: all 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon path:first-child {\n transform-origin: right;\n transition: transform 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon path:nth-child(2) {\n transition: transform 0.3s ease-in;\n}\n.reverse-link-with-arrow__icon svg {\n overflow: visible;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n.reverse-link-with-arrow__title {\n position: relative;\n text-decoration: underline;\n text-decoration-thickness: 1.5px;\n text-underline-offset: 5px;\n}\n.reverse-link-with-arrow:hover {\n transform: translateX(-1.25rem);\n}\n.reverse-link-with-arrow:hover::after {\n opacity: 1;\n}\n.reverse-link-with-arrow:hover .reverse-link-with-arrow__icon path:first-child {\n transform: scaleX(1.3);\n}\n.reverse-link-with-arrow:hover .reverse-link-with-arrow__icon path:nth-child(2) {\n transform: translateX(-5px);\n}\n.reverse-link-with-arrow.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible {\n border-bottom: 2px solid #000;\n background: #dcc266;\n color: #000;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible .reverse-link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.reverse-link-with-arrow.theme-uobmain:focus-visible path {\n stroke: #000;\n}\n.reverse-link-with-arrow.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.reverse-link-with-arrow.theme-uobmain--inverse:focus-visible {\n background: #dcc266;\n}\n.reverse-link-with-arrow.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible {\n border-bottom: 2px solid #f00;\n background: #dcc266;\n color: #f00;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible .reverse-link-with-arrow__title {\n text-decoration-color: transparent;\n}\n.reverse-link-with-arrow.theme-redexample:focus-visible path {\n stroke: #f00;\n}\n.reverse-link-with-arrow.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.reverse-link-with-arrow.theme-redexample--inverse:focus-visible {\n background: #dcc266;\n}";
15439
+ var css_248z$6 = "";
15440
15440
  styleInject(css_248z$6);
15441
15441
 
15442
15442
  /**
@@ -15484,7 +15484,7 @@ function useScrollDirection() {
15484
15484
  return scrollDirection;
15485
15485
  }
15486
15486
 
15487
- var css_248z$5 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.text-button {\n padding: 0.6875rem 1.5rem;\n border-radius: 3.75rem;\n text-decoration: none;\n transition: all 0.2s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n.text-button.theme-uobmain {\n border: 2px solid #000;\n background: #000;\n color: #fff;\n}\n.text-button.theme-uobmain:hover {\n background: none;\n color: #000;\n}\n.text-button.theme-uobmain--inverse {\n border: 2px solid #fff;\n background: #fff;\n color: #000;\n}\n.text-button.theme-uobmain--inverse:hover {\n background: none;\n color: #fff;\n}\n.text-button.theme-uobmain:focus-visible {\n border: 2px solid #dcc266;\n background: #000;\n color: #fff;\n outline: 2px solid #000;\n}\n.text-button.theme-redexample {\n border: 2px solid #f00;\n background: #f00;\n color: #fff;\n}\n.text-button.theme-redexample:hover {\n background: none;\n color: #f00;\n}\n.text-button.theme-redexample--inverse {\n border: 2px solid #00f;\n background: #00f;\n color: #fff;\n}\n.text-button.theme-redexample--inverse:hover {\n background: none;\n color: #00f;\n}\n.text-button.theme-redexample:focus-visible {\n border: 2px solid #dcc266;\n background: #f00;\n color: #fff;\n outline: 2px solid #f00;\n}\n.text-button--hollow.theme-uobmain {\n background: none;\n color: #000;\n}\n.text-button--hollow.theme-uobmain:hover {\n background: #000;\n color: #fff;\n}\n.text-button--hollow.theme-uobmain--inverse {\n background: none;\n color: #fff;\n}\n.text-button--hollow.theme-uobmain--inverse:hover {\n background: #fff;\n color: #000;\n}\n.text-button--hollow.theme-redexample {\n background: none;\n color: #f00;\n}\n.text-button--hollow.theme-redexample:hover {\n background: #f00;\n color: #fff;\n}\n.text-button--hollow.theme-redexample--inverse {\n background: none;\n color: #00f;\n}\n.text-button--hollow.theme-redexample--inverse:hover {\n background: #00f;\n color: #fff;\n}\n@media screen and (min-width: 1248px) {\n .text-button {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .text-button {\n padding: 1rem 2.25rem;\n }\n}";
15487
+ var css_248z$5 = "";
15488
15488
  styleInject(css_248z$5);
15489
15489
 
15490
15490
  function TextButton(_a) {
@@ -15492,7 +15492,7 @@ function TextButton(_a) {
15492
15492
  return onClick ? (React$1.createElement("button", { className: clsx('text-button', hollow && 'text-button--hollow', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), onClick: onClick }, label)) : (React$1.createElement("a", { className: clsx('text-button', hollow && 'text-button--hollow', theme && "theme-".concat(theme), inverse && "theme-".concat(theme, "--inverse")), href: url, target: externalLink ? '_blank' : '_self', rel: externalLink ? 'noopener noreferrer' : '' }, label));
15493
15493
  }
15494
15494
 
15495
- var css_248z$4 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.campus-selector-link {\n padding-bottom: 0.0625rem;\n text-decoration: underline;\n text-decoration-color: transparent;\n text-decoration-thickness: 0.125rem;\n text-underline-offset: 0.3125rem;\n transition: all 0.2s ease-in;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n.campus-selector-link.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.campus-selector-link.theme-uobmain:hover {\n background: #58595b;\n}\n.campus-selector-link.theme-uobmain:focus-visible {\n background: #dcc266;\n color: #000;\n}\n.campus-selector-link.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.campus-selector-link.theme-redexample:hover {\n background: #fff;\n}\n.campus-selector-link.theme-redexample:focus-visible {\n background: #dcc266;\n color: #000;\n}\n@media screen and (min-width: 1248px) {\n .campus-selector-link {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.campus-selector-link.lock-scroll {\n overflow: hidden;\n}\n.campus-selector-link--active {\n text-decoration-color: currentcolor;\n}";
15495
+ var css_248z$4 = "";
15496
15496
  styleInject(css_248z$4);
15497
15497
 
15498
15498
  function CampusSelectorLink(_a) {
@@ -15500,7 +15500,7 @@ function CampusSelectorLink(_a) {
15500
15500
  return (React$1.createElement("a", { className: clsx('campus-selector-link', theme && "theme-".concat(theme), active && 'campus-selector-link--active'), href: url, target: externalLink ? '_blank' : '_self', rel: "noreferrer" }, label));
15501
15501
  }
15502
15502
 
15503
- var css_248z$3 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.campus-selector.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.campus-selector.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.campus-selector__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}\n@media screen and (min-width: 768px) {\n .campus-selector__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .campus-selector__container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .campus-selector__container {\n justify-content: flex-end;\n padding-top: 1.0625rem;\n padding-bottom: 1.0625rem;\n gap: 1rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .campus-selector__container {\n gap: 1.5rem;\n }\n}\n.campus-selector--desktop {\n display: none;\n}\n@media screen and (min-width: 768px) {\n .campus-selector--desktop {\n display: block;\n }\n}\n@media screen and (min-width: 768px) {\n .campus-selector--mobile {\n display: none;\n }\n}";
15503
+ var css_248z$3 = "";
15504
15504
  styleInject(css_248z$3);
15505
15505
 
15506
15506
  function CampusSelector(_a) {
@@ -15515,7 +15515,7 @@ function CampusSelector(_a) {
15515
15515
  React$1.createElement(CampusSelectorLink, { label: "Dubai", theme: theme, url: dubaiUrl, active: active === 'dubai' }))))));
15516
15516
  }
15517
15517
 
15518
- var css_248z$2 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.header {\n z-index: 10;\n}\n.header--is-closed {\n position: sticky;\n top: 0;\n transition: top 0.2s ease-out;\n}\n.header.theme-uobmain .header__closed {\n background: #fff;\n color: #000;\n}\n.header.theme-uobmain .header__open {\n background: #000;\n color: #fff;\n}\n.header.theme-uobmain .header__logo-link:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #000;\n}\n.header.theme-uobmain .header__content-wrapper {\n border-color: #fff;\n}\n.header.theme-redexample .header__closed {\n background: #00f;\n color: #fff;\n}\n.header.theme-redexample .header__open {\n background: #f00;\n color: #fff;\n}\n.header.theme-redexample .header__logo-link:focus-visible {\n border: 2px solid #dcc266;\n outline: 2px solid #f00;\n}\n.header.theme-redexample .header__content-wrapper {\n border-color: #fff;\n}\n.header__top-container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n@media screen and (min-width: 768px) {\n .header__top-container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__top-container {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .header__top-container {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__top-container {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n}\n.header__logo-wrapper img {\n height: 2.875rem;\n}\n@media screen and (min-width: 768px) {\n .header__logo-wrapper img {\n height: 4.3125rem;\n }\n}\n.header__logo-link {\n display: block;\n border: 2px solid transparent;\n}\n.header__menu-button {\n display: flex;\n align-items: center;\n gap: 0.8125rem;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: bold;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n@media screen and (min-width: 1248px) {\n .header__menu-button {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n.header__open {\n position: fixed;\n z-index: 10;\n padding-bottom: 1.5rem;\n inset: 0;\n overflow-x: auto;\n}\n@media screen and (min-width: 768px) {\n .header__open {\n padding-bottom: 9.125rem;\n }\n}\n.header__main-menu {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n margin-top: 1rem;\n}\n@media screen and (min-width: 768px) {\n .header__main-menu {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__main-menu {\n padding: 0;\n }\n}\n@media screen and (min-width: 768px) {\n .header__main-menu {\n margin-top: 3rem;\n }\n}\n.header__main-menu-primary-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 1rem;\n}\n.header__main-menu-secondary-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n margin-top: 1.5rem;\n gap: 1rem;\n}\n@media screen and (min-width: 1248px) {\n .header__main-menu-secondary-list {\n margin-top: 2.25rem;\n }\n}\n.header__nested-menu {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n margin-top: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .header__nested-menu {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .header__nested-menu {\n padding: 0;\n }\n}\n.header__heading-link {\n margin-top: 2.25rem;\n}\n@media screen and (min-width: 1248px) {\n .header__heading-link {\n margin-top: 1.5rem;\n }\n}\n.header__content-wrapper {\n margin-top: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .header__content-wrapper {\n padding-top: 2.25rem;\n border-top: 1px solid;\n margin-top: 2.25rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(12, 1fr);\n }\n}\n@media screen and (min-width: 1248px) {\n .header__content-wrapper {\n padding-top: 1.5rem;\n }\n}\n.header__description {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.575rem;\n}\n@media screen and (min-width: 1248px) {\n .header__description {\n font-size: 1.5rem;\n line-height: 1.95rem;\n }\n}\n@media screen and (min-width: 768px) {\n .header__description {\n grid-column: 1/span 6;\n }\n}\n.header__link-list {\n display: flex;\n flex-direction: column;\n align-items: start;\n margin-top: 2.25rem;\n gap: 1rem;\n}\n@media screen and (min-width: 768px) {\n .header__link-list {\n margin-top: 0;\n grid-column: 1/span 6;\n }\n}\n@media screen and (min-width: 768px) {\n .header__link-list--with-desc {\n grid-column: 7/span 6;\n }\n}\n.header__campus-selector--mobile {\n margin-top: 1.5rem;\n}";
15518
+ var css_248z$2 = "";
15519
15519
  styleInject(css_248z$2);
15520
15520
 
15521
15521
  var Header = function (_a) {
@@ -15636,7 +15636,7 @@ function MainWrapper(_a) {
15636
15636
  return React$1.createElement("main", { id: "main" }, children);
15637
15637
  }
15638
15638
 
15639
- var css_248z$1 = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.signpost.theme-uobmain {\n background: #000;\n color: #fff;\n}\n.signpost.theme-uobmain,\n.signpost.theme-uobmain .signpost__item {\n border-color: #fff;\n}\n.signpost.theme-uobmain--inverse {\n background: #fff;\n color: #000;\n}\n.signpost.theme-uobmain--inverse,\n.signpost.theme-uobmain--inverse .signpost__item {\n border-color: #000;\n}\n.signpost.theme-redexample {\n background: #f00;\n color: #fff;\n}\n.signpost.theme-redexample,\n.signpost.theme-redexample .signpost__item {\n border-color: #fff;\n}\n.signpost.theme-redexample--inverse {\n background: #00f;\n color: #fff;\n}\n.signpost.theme-redexample--inverse,\n.signpost.theme-redexample--inverse .signpost__item {\n border-color: #000;\n}\n.signpost__item {\n display: flex;\n flex-direction: column;\n align-items: start;\n padding: 1.5rem 0 1.625rem;\n border-top: 1.5px solid;\n gap: 1.5rem;\n}\n.signpost__item:first-child {\n border-top: 0;\n}\n@media screen and (min-width: 768px) {\n .signpost__item {\n padding: 0;\n border-top: 0;\n margin: 2.25rem 0;\n grid-column: 1/span 6;\n }\n .signpost__item:first-child {\n padding-right: 3rem;\n }\n .signpost__item:nth-child(2n) {\n padding-left: 3rem;\n border-left: 1.5px solid;\n grid-column: 7/span 6;\n }\n}\n.signpost + .signpost .signpost__item {\n border-top: 1.5px solid;\n}\n@media screen and (min-width: 768px) {\n .signpost + .signpost .signpost__item {\n border-top: 0;\n }\n .signpost + .signpost .signpost__grid {\n border-top: 1.5px solid;\n }\n}\n.signpost__container {\n max-width: 1152px;\n padding: 0 1.5rem;\n margin: 0 auto;\n}\n@media screen and (min-width: 768px) {\n .signpost__container {\n padding: 0 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .signpost__container {\n padding: 0;\n }\n}\n.signpost__grid {\n display: flex;\n flex-direction: column;\n}\n@media screen and (min-width: 768px) {\n .signpost__grid {\n display: grid;\n gap: 1.5rem;\n grid-template-columns: repeat(12, 1fr);\n gap: 0;\n }\n}\n.signpost__tag {\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.225rem;\n}\n@media screen and (min-width: 1248px) {\n .signpost__tag {\n font-size: 1rem;\n line-height: 1.4rem;\n }\n}\n.signpost__title {\n font-family: \"CanelaDeck\", \"Times New Roman\", \"Times\", serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1.25rem;\n line-height: 1.5rem;\n}\n@media screen and (min-width: 768px) {\n .signpost__title {\n font-size: 1.375rem;\n line-height: 1.65rem;\n }\n}\n@media screen and (min-width: 768px) {\n .signpost__title {\n font-size: 1.875rem;\n line-height: 2.4375rem;\n }\n}";
15639
+ var css_248z$1 = "";
15640
15640
  styleInject(css_248z$1);
15641
15641
 
15642
15642
  /**
@@ -15652,7 +15652,7 @@ function SignPost(_a) {
15652
15652
  React$1.createElement(LinkWithArrow, { url: item.linkUrl, title: item.linkLabel, theme: theme, inverse: inverse, externalLink: item.external }))); })))));
15653
15653
  }
15654
15654
 
15655
- var css_248z = "@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap';\n/*************************\n** Breakpoints **\n*************************/\n/*************************\n** Typography **\n*************************/\n/*************************\n** Grid **\n*************************/\n/*************************\n** Accessibility **\n*************************/\n/*************************\n** Theme **\n*************************/\n/*************************\n** Layout **\n*************************/\n.skip-to-content {\n position: relative;\n width: 100%;\n}\n.skip-to-content.theme-uobmain {\n background: #dcc266;\n}\n.skip-to-content.theme-redexample {\n background: #dcc266;\n}\n.skip-to-content__link {\n position: absolute;\n top: 0;\n left: -1000px;\n display: block;\n padding: 0.625rem 1.5rem;\n font-family: \"Manrope\", \"Arial\", sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.4rem;\n}\n@media screen and (min-width: 1248px) {\n .skip-to-content__link {\n font-size: 1.125rem;\n line-height: 1.575rem;\n }\n}\n.skip-to-content__link.lock-scroll {\n overflow: hidden;\n}\n@media screen and (min-width: 768px) {\n .skip-to-content__link {\n padding: 0.625rem 3rem;\n }\n}\n@media screen and (min-width: 1248px) {\n .skip-to-content__link {\n padding: 0.625rem 1rem;\n }\n}\n.skip-to-content__link:focus {\n position: static;\n}";
15655
+ var css_248z = "";
15656
15656
  styleInject(css_248z);
15657
15657
 
15658
15658
  function SkipToContent(_a) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uob-web-and-digital/component-library",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "A component library using React and Storybook.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,7 +14,7 @@
14
14
  "source": "src/index.ts",
15
15
  "main": "dist/main.js",
16
16
  "module": "dist/module.js",
17
- "types": "dist/types.d.ts",
17
+ "types": "dist/index.d.ts",
18
18
  "files": [
19
19
  "dist"
20
20
  ],
@@ -52,8 +52,10 @@
52
52
  "postcss-loader": "^7.3.3",
53
53
  "resolve-url-loader": "^5.0.0",
54
54
  "rollup": "^4.1.4",
55
+ "rollup-plugin-dts": "^6.1.0",
55
56
  "rollup-plugin-peer-deps-external": "^2.2.4",
56
57
  "rollup-plugin-postcss": "^4.0.2",
58
+ "rollup-plugin-scss": "^4.0.0",
57
59
  "rollup-plugin-typescript2": "^0.36.0",
58
60
  "sass": "^1.68.0",
59
61
  "sass-loader": "^13.3.2",