@npm_leadtech/legal-lib-components 5.63.5 → 5.64.1

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BenefitRatafiaCard } from '../../atoms';
+import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled';
+const BenefitRatafiaCardList = ({ benefits = [] }) => {
+    if (benefits.length === 0)
+        return null;
+    return (_jsx(BenefitRatafiaCardListStyled, { className: 'benefit-ratafia-card-list', children: benefits.map((benefit) => (_jsx(BenefitRatafiaCard, { ...benefit }, benefit.id))) }));
+};
+export default BenefitRatafiaCardList;

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.styled.d.ts

@@ -0,0 +1 @@
+export declare const BenefitRatafiaCardListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.styled.js

@@ -0,0 +1,15 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BenefitRatafiaCardListStyled = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--global-gap);
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`;

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.styled.ts

@@ -0,0 +1,16 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BenefitRatafiaCardListStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--global-gap);
+
+  @media ${device.laptop} {
+    flex-direction: row;
+    gap: 2rem;
+  }
+`

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardList.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+
+import { BenefitRatafiaCard } from '../../atoms'
+import { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'
+import { BenefitRatafiaCardListStyled } from './BenefitRatafiaCardList.styled'
+
+const BenefitRatafiaCardList: FC<BenefitRatafiaCardListProps> = ({ benefits = [] }) => {
+  if (benefits.length === 0) return null
+
+  return (
+    <BenefitRatafiaCardListStyled className='benefit-ratafia-card-list'>
+      {benefits.map((benefit) => (
+        <BenefitRatafiaCard key={benefit.id} {...benefit} />
+      ))}
+    </BenefitRatafiaCardListStyled>
+  )
+}
+export default BenefitRatafiaCardList

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.d.ts

@@ -0,0 +1,4 @@
+import { type BenefitRatafiaCardProps } from '../../atoms';
+export interface BenefitRatafiaCardListProps {
+    benefits: BenefitRatafiaCardProps[];
+}

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/BenefitRatafiaCardList/BenefitRatafiaCardListProps.types.ts

@@ -0,0 +1,5 @@
+import { type BenefitRatafiaCardProps } from '../../atoms'
+
+export interface BenefitRatafiaCardListProps {
+  benefits: BenefitRatafiaCardProps[]
+}

package/dist/src/components/molecules/BenefitRatafiaCardList/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BenefitRatafiaCardList } from './BenefitRatafiaCardList';
+export { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types';

package/dist/src/components/molecules/BenefitRatafiaCardList/index.js

@@ -0,0 +1 @@
+export { default as BenefitRatafiaCardList } from './BenefitRatafiaCardList';

package/dist/src/components/molecules/BenefitRatafiaCardList/index.ts

@@ -0,0 +1,2 @@
+export { default as BenefitRatafiaCardList } from './BenefitRatafiaCardList'
+export { type BenefitRatafiaCardListProps } from './BenefitRatafiaCardListProps.types'

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type BottomFixedBarProps } from './BottomFixedBarProps.types';
+declare const BottomFixedBar: FC<BottomFixedBarProps>;
+export default BottomFixedBar;

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, RichTextInner } from '../../atoms';
+import { BottomFixedBarStyled } from './BottomFixedBar.styled';
+const BottomFixedBar = ({ text, button }) => {
+    if (text === undefined || button === undefined)
+        return null;
+    return (_jsxs(BottomFixedBarStyled, { className: 'bottom-fixed-bar', children: [_jsx(RichTextInner, { customClass: 'bottom-fixed-bar__text sans-serif --extra-small', children: text }), _jsx("div", { className: 'bottom-fixed-bar__button-container', children: _jsx(Button, { noLink: true, color: 'primary3', ...button }) })] }));
+};
+export default BottomFixedBar;

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.styled.d.ts

@@ -0,0 +1 @@
+export declare const BottomFixedBarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.styled.js

@@ -0,0 +1,50 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BottomFixedBarStyled = styled.div `
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  .bottom-fixed-bar {
+    &__text {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      max-width: 48rem;
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 1.5rem;
+      }
+
+      @media ${device.laptop} {
+        margin-right: 2.5rem;
+      }
+
+      a {
+        text-decoration: underline;
+        color: var(--others-white);
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    &__button-container > .e-button {
+      white-space: nowrap;
+    }
+  }
+`;

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.styled.ts

@@ -0,0 +1,51 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BottomFixedBarStyled = styled.div`
+  padding: 0 1.5rem 1rem;
+  display: flex;
+  z-index: 3;
+  bottom: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: black;
+  color: var(--others-white);
+
+  @media ${device['portrait-tablets']} {
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 0;
+  }
+
+  .bottom-fixed-bar {
+    &__text {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      max-width: 48rem;
+
+      @media ${device['portrait-tablets']} {
+        margin-bottom: 1rem;
+        margin-right: 1.5rem;
+      }
+
+      @media ${device.laptop} {
+        margin-right: 2.5rem;
+      }
+
+      a {
+        text-decoration: underline;
+        color: var(--others-white);
+      }
+
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    &__button-container > .e-button {
+      white-space: nowrap;
+    }
+  }
+`

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBar.tsx

@@ -0,0 +1,20 @@
+import React, { type FC } from 'react'
+
+import { Button, RichTextInner } from '../../atoms'
+import { type BottomFixedBarProps } from './BottomFixedBarProps.types'
+import { BottomFixedBarStyled } from './BottomFixedBar.styled'
+
+const BottomFixedBar: FC<BottomFixedBarProps> = ({ text, button }) => {
+  if (text === undefined || button === undefined) return null
+
+  return (
+    <BottomFixedBarStyled className='bottom-fixed-bar'>
+      <RichTextInner customClass='bottom-fixed-bar__text sans-serif --extra-small'>{text}</RichTextInner>
+      <div className='bottom-fixed-bar__button-container'>
+        <Button noLink color='primary3' {...button} />
+      </div>
+    </BottomFixedBarStyled>
+  )
+}
+
+export default BottomFixedBar

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBarProps.types.d.ts

@@ -0,0 +1,5 @@
+import { type ButtonProps } from '../../atoms';
+export interface BottomFixedBarProps {
+    text: string | React.ReactNode;
+    button: ButtonProps;
+}

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBarProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/BottomFixedBar/BottomFixedBarProps.types.ts

@@ -0,0 +1,6 @@
+import { type ButtonProps } from '../../atoms'
+
+export interface BottomFixedBarProps {
+  text: string | React.ReactNode
+  button: ButtonProps
+}

package/dist/src/components/molecules/BottomFixedBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BottomFixedBar } from './BottomFixedBar';
+export { type BottomFixedBarProps } from './BottomFixedBarProps.types';

package/dist/src/components/molecules/BottomFixedBar/index.js

@@ -0,0 +1 @@
+export { default as BottomFixedBar } from './BottomFixedBar';

package/dist/src/components/molecules/BottomFixedBar/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomFixedBar } from './BottomFixedBar'
+export { type BottomFixedBarProps } from './BottomFixedBarProps.types'

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type BottomOverlayProps } from './BottomOverlayProps.types';
+declare const BottomOverlay: FC<BottomOverlayProps>;
+export default BottomOverlay;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect, useRef, useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
+import { BottomOverlayStyled } from './BottomOverlay.styled';
+const BottomOverlay = ({ givenClass, header, body, open = false, onClose, footer, enableDisableScroll = true }) => {
+    const [scrollingDown, setScrollingDown] = useState(false);
+    const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : '';
+    const overlayBackground = useRef(null);
+    const overlayMessage = useRef(null);
+    useEffect(() => {
+        handleBodyScroll(open);
+        if (open) {
+            const backgroundElement = overlayBackground.current;
+            backgroundElement.addEventListener('mousedown', handleCloseModal);
+            return () => {
+                backgroundElement.removeEventListener('mousedown', handleCloseModal);
+            };
+        }
+    }, [open]);
+    const handleBodyScroll = (disableScroll) => {
+        if (enableDisableScroll && disableScroll) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.position = 'fixed';
+        }
+        else {
+            document.body.style.overflow = 'unset';
+            document.body.style.position = 'relative';
+            document.body.style.width = '100%';
+        }
+    };
+    const handleCloseModal = (event) => {
+        if (onClose != null)
+            onClose();
+    };
+    const handleScroll = (event) => {
+        setScrollingDown(true);
+        const targetElement = event.target;
+        if (targetElement.scrollTop === 0) {
+            setScrollingDown(false);
+        }
+    };
+    const swipeableConfig = {
+        trackMouse: true
+    };
+    const handlers = useSwipeable({
+        onSwipedDown: (eventData) => {
+            swipeEventHandler(eventData);
+        },
+        ...swipeableConfig
+    });
+    const swipeEventHandler = (data) => {
+        const messageElement = overlayMessage.current;
+        const mouseYPosition = data.initial;
+        if (mouseYPosition[1] < messageElement.offsetTop) {
+            if (onClose != null)
+                onClose();
+        }
+    };
+    return (_jsxs(BottomOverlayStyled, { className: `bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`, ...handlers, children: [_jsx("div", { ref: overlayBackground, className: 'bottom-overlay__background' }), _jsxs("nav", { ref: overlayMessage, className: 'bottom-overlay__nav', children: [_jsx("div", { className: `overlay__delimiter ${scrollingShadow}` }), header, _jsx("div", { className: 'overlay__scrollable-section', onScroll: handleScroll, children: body }), footer !== undefined && _jsx("div", { className: 'overlay__footer', children: footer })] })] }));
+};
+export default BottomOverlay;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.styled.d.ts

@@ -0,0 +1 @@
+export declare const BottomOverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.styled.js

@@ -0,0 +1,94 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const BottomOverlayStyled = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  .bottom-overlay {
+    &__background {
+      background-color: var(--primary-main-dark-2);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      opacity: 0;
+      transition: opacity ease-out 0.3s;
+    }
+
+    &__nav {
+      background: var(--others-white);
+      border-top-left-radius: var(--s-border-radius);
+      border-top-right-radius: var(--s-border-radius);
+      bottom: 0;
+      position: absolute;
+      transform: translateY(100%);
+      transition: transform 0.5s ease-in-out;
+      width: 100%;
+      z-index: 2;
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        transform: translateY(0);
+      }
+
+      .overlay__delimiter {
+        padding: 0.5rem 0 1.5rem;
+
+        @media ${device['landscape-tablets']} {
+          display: none;
+        }
+
+        &:after {
+          content: '';
+          background: var(--neutral-neutral-3);
+          border-radius: var(--s-border-radius);
+          display: block;
+          height: 0.25rem;
+          margin: 0 auto;
+          width: 7.5rem;
+        }
+
+        &.overlay__delimiter__scrolling {
+          box-shadow: var(--box-shadow-small);
+          position: relative;
+          z-index: 1;
+        }
+      }
+
+      .overlay__scrollable-section {
+        position: sticky;
+        max-height: 30rem;
+        min-height: 8.5rem;
+        display: flex;
+        overflow-y: auto;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        width: 100%;
+      }
+
+      .overlay__footer {
+        border-top: solid 1px var(--neutral-neutral-4);
+        padding: 1.5rem 1.5rem 2rem;
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.styled.ts

@@ -0,0 +1,95 @@
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
+
+export const BottomOverlayStyled = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  visibility: hidden;
+
+  &.show {
+    visibility: visible;
+
+    .bottom-overlay__background {
+      opacity: 0.8;
+    }
+
+    .bottom-overlay__nav {
+      transform: translateY(0);
+    }
+  }
+
+  .bottom-overlay {
+    &__background {
+      background-color: var(--primary-main-dark-2);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      opacity: 0;
+      transition: opacity ease-out 0.3s;
+    }
+
+    &__nav {
+      background: var(--others-white);
+      border-top-left-radius: var(--s-border-radius);
+      border-top-right-radius: var(--s-border-radius);
+      bottom: 0;
+      position: absolute;
+      transform: translateY(100%);
+      transition: transform 0.5s ease-in-out;
+      width: 100%;
+      z-index: 2;
+
+      @media ${device['landscape-tablets']} {
+        display: block;
+        transform: translateY(0);
+      }
+
+      .overlay__delimiter {
+        padding: 0.5rem 0 1.5rem;
+
+        @media ${device['landscape-tablets']} {
+          display: none;
+        }
+
+        &:after {
+          content: '';
+          background: var(--neutral-neutral-3);
+          border-radius: var(--s-border-radius);
+          display: block;
+          height: 0.25rem;
+          margin: 0 auto;
+          width: 7.5rem;
+        }
+
+        &.overlay__delimiter__scrolling {
+          box-shadow: var(--box-shadow-small);
+          position: relative;
+          z-index: 1;
+        }
+      }
+
+      .overlay__scrollable-section {
+        position: sticky;
+        max-height: 30rem;
+        min-height: 8.5rem;
+        display: flex;
+        overflow-y: auto;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+        width: 100%;
+      }
+
+      .overlay__footer {
+        border-top: solid 1px var(--neutral-neutral-4);
+        padding: 1.5rem 1.5rem 2rem;
+      }
+    }
+  }
+`

package/dist/src/components/molecules/BottomOverlay/BottomOverlay.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { type FC, useEffect, useRef, useState } from 'react'
+import { useSwipeable } from 'react-swipeable'
+
+import { type BottomOverlayProps } from './BottomOverlayProps.types'
+import { BottomOverlayStyled } from './BottomOverlay.styled'
+
+const BottomOverlay: FC<BottomOverlayProps> = ({
+  givenClass,
+  header,
+  body,
+  open = false,
+  onClose,
+  footer,
+  enableDisableScroll = true
+}) => {
+  const [scrollingDown, setScrollingDown] = useState<boolean>(false)
+  const scrollingShadow = scrollingDown ? 'overlay__delimiter__scrolling' : ''
+  const overlayBackground = useRef<HTMLDivElement | null>(null)
+  const overlayMessage = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    handleBodyScroll(open)
+    if (open) {
+      const backgroundElement = overlayBackground.current as HTMLElement
+      backgroundElement.addEventListener('mousedown', handleCloseModal)
+      return () => {
+        backgroundElement.removeEventListener('mousedown', handleCloseModal)
+      }
+    }
+  }, [open])
+
+  const handleBodyScroll = (disableScroll: boolean): void => {
+    if (enableDisableScroll && disableScroll) {
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'fixed'
+    } else {
+      document.body.style.overflow = 'unset'
+      document.body.style.position = 'relative'
+      document.body.style.width = '100%'
+    }
+  }
+
+  const handleCloseModal = (event: MouseEvent): void => {
+    if (onClose != null) onClose()
+  }
+
+  const handleScroll: React.UIEventHandler<HTMLDivElement> = (event) => {
+    setScrollingDown(true)
+
+    const targetElement = event.target as HTMLElement
+    if (targetElement.scrollTop === 0) {
+      setScrollingDown(false)
+    }
+  }
+
+  const swipeableConfig = {
+    trackMouse: true
+  }
+  const handlers = useSwipeable({
+    onSwipedDown: (eventData) => {
+      swipeEventHandler(eventData)
+    },
+    ...swipeableConfig
+  })
+
+  interface SwipeData {
+    initial: number[]
+  }
+
+  const swipeEventHandler = (data: SwipeData): void => {
+    const messageElement = overlayMessage.current as HTMLElement
+    const mouseYPosition = data.initial
+    if (mouseYPosition[1] < messageElement.offsetTop) {
+      if (onClose != null) onClose()
+    }
+  }
+
+  return (
+    <BottomOverlayStyled className={`bottom-overlay ${givenClass ?? ''} ${open ? 'show' : ''}`} {...handlers}>
+      <div ref={overlayBackground} className='bottom-overlay__background'></div>
+      <nav ref={overlayMessage} className='bottom-overlay__nav'>
+        <div className={`overlay__delimiter ${scrollingShadow}`} />
+        {header}
+        <div className='overlay__scrollable-section' onScroll={handleScroll}>
+          {body}
+        </div>
+        {footer !== undefined && <div className='overlay__footer'>{footer}</div>}
+      </nav>
+    </BottomOverlayStyled>
+  )
+}
+
+export default BottomOverlay

package/dist/src/components/molecules/BottomOverlay/BottomOverlayProps.types.d.ts

@@ -0,0 +1,9 @@
+export interface BottomOverlayProps {
+    givenClass?: string;
+    header?: any;
+    body?: any;
+    footer?: React.ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    enableDisableScroll?: boolean;
+}

package/dist/src/components/molecules/BottomOverlay/BottomOverlayProps.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/molecules/BottomOverlay/BottomOverlayProps.types.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface BottomOverlayProps {
+  givenClass?: string
+  header?: any
+  body?: any
+  footer?: React.ReactNode
+  open?: boolean
+  onClose?: () => void
+  enableDisableScroll?: boolean
+}

package/dist/src/components/molecules/BottomOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BottomOverlay } from './BottomOverlay';
+export { type BottomOverlayProps } from './BottomOverlayProps.types';

package/dist/src/components/molecules/BottomOverlay/index.js

@@ -0,0 +1 @@
+export { default as BottomOverlay } from './BottomOverlay';

package/dist/src/components/molecules/BottomOverlay/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomOverlay } from './BottomOverlay'
+export { type BottomOverlayProps } from './BottomOverlayProps.types'

package/dist/src/components/molecules/BoxForm/BoxForm.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type BoxFormProps } from './BoxFormProps.types';
+declare const BoxForm: FC<BoxFormProps>;
+export default BoxForm;