@kanda-libs/ks-component-ts 0.2.246 → 0.2.247-qa

package/app/.yalc/@kanda-libs/ks-design-library/src/components/HelpButton/index.tsx

@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from 'react';
+import { Icon as IconButton, Link as LinkButton } from '~/components/Button';
+import useHelpButtonOnClick from './useHelpButtonOnClick';
+import { PROPS } from './constants';
+
+export interface HelpButtonProps {
+  variant?: string;
+}
+
+const HelpButton: FunctionComponent<HelpButtonProps> = function ({
+  variant = 'button',
+}) {
+  const { onClick } = useHelpButtonOnClick();
+
+  if (variant === 'button') {
+    return <IconButton onClick={onClick} {...PROPS} />;
+  }
+
+  return (
+    <LinkButton
+      id="help-launcher"
+      variant="custom"
+      className="text-neutral-900 z-50"
+      icon="help"
+      onClick={onClick}
+    >
+      Help Center
+    </LinkButton>
+  );
+};
+
+export default HelpButton;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/HelpButton/useHelpButtonOnClick.ts

@@ -0,0 +1,18 @@
+import { useFrontChatWidget } from '~/hooks';
+import { useCallback } from 'react';
+
+export interface HelpButtonOnClickHook {
+  onClick: () => void;
+}
+
+export default function useHelpButtonOnClick(): HelpButtonOnClickHook {
+  const { openChat } = useFrontChatWidget();
+
+  const onClick = useCallback(() => {
+    openChat();
+  }, [openChat]);
+
+  return {
+    onClick,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/HelpCrunch/constants.ts

@@ -0,0 +1,12 @@
+import { HELPCRUNCH_ENVIRONMENT_KEY } from '~/config';
+
+export const SCRIPT = `
+  (function(w,d){var hS=w.helpcrunchSettings;if(!hS||!hS.organization){return;}var widgetSrc='https://'+hS.organization+'.widget.helpcrunch.com/';w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];function r(){if (d.querySelector('script[src="' + widgetSrc + '"')) { return; }var s=d.createElement('script');s.async=1;s.type='text/javascript';s.src=widgetSrc;(d.body||d.head).appendChild(s);}if(d.readyState === 'complete'||hS.loadImmediately){r();} else if(w.attachEvent){w.attachEvent('onload',r)}else{w.addEventListener('load',r,false)}})(window, document)
+`;
+
+export const SCRIPT_INIT = `
+  window.helpcrunchSettings = {
+    organization: 'kanda',
+    appId: '${HELPCRUNCH_ENVIRONMENT_KEY}',
+  }
+`;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/HelpCrunch/index.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent, useEffect, useRef } from 'react';
+import type { WindowWithHelpCrunch } from '~/types';
+
+import { SCRIPT, SCRIPT_INIT } from './constants';
+
+const HelpCrunch: FunctionComponent = function () {
+  const helpCrunch =
+    typeof window !== 'undefined' &&
+    (window as unknown as WindowWithHelpCrunch)?.HelpCrunch;
+
+  /**
+   * useEffect call used for loading helpCrunch if it's available
+   */
+  useEffect(() => {
+    if (!helpCrunch) return;
+
+    setTimeout(() => {
+      helpCrunch('hideChatWidget');
+    }, 120);
+  }, [helpCrunch]);
+
+  const initRef = useRef<boolean>(false);
+  useEffect(() => {
+    if (initRef.current) return;
+
+    const s2 = document.createElement('script');
+    s2.type = 'text/javascript';
+    s2.innerHTML = SCRIPT_INIT;
+    document.head.appendChild(s2);
+
+    const s1 = document.createElement('script');
+    s1.type = 'text/javascript';
+    s1.innerHTML = SCRIPT;
+    document.head.appendChild(s1);
+
+    initRef.current = true;
+  }, []);
+
+  return null;
+};
+
+export default HelpCrunch;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Icon/constants.tsx

@@ -0,0 +1,233 @@
+import type { FunctionComponent } from 'react';
+import type { StringIndexedObject } from '~/types';
+import Dashboard from '../../assets/icons/dashboard.svg';
+import DashboardColor from '../../assets/icons/dashboard-color.svg';
+import Home from '../../assets/icons/home.svg';
+import HomeColor from '../../assets/icons/home-color.svg';
+import Job from '../../assets/icons/job.svg';
+import JobColor from '../../assets/icons/job-color.svg';
+import SendQuote from '../../assets/icons/send-quote.svg';
+import SendQuoteColor from '../../assets/icons/send-quote-color.svg';
+import CheckCircle from '../../assets/icons/check-circle.svg';
+import CheckCircleColor from '../../assets/icons/check-circle-color.svg';
+import Payment from '../../assets/icons/payment.svg';
+import PaymentColor from '../../assets/icons/payment-color.svg';
+import Account from '../../assets/icons/account.svg';
+import AccountColor from '../../assets/icons/account-color.svg';
+import Verification from '../../assets/icons/verification.svg';
+import VerificationColor from '../../assets/icons/verification-color.svg';
+import UserSquare from '../../assets/icons/user-square.svg';
+import UserSquareColor from '../../assets/icons/user-square-color.svg';
+import SearchFile from '../../assets/icons/search-file.svg';
+import SearchFileColor from '../../assets/icons/search-file-color.svg';
+import Alarm from '../../assets/icons/alarm.svg';
+import AlarmColor from '../../assets/icons/alarm-color.svg';
+import Menu from '../../assets/icons/menu.svg';
+import ArrowRight from '../../assets/icons/arrow-right.svg';
+import Notification from '../../assets/icons/notification.svg';
+import Plus from '../../assets/icons/plus.svg';
+import Toolbox from '../../assets/icons/toolbox.svg';
+import Load from '../../assets/icons/load.svg';
+import Check from '../../assets/icons/check.svg';
+import ChevronUp from '../../assets/icons/chevron-up.svg';
+import Close from '../../assets/icons/close.svg';
+import CreditCard from '../../assets/icons/credit-card.svg';
+import Paypal from '../../assets/icons/paypal.svg';
+import Currency from '../../assets/icons/currency.svg';
+import Instalments from '../../assets/icons/instalments.svg';
+import More from '../../assets/icons/more.svg';
+import Send from '../../assets/icons/send.svg';
+import Remove from '../../assets/icons/remove.svg';
+import Phone from '../../assets/icons/phone.svg';
+import Email from '../../assets/icons/email.svg';
+import Filter from '../../assets/icons/filter.svg';
+import Minus from '../../assets/icons/minus.svg';
+import Copy from '../../assets/icons/copy.svg';
+import FileUpload from '../../assets/icons/file-upload.svg';
+import File from '../../assets/icons/file.svg';
+import Search from '../../assets/icons/search.svg';
+import Edit from '../../assets/icons/edit.svg';
+import Info from '../../assets/icons/info.svg';
+import Sms from '../../assets/icons/sms.svg';
+import Attachement from '../../assets/icons/attachement.svg';
+import Note from '../../assets/icons/note.svg';
+import ChevronLeft from '../../assets/icons/chevron-left.svg';
+import ChevronDown from '../../assets/icons/chevron-down.svg';
+import Eye from '../../assets/icons/eye.svg';
+import Location from '../../assets/icons/location.svg';
+import SpecialCheck from '../../assets/icons/special-check.svg';
+import Financed from '../../assets/icons/financed.svg';
+import FinancedColor from '../../assets/icons/financed-color.svg';
+import ArrowUp from '../../assets/icons/arrow-up.svg';
+import Image from '../../assets/icons/image.svg';
+import Wallet from '../../assets/icons/wallet.svg';
+import Deposit from '../../assets/icons/deposit.svg';
+import Download from '../../assets/icons/download.svg';
+import Customer from '../../assets/icons/customer.svg';
+import CustomerColor from '../../assets/icons/customer-color.svg';
+import Rocket from '../../assets/icons/rocket.svg';
+import RocketColor from '../../assets/icons/rocket-color.svg';
+import Rotate from '../../assets/icons/rotate.svg';
+import Help from '../../assets/icons/help.svg';
+import Star from '../../assets/icons/star.svg';
+import NotesPaper from '../../assets/icons/notes-paper.svg';
+import Office from '../../assets/icons/office.svg';
+import Indicator from '../../assets/icons/indicator.svg';
+import CustomersColor from '../../assets/icons/customers-color.svg';
+import Customers from '../../assets/icons/customers.svg';
+import Cart from '../../assets/icons/cart.svg';
+import Paper from '../../assets/icons/paper.svg';
+import Alphabet from '../../assets/icons/alphabet.svg';
+import ArrowUpRight from '../../assets/icons/arrow-up-right.svg';
+import EyeOff from '../../assets/icons/eye-off.svg';
+import Pound from '../../assets/icons/pound.svg';
+import Settings from '../../assets/icons/settings.svg';
+import SortAscending from '../../assets/icons/sort-ascending.svg';
+import SortDescending from '../../assets/icons/sort-descending.svg';
+import Tag from '../../assets/icons/tag.svg';
+import User from '../../assets/icons/user.svg';
+import Logout from '../../assets/icons/logout.svg';
+import DownloadFile from '../../assets/icons/download-file.svg';
+import DeleteFile from '../../assets/icons/delete-file.svg';
+import Archive from '../../assets/icons/archive.svg';
+import Favourite from '../../assets/icons/favourite.svg';
+import Warning from '../../assets/icons/warning.svg';
+import Error from '../../assets/icons/error.svg';
+import ShieldCheck from '../../assets/icons/shield-check.svg';
+import Calendar from '../../assets/icons/calendar.svg';
+import Bold from '../../assets/icons/bold.svg';
+import Italic from '../../assets/icons/italic.svg';
+import OrderedList from '../../assets/icons/ordered-list.svg';
+import UnorderedList from '../../assets/icons/unordered-list.svg';
+import Flag from '../../assets/icons/flag.svg';
+import CopyArchive from '../../assets/icons/copy-archive.svg';
+import Lock from '../../assets/icons/lock.svg';
+
+export const DEFAULT_SIZE = {
+  width: 24,
+  height: 24,
+};
+
+export const CLASS_NAMES = {
+  skeletonBase: 'leading-unset',
+};
+
+interface Icon {
+  Icon:
+    | string
+    | FunctionComponent<{
+        className?: string;
+        children?: JSX.Element | JSX.Element[];
+        width?: number;
+        height?: number;
+      }>;
+  flip?: boolean;
+}
+
+export const ICONS: StringIndexedObject<Icon> = {
+  dashboard: { Icon: Dashboard },
+  'dashboard-color': { Icon: DashboardColor },
+  home: { Icon: Home },
+  'home-color': { Icon: HomeColor },
+  job: { Icon: Job },
+  'job-color': { Icon: JobColor },
+  'send-quote': { Icon: SendQuote },
+  'send-quote-color': { Icon: SendQuoteColor },
+  'check-circle': { Icon: CheckCircle },
+  'check-circle-color': { Icon: CheckCircleColor },
+  payment: { Icon: Payment },
+  'payment-color': { Icon: PaymentColor },
+  account: { Icon: Account },
+  'account-color': { Icon: AccountColor },
+  verification: { Icon: Verification },
+  'verification-color': { Icon: VerificationColor },
+  'user-square': { Icon: UserSquare },
+  'user-square-color': { Icon: UserSquareColor },
+  'search-file': { Icon: SearchFile },
+  'search-file-color': { Icon: SearchFileColor },
+  alarm: { Icon: Alarm },
+  'alarm-color': { Icon: AlarmColor },
+  menu: { Icon: Menu },
+  'arrow-right': { Icon: ArrowRight },
+  notification: { Icon: Notification },
+  plus: { Icon: Plus },
+  toolbox: { Icon: Toolbox },
+  load: { Icon: Load },
+  check: { Icon: Check },
+  'arrow-left': { Icon: ArrowRight, flip: true },
+  'chevron-up': { Icon: ChevronUp },
+  close: { Icon: Close },
+  'credit-card': { Icon: CreditCard },
+  paypal: { Icon: Paypal },
+  currency: { Icon: Currency },
+  instalments: { Icon: Instalments },
+  more: { Icon: More },
+  send: { Icon: Send },
+  remove: { Icon: Remove },
+  phone: { Icon: Phone },
+  email: { Icon: Email },
+  filter: { Icon: Filter },
+  minus: { Icon: Minus },
+  copy: { Icon: Copy },
+  'file-upload': { Icon: FileUpload },
+  file: { Icon: File },
+  search: { Icon: Search },
+  edit: { Icon: Edit },
+  info: { Icon: Info },
+  sms: { Icon: Sms },
+  attachement: { Icon: Attachement },
+  note: { Icon: Note },
+  'chevron-right': { Icon: ChevronLeft, flip: true },
+  'chevron-left': { Icon: ChevronLeft },
+  'chevron-down': { Icon: ChevronDown },
+  eye: { Icon: Eye },
+  location: { Icon: Location },
+  'special-check': { Icon: SpecialCheck },
+  financed: { Icon: Financed },
+  'financed-color': { Icon: FinancedColor },
+  'arrow-up': { Icon: ArrowUp },
+  image: { Icon: Image },
+  wallet: { Icon: Wallet },
+  deposit: { Icon: Deposit },
+  download: { Icon: Download },
+  customer: { Icon: Customer },
+  'customer-color': { Icon: CustomerColor },
+  rocket: { Icon: Rocket },
+  'rocket-color': { Icon: RocketColor },
+  rotate: { Icon: Rotate },
+  help: { Icon: Help },
+  star: { Icon: Star },
+  'notes-paper': { Icon: NotesPaper },
+  office: { Icon: Office },
+  indicator: { Icon: Indicator },
+  'customers-color': { Icon: CustomersColor },
+  customers: { Icon: Customers },
+  cart: { Icon: Cart },
+  paper: { Icon: Paper },
+  'arrow-down': { Icon: ArrowUp, flip: true },
+  alphabet: { Icon: Alphabet },
+  'arrow-up-right': { Icon: ArrowUpRight },
+  'eye-off': { Icon: EyeOff },
+  pound: { Icon: Pound },
+  settings: { Icon: Settings },
+  'sort-ascending': { Icon: SortAscending },
+  'sort-descending': { Icon: SortDescending },
+  tag: { Icon: Tag },
+  user: { Icon: User },
+  logout: { Icon: Logout },
+  'download-file': { Icon: DownloadFile },
+  archive: { Icon: Archive },
+  favourite: { Icon: Favourite },
+  warning: { Icon: Warning },
+  error: { Icon: Error },
+  'shield-check': { Icon: ShieldCheck },
+  calendar: { Icon: Calendar },
+  'delete-file': { Icon: DeleteFile },
+  bold: { Icon: Bold },
+  italic: { Icon: Italic },
+  'ordered-list': { Icon: OrderedList },
+  'unordered-list': { Icon: UnorderedList },
+  'copy-archive': { Icon: CopyArchive },
+  lock: { Icon: Lock },
+  flag: { Icon: Flag },
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Icon/helpers.ts

@@ -0,0 +1,7 @@
+export const getStrokeClassName = (size = 24): string => {
+  if (size <= 24) return 'icon-stroke-sm';
+
+  if (size <= 32) return 'icon-stroke-md';
+
+  return 'icon-stroke-lg';
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Icon/index.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+import SkeletonLoader from '~/components/SkeletonLoader';
+import useIcon from '~/components/Icon/useIcon';
+import type { IconProps } from '~/components/Icon/types';
+
+const Icon: FunctionComponent<IconProps> = function ({
+  isLoading = false,
+  ...props
+}) {
+  const { Icon, classNames, width, height } = useIcon(props);
+
+  return (
+    <SkeletonLoader
+      width={width}
+      height={height}
+      isLoading={isLoading}
+      className={classNames.skeleton}
+      afterLoading={
+        <Icon width={width} height={height} className={classNames.svg} />
+      }
+    />
+  );
+};
+
+export default Icon;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Icon/types.d.ts

@@ -0,0 +1,38 @@
+export interface IconProps {
+  /**
+   * External HTML className
+   */
+  className?: string;
+  /**
+   * Stroke colour
+   */
+  stroke?: string;
+  /**
+   * Flag to flip icon
+   */
+  flip?: boolean;
+  /**
+   * The icon width
+   */
+  width?: number;
+  /**
+   * The icon height
+   */
+  height?: number;
+  /**
+   * The icon size (sets width and height together)
+   */
+  size?: number;
+  /**
+   * The icon background fill
+   */
+  fill?: string;
+  /**
+   * The loading state for the icon
+   */
+  isLoading?: boolean;
+  /**
+   * The icon name
+   */
+  icon?: string;
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Icon/useIcon.ts

@@ -0,0 +1,62 @@
+import type { FunctionComponent } from 'react';
+import clsx from 'clsx';
+import type { IconProps } from '~/components/Icon/types';
+import { getStrokeClassName } from '~/components/Icon/helpers';
+import type { StringIndexedObject } from '~/types';
+import { CLASS_NAMES, DEFAULT_SIZE, ICONS } from './constants';
+
+export interface Hook {
+  Icon: FunctionComponent<IconProps>;
+  classNames: StringIndexedObject<string>;
+  width: number;
+  height: number;
+  style?: StringIndexedObject<unknown>;
+}
+
+export default function useIcon({
+  icon,
+  stroke,
+  flip,
+  width: initialWidth,
+  height: initialHeight,
+  className: initialClassName,
+  size,
+  fill,
+}: Omit<IconProps, 'isLoading'>): Hook {
+  const { Icon, ...defaultProps } = ICONS[icon as string] || {
+    Icon: () => null,
+  };
+
+  const { skeletonBase, ...restClassNames } = CLASS_NAMES;
+
+  const strokeClassName = stroke ? `stroke-current text-${stroke}` : '';
+
+  const rotateClassName =
+    flip || defaultProps.flip ? 'transform rotate-180' : '';
+
+  const fillClassName = fill ? `fill-${fill}` : '';
+
+  const sizeClass = getStrokeClassName(size);
+
+  const svg = clsx(
+    strokeClassName,
+    rotateClassName,
+    fillClassName,
+    initialClassName,
+    !initialClassName?.includes('icon-stroke') && sizeClass,
+  );
+
+  const classNames = { ...restClassNames, svg, skeleton: skeletonBase };
+
+  const width = initialWidth || size || DEFAULT_SIZE.width;
+
+  const height = initialHeight || size || DEFAULT_SIZE.height;
+
+  return {
+    Icon: Icon as FunctionComponent<IconProps>,
+    classNames,
+    width,
+    height,
+    style: strokeClassName ? {} : undefined,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/InfoBanner/constants.ts

@@ -0,0 +1,35 @@
+export const CLASS_NAMES = {
+  container: 'flex flex-col lg:mb-6 z-40 relative',
+  nameContainer: 'flex flex-row items-center justify-between',
+  nameContent: 'flex flex-col',
+  backArrowContainer: 'mr-2',
+  header: 'flex-grow',
+  options: 'flex flex-row',
+  info: 'flex flex-row md:mb-2 border border-neutral-300 rounded-lg md:border-0',
+  title: 'text-style-b text-neutral-900 md:h-10',
+  titleWrapper: 'flex flex-row gap-x-2',
+};
+
+export const BANNER_TYPE = {
+  LOADING: 'loading',
+  EMPTY: 'empty',
+  FILTER: 'filter',
+};
+
+export const BANNER_CLASS_NAMES = {
+  container:
+    'flex flex-col border-r w-1/2 p-3 last:border-0 md:p-4 md:w-1/3 md:border border-neutral-300 md:rounded-lg md:mr-4 md:last:border',
+  title: 'text-style-h text-neutral-600 mb-1 md:text-style-g',
+  text: 'text-style-e text-neutral-900 md:text-style-d',
+};
+
+export const BANNER_SKELETONS = {
+  title: {
+    width: 120,
+    height: 16,
+  },
+  text: {
+    width: 90,
+    height: 20,
+  },
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/InfoBanner/index.tsx

@@ -0,0 +1,65 @@
+import React, { type FunctionComponent } from 'react';
+import Button from '../Button';
+import Text from '../Text';
+import { BANNER_SKELETONS, CLASS_NAMES } from './constants';
+
+export interface InfoBannerProps {
+  title?: string | JSX.Element;
+  icon?: JSX.Element;
+  nameContent?: JSX.Element;
+  search?: JSX.Element;
+  cta?: JSX.Element;
+  backArrow?: boolean;
+  isLoading?: boolean;
+  onGoBack?: () => void;
+  children?: JSX.Element;
+}
+
+const InfoBanner: FunctionComponent<InfoBannerProps> = function ({
+  title,
+  icon,
+  nameContent,
+  search,
+  cta,
+  backArrow = true,
+  isLoading = false,
+  onGoBack = () => {},
+  children,
+}) {
+  return (
+    <div className={CLASS_NAMES.container}>
+      <div className={CLASS_NAMES.nameContainer}>
+        {backArrow && (
+          <div className={CLASS_NAMES.backArrowContainer}>
+            <Button.Icon
+              id="info-banner-back-arrow"
+              icon="arrow-left"
+              onClick={() => {
+                onGoBack();
+              }}
+            />
+          </div>
+        )}
+        <div className={CLASS_NAMES.header}>
+          <div className={CLASS_NAMES.titleWrapper}>
+            <Text
+              className={CLASS_NAMES.title}
+              isLoading={isLoading}
+              text={title}
+              skeletonProps={BANNER_SKELETONS.title}
+            />
+            {!isLoading && icon}
+            {search}
+          </div>
+          {nameContent && (
+            <div className={CLASS_NAMES.nameContent}>{nameContent}</div>
+          )}
+        </div>
+        {cta && <span>{cta}</span>}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default InfoBanner;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Layout/constants.ts

@@ -0,0 +1,16 @@
+export const CLASS_NAMES = {
+  containerBase:
+    'flex flex-1 w-screen min-h-vvp flex-col space-between relative',
+  containerSticky: '',
+  wrapper: 'flex flex-1 w-full flex-col relative',
+  headerBase: 'w-full',
+  headerBorder: 'border-b-solid border-b border-neutral-200',
+  headerFixed: 'sticky top-0 z-50',
+  contentBase: 'flex flex-1 w-full flex-col',
+  contentPadding: 'py-8 px-6',
+  footerDefault: 'w-full px-6 mb-6',
+  footerFixed: 'w-full px-6 sticky bottom-6',
+  modalsShader: 'absolute bg-neutral-900 opacity-5 w-full h-full z-50',
+  widthLimit: 'w-full h-full max-w-7xl mx-auto',
+  flexGrow: 'flex flex-1',
+};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Layout/index.tsx

@@ -0,0 +1,82 @@
+import React, { FunctionComponent } from 'react';
+import useLayoutClassNames from './useLayoutClassNames';
+import {
+  Header as HeaderTeleporter,
+  Footer as FooterTeleporter,
+} from './teleporters';
+import ScrollTopButton from '~/components/ScrollTopButton';
+
+export interface LayoutProps {
+  children?: JSX.Element | JSX.Element[];
+  stickyHeader?: boolean;
+  stickyFooter?: boolean;
+  /**
+   * header background color
+   */
+  headerBg?: string;
+  /**
+   * background color
+   */
+  bg?: string;
+  /**
+   * Removes Border
+   */
+  noBorder?: boolean;
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  /**
+   * Boolean flag for whether to show scroll top button
+   */
+  scrollTop?: boolean;
+  /**
+   * Removes content padding
+   */
+  noPadding?: boolean;
+  /**
+   * Only load header and footer if the component as mounted
+   * This is mainly used to allow for the use of this components
+   * in environments that support SSR (IE: NextJS)
+   */
+  checkForIsMounted?: boolean;
+}
+
+const Layout: FunctionComponent<LayoutProps> = function ({
+  children,
+  header,
+  footer,
+  checkForIsMounted = false,
+  ...restProps
+}) {
+  const { classNames, scrollTop } = useLayoutClassNames(restProps);
+
+  return (
+    <div id="layout" className={classNames.container}>
+      <div className={classNames.wrapper}>
+        <div className={classNames.header}>
+          <div className={classNames.headerWidthLimiter}>
+            <HeaderTeleporter.Target />
+          </div>
+        </div>
+        <div className={classNames.contentWidthLimiter}>
+          <div className={classNames.content}>
+            <HeaderTeleporter.Source>{header}</HeaderTeleporter.Source>
+            <FooterTeleporter.Source>{footer}</FooterTeleporter.Source>
+            {children}
+          </div>
+        </div>
+      </div>
+      <div className={classNames.footer}>
+        <FooterTeleporter.Target />
+      </div>
+
+      {scrollTop && <ScrollTopButton />}
+    </div>
+  );
+};
+
+const LayoutFooter = FooterTeleporter.Source;
+const LayoutHeader = HeaderTeleporter.Source;
+
+export { LayoutFooter, LayoutHeader };
+
+export default Layout;