lecom-ui 5.3.86 → 5.3.88

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { cva } from 'class-variance-authority';
+import { ChevronRight } from 'lucide-react';
+
+const collapseTriggerVariants = cva(
+  "flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
+  {
+    variants: {
+      size: {
+        small: "text-sm py-1.5 px-4 min-h-8",
+        medium: "text-base py-2.5 px-4 min-h-10",
+        large: "text-lg py-3 px-4 min-h-12"
+      },
+      ghost: {
+        true: "bg-transparent border-none",
+        false: "border-t-none border-grey-400"
+      }
+    },
+    defaultVariants: {
+      size: "large",
+      ghost: false
+    }
+  }
+);
+const CollapseRoot = AccordionPrimitive.Root;
+const CollapseItem = AccordionPrimitive.Item;
+const CollapsePanel = React.forwardRef(
+  ({
+    header,
+    children,
+    extra,
+    expandIconPosition = "start",
+    size = "large",
+    ghost = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ React.createElement(
+    CollapseItem,
+    {
+      ref,
+      ...props,
+      className: cn(
+        "group w-full",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
+      {
+        disabled,
+        className: cn(
+          collapseTriggerVariants({ size, ghost }),
+          "flex gap-2 items-center text-left font-normal"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "flex flex-1 items-center justify-between gap-4 w-full",
+            expandIconPosition === "end" ? "flex-row-reverse" : ""
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
+          },
+          /* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
+        ), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
+        extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
+      )
+    )),
+    /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Content,
+      {
+        className: cn(
+          "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
+    )
+  )
+);
+CollapsePanel.displayName = "CollapsePanel";
+const Collapse = Object.assign(CollapseRoot, {
+  Panel: CollapsePanel
+});
+
+export { Collapse, collapseTriggerVariants };

package/dist/components/DatePicker/DatePicker.js

@@ -53,7 +53,7 @@ function DatePicker({
       onSelect: handleSelect,
       autoFocus: true,
       locale,
-      variant: calendarVariant || variant,
+      variant: calendarVariant === "datepicker" ? variant : calendarVariant || variant,
       color: calendarColor ?? color ?? void 0
     }
   )));

package/dist/components/MultiSelect/MultiSelect.js

@@ -492,7 +492,7 @@ const MultiSelect = React.forwardRef(
           const selectedOption = options.find((option) => option.value === value2);
           const label = findTreeLabel(value2) || selectedOption?.label || value2;
           const prefix = selectedOption?.prefix;
-          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
+          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
             Typography,
             {
               className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
@@ -617,7 +617,7 @@ const MultiSelect = React.forwardRef(
                   },
                   /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
                 ),
-                /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+                /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
                   Typography,
                   {
                     variant: getFontVariant(size),
@@ -650,7 +650,7 @@ const MultiSelect = React.forwardRef(
               },
               /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
             ),
-            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
               Typography,
               {
                 variant: getFontVariant(size),

package/dist/index.d.ts

@@ -962,7 +962,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLUListElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/dist/plugin/extend.js

@@ -1,79 +1,79 @@
-const extend = {
-  colors: {
-    background: 'hsl(var(--background))',
-    foreground: 'hsl(var(--foreground))',
-    card: {
-      DEFAULT: 'hsl(var(--card))',
-      foreground: 'hsl(var(--card-foreground))',
-    },
-    popover: {
-      DEFAULT: 'hsl(var(--popover))',
-      foreground: 'hsl(var(--popover-foreground))',
-    },
-    primary: {
-      DEFAULT: 'hsl(var(--primary))',
-      foreground: 'hsl(var(--primary-foreground))',
-    },
-    secondary: {
-      DEFAULT: 'hsl(var(--secondary))',
-      foreground: 'hsl(var(--secondary-foreground))',
-    },
-    muted: {
-      DEFAULT: 'hsl(var(--muted))',
-      foreground: 'hsl(var(--muted-foreground))',
-    },
-    accent: {
-      DEFAULT: 'hsl(var(--accent))',
-      foreground: 'hsl(var(--accent-foreground))',
-    },
-    destructive: {
-      DEFAULT: 'hsl(var(--destructive))',
-      foreground: 'hsl(var(--destructive-foreground))',
-    },
-    border: 'hsl(var(--border))',
-    input: 'hsl(var(--input))',
-    ring: 'hsl(var(--ring))',
-    chart: {
-      1: 'hsl(var(--chart-1))',
-      2: 'hsl(var(--chart-2))',
-      3: 'hsl(var(--chart-3))',
-      4: 'hsl(var(--chart-4))',
-      5: 'hsl(var(--chart-5))',
-      6: 'hsl(var(--chart-6))',
-      7: 'hsl(var(--chart-7))',
-      8: 'hsl(var(--chart-8))',
-    },
-    sidebar: {
-      DEFAULT: 'hsl(var(--sidebar-background))',
-      foreground: 'hsl(var(--sidebar-foreground))',
-      primary: 'hsl(var(--sidebar-primary))',
-      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-      accent: 'hsl(var(--sidebar-accent))',
-      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-      border: 'hsl(var(--sidebar-border))',
-      ring: 'hsl(var(--sidebar-ring))',
-    },
-  },
-  borderRadius: {
-    lg: 'var(--radius)',
-    md: 'calc(var(--radius) - 2px)',
-    sm: 'calc(var(--radius) - 4px)',
-  },
-  keyframes: {
-    'accordion-down': {
-      from: { height: '0' },
-      to: { height: 'var(--radix-accordion-content-height)' },
-    },
-    'accordion-up': {
-      from: { height: 'var(--radix-accordion-content-height)' },
-      to: { height: '0' },
-    },
-  },
-  animation: {
-    'accordion-down': 'accordion-down 0.2s ease-out',
-    'accordion-up': 'accordion-up 0.2s ease-out',
-    'spin-slow': 'spin 2s linear infinite',
-  },
-};
-
-export { extend };
+const extend = {
+  colors: {
+    background: 'hsl(var(--background))',
+    foreground: 'hsl(var(--foreground))',
+    card: {
+      DEFAULT: 'hsl(var(--card))',
+      foreground: 'hsl(var(--card-foreground))',
+    },
+    popover: {
+      DEFAULT: 'hsl(var(--popover))',
+      foreground: 'hsl(var(--popover-foreground))',
+    },
+    primary: {
+      DEFAULT: 'hsl(var(--primary))',
+      foreground: 'hsl(var(--primary-foreground))',
+    },
+    secondary: {
+      DEFAULT: 'hsl(var(--secondary))',
+      foreground: 'hsl(var(--secondary-foreground))',
+    },
+    muted: {
+      DEFAULT: 'hsl(var(--muted))',
+      foreground: 'hsl(var(--muted-foreground))',
+    },
+    accent: {
+      DEFAULT: 'hsl(var(--accent))',
+      foreground: 'hsl(var(--accent-foreground))',
+    },
+    destructive: {
+      DEFAULT: 'hsl(var(--destructive))',
+      foreground: 'hsl(var(--destructive-foreground))',
+    },
+    border: 'hsl(var(--border))',
+    input: 'hsl(var(--input))',
+    ring: 'hsl(var(--ring))',
+    chart: {
+      1: 'hsl(var(--chart-1))',
+      2: 'hsl(var(--chart-2))',
+      3: 'hsl(var(--chart-3))',
+      4: 'hsl(var(--chart-4))',
+      5: 'hsl(var(--chart-5))',
+      6: 'hsl(var(--chart-6))',
+      7: 'hsl(var(--chart-7))',
+      8: 'hsl(var(--chart-8))',
+    },
+    sidebar: {
+      DEFAULT: 'hsl(var(--sidebar-background))',
+      foreground: 'hsl(var(--sidebar-foreground))',
+      primary: 'hsl(var(--sidebar-primary))',
+      'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+      accent: 'hsl(var(--sidebar-accent))',
+      'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+      border: 'hsl(var(--sidebar-border))',
+      ring: 'hsl(var(--sidebar-ring))',
+    },
+  },
+  borderRadius: {
+    lg: 'var(--radius)',
+    md: 'calc(var(--radius) - 2px)',
+    sm: 'calc(var(--radius) - 4px)',
+  },
+  keyframes: {
+    'accordion-down': {
+      from: { height: '0' },
+      to: { height: 'var(--radix-accordion-content-height)' },
+    },
+    'accordion-up': {
+      from: { height: 'var(--radix-accordion-content-height)' },
+      to: { height: '0' },
+    },
+  },
+  animation: {
+    'accordion-down': 'accordion-down 0.2s ease-out',
+    'accordion-up': 'accordion-up 0.2s ease-out',
+    'spin-slow': 'spin 2s linear infinite',
+  },
+};
+
+export { extend };

package/dist/plugin/fontFaces.js

@@ -1,172 +1,172 @@
-const fontFaces = (publicPath) => [
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '100',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/thin-100-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '300',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/light-300-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '400',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/regular-400-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '500',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/medium-500-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '700',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/bold-700-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'italic',
-    fontWeight: '900',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/black-900-italic.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '100',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/thin-100.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '300',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/light-300.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/regular-400.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/medium-500.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '700',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/bold-700.woff2')`,
-  },
-  {
-    fontFamily: 'Roboto',
-    fontStyle: 'normal',
-    fontWeight: '900',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Roboto/black-900.woff2')`,
-  },
-  {
-    fontFamily: 'Montserrat',
-    fontStyle: 'italic',
-    fontWeight: '100 900',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Montserrat/italic.woff2')`,
-  },
-  {
-    fontFamily: 'Montserrat',
-    fontStyle: 'normal',
-    fontWeight: '100 900',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Montserrat/normal.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'italic',
-    fontWeight: '100',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/thin-100-italic.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'italic',
-    fontWeight: '300',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/light-300-italic.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'italic',
-    fontWeight: '400',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/regular-400-italic.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'italic',
-    fontWeight: '500',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/medium-500-italic.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'italic',
-    fontWeight: '700',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/bold-700-italic.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'normal',
-    fontWeight: '100',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/thin-100.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'normal',
-    fontWeight: '300',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/light-300.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/regular-400.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'normal',
-    fontWeight: '500',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/medium-500.woff2')`,
-  },
-  {
-    fontFamily: 'IBM Plex Mono',
-    fontStyle: 'normal',
-    fontWeight: '700',
-    fontDisplay: 'swap',
-    src: `url('${publicPath}/fonts/Ibm/bold-700.woff2')`,
-  },
-];
-
-export { fontFaces };
+const fontFaces = (publicPath) => [
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '100',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/thin-100-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '300',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/light-300-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '400',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/regular-400-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '500',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/medium-500-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '700',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/bold-700-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'italic',
+    fontWeight: '900',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/black-900-italic.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '100',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/thin-100.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '300',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/light-300.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/regular-400.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/medium-500.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/bold-700.woff2')`,
+  },
+  {
+    fontFamily: 'Roboto',
+    fontStyle: 'normal',
+    fontWeight: '900',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Roboto/black-900.woff2')`,
+  },
+  {
+    fontFamily: 'Montserrat',
+    fontStyle: 'italic',
+    fontWeight: '100 900',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Montserrat/italic.woff2')`,
+  },
+  {
+    fontFamily: 'Montserrat',
+    fontStyle: 'normal',
+    fontWeight: '100 900',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Montserrat/normal.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'italic',
+    fontWeight: '100',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/thin-100-italic.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'italic',
+    fontWeight: '300',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/light-300-italic.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'italic',
+    fontWeight: '400',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/regular-400-italic.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'italic',
+    fontWeight: '500',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/medium-500-italic.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'italic',
+    fontWeight: '700',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/bold-700-italic.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'normal',
+    fontWeight: '100',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/thin-100.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'normal',
+    fontWeight: '300',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/light-300.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/regular-400.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/medium-500.woff2')`,
+  },
+  {
+    fontFamily: 'IBM Plex Mono',
+    fontStyle: 'normal',
+    fontWeight: '700',
+    fontDisplay: 'swap',
+    src: `url('${publicPath}/fonts/Ibm/bold-700.woff2')`,
+  },
+];
+
+export { fontFaces };