Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_breakpoints = require("../styles/breakpoints.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_ButtonRow = require("./ButtonRow.cjs");
const require_styles_type = require("../styles/type.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
react = require_chunk.__toESM(react);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/CardPage.tsx
function CardPage(props) {
	const initiallyExpanded = (0, react.useRef)(Boolean(props.expandRight));
	const [wasExpanded, setWasExpanded] = (0, react.useState)(Boolean(props.expandRight));
	const bp = require_styles_breakpoints.useBreakpoints();
	const header = props.title ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CardPageHeader, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_styles_type.Heading, {
		type: "h1",
		m0: true,
		children: props.title
	}), props.headerRightContent && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardPageHeaderRight, { children: props.headerRightContent })] }) : null;
	(0, react.useEffect)(() => {
		if (props.expandRight) setWasExpanded(true);
	}, [props.expandRight]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CardPageContainer, {
		id: props.id,
		bp,
		hasRightContent: Boolean(props.rightContent),
		wasExpanded,
		expandRight: Boolean(props.expandRight),
		minContentHeight: props.minContentHeight,
		initiallyExpanded: initiallyExpanded.current,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: props.minContentWidth ? require_styles_utils.overflowAutoWithoutScrollbars : null,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CardPageContent, {
				hasPreHeaderContent: Boolean(props.preHeaderContent),
				minContentHeight: props.minContentHeight,
				maxContentWidth: props.maxContentWidth,
				children: [
					props.preHeaderContent,
					header,
					props.children
				]
			})
		}), props.rightContent && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardPageRightContent, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardPageRightContentInner, {
			hasRightContent: Boolean(props.rightContent),
			children: props.rightContent
		}) })]
	}) });
}
CardPage.defaultProps = {
	minContentHeight: void 0,
	minContentWidth: void 0,
	maxContentWidth: void 0
};
const CardPageFullContent = _emotion_styled.default.div``;
const CardPageFullWidth = _emotion_styled.default.div``;
const CardPageRightContentInner = _emotion_styled.default.div`
  ${require_styles_utils.flexCenter}
  height: 100%;
  padding: 150px 25px;
  ${({ hasRightContent }) => hasRightContent && `justify-content: space-evenly;`}
`;
const CardPageRightContent = _emotion_styled.default.div`
  display: flex;
  position: relative;
  ${CardPageRightContentInner} {
    ${require_styles_common.darkGradientBg};
    position: relative;
    height: calc(100% + 80px);
    margin-top: -40px;
    margin-bottom: -40px;
    margin-right: -40px;
    overflow: hidden;
    width: 100%;

    ${require_styles_breakpoints.bp.minSm(`
      ${require_styles_common.standardBorderRadius([
	0,
	16,
	16,
	0
])};
    `)}
  }
`;
const vCardPaddingPx = 40;
const expandTiming = `0.65s ease-in-out`;
const CardPageContainer = _emotion_styled.default.div`
  ${require_styles_common.standardContentInset.css}
  ${({ theme }) => require_styles_themes.themeOr(`background-color: ${theme.bg}`, "transparent")({ theme })};
  position: relative;
  z-index: ${require_styles_z_index.z.card};

  ${({ minContentHeight }) => `
    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "250px"};
  `}

  ${require_styles_breakpoints.bp.sm(`
    width: 100% !important;
  `)}

  & > * {
    ${require_styles_common.standardContentInset.css}
  }

  & ${CardPageFullContent}, & ${CardPageFullWidth} {
    ${require_styles_breakpoints.bp.sm(`
      width: calc(100% + ${require_styles_common.standardContentInset.smPx * 2}px);
      margin-left: -${require_styles_common.standardContentInset.smPx}px;
    `)}

    ${require_styles_breakpoints.bp.minSmMaxLg(`
      width: calc(100% + ${require_styles_common.standardContentInset.minSmMaxLgPx * 2}px);
      margin-left: -${require_styles_common.standardContentInset.minSmMaxLgPx}px;
    `)}

    ${require_styles_breakpoints.bp.lg(`
      width: calc(100% + ${require_styles_common.standardContentInset.lgPx * 2}px);
      margin-left: -${require_styles_common.standardContentInset.lgPx}px;
    `)}
  }

  & ${CardPageFullContent} {
    & > * {
      padding-top: ${vCardPaddingPx}px;
      padding-bottom: ${vCardPaddingPx}px;
      ${require_styles_breakpoints.bp.sm(`
        padding-top: 0;
        padding-bottom: 0;
      `)}
    }

    margin-top: -${vCardPaddingPx}px;
    ${require_styles_breakpoints.bp.sm(`margin-top: 0;`)}
  }

  ${require_styles_breakpoints.bp.minSm(`
    ${require_styles_common.standardCardShadow.styles};
    padding: ${vCardPaddingPx}px 0;
    ${require_styles_common.standardBorderRadius(16)}
  `)}

  &:not(:last-child) {
    margin-bottom: 30px;
  }

  @keyframes rightSideExpand {
    0% {
      width: 50%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes rightSideCollapse {
    0% {
      width: 100%;
    }
    100% {
      width: 50%;
    }
  }

  @keyframes leftSideCollapse {
    0% {
      width: 50%;
      height: auto;
      opacity: 1;
    }
    30% {
      opacity: 0;
    }
    100% {
      height: 0px;
      width: 0%;
    }
  }

  @keyframes leftSideExpand {
    0% {
      width: 0%;
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      width: 50%;
      opacity: 1;
    }
  }

  ${({ hasRightContent }) => hasRightContent && `
    display: flex;
    & > * {
      width: 50%;
      ${require_styles_breakpoints.bp.sm(`width: 100%;`)}

      &:first-of-type > * {
        ${require_styles_breakpoints.bp.minSmMaxLg(`
          width: calc(100% - ${require_styles_common.standardContentInset.minSmMaxLgPx * 2}px);
          margin-left: ${require_styles_common.standardContentInset.minSmMaxLgPx}px;
        `)}
        ${require_styles_breakpoints.bp.lg(`
          width: calc(100% - ${require_styles_common.standardContentInset.lgPx * 3}px);
          margin-left: ${require_styles_common.standardContentInset.lgPx}px;
        `)}
      }
    }
  `}

  & > :not(${CardPageRightContent}) {
    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? require_styles_breakpoints.bp.minSm(`
            width: 0%;
            height: 0px;
            ${initiallyExpanded ? "" : `animation: leftSideCollapse ${expandTiming};`}
            overflow: hidden;
            margin: 0%;
            opacity: 0;
          `) : wasExpanded ? require_styles_breakpoints.bp.minSm(`
            width: 50%;
            animation: leftSideExpand ${expandTiming};
          `) : ""}
  }

  & > ${CardPageRightContent} {
    ${({ expandRight, wasExpanded, initiallyExpanded }) => expandRight && wasExpanded ? require_styles_breakpoints.bp.minSm(`
            width: 100%;
            ${initiallyExpanded ? "" : `animation: rightSideExpand ${expandTiming};`}
            margin: 0%;
            & > ${CardPageRightContentInner.toString()} {
              border-radius: 16px !important;
            }
          `) : wasExpanded ? require_styles_breakpoints.bp.minSm(`
            width: 50%;
            animation: rightSideCollapse ${expandTiming};
          `) : ""}
  }
`;
const CardPageSubtitle = _emotion_styled.default.p`
  color: ${({ theme }) => theme.mcNeutral};
  font-size: ${require_styles_utils.size.px14};
  line-height: ${require_styles_utils.size.px18};
  font-weight: 600;
  margin: 0;
`;
const CardPageHeader = _emotion_styled.default.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;

  & + *:not(${CardPageSubtitle}):not(${require_components_ButtonRow.StyledButtonRow}) {
    margin-top: ${30}px !important;
  }

  & + ${CardPageSubtitle} {
    margin-top: 5px;
  }

  & + ${require_components_ButtonRow.StyledButtonRow} {
    margin-top: 16px;
  }
`;
const CardPageHeaderRight = _emotion_styled.default.div`
  display: flex;
  align-items: center;
`;
const CardPageContent = _emotion_styled.default.div`
  ${({ maxContentWidth, minContentHeight, minContentWidth, hasPreHeaderContent }) => `
    max-width: ${maxContentWidth ? `${maxContentWidth}px` : "initial"};
    min-width: ${minContentWidth ? `${minContentWidth}px` : "initial"};
    ${CardPageHeader.toString()} {
      margin-top: ${hasPreHeaderContent ? "25px" : "0"};
    }
    min-height: ${minContentHeight !== void 0 && minContentHeight !== null ? `${minContentHeight}px` : "400px"};
  `}
`;
//#endregion
exports.CardPage = CardPage;
exports.CardPageContent = CardPageContent;
exports.CardPageFullContent = CardPageFullContent;
exports.CardPageFullWidth = CardPageFullWidth;
exports.CardPageRightContentInner = CardPageRightContentInner;
exports.CardPageSubtitle = CardPageSubtitle;
