{
  "version": 3,
  "sources": ["../../../../../../owl-nest/common/error/src/ErrorPage.tsx"],
  "sourcesContent": ["import * as React from 'react'\nimport styled from 'styled-components'\n\nimport * as plume from '@ulule/owl-kit-components/next'\n\ntype ErrorPageProps = {\n  className?: string\n  color: string\n  translations: {\n    errorName?: string\n    title?: string\n    subtitle?: string\n    link?: string\n    searchPlaceholder?: string\n  }\n  search: {\n    enable: boolean\n    action?: string\n  }\n  urls: {\n    home: string\n  }\n  bg: {\n    video: {\n      mp4: string\n      webm: string\n    }\n    image: string\n  }\n}\n\nfunction ErrorPageComponent({ className, color, translations, search, urls, bg }: ErrorPageProps): React.ReactElement {\n  return (\n    <ErrorWrapper className={className} fallback={bg && bg.image}>\n      <ErrorBgVideo autoPlay loop muted preload=\"auto\">\n        {bg && bg.video && bg.video.webm && <source src={bg.video.webm} type=\"video/webm\" />}\n        {bg && bg.video && bg.video.mp4 && <source src={bg.video.mp4} type=\"video/mp4\" />}\n      </ErrorBgVideo>\n      <ErrorBodyWrapper>\n        <div>{translations && translations.errorName && <ErrorName>{translations.errorName}</ErrorName>}</div>\n        <ErrorContentWrapper>\n          <div>\n            {search && search.enable && (\n              <ErrorSearchForm method=\"GET\" action={search.action}>\n                <ErrorInputSearch\n                  name=\"search\"\n                  type=\"text\"\n                  placeholder={translations && translations.searchPlaceholder}\n                />\n                <ErrorSubmitButton type=\"submit\">\n                  <plume.glyphs.stroke.Search size={20} />\n                </ErrorSubmitButton>\n              </ErrorSearchForm>\n            )}\n            <ErrorContent>\n              <p>\n                <ErrorTitle backgroundColor={color}>{translations && translations.title}</ErrorTitle>\n              </p>\n              <p>\n                <ErrorSubtitle backgroundColor={color}>{translations && translations.subtitle}</ErrorSubtitle>\n              </p>\n            </ErrorContent>\n          </div>\n          {urls && urls.home && (\n            <ErrorButtonWrapper>\n              <ErrorHomeButton href={urls && urls.home}>{translations && translations.link}</ErrorHomeButton>\n            </ErrorButtonWrapper>\n          )}\n        </ErrorContentWrapper>\n      </ErrorBodyWrapper>\n    </ErrorWrapper>\n  )\n}\n\nexport const ErrorPage = styled(ErrorPageComponent)``\n\nconst ErrorWrapper = styled.div<{ fallback: string }>`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  /* stylelint-disable-next-line */\n  background: linear-gradient(\n    180deg,\n    rgba(247, 247, 245, 1) 0%,\n    rgba(255, 255, 255, 1) 50%,\n    rgba(229, 232, 236, 1) 100%\n  );\n\n  /* only for small screen */\n  @media (max-width: 768px) {\n    /* stylelint-disable-next-line */\n    background: ${(props) => `url(${props.fallback})`} center center no-repeat,\n      linear-gradient(180deg, rgba(247, 247, 245, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(229, 232, 236, 1) 100%);\n    background-size: cover;\n  }\n`\n\nconst ErrorBgVideo = styled.video`\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  background-size: cover;\n  transform: translate(-50%, -50%);\n  object-fit: cover;\n  left: 50%;\n  top: 50%;\n  min-width: 100%;\n  min-height: 100%;\n\n  /* only for big screen */\n  @media (max-width: 768px) {\n    display: none;\n  }\n`\n\nconst ErrorName = styled.h1`\n  font-weight: 700;\n  font-size: 25px;\n  font-family: ${plume.FONTS.PRIMARY_FONT};\n  color: ${plume.COLORS.PRIMARY_BLACK};\n  text-align: center;\n  position: absolute;\n  top: 20px;\n  left: 50%;\n  transform: translate(-50%);\n  margin: 0;\n\n  &::after {\n    content: '';\n    width: 100%;\n    height: 4px;\n    background-color: ${plume.COLORS.PRIMARY_BLACK};\n    position: absolute;\n    display: block;\n    margin-top: 2px;\n  }\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    font-size: 35px;\n  }\n\n  @media ${plume.BREAKPOINTS.LAPTOP} {\n    font-size: 45px;\n  }\n`\n\nconst ErrorContentWrapper = styled.div`\n  width: 100%;\n  height: auto;\n  padding: 0 20px 20px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    padding: 0 20px 30px;\n  }\n`\n\nconst ErrorContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  & > p {\n    margin: 0;\n  }\n\n  & > p + p {\n    margin-top: 10px;\n  }\n`\n\nconst ErrorTitle = styled.span<{ backgroundColor: string }>`\n  display: inline;\n  background-color: ${(props) => props.backgroundColor};\n  font-family: ${plume.FONTS.PRIMARY_FONT};\n  color: ${plume.COLORS.PRIMARY_WHITE};\n  font-weight: 700;\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n  font-size: 34px;\n  line-height: 1.2;\n  margin: 0;\n  padding: 0 5px;\n  box-decoration-break: clone;\n  white-space: pre-wrap;\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    font-size: 45px;\n  }\n\n  @media ${plume.BREAKPOINTS.LAPTOP} {\n    font-size: 65px;\n  }\n`\n\nconst ErrorSubtitle = styled(ErrorTitle)`\n  margin-top: 10px;\n  font-size: 18px;\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    font-size: 26px;\n  }\n\n  @media ${plume.BREAKPOINTS.LAPTOP} {\n    font-size: 32px;\n  }\n`\n\nconst ErrorHomeButton = styled.a`\n  color: ${plume.COLORS.PRIMARY_BLACK};\n  text-decoration: none;\n  font-family: ${plume.FONTS.PRIMARY_FONT};\n  font-weight: 700;\n  font-size: 15px;\n  flex: 0;\n  position: relative;\n\n  &::after {\n    content: '';\n    width: 100%;\n    height: 4px;\n    background-color: ${plume.COLORS.PRIMARY_BLACK};\n    position: absolute;\n    display: block;\n    margin-top: 2px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  &:hover {\n    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.48);\n  }\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    margin-top: 50px;\n    font-size: 22px;\n  }\n\n  @media ${plume.BREAKPOINTS.LAPTOP} {\n    font-size: 30px;\n  }\n`\n\nconst ErrorInputSearch = styled.input`\n  border-radius: 2px;\n  height: 50px;\n  padding: 0 20px;\n  outline: none;\n  background-color: ${plume.COLORS.PRIMARY_WHITE};\n  font-family: ${plume.FONTS.PRIMARY_FONT};\n  font-size: 15px;\n  color: ${plume.COLORS.PRIMARY_BLACK};\n  border: 1px solid ${plume.COLORS.GREY_SHADE_5};\n  flex: 1;\n  max-width: 300px;\n\n  &:focus {\n    border: 1px solid ${(props) => plume.COLORS.primary(props)};\n  }\n\n  &::placeholder {\n    color: ${plume.COLORS.GREY_SHADE_3};\n  }\n`\n\nconst ErrorSubmitButton = styled.button`\n  width: 50px;\n  height: 50px;\n  background-color: ${plume.COLORS.PRIMARY_BLACK};\n  color: ${plume.COLORS.PRIMARY_WHITE};\n  padding: 0 16px;\n  border: none;\n  border-radius: 2px;\n  transition: all 200ms ease-in-out;\n  margin-left: 10px;\n  cursor: pointer;\n  flex: 0;\n\n  &:hover {\n    background-color: ${plume.COLORS.PRIMARY_BLACK_HOVER};\n  }\n`\n\nconst ErrorSearchForm = styled.form`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 20px;\n`\n\nexport const ErrorBodyWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  height: 100%;\n  position: relative;\n  flex-direction: column;\n`\n\nconst ErrorButtonWrapper = styled.div`\n  margin-top: 20px;\n\n  @media ${plume.BREAKPOINTS.TABLET} {\n    margin-top: 50px;\n  }\n`\n"],
  "mappings": "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",
  "names": ["init_define_process_env", "React", "ErrorPageComponent", "className", "color", "translations", "search", "urls", "bg", "ErrorWrapper", "ErrorBgVideo", "ErrorBodyWrapper", "ErrorName", "ErrorContentWrapper", "ErrorSearchForm", "ErrorInputSearch", "ErrorSubmitButton", "glyphs_exports", "ErrorContent", "ErrorTitle", "ErrorSubtitle", "ErrorButtonWrapper", "ErrorHomeButton", "_a", "ErrorPage", "src_default", "__template", "_b", "props", "_c", "_d", "fonts_exports", "colors_exports", "breakpoints_exports", "_e", "_f", "_g", "_h", "_i", "_j", "_k", "_l", "_m", "_n"]
}