@kanda-libs/ks-component-ts 0.2.240-qa3 → 0.2.241

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalContainer/Container.tsx

@@ -1,72 +0,0 @@
-import { FunctionComponent, useCallback, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import clsx from 'clsx';
-import { ModalsWrapperContext } from '~/components/ModalsWrapper';
-import useOuterClick, { OuterClickHook } from '~/hooks/useOuterClick';
-import { opacitySuffix } from '../helpers';
-import type { OPACITIES } from '../constants';
-import { BACKDROP_CLASS_NAME } from '../constants';
-import { getDocument } from '~/common/helpers';
-
-export interface ContainerChildrenArgs {
-  id: string;
-  showBackdrop: boolean;
-  backdropClassName: string;
-  handleClose: () => void;
-  ref: OuterClickHook;
-}
-
-export interface ContainerProps {
-  /**
-   * The ID of the modal
-   */
-  id: string;
-  /**
-   * The opacity oif the background
-   */
-  opacity?: typeof OPACITIES[number];
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  id,
-  opacity = 5,
-  children,
-}) {
-  const { visibleModals, hideModal } = useContext(ModalsWrapperContext);
-
-  const suffix = opacitySuffix(opacity);
-
-  const backdropClassName = clsx(BACKDROP_CLASS_NAME, `opacity${suffix}`);
-
-  const showBackdrop = visibleModals.indexOf(id) === 0;
-
-  /*
-   * Handles close logic
-   */
-  const handleClose = useCallback(() => {
-    hideModal(id);
-  }, [id, hideModal]);
-
-  /*
-   * Uses hook to call close when the click is outside of modal
-   */
-  const ref = useOuterClick(handleClose);
-
-  /*
-   * Displays nothing if modal is not visible
-   */
-  if (visibleModals.indexOf(id) === -1) {
-    return null;
-  }
-
-  /*
-   * Uses portal to move modal "modals" div on root so it would not have problems with z-index
-   */
-  return ReactDOM.createPortal(
-    children({ id, showBackdrop, backdropClassName, handleClose, ref }),
-    getDocument()?.getElementById('modals') as HTMLElement,
-  );
-};
-
-export default Container;

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

@@ -1,34 +0,0 @@
-import React, { FunctionComponent, MutableRefObject } from 'react';
-import Container, { ContainerProps } from './Container';
-
-export interface ModalContainerChildrenArgs {
-  id: string;
-  handleClose: () => void;
-  ref?: MutableRefObject<HTMLElement | undefined>;
-}
-
-export interface ModalContainerProps extends ContainerProps {
-  overlay?: boolean;
-  children: (args: ModalContainerChildrenArgs) => JSX.Element;
-}
-
-const ModalContainer: FunctionComponent<ModalContainerProps> = function ({
-  overlay = false,
-  children,
-  ...props
-}) {
-  return (
-    <Container {...props}>
-      {({ showBackdrop, backdropClassName, ...rest }) => (
-        <div className={`"w-vvp h-vvp" ${overlay ? 'absolute top-0' : ''}`}>
-          {showBackdrop && <div className={backdropClassName} />}
-          {children({
-            ...rest,
-          })}
-        </div>
-      )}
-    </Container>
-  );
-};
-
-export default ModalContainer;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutCenter/Container.tsx

@@ -1,39 +0,0 @@
-import type { FunctionComponent } from 'react';
-import type { OPACITIES } from '~/components/Modal/constants';
-import clsx from 'clsx';
-import {
-  BACKDROP_CLASS_NAME,
-  BASE_CLASS_NAME,
-} from '~/components/Modal/ModalLayout/ModalLayoutCenter/constants';
-import { OPACITY_CLASS_NAMES } from '~/components/Modal/constants';
-
-export interface ContainerChildrenArgs {
-  className: string;
-  backdropClassName: string;
-}
-
-export interface ContainerProps {
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-  initialClassName?: string;
-  opacity?: typeof OPACITIES[number];
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  children,
-  initialClassName,
-  opacity,
-}) {
-  const className = clsx(BASE_CLASS_NAME, initialClassName);
-
-  const backdropClassName = clsx(
-    BACKDROP_CLASS_NAME,
-    OPACITY_CLASS_NAMES[opacity as unknown as number],
-  );
-
-  return children({
-    className,
-    backdropClassName,
-  });
-};
-
-export default Container;

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

@@ -1,4 +0,0 @@
-export const BASE_CLASS_NAME =
-  'flex flex-1 flex-col fixed bg-neutral-000 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-xl shadow-2xl';
-
-export const BACKDROP_CLASS_NAME = 'fixed bg-neutral-900 w-full h-full';

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

@@ -1,36 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Icon as IconButton } from '~/components/Button';
-import type { OPACITIES } from '../../constants';
-import Container from './Container';
-
-interface ModalLayoutCenterProps {
-  id: string;
-  children: JSX.Element | JSX.Element[];
-  onClose?: () => void;
-  className?: string;
-  opacity?: typeof OPACITIES[number];
-}
-
-const ModalLayoutCenter = forwardRef<HTMLDivElement, ModalLayoutCenterProps>(
-  (
-    { id, children, onClose, className: initialClassName, opacity = 5 },
-    ref,
-  ) => (
-    <Container initialClassName={initialClassName} opacity={opacity}>
-      {({ className }) => (
-        <div className={className} ref={ref}>
-          <div className="flex flex-1 w-full flex-col relative p-6">
-            <div className="absolute top-0 right-0 p-3">
-              <IconButton id={`${id}-close`} onClick={onClose} icon="close" />
-            </div>
-            {children}
-          </div>
-        </div>
-      )}
-    </Container>
-  ),
-);
-
-ModalLayoutCenter.displayName = 'ModalLayoutCenter';
-
-export default ModalLayoutCenter;

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

@@ -1,12 +0,0 @@
-export const BODY_FULLSCREEN_MODAL_CLASS_NAME = 'full-screen-modal-visible';
-
-export const FULLSCREEN_MODAL_CLASS_NAME = 'full-screen-modal';
-
-export const CLASS_NAMES = {
-  container: `${FULLSCREEN_MODAL_CLASS_NAME} w-screen min-h-vvp bg-neutral-000 absolute overflow-scroll top-0`,
-  headerBase: 'w-full bg-neutral-000',
-  headerBorder: 'border-b border-neutral-200',
-  wrapper: 'flex flex-1 w-full min-h-full flex-col absolute pb-6',
-  content: 'flex flex-1 flex-col py-8 px-6 self-stretch',
-  footer: 'flex w-full px-6',
-};

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

@@ -1,48 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import useModalLayoutFullScreenClassNames from './useModalLayoutFullScreenClassNames';
-
-export interface ModalLayoutFullScreenProps {
-  children: JSX.Element | JSX.Element[];
-  /**
-   * Header component
-   */
-  header?: JSX.Element;
-  /**
-   * Footer component
-   */
-  footer?: JSX.Element;
-  /**
-   * Removes header border
-   */
-  noBorder?: boolean;
-  /**
-   * Keep header in place
-   */
-  stickyHeader?: boolean;
-}
-
-const ModalLayoutFullScreen: FunctionComponent<ModalLayoutFullScreenProps> =
-  function ({
-    children = null,
-    header,
-    footer,
-    noBorder = false,
-    stickyHeader = false,
-  }) {
-    const classNames = useModalLayoutFullScreenClassNames(
-      noBorder,
-      stickyHeader,
-    );
-
-    return (
-      <div className={classNames.container}>
-        <div className={classNames.wrapper}>
-          <div className={classNames.header}>{header}</div>
-          <div className={classNames.content}>{children}</div>
-          <div className={classNames.footer}>{footer}</div>
-        </div>
-      </div>
-    );
-  };
-
-export default ModalLayoutFullScreen;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutFullScreen/useModalLayoutFullScreenClassNames.ts

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import { getDocument } from '~/common/helpers';
-import {
-  CLASS_NAMES,
-  FULLSCREEN_MODAL_CLASS_NAME,
-  BODY_FULLSCREEN_MODAL_CLASS_NAME,
-} from './constants';
-
-export interface ModalLayoutFullScreenClassNamesHook {
-  container: string;
-  wrapper: string;
-  content: string;
-  footer: string;
-  header: string;
-}
-
-export default function useModalLayoutFullScreenClassNames(
-  noBorder: boolean,
-  stickyHeader: boolean,
-): ModalLayoutFullScreenClassNamesHook {
-  const { headerBase, headerBorder, ...classNames } = CLASS_NAMES;
-
-  const header = clsx(
-    headerBase,
-    noBorder ? '' : headerBorder,
-    stickyHeader ? 'sticky top-0' : '',
-  );
-
-  useEffect(() => {
-    document.body.classList.add(BODY_FULLSCREEN_MODAL_CLASS_NAME);
-
-    return () => {
-      if (
-        getDocument()?.getElementsByClassName(FULLSCREEN_MODAL_CLASS_NAME)
-          .length === 0
-      ) {
-        getDocument()?.body.classList.remove(BODY_FULLSCREEN_MODAL_CLASS_NAME);
-      }
-    };
-  }, []);
-
-  return {
-    ...classNames,
-    header,
-  };
-}

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

@@ -1,12 +0,0 @@
-export const BODY_SLIDE_LEFT_MODAL_CLASS_NAME = 'slide-left-modal-visible';
-
-export const SLIDE_LEFT_MODAL_CLASS_NAME = 'slide-left-modal';
-
-export const CLASS_NAMES = {
-  container: `${SLIDE_LEFT_MODAL_CLASS_NAME} w-screen max-w-sm min-h-vvp bg-neutral-000 absolute right-0`,
-  headerBase: 'w-full',
-  headerBorder: 'border-b border-neutral-200',
-  wrapper: 'flex flex-1 w-full min-h-full flex-col absolute pb-6',
-  content: 'flex flex-1 flex-col py-8 px-6 self-stretch',
-  footer: 'flex w-full px-6',
-};

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

@@ -1,39 +0,0 @@
-import React, { forwardRef } from 'react';
-import useModalLayoutSlideLeftClassNames from './useModalLayoutSlideLeftClassNames';
-
-interface ModalLayoutSlideLeftProps {
-  children?: JSX.Element | JSX.Element[];
-  /**
-   * Header component
-   */
-  header?: JSX.Element | JSX.Element[];
-  /**
-   * Footer component
-   */
-  footer?: JSX.Element | JSX.Element[];
-  /**
-   * Removes header border
-   */
-  noBorder?: boolean;
-}
-
-const ModalLayoutSlideLeft = forwardRef<
-  HTMLDivElement,
-  ModalLayoutSlideLeftProps
->(({ children, header, footer, noBorder = false }, ref) => {
-  const classNames = useModalLayoutSlideLeftClassNames(noBorder);
-
-  return (
-    <div className={classNames.container} ref={ref}>
-      <div className={classNames.wrapper}>
-        <div className={classNames.header}>{header}</div>
-        <div className={classNames.content}>{children}</div>
-        <div className={classNames.footer}>{footer}</div>
-      </div>
-    </div>
-  );
-});
-
-ModalLayoutSlideLeft.displayName = 'ModalLayoutSlideLeft';
-
-export default ModalLayoutSlideLeft;

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutSlideLeft/useModalLayoutSlideLeftClassNames.ts

@@ -1,42 +0,0 @@
-import { useEffect } from 'react';
-import clsx from 'clsx';
-import {
-  BODY_SLIDE_LEFT_MODAL_CLASS_NAME,
-  CLASS_NAMES,
-  SLIDE_LEFT_MODAL_CLASS_NAME,
-} from './constants';
-import { getDocument } from '~/common/helpers';
-
-export interface ModalLayoutSlideLeftClassNamesHook {
-  header: string;
-  container: string;
-  wrapper: string;
-  content: string;
-  footer: string;
-}
-
-export default function useModalLayoutSlideLeftClassNames(
-  noBorder: boolean,
-): ModalLayoutSlideLeftClassNamesHook {
-  const { headerBase, headerBorder, ...classNames } = CLASS_NAMES;
-
-  const header = clsx(headerBase, noBorder ? '' : headerBorder);
-
-  useEffect(() => {
-    document.body.classList.add(BODY_SLIDE_LEFT_MODAL_CLASS_NAME);
-
-    return () => {
-      if (
-        getDocument()?.getElementsByClassName(SLIDE_LEFT_MODAL_CLASS_NAME)
-          .length === 0
-      ) {
-        getDocument()?.body.classList.remove(BODY_SLIDE_LEFT_MODAL_CLASS_NAME);
-      }
-    };
-  }, []);
-
-  return {
-    ...classNames,
-    header,
-  };
-}

package/app/.yalc/@kanda-libs/ks-design-library/src/components/Modal/ModalLayout/ModalLayoutSlideUp/Container.ts

@@ -1,41 +0,0 @@
-import type { FunctionComponent } from 'react';
-
-import clsx from 'clsx';
-import { CLASS_NAMES, VARIANTS } from './constants';
-
-export interface ContainerChildrenArgs {
-  classNames: {
-    container: string;
-    wrapper: string;
-    header: string;
-    space: string;
-    bg: string;
-  };
-  linesVisible: boolean;
-}
-
-export interface ContainerProps {
-  variant: 'DEFAULT' | 'MARKETING';
-  children: (args: ContainerChildrenArgs) => JSX.Element;
-}
-
-const Container: FunctionComponent<ContainerProps> = function ({
-  variant = 'DEFAULT',
-  children,
-}) {
-  const { bgBase, ...classNames } = CLASS_NAMES;
-
-  const bg = clsx(bgBase, variant !== VARIANTS.MARKETING && 'shadow-c');
-
-  const linesVisible = variant === VARIANTS.MARKETING;
-
-  return children({
-    classNames: {
-      ...classNames,
-      bg,
-    },
-    linesVisible,
-  });
-};
-
-export default Container;

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

@@ -1,18 +0,0 @@
-import type { StringIndexedObject } from '~/types';
-
-export const CLASS_NAMES = {
-  container: `flex flex-1 flex-col fixed right-0 bottom-0 w-full`,
-  wrapper: 'flex flex-1 w-full flex-col relative p-6 pt-10',
-  header: 'absolute top-0 right-0 px-3 py-4 z-10',
-  space: 'w-full opacity-0',
-  bgBase:
-    'absolute top-0 -bottom-10 right-0 left-0 transform skew-y-slide-up origin-full bg-neutral-000',
-};
-
-export const VARIANTS: StringIndexedObject<string> = {
-  MARKETING: 'marketing',
-  DEFAULT: 'default',
-};
-
-export const SPACE =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaoAAAAcCAYAAAAwa/sqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIpSURBVHgB7dxdjoIwFIbh4k/inbgCu/9NeOmi1DA9DdUjqY5YgULfJ2FaxQgXE79pv4yVAQBgYKfTSYZ6t9vVMrler7ZpGpnXVVXt3XiQ+Wq1knkt59xh3bypDAAAH9Bhc7vddJgYFzZ+dEFzlLF9vm7D6H7+CwQVAJTkfD7LYOVHz7CRlU9txkdQAcDc6LDpsYVmzHRhk4KgAoCxJfQ1KVtoc0VQAcC3XOCM3deUiKACUDa3jWZlfBE2YVWTS19TIoIKwPyFsCmgrykRQQVgepEttKewCVtohr6mRAQVgN+gr8FACCoAD7EtNHlMX4MJEVTA0tDXYGEIKiA3b7bQ6GtQIoIKGAJ9DfAzBBXwCn0NkAWCCnmTr5pxKxP5Z0wJBH8IFwZ+dGFx/x2OnV+v11bGSF/j5/Q1QPaajQEG9mnYhOf1+cvlElYy4bDt24awufc1nfN+lGuG9wrX08K19P0AyAtBhY+039YsK5PYh3vlwsY/7hk2x85o1Wv84+12+zZs9L2o+wGwIARVQWJhoz7Yn8Imct6qUYfJsZ3vI+f9QdgASEFQzUhqX2PiYbN/Mdev7bWF1rkmACQhqEZGXwMA/RBUX5igr2ELDUCxigyqsKoR9DUAkLfZBlVKX6NWNcIa+hoAyNakQRW20Mbua/5b1ehr6fsBAIwvOahS+hrzCA/6GgBA1GbKviYETXg/wgYA0CUrqnd9zaEdh+hrGgMAy8Bf0QP6A9tBPu/advbCAAAAAElFTkSuQmCC';

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

@@ -1,46 +0,0 @@
-import React, { forwardRef, FunctionComponent } from 'react';
-import Button from '~/components/Button';
-import type { HomeLinkProps } from '~/components/ConfigWrapper';
-import { default as Lines } from '~/assets/images/marketing-slide-up-header.svg';
-import Container from './Container';
-import { SPACE } from './constants';
-
-interface ModalLayoutSlideUpProps {
-  id: string;
-  children: JSX.Element | JSX.Element[];
-  onClose?: () => void;
-  variant?: 'DEFAULT' | 'MARKETING';
-}
-
-const ModalLayoutSlideUp = forwardRef<HTMLDivElement, ModalLayoutSlideUpProps>(
-  ({ id, children, variant = 'DEFAULT', onClose }, ref) => {
-    const LinesTag = Lines as unknown as FunctionComponent<HomeLinkProps>;
-
-    return (
-      <Container variant={variant}>
-        {({ classNames, linesVisible }) => (
-          <div className={classNames.container} ref={ref}>
-            <div className={classNames.bg}>
-              {linesVisible && <LinesTag className="w-full" />}
-            </div>
-            <img alt="" src={SPACE} className={classNames.space} />
-            {onClose && (
-              <div className={classNames.header}>
-                <Button.Icon
-                  id={`${id}-close`}
-                  onClick={onClose}
-                  icon="close"
-                />
-              </div>
-            )}
-            <div className={classNames.wrapper}>{children}</div>
-          </div>
-        )}
-      </Container>
-    );
-  },
-);
-
-ModalLayoutSlideUp.displayName = 'ModalLayoutSlideUp';
-
-export default ModalLayoutSlideUp;

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

@@ -1,33 +0,0 @@
-export const OPACITIES = [
-  5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
-  100,
-] as const;
-
-// This isn't great but we cannot do this dynamically as tailwind fails to pick
-// up the needed classes due to JIT compilation.
-export const OPACITY_CLASS_NAMES: Record<number, string> = {
-  5: 'opacity-5',
-  10: 'opacity-10',
-  15: 'opacity-15',
-  20: 'opacity-20',
-  25: 'opacity-25',
-  30: 'opacity-30',
-  35: 'opacity-35',
-  40: 'opacity-40',
-  45: 'opacity-45',
-  50: 'opacity-50',
-  55: 'opacity-55',
-  60: 'opacity-60',
-  65: 'opacity-65',
-  70: 'opacity-70',
-  75: 'opacity-75',
-  80: 'opacity-80',
-  85: 'opacity-85',
-  90: 'opacity-90',
-  95: 'opacity-95',
-  100: 'opacity-100',
-};
-
-export const BACKDROP_CLASS_NAME = 'fixed bg-neutral-900 w-full h-full';
-
-export const ESC_KEY = 27;

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

@@ -1,19 +0,0 @@
-import type { OPACITIES } from './constants';
-
-/*
- * Produces the opacity suffix for the modal backdrop
- *
- */
-export const opacitySuffix = (opacity: typeof OPACITIES[number]): string => {
-  try {
-    // Type check on opacity, ensure it is an int
-    const intOpacity = parseInt(opacity as unknown as string, 10);
-    // Use modulo 100 to get correct fade increment -
-    if ((100 + intOpacity) % 100) return `-${(100 + intOpacity) % 100}`;
-    // If intOpacity is 100, we just returned an empty string as `fade-in` goes
-    // from 0 to 100
-    return '';
-  } catch {
-    return '';
-  }
-};

package/app/.yalc/@kanda-libs/ks-design-library/src/components/ModalsWrapper/Loader/LoaderContainer.tsx

@@ -1,99 +0,0 @@
-import React, {
-  type FunctionComponent,
-  useState,
-  useRef,
-  useEffect,
-} from 'react';
-import ReactDOM from 'react-dom';
-import clsx from 'clsx';
-import { useDebounce } from 'use-debounce';
-import {
-  SLOW_ANIMATION,
-  FAST_ANIMATION,
-  WIDTHS,
-  FAST_ANIMATION_SPEED,
-  INITIAL_DELAY,
-  CLASS_NAMES,
-  DEBOUNCE_INTERVAL,
-} from './constants';
-import { getDocument } from '~/common/helpers';
-
-interface LoaderContainerChildrenArgs {
-  width: string;
-  classNames: {
-    bar: string;
-    overlay: string;
-    container: string;
-  };
-}
-
-export interface LoaderContainerProps {
-  isLoading: boolean;
-  children: (args: LoaderContainerChildrenArgs) => JSX.Element;
-}
-
-const LoaderContainer: FunctionComponent<LoaderContainerProps> = function ({
-  children,
-  isLoading,
-}) {
-  const loaded = useRef(false);
-
-  const [animate, setAnimate] = useState(SLOW_ANIMATION);
-  const [width, setWidth] = useState(WIDTHS.START);
-
-  const [debouncedLoading] = useDebounce(isLoading, DEBOUNCE_INTERVAL);
-
-  /**
-   * Creates css animations when isLoading is true
-   * and resets the state after it's completed
-   */
-  useEffect(() => {
-    if (debouncedLoading) {
-      // starts the fake animation to given percentage
-      setTimeout(() => {
-        loaded.current = true;
-        setAnimate(SLOW_ANIMATION);
-        setWidth(WIDTHS.LOADING);
-      }, INITIAL_DELAY);
-      return;
-    }
-
-    if (loaded.current) {
-      // starts a fast animation to 100%
-      setAnimate(FAST_ANIMATION);
-      setWidth(WIDTHS.COMPLETE);
-      loaded.current = false;
-      setTimeout(() => {
-        // resets the state to initial values after animation is complete
-        setAnimate('');
-        setWidth(WIDTHS.START);
-      }, FAST_ANIMATION_SPEED);
-      return;
-    }
-
-    // resets the state to initial values
-    setAnimate('');
-    setWidth(WIDTHS.START);
-  }, [debouncedLoading]);
-
-  const { baseBar, ...classNames } = CLASS_NAMES;
-
-  const bar = clsx(baseBar, animate);
-
-  const modals = getDocument()?.getElementById('modals');
-
-  if (!modals) return <></>;
-
-  return ReactDOM.createPortal(
-    children({
-      width,
-      classNames: {
-        ...classNames,
-        bar,
-      },
-    }),
-    getDocument()?.getElementById('modals') as HTMLElement,
-  );
-};
-
-export default LoaderContainer;

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

@@ -1,21 +0,0 @@
-export const SLOW_ANIMATION = 'duration-3000 transition-all ease';
-
-export const FAST_ANIMATION_SPEED = 300;
-
-export const INITIAL_DELAY = 50;
-
-export const FAST_ANIMATION = 'duration-300 transition-all ease';
-
-export const WIDTHS = {
-  START: '0%',
-  LOADING: '75%',
-  COMPLETE: '100%',
-};
-
-export const CLASS_NAMES = {
-  overlay: 'fixed top-0 bottom-0 right-0 left-0 z-40',
-  container: 'fixed bottom-0 right-0 left-0 z-50',
-  baseBar: 'bg-gradient-to-r from-blue-200 to-turquoise-300 h-2',
-};
-
-export const DEBOUNCE_INTERVAL = 100;