@inceptionbg/iui 1.0.0

package/src/Elements/Helper/NoAccessInfo.tsx

@@ -0,0 +1,195 @@
+import { FC } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "../Button/Button";
+
+interface Props {
+  title?: string;
+  buttonLabel?: string;
+}
+
+export const NoAccessInfo: FC<Props> = ({ title, buttonLabel }) => {
+  const navigate = useNavigate();
+  return (
+    <div className="flex center column mt-5">
+      <svg
+        id="aa03ddf9-f8f2-4819-a4ce-be9b0a220741"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="40%"
+        viewBox="0 0 1119.60911 699"
+      >
+        <title>No Access</title>
+        <circle cx="292.60911" cy="213" r="213" fill="#f2f2f2" />
+        <path
+          d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
+          transform="translate(-31.39089 -100.5)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
+          transform="translate(-31.39089 -100.5)"
+          fill="#4191ff"
+        />
+        <path
+          d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
+          transform="translate(-31.39089 -100.5)"
+          fill="#4191ff"
+        />
+        <path
+          d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
+          transform="translate(-31.39089 -100.5)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#a8a8a8"
+        />
+        <path
+          d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z"
+          transform="translate(-31.39089 -100.5)"
+          opacity="0.2"
+        />
+        <ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56" />
+        <ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
+        <ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56" />
+        <ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56" />
+        <path
+          d="M494,726.5c90,23,263-30,282-90"
+          transform="translate(-31.39089 -100.5)"
+          fill="none"
+          stroke="#2f2e41"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <path
+          d="M341,359.5s130-36,138,80-107,149-17,172"
+          transform="translate(-31.39089 -100.5)"
+          fill="none"
+          stroke="#2f2e41"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <path
+          d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
+          transform="translate(-31.39089 -100.5)"
+          fill="none"
+          stroke="#2f2e41"
+          strokeMiterlimit="10"
+          strokeWidth="2"
+        />
+        <path
+          d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
+          transform="translate(-31.39089 -100.5)"
+          opacity="0.1"
+        />
+        <rect
+          x="578.43291"
+          y="212.68859"
+          width="513.25314"
+          height="357.51989"
+          rx="18.04568"
+          fill="#2f2e41"
+        />
+        <rect
+          x="595.70294"
+          y="231.77652"
+          width="478.71308"
+          height="267.83694"
+          fill="#3f3d56"
+        />
+        <circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2" />
+        <path
+          d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#2f2e41"
+        />
+        <polygon
+          points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
+          fill="#2f2e41"
+        />
+        <path
+          d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
+          transform="translate(-31.39089 -100.5)"
+          opacity="0.1"
+        />
+        <ellipse
+          cx="1066.53846"
+          cy="654.13477"
+          rx="7.87756"
+          ry="2.42386"
+          fill="#f2f2f2"
+        />
+        <circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2" />
+        <polygon
+          points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
+          opacity="0.1"
+        />
+        <rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41" />
+        <rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56" />
+        <rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56" />
+        <rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56" />
+        <rect x="271.60911" y="150" width="16" height="16" fill="#4191ff" opacity="0.4" />
+        <rect x="294.60911" y="150" width="16" height="16" fill="#4191ff" opacity="0.8" />
+        <rect x="317.60911" y="150" width="16" height="16" fill="#4191ff" />
+        <rect x="271.60911" y="251" width="16" height="16" fill="#4191ff" opacity="0.4" />
+        <rect x="294.60911" y="251" width="16" height="16" fill="#4191ff" opacity="0.8" />
+        <rect x="317.60911" y="251" width="16" height="16" fill="#4191ff" />
+        <rect x="271.60911" y="352" width="16" height="16" fill="#4191ff" opacity="0.4" />
+        <rect x="294.60911" y="352" width="16" height="16" fill="#4191ff" opacity="0.8" />
+        <rect x="317.60911" y="352" width="16" height="16" fill="#4191ff" />
+        <circle cx="316.60911" cy="538" r="79" fill="#2f2e41" />
+        <rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41" />
+        <rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41" />
+        <ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41" />
+        <ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41" />
+        <circle cx="318.60911" cy="518" r="27" fill="#fff" />
+        <circle cx="318.60911" cy="518" r="9" fill="#3f3d56" />
+        <path
+          d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#4191ff"
+        />
+        <ellipse
+          cx="417.21511"
+          cy="611.34365"
+          rx="39.5"
+          ry="12.40027"
+          transform="translate(-238.28665 112.98044) rotate(-23.17116)"
+          fill="#2f2e41"
+        />
+        <ellipse
+          cx="269.21511"
+          cy="664.34365"
+          rx="39.5"
+          ry="12.40027"
+          transform="translate(-271.07969 59.02084) rotate(-23.17116)"
+          fill="#2f2e41"
+        />
+        <path
+          d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
+          transform="translate(-31.39089 -100.5)"
+          fill="#fff"
+        />
+      </svg>
+      <h1 className="fs-32 mt-5">{title || "You have no access to this resource"}</h1>
+      <Button
+        label={buttonLabel || "Return to homepage"}
+        className="mt-5"
+        primary
+        size="l"
+        onClick={() => navigate("/")}
+      />
+    </div>
+  );
+};

package/src/Elements/Tooltip/Tooltip.tsx

@@ -0,0 +1,116 @@
+import clsx from "clsx";
+import {
+  cloneElement,
+  Dispatch,
+  FC,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import "./tooltip.scss";
+
+type Position = "left" | "right" | "top" | "bottom";
+interface Props {
+  label?: string;
+  position?: Position;
+  disabled?: boolean;
+  className?: string;
+  children: ReactElement;
+}
+export const Tooltip: FC<Props> = ({
+  label,
+  position = "bottom",
+  disabled,
+  className,
+  children,
+}) => {
+  const [newPosition, setNewPosition] = useState<Position | "">("");
+
+  const containerRef = useRef<any>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!disabled && !!label) {
+      const container = containerRef.current;
+      const tooltip = tooltipRef.current;
+
+      const onMouseEnter = () => {
+        if (container && tooltip) {
+          setAbsolutePosition(container, tooltip, position, setNewPosition);
+          tooltip?.classList.add("visible");
+        }
+      };
+      const onMouseLeave = () => tooltip?.classList.remove("visible");
+
+      container?.addEventListener("mouseenter", onMouseEnter);
+      container?.addEventListener("mouseleave", onMouseLeave);
+
+      return () => {
+        container?.removeEventListener("mouseenter", onMouseEnter);
+        container?.removeEventListener("mouseleave", onMouseLeave);
+      };
+    }
+  }, [disabled, label, position]);
+
+  return !!label && !disabled ? (
+    <>
+      {cloneElement(children, { ref: containerRef })}
+      {createPortal(
+        <div ref={tooltipRef} className={clsx("tooltip-container", className)}>
+          <div className="tooltip">
+            <div className={clsx("arrow", newPosition || position)} />
+            <div>{label}</div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  ) : (
+    children
+  );
+};
+
+const setAbsolutePosition = (
+  containerEl: HTMLDivElement,
+  targetEl: HTMLDivElement,
+  position: Position,
+  setNewPosition: Dispatch<SetStateAction<Position | "">>
+) => {
+  const containerRect = containerEl.getBoundingClientRect();
+  const tooltipRect = targetEl.getBoundingClientRect();
+
+  if (position === "bottom" || position === "top") {
+    const bottom = Math.floor(containerRect.bottom + 16);
+    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
+    const leftCenter = Math.floor(
+      containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
+    );
+    const reverse =
+      position === "top"
+        ? top < 0
+        : bottom + tooltipRect.height > window.innerHeight;
+
+    setNewPosition(reverse ? (position === "bottom" ? "top" : "bottom") : "");
+
+    targetEl.style.top = `${
+      position === "bottom" ? (reverse ? top : bottom) : reverse ? bottom : top
+    }px`;
+    targetEl.style.left = `${leftCenter}px`;
+  } else if (position === "right") {
+    targetEl.style.top =
+      Math.floor(
+        containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+      ) + "px";
+    targetEl.style.left = Math.floor(containerRect.right + 16) + "px";
+  } else if (position === "left") {
+    targetEl.style.top =
+      Math.floor(
+        containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
+      ) + "px";
+    targetEl.style.left =
+      Math.floor(containerRect.left - tooltipRect.width - 16) + "px";
+  }
+};

package/src/Elements/Tooltip/tooltip.scss

@@ -0,0 +1,46 @@
+.tooltip-container {
+  position: fixed;
+  border-radius: 8px;
+  background: #222;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  white-space: nowrap;
+  padding: 8px 16px;
+  text-align: center;
+  z-index: 1001;
+  transition: 0.3s opacity;
+  &:not(.visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+.tooltip {
+  position: relative;
+  height: 100%;
+  .arrow {
+    position: absolute;
+    border: 8px solid #222;
+    z-index: 1001;
+    &.top {
+      top: calc(100% + 8px);
+      left: calc(50% - 8px);
+      border-color: #222 transparent transparent transparent;
+    }
+    &.bottom {
+      bottom: calc(100% + 8px);
+      left: calc(50% - 8px);
+      border-color: transparent transparent #222 transparent;
+    }
+    &.left {
+      top: calc(50% - 8px);
+      left: calc(100% + 16px);
+      border-color: transparent transparent transparent #222;
+    }
+    &.right {
+      top: calc(50% - 8px);
+      right: calc(100% + 16px);
+      border-color: transparent #222 transparent transparent;
+    }
+  }
+}

package/src/Elements/Wrappers/ConditionalWrapper.tsx

@@ -0,0 +1,10 @@
+import { FC, ReactElement } from "react";
+
+interface Props {
+  condition: boolean;
+  wrapper: (children: ReactElement) => ReactElement;
+  children: ReactElement;
+}
+
+export const ConditionalWrapper: FC<Props> = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children;

package/src/Elements/Wrappers/FormWrapper.tsx

@@ -0,0 +1,67 @@
+import { Button } from "Elements/Button/Button";
+import clsx from "clsx";
+import { FC, FormEvent, ReactNode } from "react";
+
+export interface IFormWrapper {
+  isLoading: boolean;
+  className?: string;
+  submitButton: {
+    label?: string;
+    icon?: any;
+    disabled?: boolean;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    primary?: boolean;
+  };
+  otherButtons?: {
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    outlined?: boolean;
+    onClick: () => void;
+  }[];
+  noAccess?: boolean;
+  children: ReactNode;
+}
+
+export const FormWrapper: FC<IFormWrapper> = ({
+  isLoading,
+  noAccess,
+  submitButton,
+  otherButtons,
+  className,
+  children,
+}) => (
+  <form
+    className={clsx(className, { "form-disabled": isLoading })}
+    onSubmit={(e) => {
+      e.preventDefault();
+      !submitButton.disabled && submitButton.onSubmit(e);
+    }}
+  >
+    {children}
+    {(!noAccess || otherButtons) && (
+      <div className="text-center mt-3 mb-2">
+        {otherButtons?.map((e) => (
+          <Button
+            key={e.label}
+            label={e.label}
+            icon={e.icon}
+            disabled={isLoading || e.disabled}
+            outlined={e.outlined}
+            onClick={e.onClick}
+            className="mr-2"
+          />
+        ))}
+        {!noAccess && (
+          <Button
+            label={submitButton.label || "Submit"}
+            icon={submitButton.icon}
+            disabled={isLoading || submitButton.disabled}
+            outlined={!submitButton.primary}
+            primary={submitButton.primary}
+          />
+        )}
+      </div>
+    )}
+  </form>
+);

package/src/Elements/Wrappers/FullPageWrapper.tsx

@@ -0,0 +1,87 @@
+import "../../styles/iui/components/_pagePrelogin.scss";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FC, ReactElement, ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import { faArrowLeft } from "../../icons/solid/faArrowLeft";
+import { Button } from "../Button/Button";
+import { ConditionalWrapper } from "./ConditionalWrapper";
+
+interface Props {
+  title: string;
+  description: string | ReactElement;
+  actionButton?: {
+    label: string;
+    icon?: IconDefinition;
+    onClick?: () => void;
+    onFormSubmit?: () => void;
+    marginLarge?: boolean;
+    regular?: boolean;
+  };
+  backButton?: boolean;
+  img?: string;
+  translations?: { Back?: string };
+  children?: ReactNode;
+}
+
+export const FullPageWrapper: FC<Props> = ({
+  title,
+  description,
+  actionButton,
+  backButton,
+  img,
+  translations,
+  children,
+}) => {
+  const navigate = useNavigate();
+  return (
+    <div className="full-page-container">
+      <h1>{title}</h1>
+      <h2>{description}</h2>
+      <div className="content">
+        <ConditionalWrapper
+          condition={!!actionButton?.onFormSubmit}
+          wrapper={(children) => (
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                actionButton?.onFormSubmit!();
+              }}
+            >
+              {children}
+            </form>
+          )}
+        >
+          <div>
+            <div className="children">{children}</div>
+            {(!!actionButton || backButton) && (
+              <div className="flex">
+                {backButton && (
+                  <Button
+                    label={translations?.Back || "Back"}
+                    icon={faArrowLeft}
+                    className="mr-2"
+                    onClick={() => navigate(-1)}
+                  />
+                )}
+                {!!actionButton && (
+                  <Button
+                    label={actionButton.label}
+                    icon={actionButton.icon}
+                    onClick={actionButton.onClick}
+                    primary={!actionButton.regular}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </ConditionalWrapper>
+        {img && (
+          <div className="full-page-image">
+            <img src={img} alt="ePismonosa" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Elements/Wrappers/PageWrapper.tsx

@@ -0,0 +1,148 @@
+import { FC, ReactElement, ReactNode, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { faArrowLeft } from "../../icons/solid/faArrowLeft";
+import { faEllipsisVertical } from "../../icons/solid/faEllipsisVertical";
+import { IHeaderAction } from "../../types/IHeaderAction";
+import { Button } from "../Button/Button";
+import { Menu } from "../Menu/Menu";
+import { MenuItem } from "../Menu/MenuItem";
+import { NoAccessInfo } from "../Helper/NoAccessInfo";
+import { Loader } from "../Loader/Loader";
+import { ConditionalWrapper } from "./ConditionalWrapper";
+import { Link } from "react-router-dom";
+import { IconButton } from "../Button/IconButton";
+
+export interface IPageWrapper {
+  breadcrumbs: string[];
+  actions?: IHeaderAction[];
+  moreActions?: IHeaderAction[];
+  showBackButton?: boolean;
+  noAccess?: boolean;
+  isLoading?: boolean;
+  loaderLogo?: string;
+  footer?: ReactElement;
+  translations?: {
+    NoAccessTitle?: string;
+    ReturnToHomepage?: string;
+  };
+  children?: ReactNode;
+}
+export const PageWrapper: FC<IPageWrapper> = ({
+  breadcrumbs,
+  actions,
+  moreActions,
+  showBackButton,
+  noAccess,
+  isLoading,
+  loaderLogo,
+  footer,
+  translations,
+  children,
+}) => {
+  const [isMoreActionsOpen, setIsMoreActionsOpen] = useState(false);
+  const navigate = useNavigate();
+
+  return (
+    <ConditionalWrapper
+      condition={!!isLoading}
+      wrapper={(children) => (
+        <Loader isLoading logo={loaderLogo} fullWidth>
+          {children}
+        </Loader>
+      )}
+    >
+      <div className="page-container">
+        <div className="page-header">
+          <div className="flex align-center gap-3">
+            {showBackButton && (
+              <IconButton
+                icon={faArrowLeft}
+                className="c-primary"
+                onClick={() => navigate(-1)}
+              />
+            )}
+            {/* ////// BREADCRUMBS ////// */}
+            <div className="breadcrumbs">
+              {breadcrumbs.map(
+                (e, i) =>
+                  e && (
+                    <h1 key={e}>{i + 1 < breadcrumbs.length ? `${e} /` : e}</h1>
+                  )
+              )}
+            </div>
+          </div>
+          {/* ////// ACTIONS ////// */}
+          {!noAccess && (
+            <div className="flex align-center">
+              {actions?.map(
+                (action) =>
+                  !action.hidden && (
+                    <ConditionalWrapper
+                      key={action.label}
+                      condition={!!action.to}
+                      wrapper={(children) => (
+                        <Link to={action.to!}>{children}</Link>
+                      )}
+                    >
+                      <Button key={action.label} {...action} className="ml-2" />
+                    </ConditionalWrapper>
+                  )
+              )}
+              {!!moreActions?.length && (
+                <Menu
+                  isOpen={isMoreActionsOpen}
+                  onClose={() => setIsMoreActionsOpen(false)}
+                  placementX="right"
+                  renderButton={(ref) => (
+                    <IconButton
+                      ref={ref}
+                      icon={faEllipsisVertical}
+                      active={isMoreActionsOpen}
+                      onClick={() => setIsMoreActionsOpen(!isMoreActionsOpen)}
+                    />
+                  )}
+                >
+                  {moreActions.map(
+                    (action) =>
+                      !action.hidden && (
+                        <MenuItem
+                          key={action.label}
+                          label={action.label}
+                          icon={action.icon}
+                          iconRotation={action.iconRotation}
+                          disabled={action.disabled}
+                          withDevider
+                          to={action.to}
+                          onClick={
+                            action.onClick
+                              ? () => {
+                                  action.onClick!();
+                                  setIsMoreActionsOpen(false);
+                                }
+                              : undefined
+                          }
+                        />
+                      )
+                  )}
+                </Menu>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="page-content">
+          <div className="flex-grow">
+            {!noAccess ? (
+              children
+            ) : (
+              <NoAccessInfo
+                title={translations?.NoAccessTitle}
+                buttonLabel={translations?.ReturnToHomepage}
+              />
+            )}
+          </div>
+          {footer}
+        </div>
+      </div>
+    </ConditionalWrapper>
+  );
+};

package/src/icons/duotone/faArrowLeftFromLine.ts

@@ -0,0 +1,17 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+const prefix = "fad";
+const iconName = "arrow-left-from-line";
+const width = 448;
+const height = 512;
+const unicode = "f344";
+const svgPathData = [
+  "M384 96v320c0 17.69 14.31 32 32 32s32-14.31 32-32V96c0-17.69-14.31-32-32-32S384 78.31 384 96z",
+  "M182.6 406.6c-12.5 12.5-32.75 12.5-45.25 0l-128-128c-12.5-12.5-12.5-32.75 0-45.25l128-128c12.5-12.5 32.75-12.5 45.25 0C188.9 111.6 192 119.8 192 128S188.9 144.4 182.6 150.6L109.3 224H288c17.69 0 32 14.31 32 32s-14.31 32-32 32H109.3l73.38 73.38C195.1 373.9 195.1 394.1 182.6 406.6z",
+];
+
+export const faArrowLeftFromLine: IconDefinition = {
+  prefix,
+  iconName,
+  icon: [width, height, [], unicode, svgPathData],
+};