nurseitaly-components 0.0.1

package/dist/basic/TextField/TextField.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
+import { InputAdornment, TextField as MuiTextField } from '@mui/material';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { textFieldTheme } from './TextFieldTheme';
+import { setCurrentInput } from './inputRefManager';
+import './styles.scss';
+export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, onBlur, rows = 4, infoText, inputRef, width = '100%', height, mask, blurMask, }) {
+    const fieldName = attr;
+    const outerTheme = useTheme();
+    const [showPassword, setShowPassword] = useState(false);
+    const [active, setActive] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [mouseOver, setMouseOver] = useState(false);
+    const hasError = () => !!createdForm.formState.errors[attr];
+    const hasLabel = !!label;
+    // Custom height if provided; otherwise labeled single-line stays 48px, unlabeled shrinks with content, multiline fills
+    const effectiveHeight = height !== undefined
+        ? height
+        : multiline
+            ? '100%'
+            : hasLabel
+                ? '48px'
+                : undefined;
+    const getClassNames = cx('ds-input-text', className, {
+        disabled: disabled,
+    });
+    const applyMask = (value, isBlur) => {
+        if (typeof value === 'string' && mask) {
+            return mask(value, isBlur);
+        }
+        return value;
+    };
+    useEffect(() => {
+        const currentValue = createdForm.getValues(fieldName);
+        if (mask && currentValue) {
+            const masked = applyMask(currentValue);
+            if (masked !== currentValue) {
+                createdForm.setValue(fieldName, masked, { shouldValidate: false });
+            }
+        }
+    }, [attr, mask, createdForm, fieldName]);
+    const getEndAdornmentIcon = (value) => {
+        const adornments = [];
+        if (defaultEndAdornments.length > 0) {
+            // Check for password adornment
+            if (defaultEndAdornments.includes('password')) {
+                adornments.push(_jsx(Icon, { name: showPassword ? 'visibility_off' : 'visibility', size: "small", onClick: () => setShowPassword(!showPassword), className: "pointer" }, "password"));
+            }
+            // Check for info adornment
+            if (defaultEndAdornments.includes('info') && infoText) {
+                const infoTextElement = (_jsx(Icon, { name: "info", size: "small", className: "icon-info pointer" }));
+                adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
+            }
+            // Check for close adornment - show when value is not undefined and value is not equal to defaultValue
+            if (defaultEndAdornments.includes('close') &&
+                value !== undefined &&
+                onRemove) {
+                adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
+            }
+        }
+        // Append custom endAdornments if provided
+        if (endAdornment && endAdornment.length > 0) {
+            adornments.push(...endAdornment);
+        }
+        if (adornments.length === 0) {
+            return null;
+        }
+        if (adornments.length === 1) {
+            return adornments[0];
+        }
+        // Return multiple adornments wrapped in a div with spacing
+        return _jsx("div", { className: "ds-end-adornments", children: adornments });
+    };
+    useEffect(() => {
+        if (focus || mouseOver) {
+            setActive(true);
+        }
+        else {
+            setActive(false);
+        }
+    }, [focus, mouseOver]);
+    return (_jsx("div", { className: getClassNames, style: { width }, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: textFieldTheme(outerTheme, { hasLabel }), children: [_jsx(MuiTextField, { ...field, inputRef: inputRef, label: label, value: field.value || '', type: defaultEndAdornments.includes('password')
+                            ? showPassword
+                                ? 'text'
+                                : 'password'
+                            : 'text', fullWidth: true, required: required, disabled: disabled, variant: "filled", placeholder: !focus ? placeholder : '', color: "error", multiline: multiline, minRows: rows, slotProps: {
+                            ...(hasLabel && {
+                                inputLabel: {
+                                    shrink: true,
+                                },
+                            }),
+                            input: {
+                                endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })),
+                                startAdornment: startAdornment && (_jsx(InputAdornment, { position: "start", children: startAdornment })),
+                            },
+                        }, onFocus: (e) => {
+                            setCurrentInput(e.target, (e) => {
+                                const value = applyMask(e.target.value);
+                                field.onChange(value);
+                                onChange && onChange(attr, value);
+                            });
+                            setFocus(true);
+                            onFocus && onFocus(e);
+                        }, onBlur: (e) => {
+                            setFocus(false);
+                            // Apply mask with blur flag to ensure proper formatting (e.g., 2 decimal places for currency)
+                            const value = blurMask
+                                ? blurMask(e.target.value)
+                                : e.target.value;
+                            if (value !== e.target.value) {
+                                field.onChange(value);
+                                onChange && onChange(attr, value);
+                            }
+                            onBlur && onBlur(e);
+                        }, onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onKeyDown: (event) => onKeyDown && onKeyDown(event), onChange: (event) => {
+                            const value = applyMask(event.target.value);
+                            field.onChange(value);
+                            onChange && onChange(attr, value);
+                        }, sx: {
+                            borderColor: disabled
+                                ? '#BEBFC1'
+                                : hasError()
+                                    ? '#C6080A'
+                                    : active
+                                        ? '#1C83F4'
+                                        : '#BEBFC1',
+                            '.MuiInputLabel-root': {
+                                color: disabled
+                                    ? '#BEBFC1'
+                                    : hasError()
+                                        ? '#C6080A'
+                                        : active
+                                            ? '#1C83F4'
+                                            : '#000000',
+                            },
+                            '& .MuiInputBase-inputMultiline': {
+                                paddingTop: hasLabel ? '24px' : '8px',
+                                paddingBottom: '16px',
+                            },
+                            ...(hasLabel &&
+                                !multiline && {
+                                '& .MuiInputBase-input': {
+                                    paddingTop: '16px',
+                                },
+                            }),
+                            '& .MuiInputAdornment-positionEnd': {
+                                paddingTop: multiline ? '12px' : '0px',
+                            },
+                            ...(effectiveHeight !== undefined && {
+                                height: effectiveHeight,
+                            }),
+                            '& .MuiInputBase-root': {
+                                paddingTop: multiline ? '12px' : hasLabel ? '4px' : '0px',
+                                height: effectiveHeight !== undefined ? '100%' : 'auto',
+                                alignItems: multiline ? 'flex-start' : 'center',
+                            },
+                        } }), maxChars && (_jsxs("div", { className: "character-counter", children: [field.value?.length || 0, "/", maxChars] })), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
+}

package/dist/basic/TextField/TextFieldTheme.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '@mui/material/styles';
+type TextFieldThemeOptions = {
+    hasLabel?: boolean;
+};
+export declare const textFieldTheme: (outerTheme: Theme, { hasLabel }?: TextFieldThemeOptions) => Theme;
+export {};

package/dist/basic/TextField/TextFieldTheme.js

@@ -0,0 +1,70 @@
+import { createTheme } from '@mui/material/styles';
+export const textFieldTheme = (outerTheme, { hasLabel = true } = {}) => createTheme({
+    ...outerTheme,
+    components: {
+        MuiTextField: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white',
+                    padding: '0px',
+                    border: '1px solid #EAEAEB',
+                    borderRadius: '4px',
+                    '& .MuiInputBase-root': {
+                        padding: '0px!important',
+                        backgroundColor: 'white',
+                        borderBottomLeftRadius: '4px',
+                        borderBottomRightRadius: '4px',
+                    },
+                    '& .MuiFilledInput-root::before': {
+                        content: 'none',
+                    },
+                    '& .MuiFilledInput-root::after': {
+                        content: 'none',
+                    },
+                    '& .MuiInputLabel-root': {
+                        paddingLeft: '4px',
+                        color: '#000000',
+                        textTransform: 'uppercase',
+                        // helper-medium-1
+                        fontSize: '12px',
+                        fontWeight: '400',
+                        lineHeight: '100%',
+                        letterSpacing: '0.16px',
+                        fontFamily: 'Work Sans, sans-serif',
+                    },
+                    '& .MuiInputAdornment-root': {
+                        height: '100%',
+                        maxHeight: '100%',
+                    },
+                    '& .MuiInputAdornment-positionStart': {
+                        margin: '0px!important',
+                        padding: '0px!important',
+                    },
+                    '& .MuiInputAdornment-positionEnd': {
+                        margin: hasLabel
+                            ? '0px 16px auto!important'
+                            : '0px 16px!important',
+                    },
+                    '& .MuiInputBase-input': {
+                        padding: hasLabel ? '0px 16px' : '10px 16px',
+                        height: hasLabel ? '48px' : 'auto',
+                        // label-medium-1
+                        fontSize: '16px',
+                        fontWeight: '400',
+                        lineHeight: '120%',
+                        letterSpacing: '0px',
+                        fontFamily: 'Work Sans, sans-serif',
+                        '&::placeholder': {
+                            color: '#707276',
+                        },
+                        '&:-webkit-autofill': {
+                            WebkitBoxShadow: '0 0 0px 1000px transparent inset !important',
+                            WebkitTextFillColor: '#000 !important',
+                            transition: 'background-color 5000s ease-in-out 0s', // Prevents flashing
+                        },
+                    },
+                },
+            },
+        },
+    },
+});

package/dist/basic/TextField/index.d.ts

@@ -0,0 +1,2 @@
+import TextField from './TextField';
+export default TextField;

package/dist/basic/TextField/index.js

@@ -0,0 +1,2 @@
+import TextField from './TextField';
+export default TextField;

package/dist/basic/TextField/inputRefManager.d.ts

@@ -0,0 +1,4 @@
+export declare function removeCurrentInput(): void;
+export declare function setCurrentInput(input: HTMLInputElement | HTMLTextAreaElement | null, onChange: (e: any) => void): void;
+export declare function getCurrentInput(): HTMLInputElement | HTMLTextAreaElement | null;
+export declare function getCurrentOnChange(): ((e: any) => void) | null;

package/dist/basic/TextField/inputRefManager.js

@@ -0,0 +1,18 @@
+let currentInput = null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let currentOnChange = null;
+export function removeCurrentInput() {
+    currentInput = null;
+}
+export function setCurrentInput(input, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+onChange) {
+    currentInput = input;
+    currentOnChange = onChange;
+}
+export function getCurrentInput() {
+    return currentInput;
+}
+export function getCurrentOnChange() {
+    return currentOnChange;
+}

package/dist/basic/TextField/styles.scss

@@ -0,0 +1,44 @@
+.ds-input-text {
+  width: 100%;
+  position: relative;
+
+  span {
+    line-height: 1 !important;
+  }
+
+  > .helper {
+    @include helper-small-1;
+    margin-top: 4px;
+
+    &.error {
+      color: var(--text-error);
+    }
+  }
+
+  .icon-info {
+    color: var(--icon-tertiary);
+  }
+
+  &.disabled {
+    color: var(--text-on-disabled);
+    cursor: not-allowed;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+
+  .character-counter {
+    @include helper-small-1;
+    color: var(--text-placeholder);
+    position: absolute;
+    bottom: 12px;
+    left: 16px;
+  }
+}
+
+.ds-end-adornments {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

package/dist/basic/Tooltip/Tooltip.d.ts

@@ -0,0 +1,26 @@
+import "./styles.scss";
+export declare const TooltipModes: readonly ["simple", "confirmation", "delete"];
+type TooltipModes = (typeof TooltipModes)[number];
+export declare const TooltipPlacements: readonly ["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"];
+export type TooltipPlacements = (typeof TooltipPlacements)[number];
+export type Props = {
+    children: React.ReactElement;
+    triggerOpen?: boolean;
+    className?: string;
+    mode?: TooltipModes;
+    placement?: TooltipPlacements;
+    title: string;
+    desc?: string;
+    cancel?: {
+        label: string;
+        onClick: () => void;
+        icon?: string;
+    };
+    confirm?: {
+        label: string;
+        onClick: () => void;
+        icon?: string;
+    };
+};
+export default function TooltipComponent({ children, mode, placement, title, desc, cancel, confirm, triggerOpen, className, }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Tooltip/Tooltip.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@mui/material";
+import Button from "../Button";
+import Icon from "../Icon";
+import "./styles.scss";
+export const TooltipModes = ["simple", "confirmation", "delete"];
+export const TooltipPlacements = [
+    "auto-end",
+    "auto-start",
+    "auto",
+    "bottom-end",
+    "bottom-start",
+    "bottom",
+    "left-end",
+    "left-start",
+    "left",
+    "right-end",
+    "right-start",
+    "right",
+    "top-end",
+    "top-start",
+    "top",
+];
+export default function TooltipComponent({ children, mode = "simple", placement = "bottom", title, desc, cancel, confirm, triggerOpen, className, }) {
+    const tooltipSimpleClassName = ["ds-tooltip-simple", className].filter(Boolean).join(" ");
+    const tooltipComplexClassName = ["ds-tooltip", className].filter(Boolean).join(" ");
+    const renderSimple = () => (_jsx(Tooltip, { title: title, placement: placement, open: triggerOpen !== undefined ? triggerOpen : undefined, arrow: true, classes: {
+            tooltip: tooltipSimpleClassName,
+            popper: "ds-tooltip-popper",
+        }, children: children }));
+    const renderInnerComplex = () => (_jsxs("div", { className: "tooltip-box", children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: mode === "delete" ? "delete" : "help_center", size: "small", className: mode, filled: mode === "confirmation" }), _jsxs("div", { className: "texts", children: [_jsx("div", { className: "title", children: title }), _jsx("div", { className: "desc", children: desc || "" })] })] }), _jsxs("div", { className: "footer", children: [cancel && (_jsx(Button, { text: cancel.label, size: "x-small", mode: "ghost", onClick: cancel.onClick, color: mode === "delete" ? "danger" : "white", icon: cancel.icon })), confirm && (_jsx(Button, { text: confirm.label, size: "x-small", mode: "filled", onClick: confirm.onClick, color: mode === "delete" ? "danger" : "white", icon: confirm.icon }))] })] }));
+    const renderComplex = () => (_jsx(Tooltip, { classes: {
+            tooltip: tooltipComplexClassName,
+            popper: "ds-tooltip-popper",
+        }, title: renderInnerComplex(), placement: placement, arrow: true, open: triggerOpen !== undefined ? triggerOpen : undefined, disableFocusListener: triggerOpen !== undefined, disableHoverListener: triggerOpen !== undefined, disableTouchListener: triggerOpen !== undefined, children: children }));
+    return mode === "simple" ? renderSimple() : renderComplex();
+}

package/dist/basic/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip';
+export default Tooltip;

package/dist/basic/Tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from './Tooltip';
+export default Tooltip;

package/dist/basic/Tooltip/styles.scss

@@ -0,0 +1,73 @@
+.ds-tooltip-popper .MuiTooltip-tooltip {
+  display: flex;
+  align-items: center;
+  background-color: var(--layer-tooltip) !important;
+  min-height: 40px;
+  max-width: 280px;
+  padding: var(--spacing-100) var(--spacing-150);
+  border-radius: var(--radius-100);
+  @include body-medium-1;
+  margin-top: 8px !important;
+}
+
+// Arrow styles scoped to our tooltip component
+.ds-tooltip-popper .MuiTooltip-arrow {
+  color: var(--layer-tooltip) !important;
+}
+
+.ds-tooltip {
+  display: flex;
+  align-items: center;
+  max-width: unset !important;
+  border-radius: var(--radius-100);
+  padding: 0px !important;
+  height: auto !important;
+  box-shadow: var(--miscellaneous-shadow-2);
+
+  .tooltip-box {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+
+    > .body {
+      display: flex;
+      gap: 8px;
+      padding: 16px 16px 8px;
+
+      > .ds-icon {
+        &.delete {
+          color: var(--icon-error);
+        }
+
+        &.confirmation {
+          color: var(--icon-info);
+        }
+      }
+
+      > .texts {
+        > .title {
+          @include label-medium-2;
+          color: var(--text-light-fixed);
+          margin-bottom: 4px;
+        }
+
+        > .desc {
+          @include helper-large-1;
+          color: var(--text-light-fixed);
+        }
+      }
+    }
+
+    > .footer {
+      display: flex;
+      padding: 8px 16px 16px;
+      gap: 8px;
+      margin-left: auto;
+    }
+  }
+}
+
+.ds-tooltip-simple {
+  padding: 8px 16px !important;
+  height: 100%;
+}

package/dist/basic/VerticalButton/VerticalButton.d.ts

@@ -0,0 +1,6 @@
+import './styles.scss';
+export type Props = JSX.IntrinsicElements['div'] & {
+    text: string;
+    className?: string;
+};
+export default function VerticalButton({ className, text, onClick }: Props): import("react").JSX.Element;

package/dist/basic/VerticalButton/VerticalButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+import Icon from '../Icon';
+export default function VerticalButton({ className, text, onClick }) {
+    const getClassNames = cx('ds-vertical-button', className);
+    return (_jsxs("div", { className: getClassNames, onClick: (e) => onClick && onClick(e), children: [_jsx(Icon, { name: "add_circle", size: "small" }), _jsx("span", { children: text })] }));
+}

package/dist/basic/VerticalButton/index.d.ts

@@ -0,0 +1,2 @@
+import VerticalButton from './VerticalButton';
+export default VerticalButton;

package/dist/basic/VerticalButton/index.js

@@ -0,0 +1,2 @@
+import VerticalButton from './VerticalButton';
+export default VerticalButton;

package/dist/basic/VerticalButton/styles.scss

@@ -0,0 +1,24 @@
+.ds-vertical-button {
+  @include label-small-1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  white-space: nowrap;
+  padding: var(--spacing-100) var(--spacing-150);
+  cursor: pointer;
+
+  > span {
+    margin-top: 8px;
+  }
+
+  &:hover {
+    background-color: var(--layer-field-hover);
+    color: var(--text-on-color-accent);
+
+    > .ds-icon {
+      color: var(--icon-on-color-accent);
+    }
+  }
+}

package/dist/basic/fonts.d.ts

@@ -0,0 +1 @@
+export declare const injectFontFaces: () => void;

package/dist/basic/fonts.js

@@ -0,0 +1,111 @@
+// Fallback
+import materialSymbolsOutlined from './fonts/material-symbols-outlined.woff2';
+// Work Sans fonts (single imports reused in multiple weights/ranges)
+import workSansVietnamese from './fonts/work-sans-vietnamese.woff2';
+import workSansLatinExt from './fonts/work-sans-latin-ext.woff2';
+import workSansLatin from './fonts/work-sans-latin.woff2';
+export const injectFontFaces = () => {
+    const style = document.createElement('style');
+    style.textContent = `
+    /* Material Symbols Outlined fallback */
+    @font-face {
+      font-family: 'Material Symbols Outlined';
+      font-style: normal;
+      font-weight: 200;
+      font-display: swap;
+      src: url(${materialSymbolsOutlined}) format('woff2');
+    }
+
+    /* Work Sans 300 - vietnamese */
+    @font-face {
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 300;
+      font-display: swap;
+      src: url(${workSansVietnamese}) format('woff2');
+      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+    }
+    /* Work Sans 300 - latin-ext */
+    @font-face {
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 300;
+      font-display: swap;
+      src: url(${workSansLatinExt}) format('woff2');
+      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    }
+    /* Work Sans 300 - latin */
+    @font-face {
+      font-family: 'Work Sans';
+      font-style: normal;
+      font-weight: 300;
+      font-display: swap;
+      src: url(${workSansLatin}) format('woff2');
+      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+        U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    /* Repeat for each weight: 400, 500, 600, 700, 800 */
+
+    ${[400, 500, 600, 700, 800]
+        .map((weight) => `
+      /* Work Sans ${weight} - vietnamese */
+      @font-face {
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: ${weight};
+        font-display: swap;
+        src: url(${workSansVietnamese}) format('woff2');
+        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+          U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+          U+0329, U+1EA0-1EF9, U+20AB;
+      }
+      /* Work Sans ${weight} - latin-ext */
+      @font-face {
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: ${weight};
+        font-display: swap;
+        src: url(${workSansLatinExt}) format('woff2');
+        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+          U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+          U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+      }
+      /* Work Sans ${weight} - latin */
+      @font-face {
+        font-family: 'Work Sans';
+        font-style: normal;
+        font-weight: ${weight};
+        font-display: swap;
+        src: url(${workSansLatin}) format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+          U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+          U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+    `)
+        .join('')}
+
+    /* Material Symbols utility class */
+    .material-symbols-outlined {
+      font-family: 'Material Symbols Outlined';
+      font-weight: normal;
+      font-style: normal;
+      font-size: 24px;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      display: inline-block;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      -webkit-font-feature-settings: 'liga';
+      -webkit-font-smoothing: antialiased;
+    }
+  `;
+    document.head.appendChild(style);
+};