@inceptionbg/iui 2.0.5 → 2.0.6

package/idea/Table2/_table.scss

@@ -0,0 +1,300 @@
+table {
+  border-spacing: 0px;
+  border-collapse: collapse;
+}
+// .iui-table {
+//   //// Header ////
+//   th {
+//     border-bottom: var(--table-border);
+//     font-size: var(--fs-m);
+//     &:last-child {
+//       .vertical-separator {
+//         display: none;
+//       }
+//     }
+//   }
+//   .table-container {
+//     overflow: auto;
+//     // scroll-snap-type: y mandatory;
+//   }
+//   .sticky-header {
+//     position: sticky;
+//     top: 0;
+//     background-color: white;
+//   }
+//   .vertical-separator {
+//     height: 14px;
+//     width: 2px;
+//     background-color: #00000030;
+//   }
+
+//   //// Body ////
+//   tbody.no-last-border tr:last-child td {
+//     border: none;
+//   }
+//   // Row
+//   tr {
+//     // scroll-snap-align: start;
+//     margin-bottom: 2px;
+//     &.clickable:hover,
+//     &.selected {
+//       background-color: rgba(0, 0, 0, 0.05);
+//     }
+//     &.focused {
+//       background-color: var(--primary-o10);
+//     }
+//     &.loading {
+//       opacity: 0.5;
+//       pointer-events: none;
+//     }
+//   }
+//   // Cell
+//   th,
+//   td {
+//     // Cell colors
+//     &.secondary {
+//       background-color: rgba(0, 0, 0, 0.04);
+//       border-bottom: 1px solid #d3d3d3;
+//     }
+//   }
+//   td {
+//     height: 52px;
+//     padding: 7px 16px;
+//     font-size: var(--fs-m);
+//     box-sizing: border-box;
+//     border-bottom: var(--table-border);
+//   }
+//   .clickable-column:hover {
+//     background-color: var(--primary-o10) !important;
+//   }
+
+//   //// Footer ////
+
+//   .table-footer {
+//     display: flex;
+//     align-items: center;
+//     width: 100%;
+//     height: 52px;
+//     padding: 7px 16px;
+//     font-size: var(--fs-m);
+//     box-sizing: border-box;
+//   }
+//   .pagination {
+//     display: flex;
+//     align-items: center;
+//     color: rgba(0, 0, 0, 0.8);
+//     @media #{$bp-mobile} {
+//       flex-direction: column;
+//       align-items: end;
+//     }
+//     select {
+//       color: rgba(0, 0, 0, 0.8);
+//       background: none;
+//       border: none;
+//       text-align: right;
+//       cursor: pointer;
+//       padding: 0 8px;
+//       user-select: none;
+//       margin-left: 8px;
+//       margin-right: 16px;
+//     }
+//     .offset-input {
+//       width: 30px;
+//       border: none;
+//       border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+//       background: none;
+//       text-align: center;
+//       padding: 5px 0;
+//     }
+//   }
+
+//   @media #{$portrait} {
+//     tbody,
+//     tr {
+//       display: block;
+//     }
+//     tr {
+//       padding: 20px 0;
+//     }
+//     td {
+//       display: flex;
+//       align-items: center;
+//       height: unset !important;
+//       text-align: left;
+//     }
+//     thead {
+//       display: none;
+//     }
+//     tbody tr td {
+//       &:before {
+//         content: attr(data-th);
+//         font-weight: bold;
+//         text-align: left;
+//         padding-right: 10px;
+//       }
+//     }
+//   }
+// }
+
+.iui-table-filter {
+  .iui-dialog-content {
+    padding: 0;
+    margin: 8px 0;
+  }
+  .filters-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    .search-input {
+      max-width: 250px;
+    }
+  }
+  .table-filter-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    .label {
+      width: 150px;
+    }
+    .field {
+      display: inline-flex;
+      margin: 0 8px;
+      width: 100%;
+    }
+  }
+}
+
+.dual-list-container {
+  .dual-list-content {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 12px;
+  }
+  .list-box {
+    border: var(--table-border);
+    border-radius: 16px;
+    padding: 10px;
+    user-select: none;
+    & > .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px;
+      font-size: 12px;
+      svg {
+        color: rgba(0, 0, 0, 0.6);
+        margin-left: 1rem;
+      }
+      &:hover {
+        background-color: var(--primary-o10);
+      }
+      &:active {
+        background-color: var(--primary-o25);
+      }
+    }
+  }
+  .exchange-icon {
+    display: flex;
+    align-items: center;
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}
+
+.edit-row {
+  background: #3d497714;
+}
+.primary-row {
+  background-color: rgba(var(--primary-rgb), 0.15);
+}
+.secondary-row {
+  background-color: #f1f1f1;
+}
+
+.table-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  .table-options-btn {
+    background: var(--background-dark);
+    border-radius: 4px;
+    font-weight: 700;
+    &:hover {
+      background-color: #dfe1eb !important;
+    }
+    svg {
+      height: 12px;
+      width: 12px;
+    }
+  }
+}
+
+//
+
+.grid-table {
+  display: grid;
+  // grid-template-rows: auto 1fr; /* Header auto height, body fills */
+  grid-template-columns: repeat(9, auto); /* Adjust based on columns */
+  thead,
+  tbody {
+    display: contents;
+  }
+
+  tbody {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+  // thead {
+  // position: sticky;
+  // top: 0;
+  // background: #f9f9f9;
+  // z-index: 1;
+  // }
+
+  // tbody {
+  //   display: grid;
+  //   grid-template-columns: repeat(3, 1fr); /* Match columns */
+  // }
+
+  tr {
+    display: contents; /* Allows rows to use the grid structure */
+  }
+
+  th,
+  td {
+    box-sizing: border-box;
+    display: flex;
+    padding: 12px;
+    flex-grow: 1;
+    align-items: center;
+    min-height: 20px;
+    border: 1px solid #ddd; /* Apply borders to th and td */
+  }
+
+  // th:first-child,
+  // td:first-child {
+  //   border-left: none; /* Remove left border for the first column */
+  // }
+
+  // tr:last-child .td {
+  //   border-bottom: none; /* Remove bottom border from the last row */
+  // }
+
+  th {
+    background-color: #f4f4f4; /* Light background for the header */
+  }
+
+  tr:hover {
+    outline: 2px solid #007bff;
+    background: #6aa1ce;
+  }
+
+  tr + tr td {
+    border-top: none; /* Remove top border from subsequent rows */
+  }
+}

package/idea/Table2/hooks/useDefaultTemplate.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getDefaultReportTemplate } from '../Components/Templates/repo/TemplateRepo';
+import { IReportTemplate } from '../../../types/ITable';
+
+export const useDefaultTemplate = (identifier?: string) => {
+  const [template, setTemplate] = useState<IReportTemplate | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (identifier) {
+      getDefaultReportTemplate(identifier)
+        .then(setTemplate)
+        .catch(() => {})
+        .finally(() => setIsLoading(false));
+    }
+  }, [identifier]);
+
+  return {
+    defaultTemplate: template,
+    isLoadingDefaultTemplate: !!identifier && isLoading,
+  };
+};

package/idea/Table2/hooks/useTableKeyboard.ts

@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react';
+import { ITableDataItem } from '../../../types/ITable';
+import { IKeyboardAction, ITableKeyboardActionsProp } from '../../../types/IKeyboard';
+import { useDialogObserver } from '../../Dialog/hooks/useDialogObserver';
+import { scrollToRow } from '../../../utils/TableUtils';
+
+export const useTableKeyboard = ({
+  enabled,
+  rows,
+  actions,
+}: {
+  enabled: boolean;
+  rows: ITableDataItem[];
+  actions: ITableKeyboardActionsProp;
+}) => {
+  const [focusedRow, setFocusedRow] = useState<ITableDataItem | null>(null);
+  const isDialogOpen = useDialogObserver();
+
+  useEffect(() => {
+    if (enabled && !isDialogOpen) {
+      const isEditing = !!actions.edit?.item;
+      const isAdding = !!actions.add?.isAdding;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        const isControlKeyPressed = event.ctrlKey || event.metaKey;
+        const rowIndex = focusedRow
+          ? rows.findIndex(row => row.uuid === focusedRow.uuid)
+          : -1;
+
+        const allActions: IKeyboardAction[] = [
+          {
+            key: 'ArrowDown',
+            isActive: !isEditing && !actions.moveDisabled,
+            onAction: () => {
+              // Leave action enabled to prevent default scroll movement
+              const nextRow = rowIndex + 1;
+              if (nextRow < rows.length) {
+                // rowIndex will be -1 if no row is selected so the next row will be 0
+                setFocusedRow(rows[nextRow]);
+                scrollToRow(rows[nextRow].uuid);
+              }
+            },
+          },
+          {
+            key: 'ArrowUp',
+            isActive: !isEditing && !actions.moveDisabled,
+            onAction: () => {
+              if (rowIndex !== 0) {
+                const prevRow = rowIndex > 0 ? rowIndex - 1 : rows.length - 1;
+                setFocusedRow(rows[prevRow]);
+                scrollToRow(rows[prevRow].uuid);
+              }
+            },
+          },
+          {
+            key: 'e',
+            normalizedKey: true,
+            ctrl: true,
+            isActive: !!actions.edit?.enabled && !!focusedRow,
+            onAction: () => !isEditing && actions.edit?.setItem(focusedRow?.item ?? null),
+          },
+          {
+            key: 'Enter',
+            isActive: !isEditing && !isAdding && !!focusedRow?.onRowClick,
+            onAction: focusedRow?.onRowClick!,
+          },
+          {
+            key: 'Escape',
+            isActive: !!focusedRow || !!isAdding,
+            onAction: () =>
+              isAdding
+                ? actions.add?.setIsAdding(false)
+                : actions.edit?.item
+                ? actions.edit?.setItem(null)
+                : setFocusedRow(null),
+          },
+          {
+            key: 'Insert',
+            isActive: !!actions.add?.enabled && !isAdding,
+            onAction: () => {
+              actions.add?.setIsAdding(true);
+              setFocusedRow(null);
+            },
+          },
+          {
+            key: 'Delete',
+            isActive: !isEditing && !!actions.delete?.enabled && !!focusedRow,
+            onAction: () =>
+              actions.delete?.onAction ?? actions.delete?.setItemUuid(focusedRow!.uuid),
+          },
+          ...(actions?.additional?.({ focusedRow, isEditing, isAdding }) || []),
+        ];
+
+        allActions.forEach(item => {
+          if (
+            item.isActive &&
+            item.key === (item.normalizedKey ? event.key.toLowerCase() : event.key) &&
+            !!item.ctrl === isControlKeyPressed
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            item.onAction();
+          }
+        });
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [enabled, rows, focusedRow, actions, isDialogOpen]);
+
+  return focusedRow;
+};

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@inceptionbg/iui",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "UI components, elements & utils for Inception ecosystem",
   "type": "module",
-  "files": [
-    "dist"
-  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./icons": "./dist/icons/index.js",
+    "./styles": "./dist/iui.css"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -39,6 +41,8 @@
     "@types/react": "^19.1.8",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rollup": "^4.44.2",
     "rollup-plugin-delete": "^3.0.1",
     "rollup-plugin-dts": "^6.2.1",

package/rollup.config.js

@@ -0,0 +1,80 @@
+import del from 'rollup-plugin-delete';
+// import resolve from "@rollup/plugin-node-resolve";
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import dts from 'rollup-plugin-dts';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import image from '@rollup/plugin-image';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      exports: 'named',
+      sourcemap: true,
+    },
+    plugins: [
+      del({ targets: 'dist' }),
+      // peerDepsExternal(),
+      // resolve(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        declaration: true,
+        declarationDir: 'dist/types',
+      }),
+      image(),
+      commonjs(),
+      terser(),
+    ],
+  },
+  {
+    input: 'src/assets/icons/index.ts',
+    output: {
+      dir: 'dist/icons',
+      format: 'esm',
+      exports: 'named',
+      sourcemap: false,
+    },
+    plugins: [
+      typescript({
+        tsconfig: './tsconfig.icons.json',
+        // include: ['src/assets/icons/index.ts'],
+        declaration: true,
+        declarationDir: 'dist/icons/types',
+      }),
+      commonjs(),
+      terser(),
+    ],
+  },
+  {
+    input: 'src/styles/App.scss',
+    output: {
+      file: 'dist/iui.css',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      postcss({
+        extract: true,
+        minimize: true,
+      }),
+    ],
+  },
+  {
+    input: 'dist/types/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [dts()],
+  },
+  {
+    input: 'dist/icons/types/assets/icons/index.d.ts',
+    output: [{ file: 'dist/icons/index.d.ts', format: 'es' }],
+    plugins: [dts()],
+  },
+  {
+    input: 'dist/index.js',
+    plugins: [del({ targets: ['dist/types', 'dist/icons/types'] })],
+  },
+];

package/src/assets/icons/duotone/faCircleUser.ts

@@ -0,0 +1,17 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fad";
+const iconName = "circle-user";
+const width = 512;
+const height = 512;
+const unicode = "f2bd";
+const svgPathData = [
+  "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c39.77 0 72 32.24 72 72S295.8 272 256 272c-39.76 0-72-32.24-72-72S216.2 128 256 128zM256 448c-52.93 0-100.9-21.53-135.7-56.29C136.5 349.9 176.5 320 224 320h64c47.54 0 87.54 29.88 103.7 71.71C356.9 426.5 308.9 448 256 448z",
+  "M256 272c39.77 0 72-32.24 72-72S295.8 128 256 128C216.2 128 184 160.2 184 200S216.2 272 256 272zM288 320H224c-47.54 0-87.54 29.88-103.7 71.71C155.1 426.5 203.1 448 256 448s100.9-21.53 135.7-56.29C375.5 349.9 335.5 320 288 320z",
+];
+
+export const faCircleUser: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/index.ts

@@ -0,0 +1,20 @@
+export * from './light/faArrowsUpDown';
+export * from './light/faCheck';
+export * from './light/faChevronDown';
+export * from './light/faChevronRight';
+export * from './light/faCircleInfo';
+export * from './light/faCircleXmark';
+export * from './light/faClockRotateLeft';
+export * from './light/faEllipsisVertical';
+export * from './light/faGear';
+export * from './light/faHouse';
+export * from './light/faIdBadge';
+export * from './light/faLink';
+export * from './light/faMagnifyingGlass';
+export * from './light/faPenField';
+export * from './light/faPrint';
+export * from './light/faQuestion';
+export * from './light/faRotateRight';
+export * from './light/faTrashCan';
+export * from './light/faTriangleExclamation';
+export * from './light/faXmark';

package/src/assets/icons/light/faArrowDownShortWide.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fal';
+const iconName = 'arrow-down-short-wide';
+const width = 576;
+const height = 512;
+const unicode = 'f884';
+const svgPathData =
+  'M304 208h128C440.8 208 448 200.8 448 192s-7.156-16-16-16h-128c-8.844 0-15.1 7.156-15.1 16S295.2 208 304 208zM304 336h192c8.844 0 16-7.156 16-16s-7.156-16-16-16h-192c-8.844 0-15.1 7.156-15.1 16S295.2 336 304 336zM304 80h64c8.844 0 16-7.156 16-16S376.8 48 368 48h-64c-8.844 0-15.1 7.156-15.1 16S295.2 80 304 80zM560 432h-256c-8.844 0-15.1 7.156-15.1 16S295.2 464 304 464h256c8.844 0 16-7.156 16-16S568.8 432 560 432zM224 352c-4.094 0-8.188 1.562-11.31 4.688L144 425.4V48C144 39.16 136.8 32 128 32S112 39.16 112 48v377.4l-68.69-68.69c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62l96 96c6.25 6.25 16.38 6.25 22.62 0l96-96c6.25-6.25 6.25-16.38 0-22.62C232.2 353.6 228.1 352 224 352z';
+
+export const faArrowDownShortWide: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faArrowDownWideShort.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fal';
+const iconName = 'arrow-down-wide-short';
+const width = 576;
+const height = 512;
+const unicode = 'f160';
+const svgPathData =
+  'M368 432h-64c-8.844 0-15.1 7.156-15.1 16S295.2 464 304 464h64c8.844 0 16-7.156 16-16S376.8 432 368 432zM432 304h-128c-8.844 0-15.1 7.156-15.1 16S295.2 336 304 336h128c8.844 0 16-7.156 16-16S440.8 304 432 304zM496 176h-192c-8.844 0-15.1 7.156-15.1 16S295.2 208 304 208h192C504.8 208 512 200.8 512 192S504.8 176 496 176zM560 48h-256c-8.844 0-15.1 7.156-15.1 16S295.2 80 304 80h256C568.8 80 576 72.84 576 64S568.8 48 560 48zM224 352c-4.094 0-8.188 1.562-11.31 4.688L144 425.4V48C144 39.16 136.8 32 128 32S112 39.16 112 48v377.4l-68.69-68.69c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62l96 96c6.25 6.25 16.38 6.25 22.62 0l96-96c6.25-6.25 6.25-16.38 0-22.62C232.2 353.6 228.1 352 224 352z';
+
+export const faArrowDownWideShort: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faArrowUpArrowDown.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fal";
+const iconName = "arrow-up-arrow-down";
+const width = 448;
+const height = 512;
+const unicode = "e099";
+const svgPathData =
+  "M224 160c4.094 0 8.188-1.562 11.31-4.688c6.25-6.25 6.25-16.38 0-22.62l-96-96c-6.25-6.25-16.38-6.25-22.62 0l-96 96c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0L112 86.63V464C112 472.8 119.2 480 128 480s16-7.156 16-16V86.63l68.69 68.69C215.8 158.4 219.9 160 224 160zM427.3 356.7C424.2 353.6 420.1 352 416 352s-8.188 1.562-11.31 4.688L336 425.4V48C336 39.16 328.8 32 320 32s-16 7.156-16 16v377.4l-68.69-68.69c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62l96 96c6.25 6.25 16.38 6.25 22.62 0l96-96C433.6 373.1 433.6 362.9 427.3 356.7z";
+
+export const faArrowUpArrowDown: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faArrowUpRightFromSquare.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fal';
+const iconName = 'arrow-up-right-from-square';
+const width = 384;
+const height = 512;
+const unicode = 'f08e';
+const svgPathData =
+  'M336 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l121.4 0L212.7 276.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 176c0 8.8 7.2 16 16 16s16-7.2 16-16l0-160c0-8.8-7.2-16-16-16L336 0zM64 32C28.7 32 0 60.7 0 96L0 448c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 144c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32L32 96c0-17.7 14.3-32 32-32l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L64 32z';
+
+export const faArrowUpRightFromSquare: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faArrowsToLine.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fal';
+const iconName = 'arrows-to-line';
+const width = 448;
+const height = 512;
+const unicode = 'e0a7';
+const svgPathData =
+  'M235.3 324.7C231.3 320.7 226.5 320 224 320s-7.299 .6547-11.33 4.698l-79.98 79.98C129.6 407.8 128 411.9 128 416c0 8.523 6.865 16 16 16c4.094 0 8.188-1.562 11.31-4.688L208 374.6V496c0 8.844 7.156 16 16 16s16-7.156 16-16v-121.4l52.69 52.69C295.8 430.4 299.9 432 304 432c9.139 0 16-7.477 16-16c0-4.094-1.562-8.188-4.688-11.31L235.3 324.7zM212.7 187.3C214.4 189 218.3 192 224 192s9.609-2.98 11.33-4.707l79.98-79.98C318.4 104.2 320 100.1 320 96c0-8.527-6.865-16-16-16c-4.094 0-8.188 1.562-11.31 4.688L240 137.4V16C240 7.156 232.8 0 224 0S208 7.156 208 16v121.4L155.3 84.69C152.2 81.56 148.1 80 144 80C134.9 80 128 87.47 128 96c0 4.094 1.562 8.188 4.688 11.31L212.7 187.3zM432 240h-416C7.156 240 0 247.1 0 255.1S7.156 272 16 272h416c8.844 0 16-7.165 16-16.01S440.8 240 432 240z';
+
+export const faArrowsToLine: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};

package/src/assets/icons/light/faArrowsUpDown.ts

@@ -0,0 +1,15 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+const prefix = 'fal';
+const iconName = 'arrows-up-down';
+const width = 256;
+const height = 512;
+const unicode = 'f07d';
+const svgPathData =
+  'M139.3 4.688l112 112C254.4 119.8 256 123.9 256 128s-1.562 8.188-4.688 11.31c-6.25 6.25-16.38 6.25-22.62 0L144 54.63v402.8l84.69-84.69c6.25-6.25 16.38-6.25 22.62 0C254.4 375.8 256 379.9 256 384s-1.562 8.188-4.688 11.31l-112 112c-6.25 6.25-16.38 6.25-22.62 0l-112-112c-6.25-6.25-6.25-16.38 0-22.62s16.38-6.25 22.62 0L112 457.4V54.63L27.31 139.3c-6.25 6.25-16.38 6.25-22.62 0s-6.25-16.38 0-22.62l112-112C122.9-1.562 133.1-1.562 139.3 4.688z';
+
+export const faArrowsUpDown: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};