@npm_leadtech/legal-lib-components 7.12.1 → 7.12.2

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.d.ts

@@ -1,36 +0,0 @@
-export interface Products {
-    categoryUrl?: string;
-    isFeatured?: boolean;
-    popularOrder: number;
-    jumboTitle: string;
-    linkText: string;
-    slug: string;
-    footerPopularDocument?: boolean;
-    logoImgBig?: string;
-    logoImgSmall?: string;
-    categoryProduct?: {
-        name: string;
-        icon: string;
-    };
-}
-export interface StrapiSearchBar {
-    title: string;
-    placeholder: string;
-}
-export interface Routes {
-    CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string;
-    CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string;
-    LEGAL_DOCUMENTS: string;
-    LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string;
-    LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string;
-    LOGIN: string;
-    MY_DOCUMENTS: string;
-    REGISTER: string;
-    RATAFIA_LOGIN: string;
-}
-export interface SearchBarProps {
-    products: Products[];
-    searchBarTexts: StrapiSearchBar;
-    routes: Routes;
-    handleResultClick: (product: string, link: string) => void;
-}

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.js

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

package/dist/src/components/molecules/SearchBar/SearchBarProps.types.ts

@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface Products {
-  categoryUrl?: string
-  isFeatured?: boolean
-  popularOrder: number
-  jumboTitle: string
-  linkText: string
-  slug: string
-  footerPopularDocument?: boolean
-  logoImgBig?: string
-  logoImgSmall?: string
-  categoryProduct?: {
-    name: string
-    icon: string
-  }
-}
-
-export interface StrapiSearchBar {
-  title: string
-  placeholder: string
-}
-
-export interface Routes {
-  CUSTOM_URL_FROM_APP_SUBDOMAIN: (url: string) => string
-  CUSTOM_URL_FROM_TARGET_ADDRESS: (url: string) => string
-  LEGAL_DOCUMENTS: string
-  LEGAL_DOCUMENTS_WITH_HASH: (category: string) => string
-  LEGAL_DOCUMENTS_WITH_CATEGORY: (category: string) => string
-  LOGIN: string
-  MY_DOCUMENTS: string
-  REGISTER: string
-  RATAFIA_LOGIN: string
-}
-
-export interface SearchBarProps {
-  products: Products[]
-  searchBarTexts: StrapiSearchBar
-  routes: Routes
-  handleResultClick: (product: string, link: string) => void
-}

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

@@ -1,2 +0,0 @@
-export { SearchBar } from './SearchBar';
-export { type SearchBarProps } from './SearchBarProps.types';

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

@@ -1 +0,0 @@
-export { SearchBar } from './SearchBar';

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

@@ -1,2 +0,0 @@
-export { SearchBar } from './SearchBar'
-export { type SearchBarProps } from './SearchBarProps.types'

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { type DocumentListMenuProps } from './DocumentListMenuProps.types';
-export declare const DocumentListMenu: React.FC<DocumentListMenuProps>;

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../atoms/Button';
-import { DocumentListMenuSection } from '../../molecules/DocumentListMenuSection';
-import { DocumentListMenuStyled } from './DocumentListMenu.styled';
-export const DocumentListMenu = ({ routes, seeAllLegalDocs, seeAllTypeDocs, finalMenu, hasSubCategoryPage, setCookiePolicyFunc }) => {
-    return (_jsxs(DocumentListMenuStyled, { className: 'document-list-menu', children: [_jsx("div", { className: 'documents-wrapper', children: finalMenu.map((item, index) => (_jsx("div", { className: 'products__list__section-container', children: _jsx(DocumentListMenuSection, { products: item.products, type: item.type, icon: item.icon, seeAllTypeDocs: seeAllTypeDocs, slug: finalMenu[0].slug, hasSubCategoryPage: hasSubCategoryPage, routes: routes, setCookiePolicyFunc: setCookiePolicyFunc }) }, index))) }), _jsx("div", { className: 'all-documents-button-wrapper', children: _jsx(Button, { color: 'transparent', centered: true, size: 'M', givenClass: 'all-documents-button', link: routes.LEGAL_DOCUMENTS, label: seeAllLegalDocs, dataQa: 'button-see-all-documents' }) })] }));
-};

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.d.ts

@@ -1 +0,0 @@
-export declare const DocumentListMenuStyled: 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/organisms/DocumentListMenu/DocumentListMenu.styled.js

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-export const DocumentListMenuStyled = styled.div `
-  display: flex;
-  flex-flow: column nowrap;
-  background: variables.get-color(others, white);
-  width: 100%;
-  padding: 1rem 0;
-
-  @include mediaqueries.sm {
-    display: none;
-  }
-
-  .documents-wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-    margin: auto;
-
-    @include mediaqueries.sm {
-      width: 696px;
-    }
-
-    @include mediaqueries.md {
-      width: 910px;
-    }
-
-    @include mediaqueries.xl {
-      width: 1128px;
-    }
-
-    .products__list__section-container {
-      text-align: left;
-      width: 100%;
-
-      @include mediaqueries.sm {
-        width: 33%;
-        padding-right: 1rem;
-        &:nth-child(3) {
-          padding-right: 0;
-        }
-      }
-
-      @include mediaqueries.md {
-        width: 20%;
-        &:nth-child(3) {
-          padding-right: 1rem;
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-  }
-
-  .all-documents-button-wrapper {
-    display: flex;
-
-    .all-documents-button {
-      margin: 1rem auto;
-      max-width: 330px;
-      width: 100%;
-    }
-  }
-`;

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.styled.ts

@@ -1,65 +0,0 @@
-import styled from 'styled-components'
-
-export const DocumentListMenuStyled = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  background: variables.get-color(others, white);
-  width: 100%;
-  padding: 1rem 0;
-
-  @include mediaqueries.sm {
-    display: none;
-  }
-
-  .documents-wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-    margin: auto;
-
-    @include mediaqueries.sm {
-      width: 696px;
-    }
-
-    @include mediaqueries.md {
-      width: 910px;
-    }
-
-    @include mediaqueries.xl {
-      width: 1128px;
-    }
-
-    .products__list__section-container {
-      text-align: left;
-      width: 100%;
-
-      @include mediaqueries.sm {
-        width: 33%;
-        padding-right: 1rem;
-        &:nth-child(3) {
-          padding-right: 0;
-        }
-      }
-
-      @include mediaqueries.md {
-        width: 20%;
-        &:nth-child(3) {
-          padding-right: 1rem;
-        }
-        &:last-child {
-          padding-right: 0;
-        }
-      }
-    }
-  }
-
-  .all-documents-button-wrapper {
-    display: flex;
-
-    .all-documents-button {
-      margin: 1rem auto;
-      max-width: 330px;
-      width: 100%;
-    }
-  }
-`

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenu.tsx

@@ -1,47 +0,0 @@
-import { Button } from '../../atoms/Button'
-import React from 'react'
-
-import { type DocumentListMenuProps } from './DocumentListMenuProps.types'
-import { DocumentListMenuSection } from '../../molecules/DocumentListMenuSection'
-import { DocumentListMenuStyled } from './DocumentListMenu.styled'
-
-export const DocumentListMenu: React.FC<DocumentListMenuProps> = ({
-  routes,
-  seeAllLegalDocs,
-  seeAllTypeDocs,
-  finalMenu,
-  hasSubCategoryPage,
-  setCookiePolicyFunc
-}) => {
-  return (
-    <DocumentListMenuStyled className={'document-list-menu'}>
-      <div className={'documents-wrapper'}>
-        {finalMenu.map((item, index) => (
-          <div className='products__list__section-container' key={index}>
-            <DocumentListMenuSection
-              products={item.products}
-              type={item.type}
-              icon={item.icon}
-              seeAllTypeDocs={seeAllTypeDocs}
-              slug={finalMenu[0].slug}
-              hasSubCategoryPage={hasSubCategoryPage}
-              routes={routes}
-              setCookiePolicyFunc={setCookiePolicyFunc}
-            ></DocumentListMenuSection>
-          </div>
-        ))}
-      </div>
-      <div className={'all-documents-button-wrapper'}>
-        <Button
-          color='transparent'
-          centered
-          size='M'
-          givenClass='all-documents-button'
-          link={routes.LEGAL_DOCUMENTS}
-          label={seeAllLegalDocs}
-          dataQa='button-see-all-documents'
-        ></Button>
-      </div>
-    </DocumentListMenuStyled>
-  )
-}

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Routes } from '../../sections/Header/HeaderProps.types';
-export interface ProductListMenuProps {
-    slug: string;
-    linkText: string;
-    categoryUrl?: string;
-}
-export interface DocumentListMenuSectionProps {
-    icon: React.ReactNode;
-    type: string;
-    products: ProductListMenuProps[];
-    slug: string;
-    seeAllTypeDocs: string;
-}
-export interface DocumentListMenuProps {
-    seeAllLegalDocs: string;
-    seeAllTypeDocs: string;
-    routes: Routes;
-    finalMenu: DocumentListMenuSectionProps[];
-    hasSubCategoryPage: boolean;
-    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
-}

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.js

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

package/dist/src/components/organisms/DocumentListMenu/DocumentListMenuProps.types.ts

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Routes } from '../../sections/Header/HeaderProps.types'
-
-export interface ProductListMenuProps {
-  slug: string
-  linkText: string
-  categoryUrl?: string
-}
-
-export interface DocumentListMenuSectionProps {
-  icon: React.ReactNode
-  type: string
-  products: ProductListMenuProps[]
-  slug: string
-  seeAllTypeDocs: string
-}
-
-export interface DocumentListMenuProps {
-  seeAllLegalDocs: string
-  seeAllTypeDocs: string
-  routes: Routes
-  finalMenu: DocumentListMenuSectionProps[]
-  hasSubCategoryPage: boolean
-  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
-}

package/dist/src/components/organisms/DocumentListMenu/index.d.ts

@@ -1,2 +0,0 @@
-export { DocumentListMenu } from './DocumentListMenu';
-export { type DocumentListMenuProps } from './DocumentListMenuProps.types';

package/dist/src/components/organisms/DocumentListMenu/index.js

@@ -1 +0,0 @@
-export { DocumentListMenu } from './DocumentListMenu';

package/dist/src/components/organisms/DocumentListMenu/index.ts

@@ -1,2 +0,0 @@
-export { DocumentListMenu } from './DocumentListMenu'
-export { type DocumentListMenuProps } from './DocumentListMenuProps.types'

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { type DocumentMainMenuProps } from '../DocumentMainMenu/DocumentMainMenuProps.types';
-export declare const DocumentMainMenu: React.FC<DocumentMainMenuProps>;

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowRight } from '../../../../images/componentsSvg/ArrowRight';
-import { DocumentMainMenuStyled } from './DocumentMainMenu.styled';
-import DocumentSubMenu from '../DocumentSubMenu/DocumentSubMenu';
-export const DocumentMainMenu = ({ seeAllTypeDocs, allLegalDocs, allTypeDocs, setCookiePolicyFunc, routes, hasSubCategoryPage, finalMenu }) => {
-    return (_jsxs(DocumentMainMenuStyled, { children: [finalMenu.map((item, index) => (_jsxs("li", { className: 'menu-items-li', children: [item.type, _jsx("div", { className: 'icon-arrow', children: _jsx(ArrowRight, {}) }), _jsxs("ul", { className: 'submenu__list', children: [item.products.map((product, index) => (_jsx(DocumentSubMenu, { product: product, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes }, index))), _jsx("li", { className: 'menu-items-li all-item', children: _jsx("a", { title: seeAllTypeDocs.replace(/{{type}}/g, item.type), "data-qa": `Header_Menu__${item.slug}_all-documents`, href: hasSubCategoryPage
-                                        ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(item.slug)
-                                        : routes.LEGAL_DOCUMENTS_WITH_HASH(item.type), children: item.type.includes('Documents')
-                                        ? allTypeDocs.replace(/{{type}}/g, item.type).replace('Documents', '')
-                                        : allTypeDocs.replace(/{{type}}/g, item.type) }) })] }, index)] }, index))), _jsx("li", { className: 'menu-items-li all-item', children: _jsx("a", { title: allLegalDocs, "data-qa": 'Header_Menu_Document_List_All_Documents', href: routes.LEGAL_DOCUMENTS, children: allLegalDocs }) })] }));
-};

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.styled.d.ts

@@ -1 +0,0 @@
-export declare const DocumentMainMenuStyled: 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/organisms/DocumentMainMenu/DocumentMainMenu.styled.js

@@ -1,97 +0,0 @@
-import styled from 'styled-components';
-export const DocumentMainMenuStyled = styled.div `
-  border-radius: var(--s-border-radius);
-  padding: 0.75rem 1rem;
-  margin-top: 0.5rem;
-  display: flex;
-  /* visibility: hidden;
-  opacity: 0; */
-  background: var(--others-white);
-  transition: all 0.1s ease;
-  box-shadow: var(--box-shadow-medium);
-  min-width: max-content;
-  flex-flow: column wrap;
-  position: absolute;
-  left: 0;
-
-  & > .menu-items-li {
-    display: flex;
-    justify-content: space-between;
-    padding-right: 0.5rem;
-    width: 100%;
-    margin: 0.25rem 2.5rem 0.25rem 0;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    padding: 0.25rem;
-    position: relative;
-    cursor: pointer;
-    align-items: baseline;
-
-    &.all-item {
-      font-weight: bold;
-      &:before {
-        content: none;
-      }
-    }
-
-    .icon-arrow {
-      width: 0.625rem;
-      height: 0.813rem;
-      &:before,
-      &:after {
-        width: 0.125rem;
-        background-color: var(--neutral-neutral-1);
-      }
-    }
-
-    &::marker {
-      content: none;
-    }
-
-    &:hover {
-      background-color: var(--primary-main-light-5);
-
-      .submenu__list {
-        opacity: 1;
-        visibility: visible;
-        margin-left: 1.5rem;
-        transition: all 0.4s ease;
-      }
-      .icon-arrow {
-        &:before,
-        &:after {
-          background-color: var(--primary-main);
-        }
-      }
-    }
-
-    .submenu__list {
-      border-radius: var(--s-border-radius);
-      padding: 0.75rem 1rem;
-      display: flex;
-      visibility: hidden;
-      opacity: 0;
-      margin-left: 1rem;
-      background: var(--others-white);
-      box-shadow: 0 0.125rem 0.5rem 0 #02374a40;
-      transition: all 0.1s ease;
-      min-width: max-content;
-      flex-flow: column wrap;
-      position: absolute;
-      left: 100%;
-      top: -1rem;
-    }
-
-    .submenu__list {
-      .all-item {
-        font-weight: bold;
-        margin: 0.25rem 3rem 0.25rem 0;
-        padding: 0.25rem;
-
-        &:hover {
-          background-color: var(--primary-main-light-5);
-        }
-      }
-    }
-  }
-`;

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.styled.ts

@@ -1,98 +0,0 @@
-import styled from 'styled-components'
-
-export const DocumentMainMenuStyled = styled.div`
-  border-radius: var(--s-border-radius);
-  padding: 0.75rem 1rem;
-  margin-top: 0.5rem;
-  display: flex;
-  /* visibility: hidden;
-  opacity: 0; */
-  background: var(--others-white);
-  transition: all 0.1s ease;
-  box-shadow: var(--box-shadow-medium);
-  min-width: max-content;
-  flex-flow: column wrap;
-  position: absolute;
-  left: 0;
-
-  & > .menu-items-li {
-    display: flex;
-    justify-content: space-between;
-    padding-right: 0.5rem;
-    width: 100%;
-    margin: 0.25rem 2.5rem 0.25rem 0;
-    border-radius: 4px;
-    transition: all 0.3s ease;
-    padding: 0.25rem;
-    position: relative;
-    cursor: pointer;
-    align-items: baseline;
-
-    &.all-item {
-      font-weight: bold;
-      &:before {
-        content: none;
-      }
-    }
-
-    .icon-arrow {
-      width: 0.625rem;
-      height: 0.813rem;
-      &:before,
-      &:after {
-        width: 0.125rem;
-        background-color: var(--neutral-neutral-1);
-      }
-    }
-
-    &::marker {
-      content: none;
-    }
-
-    &:hover {
-      background-color: var(--primary-main-light-5);
-
-      .submenu__list {
-        opacity: 1;
-        visibility: visible;
-        margin-left: 1.5rem;
-        transition: all 0.4s ease;
-      }
-      .icon-arrow {
-        &:before,
-        &:after {
-          background-color: var(--primary-main);
-        }
-      }
-    }
-
-    .submenu__list {
-      border-radius: var(--s-border-radius);
-      padding: 0.75rem 1rem;
-      display: flex;
-      visibility: hidden;
-      opacity: 0;
-      margin-left: 1rem;
-      background: var(--others-white);
-      box-shadow: 0 0.125rem 0.5rem 0 #02374a40;
-      transition: all 0.1s ease;
-      min-width: max-content;
-      flex-flow: column wrap;
-      position: absolute;
-      left: 100%;
-      top: -1rem;
-    }
-
-    .submenu__list {
-      .all-item {
-        font-weight: bold;
-        margin: 0.25rem 3rem 0.25rem 0;
-        padding: 0.25rem;
-
-        &:hover {
-          background-color: var(--primary-main-light-5);
-        }
-      }
-    }
-  }
-`

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenu.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-
-import { ArrowRight } from '../../../../images/componentsSvg/ArrowRight'
-import { type DocumentMainMenuProps } from '../DocumentMainMenu/DocumentMainMenuProps.types'
-import { DocumentMainMenuStyled } from './DocumentMainMenu.styled'
-import DocumentSubMenu from '../DocumentSubMenu/DocumentSubMenu'
-
-export const DocumentMainMenu: React.FC<DocumentMainMenuProps> = ({
-  seeAllTypeDocs,
-  allLegalDocs,
-  allTypeDocs,
-  setCookiePolicyFunc,
-  routes,
-  hasSubCategoryPage,
-  finalMenu
-}) => {
-  return (
-    <DocumentMainMenuStyled>
-      {finalMenu.map((item, index) => (
-        <li className='menu-items-li' key={index}>
-          {item.type}
-          <div className='icon-arrow'>
-            <ArrowRight />
-          </div>
-          <ul className={'submenu__list'} key={index}>
-            {item.products.map((product, index) => (
-              <DocumentSubMenu
-                product={product}
-                key={index}
-                setCookiePolicyFunc={setCookiePolicyFunc}
-                routes={routes}
-              />
-            ))}
-            <li className='menu-items-li all-item'>
-              <a
-                title={seeAllTypeDocs.replace(/{{type}}/g, item.type)}
-                data-qa={`Header_Menu__${item.slug}_all-documents`}
-                href={
-                  hasSubCategoryPage
-                    ? routes.LEGAL_DOCUMENTS_WITH_CATEGORY(item.slug)
-                    : routes.LEGAL_DOCUMENTS_WITH_HASH(item.type)
-                }
-              >
-                {item.type.includes('Documents')
-                  ? allTypeDocs.replace(/{{type}}/g, item.type).replace('Documents', '')
-                  : allTypeDocs.replace(/{{type}}/g, item.type)}
-              </a>
-            </li>
-          </ul>
-        </li>
-      ))}
-      <li className='menu-items-li all-item'>
-        <a title={allLegalDocs} data-qa='Header_Menu_Document_List_All_Documents' href={routes.LEGAL_DOCUMENTS}>
-          {allLegalDocs}
-        </a>
-      </li>
-    </DocumentMainMenuStyled>
-  )
-}

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenuProps.types.d.ts

@@ -1,22 +0,0 @@
-import { Routes } from '../../sections/Header/HeaderProps.types';
-export interface ProductListMenuProps {
-    slug: string;
-    linkText: string;
-    categoryUrl?: string;
-}
-export interface DocumentListMenuSectionProps {
-    icon: React.ReactNode;
-    type: string;
-    products: ProductListMenuProps[];
-    slug: string;
-    seeAllTypeDocs: string;
-}
-export interface DocumentMainMenuProps {
-    seeAllTypeDocs: string;
-    allLegalDocs: string;
-    allTypeDocs: string;
-    setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void;
-    routes: Routes;
-    hasSubCategoryPage: boolean;
-    finalMenu: DocumentListMenuSectionProps[];
-}

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenuProps.types.js

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

package/dist/src/components/organisms/DocumentMainMenu/DocumentMainMenuProps.types.ts

@@ -1,25 +0,0 @@
-import { Routes } from '../../sections/Header/HeaderProps.types'
-
-export interface ProductListMenuProps {
-  slug: string
-  linkText: string
-  categoryUrl?: string
-}
-
-export interface DocumentListMenuSectionProps {
-  icon: React.ReactNode
-  type: string
-  products: ProductListMenuProps[]
-  slug: string
-  seeAllTypeDocs: string
-}
-
-export interface DocumentMainMenuProps {
-  seeAllTypeDocs: string
-  allLegalDocs: string
-  allTypeDocs: string
-  setCookiePolicyFunc: (url?: string, setCookiePolicyAccepted?: boolean) => void
-  routes: Routes
-  hasSubCategoryPage: boolean
-  finalMenu: DocumentListMenuSectionProps[]
-}