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

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

@@ -1,32 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,233 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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;