@kanda-libs/ks-component-ts 0.2.255 → 0.2.256-qa

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

@@ -0,0 +1,58 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import type { StringIndexedObject } from '~/types';
+import Logo from '~/components/Logo';
+import useHeaderMainProps from './useHeaderMainProps';
+import HeaderBase from '~/components/Header/HeaderBase';
+import type { HomeLinkProps } from '~/components/ConfigWrapper';
+
+export interface HeaderMainProps {
+  /**
+   * ClassName for main header
+   */
+  logoProps?: StringIndexedObject;
+  /**
+   * Show help
+   */
+  help?: boolean;
+  /**
+   * ClassName for main header
+   */
+  className?: string;
+  /**
+   * Displays skip button
+   */
+  skip?: boolean;
+  /**
+   * On Skip function callback
+   */
+  onSkip?: () => void;
+  /**
+   * linkComponent
+   */
+  linkComponent?: FunctionComponent<HomeLinkProps> | 'a';
+}
+
+const HeaderMain: FunctionComponent<HeaderMainProps> = function ({
+  className,
+  skip = false,
+  onSkip,
+  linkComponent: LinkComponent = 'a',
+  help = true,
+  logoProps = {},
+}) {
+  const { options, homeLinkProps } = useHeaderMainProps(skip, onSkip);
+
+  const LogoTag = Logo as unknown as FunctionComponent<
+    HTMLAttributes<HTMLOrSVGElement>
+  >;
+
+  return (
+    <HeaderBase help={help} className={className} options={options} lines>
+      <LinkComponent {...homeLinkProps}>
+        <LogoTag {...logoProps} />
+      </LinkComponent>
+    </HeaderBase>
+  );
+};
+
+export default HeaderMain;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Header/HeaderMain/useHeaderMainProps.tsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { ModalsWrapperContext } from '~/components/ModalsWrapper';
+import {
+  ConfigWrapperContext,
+  HomeLinkProps,
+} from '~/components/ConfigWrapper';
+import { MENU_BUTTON_PROPS, MENU_MODAL_ID } from './constants';
+import { Icon as IconButton, Link as LinkButton } from '~/components/Button';
+
+export interface HeaderMainPropsHook {
+  options: JSX.Element[];
+  homeLinkProps?: HomeLinkProps;
+}
+
+export default function useHeaderMainProps(
+  skip: boolean,
+  onSkip?: () => void,
+): HeaderMainPropsHook {
+  const { showAnimatedModal } = useContext(ModalsWrapperContext);
+
+  const { homeLinkProps } = useContext(ConfigWrapperContext);
+
+  const handleMenu = () => showAnimatedModal(MENU_MODAL_ID);
+
+  const options = skip
+    ? [
+        <LinkButton
+          id="mobile-header-skip"
+          variant="light-grey"
+          size={16}
+          key="skip"
+          className="ml-2 mr-3"
+          onClick={onSkip}
+          label="Skip"
+        />,
+      ]
+    : [<IconButton key="menu" {...MENU_BUTTON_PROPS} onClick={handleMenu} />];
+
+  return {
+    options,
+    homeLinkProps,
+  };
+}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Header/index.ts

@@ -0,0 +1,15 @@
+import Base, { HeaderBaseProps } from './HeaderBase';
+import Main, { HeaderMainProps } from './HeaderMain';
+import type { FunctionComponent } from 'react';
+
+interface HeaderItems {
+  Base: FunctionComponent<HeaderBaseProps>;
+  Main: FunctionComponent<HeaderMainProps>;
+}
+
+const Header: HeaderItems = {
+  Base,
+  Main,
+};
+
+export default Header;

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

@@ -0,0 +1,14 @@
+import type {
+  ButtonIconSize,
+  ButtonIconVariant,
+} from '~/components/Button/ButtonIcon/types';
+
+export const PROPS = {
+  size: '40-20' as ButtonIconSize,
+  variant: 'ghost-grey' as ButtonIconVariant,
+  key: 'help',
+  id: 'help-launcher',
+  className: 'z-50',
+  iconProps: { stroke: undefined },
+  icon: 'help',
+};

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,
+  },
+};