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_colors = require("../../styles/colors.cjs");
const require_styles_themes = require("../../styles/themes.cjs");
const require_utils_emotion = require("../../utils/emotion.cjs");
const require_router = require("../../router.cjs");
const require_styles_common = require("../../styles/common.cjs");
const require_utils_toReactNodes_nodes = require("../../utils/toReactNodes/nodes.cjs");
const require_styles_utils = require("../../styles/utils.cjs");
const require_components_ClipboardTextField = require("../ClipboardTextField.cjs");
const require_utils_toReactNodes_toReactNodes = require("../../utils/toReactNodes/toReactNodes.cjs");
const require_utils_toReactNodes_setReactNodesTypography = require("../../utils/toReactNodes/setReactNodesTypography.cjs");
const require_components_Loading = require("../Loading.cjs");
const require_components_Button = require("../Button.cjs");
const require_styles_tokens_spacing = require("../../styles/tokens/spacing.cjs");
const require_components_ButtonRow = require("../ButtonRow.cjs");
const require_styles_fields = require("../../styles/fields.cjs");
const require_Checkbox = require("../../Checkbox-CwZSg7iI.cjs");
const require_components_FileInput = require("../FileInput.cjs");
const require_components_Select = require("../Select.cjs");
const require_components_Toggle = require("../Toggle.cjs");
const require_components_TextInput = require("../TextInput.cjs");
const require_components_typography_Headline = require("../typography/Headline.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/CardForm/CardForm.tsx
function resolveProps(args, theme) {
	const paddingTop = resolveCardFormProp(args.paddingTop, args.kind, "paddingTop", theme);
	const paddingBottom = resolveCardFormProp(args.paddingBottom, args.kind, "paddingBottom", theme);
	const paddingX = resolveCardFormProp(args.paddingX, args.kind, "paddingX", theme);
	const textAlign = resolveCardFormProp(args.textAlign, args.kind, "textAlign", theme);
	const shadow = resolveCardFormProp(args.shadow, args.kind, "shadow", theme);
	const borderRadius = resolveCardFormProp(void 0, args.kind, "borderRadius", theme);
	const borderWidth = resolveCardFormProp(void 0, args.kind, "borderWidth", theme);
	return {
		paddingTop,
		paddingBottom,
		paddingX,
		shadow,
		borderRadius,
		borderColor: resolveCardFormProp(void 0, args.kind, "borderColor", theme),
		borderWidth,
		textAlign,
		backgroundColor: resolveCardFormProp(void 0, args.kind, "backgroundColor", theme),
		smBackgroundColor: resolveCardFormProp(void 0, args.kind, "smBackgroundColor", theme),
		smBorderWidth: resolveCardFormProp(void 0, args.kind, "smBorderWidth", theme),
		defaultDescriptionTypographyMap: resolveCardFormProp(void 0, args.kind, "defaultDescriptionTypographyMap", theme)
	};
}
function CardForm({ children, disabled, topContent = null, aboveHeaderContent, title, titleSize = "Large", titleMarginLeft, description, full = false, onSubmit, titleRightIcon, hasChildForm, wide = false, kind = "primary", shadow: shadowProp, textAlign: textAlignProp, paddingTop: paddingTopProp, paddingBottom: paddingBottomProp, paddingX: paddingXProp, belowFormContent, belowFormContentGap = 0, forceMarginAfterSubtitle = true, afterTitleMargin = 40, graphicHeader, statusHeaderProps, centeredContent = false, contentMarginTop, formButtonTopMargin, selectMarginTop, smDontAdjustWidth = false }) {
	const theme = (0, _emotion_react.useTheme)();
	const { paddingTop, paddingBottom, paddingX, shadow, borderRadius, borderWidth, borderColor, textAlign, backgroundColor, smBackgroundColor, smBorderWidth, defaultDescriptionTypographyMap } = resolveProps({
		kind,
		textAlign: textAlignProp,
		shadow: shadowProp,
		paddingTop: paddingTopProp,
		paddingBottom: paddingBottomProp,
		paddingX: paddingXProp
	}, theme);
	const onSubmitForm = (0, react.useCallback)((e) => {
		e.preventDefault();
		if (disabled) return;
		if (onSubmit) onSubmit(e);
	}, [onSubmit, disabled]);
	const formattedDescription = description ? require_utils_toReactNodes_setReactNodesTypography.toReactNodesWithTypographyMap(description, defaultDescriptionTypographyMap, false) : null;
	const belowFormContentNodes = belowFormContent ? require_utils_toReactNodes_toReactNodes.toReactNodes(belowFormContent) : null;
	const CardFormContentTarget = full ? CardFormContentFull : CardFormContent;
	const headerData = [
		aboveHeaderContent ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: aboveHeaderContent }, "card-form-above-header") : null,
		title ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardHeadline, {
			hasTopContent: Boolean(topContent),
			afterTitleMargin,
			contentMarginTop,
			titleMarginLeft,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_typography_Headline.Headline, {
				content: [title, ...titleRightIcon ? [require_utils_toReactNodes_nodes.icon({
					name: titleRightIcon.name,
					ml: 4
				})] : []],
				display: "inline-flex",
				size: titleSize
			})
		}, "card-form-title") : null,
		formattedDescription ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardFormSubtitle, { children: formattedDescription }, "card-form-subtitle") : null
	];
	const content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CardFormContentTarget, { children: [
		topContent,
		centeredContent ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CenteredHeader, { children: headerData }) : headerData,
		children
	] });
	const commonProps = {
		wide,
		shadow,
		borderRadius,
		borderWidth,
		borderColor,
		textAlign,
		paddingX,
		paddingTop,
		paddingBottom,
		backgroundColor,
		smBackgroundColor,
		smBorderWidth,
		forceMarginAfterSubtitle,
		smDontAdjustWidth
	};
	const Container = full ? CardFormContentFull : CardFormContainer;
	const statusHeader = (0, react.useMemo)(() => statusHeaderProps ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StatusHeader, { ...statusHeaderProps }) : null, [statusHeaderProps]);
	(0, react.useEffect)(() => {
		document.querySelector("meta[name='theme-color']")?.setAttribute("content", statusHeader ? theme.linkLight : theme.bg);
		return () => {
			document.querySelector("meta[name='theme-color']")?.setAttribute("content", theme.bg);
		};
	}, [
		statusHeader,
		theme.linkLight,
		theme.bg
	]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Container, {
		paddingBottom,
		children: [hasChildForm ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledCardFormDiv, {
			...commonProps,
			children: content
		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCardFormContainer, {
			full,
			statusHeader: !!statusHeader,
			children: [
				statusHeader,
				graphicHeader && graphicHeader,
				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledCardForm, {
					onSubmit: onSubmitForm,
					noValidate: true,
					...commonProps,
					forceMarginAfterSubtitle,
					graphicHeader: !!graphicHeader,
					statusHeader: !!statusHeader,
					formButtonTopMargin,
					selectMarginTop,
					children: content
				})
			]
		}), belowFormContentNodes && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(BelowCardFormContent, {
			gap: belowFormContentGap,
			children: belowFormContentNodes
		})]
	});
}
const StatusHeader = ({ content, onClick }) => {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StatusHeaderContainer, {
		onClick,
		children: require_utils_toReactNodes_toReactNodes.toReactNodes(content)
	});
};
const StatusHeaderContainer = _emotion_styled.default.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
  gap: 2px;
  width: 100%;
  min-height: 49px;
  background-color: ${({ theme }) => theme.linkLight};
  padding: ${require_styles_tokens_spacing.Spacing.px.xs} ${require_styles_tokens_spacing.Spacing.px.lg};

  ${require_styles_breakpoints.bp.minSm(`
    margin-bottom: ${require_styles_tokens_spacing.Spacing.px.xs};
    width: fit-content;
    border-radius: 32px;
  `)}
`;
const StyledCardFormContainer = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: ${({ full }) => full ? "100%" : "auto"};
  background-color: ${({ statusHeader, theme }) => statusHeader ? theme.linkLight : theme.bg};
  ${require_styles_breakpoints.bp.minSm(`
    background-color: #F9F9F9;
  `)}
`;
const CenteredHeader = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  justify-content: center;
`;
const CardFormContainer = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
`;
const CardFormContent = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  align-self: center;
`;
const CardFormContentFull = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  align-self: center;
  height: 100%;
  width: 100%;
  padding-bottom: ${({ paddingBottom }) => paddingBottom ?? 0}px;
`;
const BelowCardFormContent = _emotion_styled.default.div`
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: ${({ gap }) => gap}px;
  margin-top: ${require_styles_tokens_spacing.Spacing.px.xl};
  margin-bottom: ${require_styles_tokens_spacing.Spacing.px.xl};
`;
const CardFormSubtitle = _emotion_styled.default.div`
  padding: 0 ${require_styles_tokens_spacing.Spacing.px.xs};
`;
const CardFormButtonRow = _emotion_styled.default.div`
  display: flex;
  justify-content: ${({ justify }) => justify === "center" ? "center" : "left"};
  margin-top: 32px;
  ${require_components_Button.ButtonSelector("* + ")} {
    margin-left: 10px;
  }

  &:not(:last-child) {
    margin-bottom: 32px;
  }
`;
const fieldLabelMarginPx = 12;
const CardFormFieldLabel = _emotion_styled.default.label`
  display: block;
  margin-top: ${24}px;
  color: ${({ theme }) => theme.text};
  font-size: ${require_styles_utils.pxToRems(14)};
  font-weight: 700;
  & + * {
    margin-top: ${fieldLabelMarginPx}px;
  }
`;
const CardFormNearButtonColumn = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: ${require_styles_tokens_spacing.Spacing.px.sm};
`;
function CardFormDataFieldValue({ text }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledCardFormDataFieldValue, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_ClipboardTextField.ClipboardTextField, {
		value: text,
		icon: true,
		iconSide: "right"
	}) });
}
const StyledCardFormDataFieldValue = _emotion_styled.default.div`
  margin-top: 4px;
  color: ${({ theme }) => theme.mcNeutral};
`;
const CardFormFullWidth = _emotion_styled.default.div``;
const CardFormFullTopContent = _emotion_styled.default.div`
  ${({ borderRadius = "16px 16px 0 0" }) => require_styles_breakpoints.bp.minSm(`
    overflow: hidden;
    border-radius: ${borderRadius};
  `)}
`;
const StyledCardFormCheckboxParagraph = _emotion_styled.default.div`
  display: flex;
  color: ${({ theme }) => theme.mcNeutral};
`;
const formInset = ({ wide, paddingX, paddingTop, paddingBottom, smDontAdjustWidth, graphicHeader }) => _emotion_react.css`
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-right: ${paddingX}px;
  padding-left: ${paddingX}px;
  padding-top: ${paddingTop}px;
  padding-bottom: ${paddingBottom}px;

  ${require_styles_breakpoints.bp.minSm(`
    width: ${wide ? 700 : 408}px;
  `)}

  ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : require_styles_common.standardContentInset.smCSS}

  & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
    ${smDontAdjustWidth ? "" : require_styles_breakpoints.bp.sm(`
      padding-right: ${require_styles_common.standardContentInset.smPx}px;
      padding-left: ${require_styles_common.standardContentInset.smPx}px;
      margin-left: -${require_styles_common.standardContentInset.smPx}px;
    `)}

    ${smDontAdjustWidth ? "" : require_styles_breakpoints.bp.minSm(`
      padding-right: ${paddingX}px;
      padding-left: ${paddingX}px;
      margin-left: -${paddingX}px;
    `)}
  }

  & ${CardFormFullTopContent} {
    ${require_styles_breakpoints.bp.minSm(`
      margin-top: -${paddingTop}px;
    `)}
  }
`;
const StyledCardFormStyle = ({ theme, wide, shadow, borderRadius, borderWidth, borderColor, textAlign, paddingX, paddingTop, paddingBottom, backgroundColor, smBackgroundColor, smBorderWidth, forceMarginAfterSubtitle = true, graphicHeader, statusHeader, formButtonTopMargin = 32, selectMarginTop = 24, smDontAdjustWidth = false }) => {
	return _emotion_react.css`
    ${graphicHeader ? formInset({
		wide,
		paddingX,
		paddingTop,
		paddingBottom,
		graphicHeader,
		smDontAdjustWidth
	}) : formInset({
		wide,
		paddingX,
		paddingTop,
		paddingBottom,
		smDontAdjustWidth
	})}

    ${shadow === "soft" ? require_styles_common.standardCardShadow : shadow === "hard" ? require_styles_common.standardCardShadowHard : ""}

    position: relative;
    height: 100%;
    border-style: solid;
    border-width: ${borderWidth}px;
    border-color: ${require_styles_themes.getColor(theme, borderColor)};
    background-color: ${require_styles_themes.getColor(theme, backgroundColor)};

    ${require_styles_breakpoints.bp.sm(`
      box-shadow: none;
      background-color: ${require_styles_themes.getColor(theme, smBackgroundColor)};
      border-width: ${smBorderWidth}px;
      border-radius: ${statusHeader ? `${borderRadius}px ${borderRadius}px 0 0` : 0};
      ${statusHeader ? `box-shadow: 0 -0.5px 0 0px ${require_styles_themes.getColor(theme, borderColor)};` : ""}
    `)}

    ${require_styles_breakpoints.bp.minSm(`
      border-radius: ${graphicHeader ? `0 0 ${borderRadius}px ${borderRadius}px` : `${borderRadius}px`};
    `)}

    ${CardHeadline}, ${CardFormSubtitle} {
      text-align: ${textAlign};
    }

    ${forceMarginAfterSubtitle ? `${CardFormSubtitle.toString()} + * {
      margin-top: 40px !important;
    }` : ""}

    ${CardFormButtonRow}, ${require_components_ButtonRow.StyledButtonRowButton} {
      ${require_components_Button.ButtonSelector()} {
        margin-top: 0;
      }
    }

    ${require_components_Select.StyledSelect}, ${require_components_Toggle.ToggleContainer} {
      margin-top: ${selectMarginTop}px;
    }

    ${CardFormFieldLabel} {
      margin-top: ${24}px;

      & + ${require_components_Select.StyledSelect} {
        margin-top: ${fieldLabelMarginPx}px;
      }
    }

    ${require_components_TextInput.TextInputHalfRow} > ${require_components_Select.StyledSelect} {
      margin-top: 0;
    }

    ${require_components_Loading.LoadingWrapper} {
      margin: 32px 0;
      * + * {
        margin-top: 0;
      }
    }

    ${require_components_Button.ButtonSelector()} ${require_components_Loading.LoadingWrapper} {
      margin: 0;
    }

    ${require_components_FileInput.StyledFileInput} {
      margin-top: 16px;
    }

    ${CardFormContent} {
      & > ${StyledCardFormCheckboxParagraph} {
        margin-top: 24px;
      }

      & > ${require_components_Button.ButtonSelector()}, & > ${require_utils_emotion.select(CardFormNearButtonColumn)} {
        ${formButtonTopMargin !== void 0 ? `margin-top: ${formButtonTopMargin}px;` : require_styles_fields.formButtonTopMarginStyle}
      }
    }
  `;
};
const StyledCardForm = _emotion_styled.default.form(StyledCardFormStyle);
const StyledCardFormDiv = _emotion_styled.default.div(StyledCardFormStyle);
const CardHeadline = _emotion_styled.default.div`
  padding: 0 ${require_styles_tokens_spacing.Spacing.px.xs};

  ${({ hasTopContent, contentMarginTop }) => hasTopContent || contentMarginTop !== void 0 ? `margin-top: ${contentMarginTop ?? 32}px;` : ""}

  & + *:not(${CardFormSubtitle.toString()}) {
    margin-top: ${({ afterTitleMargin }) => afterTitleMargin}px;
  }

  & + ${CardFormSubtitle} {
    margin-top: 12px;
  }

  ${({ titleMarginLeft }) => titleMarginLeft !== void 0 && `margin-left: ${titleMarginLeft}px;`}
`;
function CardFormTextWithLink({ text, toText, to }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
		css: {
			marginTop: "16px",
			fontWeight: "600"
		},
		children: [
			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
				css: require_styles_common.mcBold,
				children: text
			}),
			" ",
			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_router.Link, {
				to,
				children: toText
			})
		]
	});
}
function CardFormCheckboxParagraph({ children, onChange, checked }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCardFormCheckboxParagraph, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
		checked,
		onChange,
		alignItems: "flex-start"
	}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardFormCheckboxParagraphText, {
		onClick: () => onChange(!checked),
		children
	})] });
}
const CardFormCheckboxParagraphText = _emotion_styled.default.span`
  margin-left: 12px;
  max-width: 350px;
  cursor: pointer;
`;
const CardFormOption = ({ label, description, onClick, selected = false }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledCardFormOption, {
	onClick,
	selected,
	children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardFormOptionLabel, { children: label }), description ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CardFormOptionDescription, { children: description }) : null]
});
const StyledCardFormOption = _emotion_styled.default.div`
  border: ${({ theme, selected }) => `${selected ? `2px solid ${theme.info}` : `1px solid ${theme.c1Neutral}`}`};
  ${require_styles_common.standardBorderRadius(8)}
  cursor: pointer;
  margin-top: 10px;
  padding: ${({ selected }) => selected ? "15px" : "16px"};
`;
const CardFormOptionLabel = _emotion_styled.default.div`
  font-weight: bold;
`;
const CardFormOptionDescription = _emotion_styled.default.p`
  color: ${require_styles_colors.colors.gray40};
  margin: 6px 0 0;
`;
function resolveCardFormProp(prop, kind, defaultKey, theme) {
	return prop !== void 0 ? prop : theme.cardForm.kinds[kind]?.[defaultKey] || theme.cardForm[defaultKey];
}
//#endregion
exports.CardForm = CardForm;
exports.CardFormButtonRow = CardFormButtonRow;
exports.CardFormCheckboxParagraph = CardFormCheckboxParagraph;
exports.CardFormDataFieldValue = CardFormDataFieldValue;
exports.CardFormFieldLabel = CardFormFieldLabel;
exports.CardFormFullTopContent = CardFormFullTopContent;
exports.CardFormFullWidth = CardFormFullWidth;
exports.CardFormNearButtonColumn = CardFormNearButtonColumn;
exports.CardFormOption = CardFormOption;
exports.CardFormTextWithLink = CardFormTextWithLink;
