@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/utils/hitFunctions.d.ts

@@ -0,0 +1,2 @@
+import type { Hit } from 'models/entities/generated/Hit';
+export declare const getUserList: (hit: Hit) => Set<string>;

package/dist/utils/hitFunctions.js

@@ -0,0 +1,8 @@
+export const getUserList = (hit) => {
+    const ids = new Set();
+    if (hit) {
+        hit.howler?.log?.forEach(l => ids.add(l.user));
+        hit.howler?.comment?.forEach(c => ids.add(c.user), ids);
+    }
+    return ids;
+};

package/dist/utils/localStorage.d.ts

@@ -0,0 +1,21 @@
+import type { LoginResponse } from 'api/auth/login';
+import { StorageKey } from './constants';
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export declare const removeStored: (name: StorageKey) => void;
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export declare const setStored: (name: StorageKey, item: any) => void;
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export declare const getStored: <T = string>(name?: StorageKey) => T;
+export declare const saveLoginCredential: (loginRes: LoginResponse) => boolean;

package/dist/utils/localStorage.js

@@ -0,0 +1,48 @@
+import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from './constants';
+const buildName = (name) => `${MY_LOCAL_STORAGE_PREFIX}.${name}`;
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const removeStored = (name) => {
+    localStorage.removeItem(buildName(name));
+};
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const setStored = (name, item) => {
+    localStorage.setItem(buildName(name), JSON.stringify(item));
+};
+/**
+ * **IMPORTANT**: This function should only be used OUTSIDE of the React tree.
+ * If you want to edit localStorage items inside a React component, use
+ * src/components/hooks/useMyLocalStorage.tsx.
+ */
+export const getStored = (name) => {
+    try {
+        return JSON.parse(localStorage.getItem(buildName(name)));
+    }
+    catch (e) {
+        // Migrating from the old system, some values were not JSON encoded. Decoding them will cause an exception.
+        // Obviously, this is not optimal, but it's the only way to get Typescript to play nice.
+        // When this is called, T will be type string.
+        return localStorage.getItem(buildName(name));
+    }
+};
+export const saveLoginCredential = (loginRes) => {
+    if (loginRes.app_token) {
+        setStored(StorageKey.APP_TOKEN, loginRes.app_token);
+        if (loginRes.refresh_token) {
+            setStored(StorageKey.REFRESH_TOKEN, loginRes.refresh_token);
+            setStored(StorageKey.PROVIDER, loginRes.provider);
+        }
+        return true;
+    }
+    removeStored(StorageKey.REFRESH_TOKEN);
+    removeStored(StorageKey.APP_TOKEN);
+    removeStored(StorageKey.PROVIDER);
+    return false;
+};

package/dist/utils/sessionStorage.d.ts

@@ -0,0 +1,7 @@
+import { StorageKey } from './constants';
+declare const getStored: <T = string>(name: StorageKey) => T, removeStored: (name: StorageKey) => void, setStored: (name: StorageKey, item: any) => void;
+export { getStored, removeStored, setStored };
+export declare const getAxiosCache: () => {
+    [index: string]: any;
+};
+export declare const setAxiosCache: (etag: string, value: any) => void;

package/dist/utils/sessionStorage.js

@@ -0,0 +1,44 @@
+import Throttler from 'utils/Throttler';
+import { MY_SESSION_STORAGE_PREFIX, StorageKey } from './constants';
+const buildName = (name) => `${MY_SESSION_STORAGE_PREFIX}.${name}`;
+const { _getStored: getStored, _removeStored: removeStored, _setStored: setStored } = (() => {
+    // In order to tamp down on the number of writes to session storage, we use a throttler to debounce writes.
+    // This allows us to write to the same key many times in quick succession without actually writing it to session storage right away.
+    const throttler = new Throttler(3000);
+    let changes = {};
+    const _getStored = (name) => {
+        return {
+            ...JSON.parse(sessionStorage.getItem(buildName(name))),
+            ...changes[buildName(name)]
+        };
+    };
+    const _removeStored = (name) => {
+        delete changes[buildName(name)];
+        sessionStorage.removeItem(buildName(name));
+    };
+    const _setStored = (name, item) => {
+        changes[buildName(name)] = item;
+        throttler.debounce(() => {
+            Object.entries(changes).forEach(([_name, data]) => {
+                try {
+                    sessionStorage.setItem(_name, JSON.stringify(data));
+                }
+                catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.warn('Quota Error when saving to sessionStorage', e);
+                }
+            });
+            changes = {};
+        });
+    };
+    return { _getStored, _removeStored, _setStored };
+})();
+export { getStored, removeStored, setStored };
+export const getAxiosCache = () => {
+    return getStored(StorageKey.AXIOS_CACHE) ?? {};
+};
+export const setAxiosCache = (etag, value) => {
+    const cache = getAxiosCache();
+    cache[etag] = value;
+    setStored(StorageKey.AXIOS_CACHE, cache);
+};

package/dist/utils/socketUtils.d.ts

@@ -0,0 +1,8 @@
+import type { RecievedDataType } from 'components/app/providers/SocketProvider';
+import type { HitUpdate } from 'models/socket/HitUpdate';
+/**
+ * Checks to see if the data recieved from the socket is a hit update
+ * @param data The data recieved from the socket
+ * @returns whether the data is a hit update
+ */
+export declare const isHitUpdate: (data: any) => data is RecievedDataType<HitUpdate>;

package/dist/utils/socketUtils.js

@@ -0,0 +1,8 @@
+/**
+ * Checks to see if the data recieved from the socket is a hit update
+ * @param data The data recieved from the socket
+ * @returns whether the data is a hit update
+ */
+export const isHitUpdate = (data) => {
+    return data.version && data.hit;
+};

package/dist/utils/stringUtils.d.ts

@@ -0,0 +1,7 @@
+export declare const nameToInitials: (string: string) => string[];
+export declare const maxLenStr: (str: string, len: number) => string;
+export declare const safeFieldValue: (data: string | number | boolean) => string;
+export declare const safeFieldValueURI: (data: string | number | boolean) => string;
+export declare const sanitizeLuceneQuery: (query: string) => string;
+export declare const safeStringPropertyCompare: (propertyPath: string) => (a: unknown, b: unknown) => any;
+export declare const sanitizeMultilineLucene: (query: string) => string;

package/dist/utils/stringUtils.js

@@ -0,0 +1,38 @@
+import { get } from 'lodash-es';
+export const nameToInitials = (string) => {
+    const parts = string.split(' ').slice(0, 2);
+    if (string.includes(',')) {
+        parts.reverse();
+    }
+    return parts.map(p => p.charAt(0).toUpperCase());
+};
+export const maxLenStr = (str, len) => {
+    if (str.length > len) {
+        return `${str.substr(0, len - 3)}...`;
+    }
+    return str;
+};
+export const safeFieldValue = (data) => {
+    const temp = String(data);
+    return `"${temp.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+};
+export const safeFieldValueURI = (data) => {
+    return `${encodeURIComponent(safeFieldValue(data))}`;
+};
+export const sanitizeLuceneQuery = (query) => {
+    return query
+        .replace(/([\^"~*?:\\/()[\]{}\-!])/g, '\\$1')
+        .replace('&&', '\\&&')
+        .replace('||', '\\||');
+};
+// Supports : prop or any form of nested object.. prop.object.prop2, prop.object[0].prop2
+export const safeStringPropertyCompare = (propertyPath) => {
+    return (a, b) => {
+        const aVal = get(a, propertyPath);
+        const bVal = get(b, propertyPath);
+        return aVal && bVal ? aVal.localeCompare(bVal) : aVal ? 1 : 0;
+    };
+};
+export const sanitizeMultilineLucene = (query) => {
+    return query.replace(/#.+/g, '').replace(/\n{2,}/, '\n');
+};

package/dist/utils/utils.d.ts

@@ -0,0 +1,33 @@
+export declare const bytesToSize: (bytes: number | null) => string;
+export declare const humanReadableNumber: (num: number | null) => string;
+export declare const getProvider: () => string;
+export declare const searchResultsDisplay: (count: number, max?: number) => string;
+export declare const formatDate: (date: number | string | Date) => string;
+export declare const compareTimestamp: (a: string, b: string) => number;
+export declare const twitterShort: (date: string | Date | number) => string;
+export declare const hashCode: (s: string) => number;
+export declare const stringToColor: (string: string) => string;
+export declare const delay: (ms: number, rejectOnCancel?: boolean) => {
+    cancel: () => void;
+    then<TResult1 = void, TResult2 = never>(onfulfilled?: (value: void) => TResult1 | PromiseLike<TResult1>, onrejected?: (reason: any) => TResult2 | PromiseLike<TResult2>): Promise<TResult1 | TResult2>;
+    catch<TResult = never>(onrejected?: (reason: any) => TResult | PromiseLike<TResult>): Promise<void | TResult>;
+    finally(onfinally?: () => void): Promise<void>;
+    readonly [Symbol.toStringTag]: string;
+};
+type Timestamp = {
+    timestamp?: string;
+};
+export declare const sortByTimestamp: <T extends Timestamp>(arr: T[]) => T[];
+export declare const getTimeRange: (arr: string[]) => [string, string];
+export declare const removeEmpty: (obj: any, aggressive?: boolean) => any;
+export declare const searchObject: (o: any, query: string, returnFlat?: boolean) => any;
+export declare const convertDateToLucene: (date: string) => string;
+export declare const convertCustomDateRangeToLucene: (startDate: string, endDate: string) => string;
+export declare const convertLuceneToDate: (lucene: string) => string;
+export declare const tryParse: (json: string) => any;
+export declare const flattenDeep: (data: {
+    [index: string]: any;
+}) => {
+    [index: string]: any;
+};
+export {};

package/dist/utils/utils.js

@@ -0,0 +1,180 @@
+import * as colors from '@mui/material/colors';
+import { flatten, unflatten } from 'flat';
+import { isArray, isEmpty, isNil, isObject, isPlainObject } from 'lodash-es';
+import moment from 'moment';
+export const bytesToSize = (bytes) => {
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes === 0 || bytes === null)
+        return '0 B';
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;
+};
+export const humanReadableNumber = (num) => {
+    const sizes = ['', 'k', 'm', 'g', 't', 'p', 'e', 'z', 'y'];
+    if (num === 0 || num === null)
+        return '0 ';
+    const i = Math.floor(Math.log(num) / Math.log(1000));
+    return `${Math.round(num / Math.pow(1000, i))}${sizes[i]} `;
+};
+export const getProvider = () => {
+    if (window.location.pathname.indexOf(`${import.meta.env.PUBLIC_URL}/oauth/`) !== -1) {
+        return window.location.pathname
+            .split(`${import.meta.env.PUBLIC_URL}/oauth/`)
+            .pop()
+            .slice(0, -1);
+    }
+    const params = new URLSearchParams(window.location.search);
+    return params.get('provider');
+};
+export const searchResultsDisplay = (count, max = 10000) => {
+    const params = new URLSearchParams(window.location.search);
+    const trackedHits = params.get('track_total_hits');
+    if (count === parseInt(trackedHits) || (trackedHits === null && count === max)) {
+        return `${count}+`;
+    }
+    return `${count}`;
+};
+const DATE_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+export const formatDate = (date) => {
+    if (!date) {
+        return '?';
+    }
+    return moment(date).utc().format(DATE_FORMAT);
+};
+export const compareTimestamp = (a, b) => {
+    return (new Date(a).getTime() - new Date(b).getTime()) / 1000;
+};
+export const twitterShort = (date) => {
+    if (!date || date === '?') {
+        return '?';
+    }
+    return moment(date).fromNow();
+};
+export const hashCode = (s) => s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
+export const stringToColor = (string) => {
+    const number = Math.abs(hashCode(string));
+    const colorKeys = Object.keys(colors).filter(key => key !== 'common');
+    const colorKey = colorKeys[number % colorKeys.length];
+    // eslint-disable-next-line import/namespace
+    const color = colors[colorKey];
+    const shade = Math.max(Math.floor((number / 1000) % 10), 1) * 100;
+    return color[shade];
+};
+// Adapted from here: https://stackoverflow.com/a/48429492
+export const delay = (ms, rejectOnCancel = false) => {
+    let timerId;
+    let onCancel;
+    class TimedPromise extends Promise {
+        cancel = () => {
+            if (rejectOnCancel) {
+                onCancel();
+            }
+            clearTimeout(timerId);
+        };
+    }
+    return new TimedPromise((resolve, reject) => {
+        timerId = setTimeout(resolve, ms);
+        onCancel = reject;
+    });
+};
+export const sortByTimestamp = (arr) => {
+    return (arr ?? []).slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp));
+};
+export const getTimeRange = (arr) => {
+    const sorted = arr.sort((a, b) => compareTimestamp(a, b));
+    return [sorted[0], sorted[sorted.length - 1]];
+};
+export const removeEmpty = (obj, aggressive = false) => {
+    if (aggressive && isEmpty(obj)) {
+        return null;
+    }
+    else if (isArray(obj)) {
+        return obj;
+    }
+    return Object.fromEntries(Object.entries(obj ?? {})
+        .filter(([__, v]) => !isNil(v))
+        .map(([k, v]) => [k, isPlainObject(v) || isArray(v) ? removeEmpty(v, aggressive) : v])
+        .filter(([__, v]) => !!v));
+};
+export const searchObject = (o, query, returnFlat = false) => {
+    if (!query) {
+        return returnFlat ? flatten(o) : o;
+    }
+    try {
+        const regex = new RegExp(query, 'i');
+        const filteredData = Object.fromEntries(Object.entries(flatten(o)).filter(([k, v]) => regex.test(k) || regex.test(v))) ?? {};
+        return returnFlat ? filteredData : unflatten(filteredData);
+    }
+    catch (e) {
+        return returnFlat ? flatten(o) : o;
+    }
+};
+const DATE_TO_LUCENE_MAP = {
+    day: 'd',
+    week: 'w',
+    month: 'M',
+    year: 'y'
+};
+export const convertDateToLucene = (date) => {
+    if (!date.startsWith('date.range.')) {
+        return '[now-1d TO now]';
+    }
+    if (date.endsWith('all')) {
+        return '*';
+    }
+    const [amount, type] = date.replace('date.range.', '').split('.');
+    return `[now-${amount}${DATE_TO_LUCENE_MAP[type] ?? 'd'} TO now]`;
+};
+export const convertCustomDateRangeToLucene = (startDate, endDate) => {
+    return `[${startDate} TO ${endDate}]`;
+};
+export const convertLuceneToDate = (lucene) => {
+    if (!lucene.includes(':')) {
+        return lucene;
+    }
+    const [amount, initial] = lucene.replace(/.+\[now-(\d+)(\w+) TO now]/, '$1 $2').split(' ');
+    const type = Object.entries(DATE_TO_LUCENE_MAP).find(([__, _initial]) => _initial === initial)?.[0] ?? 'day';
+    return `date.range.${amount}.${type}`;
+};
+export const tryParse = (json) => {
+    try {
+        return JSON.parse(json);
+    }
+    catch (e) {
+        return json;
+    }
+};
+export const flattenDeep = (data) => {
+    const partialFlat = flatten(data, { safe: true });
+    const final = {};
+    Object.entries(partialFlat).forEach(([key, value]) => {
+        if (!Array.isArray(value) || value.length === 0 || !value.some(entry => isObject(entry))) {
+            final[key] = value;
+        }
+        else {
+            value.forEach(entry => {
+                const flattenedEntry = flattenDeep(entry);
+                Object.entries(flattenedEntry).forEach(([childKey, childValue]) => {
+                    const fullKey = `${key}.${childKey}`;
+                    if (!final[fullKey]) {
+                        if (Array.isArray(childValue)) {
+                            final[fullKey] = childValue;
+                        }
+                        else {
+                            final[fullKey] = [childValue];
+                        }
+                    }
+                    else {
+                        if (Array.isArray(childValue)) {
+                            final[fullKey] = [...final[fullKey], ...childValue];
+                        }
+                        else {
+                            final[fullKey].push(childValue);
+                        }
+                    }
+                });
+            });
+        }
+    });
+    return final;
+};

package/dist/utils/xsrf.d.ts

@@ -0,0 +1,2 @@
+declare const getXSRFCookie: () => string;
+export default getXSRFCookie;

package/dist/utils/xsrf.js

@@ -0,0 +1,16 @@
+const getXSRFCookie = () => {
+    if (document.cookie !== undefined) {
+        try {
+            // eslint-disable-next-line prefer-destructuring
+            return document.cookie
+                .split('; ')
+                .find(row => row.startsWith('XSRF-TOKEN'))
+                .split('=')[1];
+        }
+        catch (ex) {
+            // Ignore... we will return null
+        }
+    }
+    return null;
+};
+export default getXSRFCookie;

package/package.json

@@ -0,0 +1,153 @@
+{
+  "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ]
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.2.5",
+    "@microlink/react-json-view": "^1.26.2",
+    "@monaco-editor/react": "^4.7.0",
+    "@mui/icons-material": "^5.17.1",
+    "@mui/lab": "5.0.0-alpha.176",
+    "@mui/material": "^5.17.1",
+    "@mui/x-date-pickers": "^7.29.4",
+    "ajv": "^8.17.1",
+    "ajv-i18n": "^4.2.0",
+    "axios": "^1.9.0",
+    "axios-retry": "^3.9.1",
+    "borealis-ui": "0.11.0",
+    "chart.js": "^4.4.9",
+    "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-plugin-zoom": "^2.2.0",
+    "clsx": "^2.1.1",
+    "csstype": "^3.1.3",
+    "dompurify": "^3.2.6",
+    "express": "^4.21.2",
+    "flat": "^6.0.1",
+    "fuse.js": "^7.1.0",
+    "handlebars": "^4.7.8",
+    "handlebars-async-helpers": "^1.0.6",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^7.2.2",
+    "json2mq": "^0.2.0",
+    "lodash-es": "^4.17.21",
+    "md5": "^2.3.0",
+    "mermaid": "^11.6.0",
+    "moment": "^2.30.1",
+    "monaco-editor": "^0.49.0",
+    "notistack": "^3.0.2",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^14.1.3",
+    "react-ipynb-renderer": "^2.2.4",
+    "react-markdown": "^9.1.0",
+    "react-pluggable": "^0.4.3",
+    "react-resize-detector": "^9.1.1",
+    "react-router": "^6.30.1",
+    "react-router-dom": "^6.30.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-raw": "^7.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "scheduler": "^0.23.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
+    "url-join": "^5.0.0",
+    "use-context-selector": "^2.0.0",
+    "uuid": "^9.0.1",
+    "web-vitals": "^4.2.4"
+  },
+  "devDependencies": {
+    "@iconify/icons-logos": "^1.2.36",
+    "@iconify/icons-simple-icons": "^1.2.74",
+    "@iconify/react": "^4.1.1",
+    "@types/json2mq": "^0.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^20.17.57",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.5.0",
+    "@vitejs/plugin-react-swc": "^3.10.0",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-import-resolver-node": "^0.3.9",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "http-proxy-middleware": "^2.0.9",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "react-icons": "^5.5.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "files": [
+    "dist",
+    "public"
+  ],
+  "jest": {
+    "transformIgnorePatterns": [
+      "!node_modules/url-join"
+    ]
+  },
+  "lint-staged": {
+    "src/*.{ts,tsx,js,jsx}": [
+      "prettier --write"
+    ]
+  },
+  "name": "@cccsaurora/howler-ui",
+  "overrides": {
+    "handlebars-async-helpers": {
+      "handlebars": "4.*"
+    }
+  },
+  "repository": {
+    "url": "https://github.com/CybercentreCanada/howler"
+  },
+  "resolutions": {
+    "internal-slot": "1.0.7"
+  },
+  "type": "module",
+  "version": "2.12.0-dev.30",
+  "scripts": {
+    "build": "vite build",
+    "build-all": "tsc && vite build",
+    "dev": "vite -l info",
+    "preinstall": "npx only-allow pnpm",
+    "serve": "vite preview",
+    "server": "node server/index.js",
+    "start": "vite -l info"
+  }
+}

package/public/branding/howler/favicon.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="artwork_lightmode" data-name="artwork lightmode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64.08 64.08">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0e4377;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-3 {
+        fill: url(#radial-gradient);
+      }
+    </style>
+    <radialGradient id="radial-gradient" cx="32.04" cy="32.04" fx="32.04" fy="32.04" r="32.04" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3381cc"/>
+      <stop offset=".51" stop-color="#317fcb"/>
+      <stop offset=".7" stop-color="#2a7bc9"/>
+      <stop offset=".83" stop-color="#1e74c6"/>
+      <stop offset=".94" stop-color="#0d6ac2"/>
+      <stop offset="1" stop-color="#0062bf"/>
+    </radialGradient>
+  </defs>
+  <path class="cls-3" d="m32.04,0C14.34,0,0,14.34,0,32.04s14.34,32.04,32.04,32.04,32.04-14.34,32.04-32.04S49.74,0,32.04,0Z"/>
+  <g>
+    <g>
+      <path class="cls-2" d="m39.69,63.07h0c-4.28-16.65,7.85-26.93,9.88-29.25,2.25-2.58,3.03-6.49,2.97-6.95h0s0-.05,0-.05c.36-2.27-2.17-6.92-2.17-6.92,1.42-2.4-.59-5.23-2.67-5.12-2.09.11-2.57,1.82-2.57,1.82,0,0-3.18,1.42-6.82,4.04-3.63,2.61-6.96,2.74-10.42,1.46-3.47-1.28-7.52,2.56-7.52,2.56l-5.32,5.69c-.61-.36-1.26-.53-1.92-.49-3.05.21-5.2,4.99-4.81,10.69.1,1.42.34,2.7.7,3.81-.03-.05-.06-.09-.09-.14,1.06,3.82,3.41,4.44,5.76,4.28,3.05-.21,4.87-2.92,4.48-8.61-.04-.54.07-1.14,0-1.66h0s0-.03,0-.03c.94,1.64,1.67,3.69,2.22,5.91,1.2,4.86-1.6,11.51-5.24,15.75,4.69,2.69,10.12,4.24,15.92,4.24,2.58,0,5.09-.31,7.5-.89.05-.04.1-.07.16-.11,0,0,0,0,0,0Z"/>
+      <path class="cls-2" d="m39.69,63.07s0,0,0,0c-.05.04-.1.07-.16.11l.16-.12Z"/>
+    </g>
+    <path class="cls-1" d="m17.48,33.09c.25.45.48.93.68,1.45-.29-.51-.56-1-.68-1.45Zm1.83,6.71c-.04-.54-.1-1.07-.17-1.58-.14,5.08-3.05,9.04-5.86,9.23-1.65.11-3.23-1.15-4.38-3.23,1.06,3.82,3.25,6.43,5.6,6.27,3.05-.21,5.2-4.99,4.81-10.69Zm9.65-11.36l2.03-1.9s.54-.44.21-.82c-1.38-1.61-2.78-1.31-2.78-1.31-.57,1.2.53,4.03.53,4.03Zm3.6,12.97l4.86.26s-1.88,2.66-3.85,8.35l3.25-.71c-.68,6.56,2.86,13.76,2.86,13.76-3.2-15.43,9.17-26.59,11.2-28.91,2.38-2.73,1.64-7.34,1.64-7.34,0,0-3.73,8.47-19.95,14.59Z"/>
+  </g>
+</svg>

package/public/branding/howler/name-dark.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="dark_mode" data-name="dark mode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152.4 40.4">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #bcbcbc;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m0,1.36h6.99v12.57h12.89V1.36h6.99v31.78h-6.99v-12.76H6.99v12.76H0V1.36Z" />
+  <path class="cls-1"
+    d="m31.46,21.11v-.09c0-6.99,5.63-12.67,13.21-12.67s13.12,5.58,13.12,12.57v.09c0,6.99-5.63,12.67-13.21,12.67s-13.12-5.58-13.12-12.57Zm19.52,0v-.09c0-3.59-2.59-6.72-6.4-6.72s-6.31,3.04-6.31,6.63v.09c0,3.59,2.59,6.72,6.4,6.72s6.31-3.04,6.31-6.63Z" />
+  <path class="cls-1"
+    d="m58.52,8.81h6.99l3.9,14.75,4.58-14.84h5.95l4.63,14.89,4-14.8h6.85l-7.58,24.51h-6.22l-4.67-14.94-4.77,14.94h-6.17l-7.49-24.51Z" />
+  <path class="cls-1" d="m98.79,0h6.9v33.14h-6.9V0Z" />
+  <path class="cls-1"
+    d="m109.87,21.11v-.09c0-6.95,4.95-12.67,12.03-12.67,8.13,0,11.85,6.31,11.85,13.21,0,.54-.04,1.18-.09,1.82h-16.93c.68,3.13,2.86,4.77,5.95,4.77,2.32,0,4-.73,5.9-2.5l3.95,3.5c-2.27,2.81-5.54,4.54-9.94,4.54-7.31,0-12.71-5.13-12.71-12.57Zm17.16-2.04c-.41-3.09-2.22-5.18-5.13-5.18s-4.72,2.04-5.27,5.18h10.4Z" />
+  <path class="cls-1"
+    d="m137.74,8.81h6.9v4.9c1.41-3.36,3.68-5.54,7.76-5.36v7.22h-.36c-4.58,0-7.4,2.77-7.4,8.58v8.99h-6.9V8.81Z" />
+</svg>