lecom-ui 5.3.10 → 5.3.12

package/README.md

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

package/dist/components/Button/Button.js

@@ -12,8 +12,7 @@ const buttonVariants = cva(
         filled: "",
         outlined: "",
         tonal: "",
-        ghost: "",
-        datepicker: "border border-input bg-background text-grey-800 hover:bg-accent hover:text-accent-foreground"
+        ghost: ""
       },
       size: {
         small: "h-8 px-3 py-2 text-sm leading-none [&>svg]:w-5 [&>svg]:h-5",

package/dist/components/Calendar/Calendar.js

@@ -12,7 +12,7 @@ function Calendar({
   yearRange = 12,
   numberOfMonths,
   components,
-  variant = "datepicker",
+  variant = "ghost",
   color = "grey",
   ...props
 }) {
@@ -48,7 +48,7 @@ function Calendar({
     props.captionLabelClassName
   );
   const buttonNavClassName = buttonVariants({
-    variant: variant === "datepicker" ? "ghost" : variant || "ghost",
+    variant: variant || "ghost",
     color: color ?? "grey",
     className: "absolute h-7 w-7 bg-transparent p-0 text-muted-foreground hover:text-foreground"
   });
@@ -71,7 +71,7 @@ function Calendar({
   );
   const _dayButtonClassName = cn(
     buttonVariants({
-      variant: variant === "datepicker" ? "ghost" : variant || "ghost",
+      variant: variant || "ghost",
       color: color ?? "grey"
     }),
     "size-8 rounded-md p-0 font-normal transition-none aria-selected:bg-primary aria-selected:text-primary-foreground",
@@ -290,7 +290,7 @@ function Nav({
   return /* @__PURE__ */ React.createElement("nav", { className: cn("flex items-center", className) }, /* @__PURE__ */ React.createElement(
     Button,
     {
-      variant: variant || "datepicker",
+      variant: variant || "ghost",
       color,
       className: "absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
       type: "button",
@@ -303,7 +303,7 @@ function Nav({
   ), /* @__PURE__ */ React.createElement(
     Button,
     {
-      variant: variant || "datepicker",
+      variant: variant || "ghost",
       color,
       className: "absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
       type: "button",

package/dist/components/DataTable/DataTable.utils.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { clsx } from 'clsx';
+import { cn } from '../../lib/utils.js';
 import { ArrowUpDown } from 'lucide-react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Typography } from '../Typography/Typography.js';
@@ -54,32 +54,45 @@ function buildColumns({
       }
       const hasSort = !!externalColumn.onSort || !!externalColumn.onSortClient;
       const title = typeof externalColumn.title === "function" ? externalColumn.title({ table, column }) : externalColumn.title;
+      function renderSortArrow() {
+        if (!hasSort) {
+          return null;
+        }
+        return /* @__PURE__ */ React.createElement(
+          ArrowUpDown,
+          {
+            size: 16,
+            className: "ml-1 text-grey-400 group-hover:text-grey-950 hover:cursor-pointer",
+            onClick: (e) => {
+              e.stopPropagation();
+              const handler = column.getToggleSortingHandler?.();
+              if (handler) handler(e);
+              else if (externalColumn.onSort) {
+                externalColumn.onSort({ table, column });
+              }
+            }
+          }
+        );
+      }
       return /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: clsx(
+          className: cn(
             "group flex items-center gap-1",
             hasSort && "hover:cursor-pointer"
-          ),
-          onClick: () => externalColumn.onSort?.({ table, column })
+          )
         },
         typeof externalColumn.title === "string" ? /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: size === "small" ? "body-medium-500" : "body-large-500",
             textColor: "text-grey-950",
-            className: "truncate",
+            className: "whitespace-normal break-words max-sm:truncate",
             title: externalColumn.title
           },
           externalColumn.title
         ) : title,
-        hasSort && /* @__PURE__ */ React.createElement(
-          ArrowUpDown,
-          {
-            size: 16,
-            className: "text-grey-400 group-hover:text-grey-950"
-          }
-        )
+        renderSortArrow()
       );
     },
     cell: ({ row }) => {

package/dist/index.d.ts

@@ -69,7 +69,7 @@ declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<Accordion
 } & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "ghost" | "filled" | "outlined" | "tonal" | "datepicker" | null | undefined;
+    variant?: "ghost" | "filled" | "outlined" | "tonal" | null | undefined;
     size?: "small" | "medium" | "large" | "extraLarge" | null | undefined;
     color?: "blue" | "grey" | "destructive" | null | undefined;
     iconButton?: boolean | null | undefined;
@@ -898,7 +898,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 | 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"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLInputElement | HTMLLabelElement | 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,78 +1,78 @@
-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',
-  },
-};
-
-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',
+  },
+};
+
+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 };