@x4b/banner 28.4.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './library/index'

package/dist/library/components/AppSelector.d.ts

@@ -0,0 +1,6 @@
+import { ApplicationDescriptions } from '../utils/applications';
+declare function AppSelector({ applicationDescriptions, refreshToken, }: {
+    applicationDescriptions: ApplicationDescriptions;
+    refreshToken?: string;
+}): JSX.Element;
+export default AppSelector;

package/dist/library/components/AppTitle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare function AppTitle({ children, className, ...props }: {
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLHeadingElement>): JSX.Element;
+export default AppTitle;

package/dist/library/components/Banner.d.ts

@@ -0,0 +1,3 @@
+import { BannerContentProps } from '../components/BannerContent';
+declare function Banner(props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & BannerContentProps): JSX.Element;
+export default Banner;

package/dist/library/components/BannerContent.d.ts

@@ -0,0 +1,20 @@
+import { Locale } from '../locales/localeConfiguration';
+import { ApplicationDescriptions } from '../utils/applications';
+export declare type BannerContentProps = {
+    language?: Locale;
+    languages?: Array<Locale>;
+    onLanguageChange?: (value: Locale) => void;
+    application: string;
+    notificationCount?: number;
+    onNotificationClick?: () => void;
+    onToggleMenuClick?: (isMenuOpen: boolean) => void;
+    applications?: ApplicationDescriptions;
+    username?: string;
+    version: string;
+    logout?: () => void;
+    refreshToken?: string;
+    loginUrl?: string;
+    withMaxWith?: boolean;
+};
+declare function BannerContent({ application, applications, notificationCount, onNotificationClick, onToggleMenuClick, language, languages, onLanguageChange, username, version, logout, refreshToken, loginUrl, withMaxWith, className, ...props }: BannerContentProps & React.HTMLAttributes<HTMLElement>): JSX.Element;
+export default BannerContent;

package/dist/library/components/HelpMenu.d.ts

@@ -0,0 +1,6 @@
+import { SystemInfo } from '../utils/mail';
+declare function HelpMenu({ systemInfo, documentationUrl }: {
+    systemInfo: SystemInfo;
+    documentationUrl?: string;
+}): JSX.Element;
+export default HelpMenu;

package/dist/library/components/LanguageSelector.d.ts

@@ -0,0 +1,8 @@
+import { Locale } from '../locales/localeConfiguration';
+declare type LanguageSelectorProps = {
+    language: Locale;
+    languages: Locale[];
+    onLanguageSelected?: (language: Locale) => void;
+};
+declare function LanguageSelector({ language, languages, onLanguageSelected }: LanguageSelectorProps): JSX.Element;
+export default LanguageSelector;

package/dist/library/components/MenuContent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare function MenuContent({ children, withMinWidth, className, ...props }: React.HTMLAttributes<HTMLElement> & {
+    children: React.ReactNode;
+    withMinWidth?: boolean;
+}): JSX.Element;
+export default MenuContent;

package/dist/library/components/NotificationButton.d.ts

@@ -0,0 +1,5 @@
+declare function NotificationButton({ count, onClick }: {
+    count?: number;
+    onClick?: () => void;
+}): JSX.Element;
+export default NotificationButton;

package/dist/library/components/UserProfileMenu.d.ts

@@ -0,0 +1,7 @@
+declare type UserProfileMenuProps = {
+    username: string;
+    version: string;
+    onLogout: () => void;
+};
+declare function UserProfileMenu({ username, version, onLogout }: UserProfileMenuProps): JSX.Element;
+export default UserProfileMenu;

package/dist/library/constants.d.ts

@@ -0,0 +1 @@
+export declare const defaultAppIcon = "<svg width=\"34\" height=\"35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.63 16.635.574 6.579c-.725-.725-.725-1.952 0-2.718L2.946 1.49c.725-.725 1.952-.725 2.717 0L15.72 11.546c.725.725.725 1.951 0 2.717l-2.371 2.372a1.894 1.894 0 0 1-2.718 0ZM.574 29.333 10.63 19.277c.725-.725 1.952-.725 2.718 0l2.371 2.372c.725.725.725 1.952 0 2.717L5.663 34.422c-.725.726-1.951.726-2.717 0L.574 32.051c-.765-.766-.765-1.993 0-2.718ZM23.37 19.237l10.056 10.056c.725.725.725 1.951 0 2.717l-2.372 2.372c-.725.725-1.952.725-2.717 0L18.28 24.326c-.725-.725-.725-1.952 0-2.718l2.371-2.371a1.97 1.97 0 0 1 2.718 0Z\" fill=\"#44506A\"/><path d=\"M33.426 6.579 23.37 16.635c-.726.725-1.952.725-2.718 0l-2.371-2.372c-.725-.725-.725-1.952 0-2.717L28.337 1.49c.725-.725 1.951-.725 2.717 0l2.372 2.371c.765.766.765 1.993 0 2.718Z\" fill=\"url(#a)\"/><defs><linearGradient id=\"a\" x1=\"17.736\" y1=\"9.065\" x2=\"33.999\" y2=\"9.065\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#2E5BFF\"/><stop offset=\"1\" stop-color=\"#7994F6\"/></linearGradient></defs></svg>";

package/dist/library/index.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        accessToken?: string;
+    }
+}
+export { default as Banner } from './components/Banner';
+export { defaultAppIcon } from './constants';
+export type { Locale } from './locales/localeConfiguration';
+export * from './providers/AuthProvider';
+export type { ApplicationDescription, ApplicationDescriptions } from './utils/applications';
+export type { RefreshAccessTokenResult } from './utils/auth';
+export { getDefaultLanguage } from './utils/language';
+export { isMenuOpen } from './utils/toggleMenu';
+export { getToken } from './utils/token';

package/dist/library/locales/localeConfiguration.d.ts

@@ -0,0 +1,36 @@
+export declare type Locale = 'en' | 'fr';
+export declare const getLocalizedResources: (defaultLanguage: Locale) => {
+    mainMenu: string;
+    settings: string;
+    help: string;
+    contactDevelopers: string;
+    contactus: string;
+    contactUsMailBody: string;
+    contactSales: string;
+    contactSalesMailBody: string;
+    documentation: string;
+    notifications: string;
+    appSelector: string;
+    userAccountTooltip: string;
+    logout: string;
+    version: string;
+    login: string;
+    getStartedFree: string;
+} | {
+    mainMenu: string;
+    settings: string;
+    help: string;
+    contactDevelopers: string;
+    contactus: string;
+    contactUsMailBody: string;
+    contactSales: string;
+    contactSalesMailBody: string;
+    documentation: string;
+    notifications: string;
+    appSelector: string;
+    userAccountTooltip: string;
+    logout: string;
+    version: string;
+    login: string;
+    getStartedFree: string;
+};

package/dist/library/providers/AuthProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BannerContentProps } from '../components/BannerContent';
+import { ApplicationDescriptions } from '../utils/applications';
+import { RefreshAccessTokenResult } from '../utils/auth';
+declare type AuthContextType = {
+    appsServiceUrl: string;
+    authResult?: {
+        token: RefreshAccessTokenResult;
+        logout: () => void;
+    };
+    applications?: ApplicationDescriptions;
+    getBannerProps: (props: Partial<BannerContentProps>) => BannerContentProps;
+};
+declare function AuthProvider({ appsServiceUrl, children }: {
+    appsServiceUrl: string;
+    children: React.ReactNode;
+}): JSX.Element;
+declare function useAuth(): AuthContextType;
+export { AuthProvider, useAuth };

package/dist/library/utils/applications.d.ts

@@ -0,0 +1,12 @@
+export declare type ApplicationDescriptions = {
+    [id: string]: ApplicationDescription;
+};
+export declare type ApplicationDescription = {
+    name: string;
+    url: string;
+    logo: string;
+    documentationUrl?: string;
+    hidden?: boolean;
+    shortname?: string;
+};
+export declare function getApplicationDescriptions(appsServiceUrl: string): Promise<ApplicationDescriptions>;

package/dist/library/utils/auth.d.ts

@@ -0,0 +1,9 @@
+export declare type TokenChangeCallback = (token: RefreshAccessTokenResult) => void;
+export declare type RefreshAccessTokenResult = {
+    refreshToken: string;
+    accessToken?: string;
+};
+export declare function login(appsServiceUrl: string, onTokenChange?: TokenChangeCallback): Promise<{
+    token: RefreshAccessTokenResult;
+    logout: () => void;
+} | undefined>;

package/dist/library/utils/language.d.ts

@@ -0,0 +1,4 @@
+import { Locale } from '../locales/localeConfiguration';
+export declare const LANGUAGE_KEY = "x4b.language";
+export declare const setCurrentLanguageInLocalStorage: (newLanguage: string) => void;
+export declare function getDefaultLanguage(): Locale;

package/dist/library/utils/mail.d.ts

@@ -0,0 +1,7 @@
+export declare type SystemInfo = {
+    applicationName: string;
+    version: string;
+    url: string;
+    username?: string;
+};
+export declare function buildMailtoHref(to: string, subject: string, body: string, systemInfo: SystemInfo): string;

package/dist/library/utils/toggleMenu.d.ts

@@ -0,0 +1,3 @@
+export declare const FULLSIZE_MENU_KEY = "x4b.menu.fullsize";
+export declare function isMenuOpen(): boolean;
+export declare function setMenuStateInLocalStorage(isOpen: boolean): void;

package/dist/library/utils/token.d.ts

@@ -0,0 +1,11 @@
+import { RefreshAccessTokenResult } from './auth';
+export declare type JwtTokenContent = {
+    user: string;
+    exp?: number;
+};
+export declare const getUsernameFromToken: (token?: string) => string | undefined;
+export declare const getTokenFromCurrentLocation: () => RefreshAccessTokenResult;
+export declare const getToken: () => string | undefined;
+export declare const isTokenStillValid: (token: string) => boolean;
+export declare const getTokenRefreshTimeout: (token: string) => number;
+export declare function createToken(payload: JwtTokenContent): string;

package/dist/mockServiceWorker.js

@@ -0,0 +1,302 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (0.45.0).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = 'b3066ef78c2f9090b4ce87e874965995';
+const activeClientIds = new Set();
+
+self.addEventListener('install', function () {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', function (event) {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('message', async function (event) {
+    const clientId = event.source.id;
+
+    if (!clientId || !self.clients) {
+        return;
+    }
+
+    const client = await self.clients.get(clientId);
+
+    if (!client) {
+        return;
+    }
+
+    const allClients = await self.clients.matchAll({
+        type: 'window',
+    });
+
+    switch (event.data) {
+        case 'KEEPALIVE_REQUEST': {
+            sendToClient(client, {
+                type: 'KEEPALIVE_RESPONSE',
+            });
+            break;
+        }
+
+        case 'INTEGRITY_CHECK_REQUEST': {
+            sendToClient(client, {
+                type: 'INTEGRITY_CHECK_RESPONSE',
+                payload: INTEGRITY_CHECKSUM,
+            });
+            break;
+        }
+
+        case 'MOCK_ACTIVATE': {
+            activeClientIds.add(clientId);
+
+            sendToClient(client, {
+                type: 'MOCKING_ENABLED',
+                payload: true,
+            });
+            break;
+        }
+
+        case 'MOCK_DEACTIVATE': {
+            activeClientIds.delete(clientId);
+            break;
+        }
+
+        case 'CLIENT_CLOSED': {
+            activeClientIds.delete(clientId);
+
+            const remainingClients = allClients.filter(client => {
+                return client.id !== clientId;
+            });
+
+            // Unregister itself when there are no more clients
+            if (remainingClients.length === 0) {
+                self.registration.unregister();
+            }
+
+            break;
+        }
+    }
+});
+
+self.addEventListener('fetch', function (event) {
+    const { request } = event;
+    const accept = request.headers.get('accept') || '';
+
+    // Bypass server-sent events.
+    if (accept.includes('text/event-stream')) {
+        return;
+    }
+
+    // Bypass navigation requests.
+    if (request.mode === 'navigate') {
+        return;
+    }
+
+    // Opening the DevTools triggers the "only-if-cached" request
+    // that cannot be handled by the worker. Bypass such requests.
+    if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+        return;
+    }
+
+    // Bypass all requests when there are no active clients.
+    // Prevents the self-unregistered worked from handling requests
+    // after it's been deleted (still remains active until the next reload).
+    if (activeClientIds.size === 0) {
+        return;
+    }
+
+    // Generate unique request ID.
+    const requestId = Math.random().toString(16).slice(2);
+
+    event.respondWith(
+        handleRequest(event, requestId).catch(error => {
+            if (error.name === 'NetworkError') {
+                console.warn(
+                    '[MSW] Successfully emulated a network error for the "%s %s" request.',
+                    request.method,
+                    request.url
+                );
+                return;
+            }
+
+            // At this point, any exception indicates an issue with the original request/response.
+            console.error(
+                `\
+[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
+                request.method,
+                request.url,
+                `${error.name}: ${error.message}`
+            );
+        })
+    );
+});
+
+async function handleRequest(event, requestId) {
+    const client = await resolveMainClient(event);
+    const response = await getResponse(event, client, requestId);
+
+    // Send back the response clone for the "response:*" life-cycle events.
+    // Ensure MSW is active and ready to handle the message, otherwise
+    // this message will pend indefinitely.
+    if (client && activeClientIds.has(client.id)) {
+        (async function () {
+            const clonedResponse = response.clone();
+            sendToClient(client, {
+                type: 'RESPONSE',
+                payload: {
+                    requestId,
+                    type: clonedResponse.type,
+                    ok: clonedResponse.ok,
+                    status: clonedResponse.status,
+                    statusText: clonedResponse.statusText,
+                    body: clonedResponse.body === null ? null : await clonedResponse.text(),
+                    headers: Object.fromEntries(clonedResponse.headers.entries()),
+                    redirected: clonedResponse.redirected,
+                },
+            });
+        })();
+    }
+
+    return response;
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+    const client = await self.clients.get(event.clientId);
+
+    if (client.frameType === 'top-level') {
+        return client;
+    }
+
+    const allClients = await self.clients.matchAll({
+        type: 'window',
+    });
+
+    return allClients
+        .filter(client => {
+            // Get only those clients that are currently visible.
+            return client.visibilityState === 'visible';
+        })
+        .find(client => {
+            // Find the client ID that's recorded in the
+            // set of clients that have registered the worker.
+            return activeClientIds.has(client.id);
+        });
+}
+
+async function getResponse(event, client, requestId) {
+    const { request } = event;
+    const clonedRequest = request.clone();
+
+    function passthrough() {
+        // Clone the request because it might've been already used
+        // (i.e. its body has been read and sent to the cilent).
+        const headers = Object.fromEntries(clonedRequest.headers.entries());
+
+        // Remove MSW-specific request headers so the bypassed requests
+        // comply with the server's CORS preflight check.
+        // Operate with the headers as an object because request "Headers"
+        // are immutable.
+        delete headers['x-msw-bypass'];
+
+        return fetch(clonedRequest, { headers });
+    }
+
+    // Bypass mocking when the client is not active.
+    if (!client) {
+        return passthrough();
+    }
+
+    // Bypass initial page load requests (i.e. static assets).
+    // The absence of the immediate/parent client in the map of the active clients
+    // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+    // and is not ready to handle requests.
+    if (!activeClientIds.has(client.id)) {
+        return passthrough();
+    }
+
+    // Bypass requests with the explicit bypass header.
+    // Such requests can be issued by "ctx.fetch()".
+    if (request.headers.get('x-msw-bypass') === 'true') {
+        return passthrough();
+    }
+
+    // Notify the client that a request has been intercepted.
+    const clientMessage = await sendToClient(client, {
+        type: 'REQUEST',
+        payload: {
+            id: requestId,
+            url: request.url,
+            method: request.method,
+            headers: Object.fromEntries(request.headers.entries()),
+            cache: request.cache,
+            mode: request.mode,
+            credentials: request.credentials,
+            destination: request.destination,
+            integrity: request.integrity,
+            redirect: request.redirect,
+            referrer: request.referrer,
+            referrerPolicy: request.referrerPolicy,
+            body: await request.text(),
+            bodyUsed: request.bodyUsed,
+            keepalive: request.keepalive,
+        },
+    });
+
+    switch (clientMessage.type) {
+        case 'MOCK_RESPONSE': {
+            return respondWithMock(clientMessage.data);
+        }
+
+        case 'MOCK_NOT_FOUND': {
+            return passthrough();
+        }
+
+        case 'NETWORK_ERROR': {
+            const { name, message } = clientMessage.data;
+            const networkError = new Error(message);
+            networkError.name = name;
+
+            // Rejecting a "respondWith" promise emulates a network error.
+            throw networkError;
+        }
+    }
+
+    return passthrough();
+}
+
+function sendToClient(client, message) {
+    return new Promise((resolve, reject) => {
+        const channel = new MessageChannel();
+
+        channel.port1.onmessage = event => {
+            if (event.data && event.data.error) {
+                return reject(event.data.error);
+            }
+
+            resolve(event.data);
+        };
+
+        client.postMessage(message, [channel.port2]);
+    });
+}
+
+function sleep(timeMs) {
+    return new Promise(resolve => {
+        setTimeout(resolve, timeMs);
+    });
+}
+
+async function respondWithMock(response) {
+    await sleep(response.delay);
+    return new Response(response.body, response);
+}

package/dist/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import * as CSS from 'csstype';
+
+declare module 'csstype' {
+    interface Properties {
+        [index: string]: string | number;
+    }
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@x4b/banner",
+  "version": "28.4.0",
+  "description": "React Banner Component for X4B",
+  "private": false,
+  "author": "XComponent <dev@xcomponent.com> (http://www.xcomponent.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/xcomponent/x4b-services.git",
+    "directory": "modules/banner"
+  },
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "@x4b/design-system": ">=0.1",
+    "react": "^16.8.0 || 17.x",
+    "react-dom": "^16.8.0 || 17.x"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "styles.css"
+  ],
+  "main": "./dist/banner.umd.js",
+  "module": "./dist/banner.es.js",
+  "types": "./dist/index.d.ts",
+  "eslintIgnore": [
+    "node_modules",
+    "dist",
+    "mockServiceWorker.js"
+  ],
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "scripts": {
+    "dev": "run-p \"dev:*\"",
+    "dev:css": "pnpm run generate:css --watch",
+    "dev:vite": "vite",
+    "build": "run-s \"build:css\" \"build:lib\"",
+    "build:lib": "tsc && vite build",
+    "build:css": "pnpm run generate:css --minify",
+    "generate:css": "pnpm exec tailwindcss -i ./styles/tailwind.css -o ./styles.css",
+    "test": "vitest --passWithNoTests run",
+    "test:watch": "vitest --passWithNoTests watch",
+    "test:ci": "pnpm run test --reporter=default --reporter=junit --outputFile=./test-results.xml",
+    "lint": "eslint '**/*.{js,jsx,ts,tsx}' --cache --max-warnings 0",
+    "typecheck": "./node_modules/.bin/tsc --noEmit",
+    "clean": "rimraf .turbo && rimraf node_modules && rimraf dist && rimraf styles.css"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-aspect-w-7{position:relative;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);--tw-aspect-w:7}.tw-aspect-w-7>*{position:absolute;height:100%;width:100%;top:0;right:0;bottom:0;left:0}.tw-aspect-h-4{--tw-aspect-h:4}.tw-sr-only{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.tw-absolute,.tw-sr-only{position:absolute}.tw-relative{position:relative}.tw-top-0{top:0}.tw-right-0{right:0}.tw-bottom-0{bottom:0}.tw-left-0{left:0}.tw-top-\[0\.3em\]{top:.3em}.tw-left-\[22px\]{left:22px}.tw-isolate{isolation:isolate}.tw-z-\[1\]{z-index:1}.tw-m-auto{margin:auto}.tw-m-0{margin:0}.tw-my-0{margin-top:0;margin-bottom:0}.tw-mx-2{margin-left:.5rem;margin-right:.5rem}.tw-mx-auto{margin-left:auto}.tw-mr-auto,.tw-mx-auto{margin-right:auto}.tw-ml-2{margin-left:.5rem}.tw-mr-0{margin-right:0}.tw-ml-3{margin-left:.75rem}.tw-ml-1{margin-left:.25rem}.tw-mt-2{margin-top:.5rem}.tw-box-border{box-sizing:border-box}.tw-block{display:block}.tw-inline-block{display:inline-block}.\!tw-inline-block{display:inline-block!important}.tw-flex{display:flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-h-\[0\.8em\]{height:.8em}.tw-h-\[1em\]{height:1em}.tw-h-full{height:100%}.tw-h-\[1\.5rem\]{height:1.5rem}.tw-w-96{width:24rem}.tw-w-full{width:100%}.tw-w-\[1em\]{width:1em}.tw-w-\[1\.5rem\]{width:1.5rem}.tw-w-\[310px\]{width:310px}.tw-min-w-\[36px\]{min-width:36px}.tw-min-w-fit{min-width:-moz-fit-content;min-width:fit-content}.tw-min-w-\[13\.125rem\]{min-width:13.125rem}.tw-min-w-\[1em\]{min-width:1em}.tw-max-w-\[250px\]{max-width:250px}.tw-max-w-7xl{max-width:80rem}.tw-translate-y-px{--tw-translate-y:1px}.tw-scale-\[1\.08\],.tw-translate-y-px{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-scale-\[1\.08\]{--tw-scale-x:1.08;--tw-scale-y:1.08}@keyframes tw-spin{to{transform:rotate(1turn)}}.tw-animate-spin{animation:tw-spin 1s linear infinite}.tw-cursor-default{cursor:default}.tw-cursor-pointer{cursor:pointer}.tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tw-flex-row{flex-direction:row}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-items-center{align-items:center}.tw-justify-start{justify-content:flex-start}.tw-justify-center{justify-content:center}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-0{gap:0}.tw-gap-4{gap:1rem}.tw-self-end{align-self:flex-end}.tw-overflow-hidden{overflow:hidden}.tw-overflow-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-full{border-radius:9999px}.tw-rounded-\[1em\]{border-radius:1em}.tw-border{border-width:1px}.tw-border-2{border-width:2px}.tw-border-solid{border-style:solid}.tw-border-primary-600{border-color:var(--x4b-primary-600,#2e5bff)}.tw-border-accent-800{border-color:var(--x4b-secondary-800,#0b69a3)}.tw-border-gray-100{border-color:var(--x4b-gray-100,#e1e5ea)}.tw-border-red-700{border-color:var(--x4b-red-700,#d01124)}.tw-border-green-700{border-color:var(--x4b-green-700,#0f8513)}.tw-border-gray-700{border-color:var(--x4b-gray-700,#44506a)}.tw-border-red-800{border-color:var(--x4b-red-800,#aa091e)}.tw-border-green-800{border-color:var(--x4b-green-800,#0e7717)}.tw-border-transparent{border-color:#0000}.tw-border-current{border-color:currentColor}.tw-border-l-transparent{border-left-color:#0000}.tw-bg-primary-600{background-color:var(--x4b-primary-600,#2e5bff)}.tw-bg-accent-800{background-color:var(--x4b-secondary-800,#0b69a3)}.tw-bg-gray-100{background-color:var(--x4b-gray-100,#e1e5ea)}.tw-bg-red-700{background-color:var(--x4b-red-700,#d01124)}.tw-bg-green-700{background-color:var(--x4b-green-700,#0f8513)}.tw-bg-transparent{background-color:initial}.tw-bg-\[hsl\(0deg\,0\%\,95\%\)\]{--tw-bg-opacity:1;background-color:hsl(0deg 0% 95%/var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.tw-bg-red-600{background-color:var(--x4b-red-600,#e12d39)}.tw-bg-gray-50{background-color:var(--x4b-gray-50,#f3f5f7)}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.tw-object-center{-o-object-position:center;object-position:center}.tw-px-3{padding-left:.75rem;padding-right:.75rem}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.\!tw-px-0{padding-left:0!important;padding-right:0!important}.\!tw-py-0{padding-top:0!important;padding-bottom:0!important}.tw-py-4{padding-top:1rem;padding-bottom:1rem}.tw-py-\[0\.1em\]{padding-top:.1em;padding-bottom:.1em}.tw-px-\[0\.3em\]{padding-left:.3em;padding-right:.3em}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-0{padding-left:0;padding-right:0}.tw-text-center{text-align:center}.tw-font-sans{font-family:Open Sans,sans-serif}.tw-text-sm{font-size:.875rem}.tw-text-base{font-size:1rem}.tw-text-lg{font-size:1.125rem}.tw-text-\[0\.8em\]{font-size:.8em}.tw-font-semibold{font-weight:600}.tw-font-medium{font-weight:500}.tw-font-light{font-weight:300}.tw-font-normal{font-weight:400}.tw-leading-normal{line-height:1.5}.tw-leading-none{line-height:1}.tw-leading-\[1em\]{line-height:1em}.tw-leading-tight{line-height:1.25}.tw-tracking-wide{letter-spacing:.025em}.tw-tracking-normal{letter-spacing:0}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.tw-text-gray-700{color:var(--x4b-gray-700,#44506a)}.tw-text-primary-600{color:var(--x4b-primary-600,#2e5bff)}.tw-text-accent-800{color:var(--x4b-secondary-800,#0b69a3)}.tw-text-red-800{color:var(--x4b-red-800,#aa091e)}.tw-text-green-800{color:var(--x4b-green-800,#0e7717)}.tw-text-primary-700{color:var(--x4b-primary-700,#153fd5)}.tw-text-black{color:var(--x4b-gray-900,#2e384d)}.tw-no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.tw-antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tw-opacity-0{opacity:0}.tw-opacity-40{opacity:.4}.tw-opacity-100{opacity:1}.tw-shadow-\[0_0_10px_0_rgba\(72\,40\,83\,0\.1\)\]{--tw-shadow:0 0 10px 0 #4828531a;--tw-shadow-colored:0 0 10px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-\[0_1px_2px_0_rgb\(60\,64\,67\,0\.3\)\,0_2px_6px_2px_rgb\(60\,64\,67\,0\.15\)\]{--tw-shadow:0 1px 2px 0 #3c40434d,0 2px 6px 2px #3c404326;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color),0 2px 6px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid #0000;outline-offset:2px}.tw-backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-colors{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-duration-500{transition-duration:.5s}.tw-will-change-transform{will-change:transform}.svg-block svg{display:block}:root{--reach-menu-button:1}.hover\:tw-cursor-pointer:hover{cursor:pointer}.hover\:tw-border-primary-700:hover{border-color:var(--x4b-primary-700,#153fd5)}.hover\:tw-border-accent-900:hover{border-color:var(--x4b-secondary-900,#035388)}.hover\:tw-border-gray-200:hover{border-color:var(--x4b-gray-200,#c3cad5)}.hover\:tw-border-red-800:hover{border-color:var(--x4b-red-800,#aa091e)}.hover\:tw-border-green-800:hover{border-color:var(--x4b-green-800,#0e7717)}.hover\:tw-border-accent-800:hover{border-color:var(--x4b-secondary-800,#0b69a3)}.hover\:tw-border-gray-700:hover{border-color:var(--x4b-gray-700,#44506a)}.hover\:tw-border-primary-100:hover{border-color:var(--x4b-primary-100,#e0e7ff)}.hover\:tw-border-accent-50:hover{border-color:var(--x4b-secondary-50,#e3f8ff)}.hover\:tw-border-gray-100:hover{border-color:var(--x4b-gray-100,#e1e5ea)}.hover\:tw-border-red-100:hover{border-color:var(--x4b-red-100,#ffe6e6)}.hover\:tw-border-green-100:hover{border-color:var(--x4b-green-100,#e2f9e3)}.hover\:tw-bg-primary-700:hover{background-color:var(--x4b-primary-700,#153fd5)}.hover\:tw-bg-accent-900:hover{background-color:var(--x4b-secondary-900,#035388)}.hover\:tw-bg-gray-200:hover{background-color:var(--x4b-gray-200,#c3cad5)}.hover\:tw-bg-red-800:hover{background-color:var(--x4b-red-800,#aa091e)}.hover\:tw-bg-green-800:hover{background-color:var(--x4b-green-800,#0e7717)}.hover\:tw-bg-primary-50:hover{background-color:var(--x4b-primary-50,#f3f5fc)}.hover\:tw-bg-accent-50:hover{background-color:var(--x4b-secondary-50,#e3f8ff)}.hover\:tw-bg-gray-100:hover{background-color:var(--x4b-gray-100,#e1e5ea)}.hover\:tw-bg-red-100:hover{background-color:var(--x4b-red-100,#ffe6e6)}.hover\:tw-bg-green-100:hover{background-color:var(--x4b-green-100,#e2f9e3)}.hover\:tw-bg-primary-100:hover{background-color:var(--x4b-primary-100,#e0e7ff)}.hover\:tw-bg-gray-50:hover{background-color:var(--x4b-gray-50,#f3f5f7)}.hover\:tw-text-gray-900:hover{color:var(--x4b-gray-900,#2e384d)}.hover\:tw-text-primary-700:hover{color:var(--x4b-primary-700,#153fd5)}.hover\:tw-text-accent-800:hover{color:var(--x4b-secondary-800,#0b69a3)}.hover\:tw-text-gray-700:hover{color:var(--x4b-gray-700,#44506a)}.hover\:tw-text-red-800:hover{color:var(--x4b-red-800,#aa091e)}.hover\:tw-text-green-800:hover{color:var(--x4b-green-800,#0e7717)}.hover\:tw-text-red-900:hover{color:var(--x4b-red-900,#8b041b)}.hover\:tw-underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:tw-opacity-80:hover{opacity:.8}.hover\:tw-duration-150:hover{transition-duration:.15s}.focus\:tw-outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus-visible\:tw-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:tw-ring-primary-300:focus-visible{--tw-ring-color:var(--x4b-primary-300,#9fb2f9)}.focus-visible\:tw-ring-accent-300:focus-visible{--tw-ring-color:var(--x4b-secondary-300,#5ed0fa)}.focus-visible\:tw-ring-gray-300:focus-visible{--tw-ring-color:var(--x4b-gray-300,#a3aec2)}.focus-visible\:tw-ring-red-300:focus-visible{--tw-ring-color:var(--x4b-red-300,#f99)}.focus-visible\:tw-ring-green-300:focus-visible{--tw-ring-color:var(--x4b-green-300,#93e697)}.focus-visible\:tw-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.tw-group:hover .group-hover\:tw-duration-150{transition-duration:.15s}.aria-expanded\:tw-border-primary-100[aria-expanded=true]{border-color:var(--x4b-primary-100,#e0e7ff)}.aria-expanded\:tw-border-gray-100[aria-expanded=true]{border-color:var(--x4b-gray-100,#e1e5ea)}.aria-expanded\:tw-bg-primary-100[aria-expanded=true]{background-color:var(--x4b-primary-100,#e0e7ff)}.aria-expanded\:tw-bg-gray-100[aria-expanded=true]{background-color:var(--x4b-gray-100,#e1e5ea)}.aria-expanded\:tw-text-primary-700[aria-expanded=true]{color:var(--x4b-primary-700,#153fd5)}.aria-expanded\:tw-text-gray-700[aria-expanded=true]{color:var(--x4b-gray-700,#44506a)}.aria-expanded\:tw-opacity-80[aria-expanded=true]{opacity:.8}.aria-expanded\:tw-duration-150[aria-expanded=true]{transition-duration:.15s}.data-\[selected\]\:tw-cursor-pointer[data-selected]{cursor:pointer}.data-\[selected\]\:tw-bg-gray-50[data-selected]{background-color:var(--x4b-gray-50,#f3f5f7)}@media (prefers-reduced-motion:no-preference){.tw-group:hover .motion-safe\:group-hover\:tw-scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.motion-safe\:data-\[reach-menu-list\]\:tw-animate-slideDown[data-reach-menu-list]{animation:tw-slideDown .5s ease-out}@keyframes tw-slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.motion-safe\:data-\[reach-menu-items\]\:tw-animate-slideDown[data-reach-menu-items]{animation:tw-slideDown .5s ease-out}}@media (min-width:640px){.sm\:tw-inline-block{display:inline-block}.sm\:tw-gap-1{gap:.25rem}.md\:tw-ml-3{margin-left:.75rem}.md\:tw-block{display:block}.md\:tw-hidden{display:none}.md\:tw-text-xl{font-size:1.25rem}}@media (min-width:1024px){.lg\:tw-mr-3{margin-right:.75rem}.lg\:tw-inline-block{display:inline-block}.lg\:tw-gap-2{gap:.5rem}.lg\:tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.lg\:tw-text-lg{font-size:1.125rem}.lg\:tw-text-2xl{font-size:1.5rem}}@media (min-width:1300px){.xl\:tw-px-3{padding-left:.75rem;padding-right:.75rem}.xl\:tw-text-xl{font-size:1.25rem}}.data-\[selected\]\:\[\&\:not\(\:hover\)\]\:tw-ring:not(:hover)[data-selected]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.data-\[selected\]\:\[\&\:not\(\:hover\)\]\:tw-ring-gray-300:not(:hover)[data-selected]{--tw-ring-color:var(--x4b-gray-300,#a3aec2)}