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_utils_emotion = require("../../utils/emotion.cjs");
const require_styles_common = require("../../styles/common.cjs");
const require_components_Icon_Icon = require("../Icon/Icon.cjs");
const require_utils_toReactNodes_toReactNodes = require("../../utils/toReactNodes/toReactNodes.cjs");
const require_components_Badge = require("../Badge.cjs");
const require_components_Loading = require("../Loading.cjs");
const require_components_UnstyledButton = require("../UnstyledButton.cjs");
const require_styles_fields = require("../../styles/fields.cjs");
const require_styles_type = require("../../styles/type.cjs");
const require_components_Dropdown = require("../Dropdown.cjs");
const require_components_TextButton = require("../TextButton.cjs");
require("./constants.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 = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/PageSection/PageSection.tsx
function PageSection({ children, title, sectionId, headerOffset = 0 }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledPageSection, {
		scrollMarginTop: headerOffset + 20,
		children: [title ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_styles_type.Heading, {
			type: "h3",
			id: sectionId,
			mt: 0,
			mb: 40,
			children: title
		}) : null, children]
	});
}
const StyledPageSection = _emotion_styled.default.div`
  &:first-of-type {
    ${require_styles_breakpoints.bp.minSm(`
      margin-top: 4px;
    `)}
  }

  &:not(:first-of-type) {
    margin-top: 72px;
  }

  h3,
  h4 {
    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
  }
`;
const PageSectionSubheading = require_styles_type.headingWithDefaults({
	type: "h4",
	mb: 32
});
const PageSectionBoxActionColumn = ({ label, value, valueId }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledPageSectionBoxActionColumn, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxActionColumnLabel, { children: label }), value ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxActionColumnValue, {
	id: valueId,
	children: value
}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxActionColumnNoValue, { children: "Unknown" })] });
const StyledPageSectionBoxActionColumn = _emotion_styled.default.div``;
const PageSectionBoxActionColumnLabel = _emotion_styled.default.div`
  color: ${require_styles_colors.colors.gray40};
  font-weight: 500;
  margin: 0;
`;
const PageSectionBoxActionColumnValue = _emotion_styled.default.div`
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const PageSectionBoxActionColumnNoValue = (0, _emotion_styled.default)(PageSectionBoxActionColumnValue)`
  color: ${require_styles_colors.colors.gray80};
  font-style: italic;
`;
function PageSectionBoxAction({ dropdownItems, icon, isDelete = false, label, loading = false, onClick, to, toParams }) {
	const theme = (0, _emotion_react.useTheme)();
	return loading ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Loading.Loading, {
		size: 12,
		center: false
	}) }) : icon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_UnstyledButton.UnstyledButton, {
		onClick: icon.onClick,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
			name: icon.name,
			width: 12,
			color: "mcNeutral"
		})
	}) }) : dropdownItems ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Dropdown.Dropdown, {
		button: { getContent: () => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
			name: "DotGrid1x3Horizontal",
			width: 16
		}) },
		dropdownItems
	}) : isDelete ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_UnstyledButton.UnstyledButton, {
		css: { color: theme.mcNeutral },
		onClick,
		children: "Delete"
	}) : label ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_TextButton.TextButton, {
		leftIcon: icon,
		text: label,
		to,
		toParams,
		onClick
	}) }) : null;
}
const PageSectionBoxActionRow = ({ title, titleBadge, titleBadgeKind = "default", titleRightContent, description, separator, children, action, smFlexColumn = true }) => {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(SPageSectionBoxActionRow, {
		separator: Boolean(separator),
		smFlexColumn: Boolean(smFlexColumn),
		children: [
			title ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
				css: { flex: 1 },
				children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(PageSectionBoxTitle, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", { children: [title, titleBadge ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Badge.Badge, {
					content: titleBadge,
					ml: 4,
					kind: titleBadgeKind
				}) : null] }), titleRightContent] }), description ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxDescription, { children: description }) : null]
			}) : null,
			children,
			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxAction, { ...action })
		]
	}) });
};
const SPageSectionBoxActionRow = _emotion_styled.default.div`
  display: flex;
  gap: 12px;
  align-items: top;
  flex-direction: row;
  justify-content: space-between;

  & + & {
    margin-top: 32px;
  }

  ${({ smFlexColumn }) => smFlexColumn ? require_styles_breakpoints.bp.sm(`flex-direction: column;`) : ""}

  &:has(> ${StyledPageSectionBoxActionColumn}) {
    ${require_utils_emotion.select(StyledPageSectionBoxActionColumn)} {
      width: 150px;
    }
    ${require_styles_breakpoints.bp.maxMd(`
      ${require_utils_emotion.select(StyledPageSectionBoxActionColumn)} {
        width: auto;
      }
    `)}
  }

  ${({ separator, theme }) => separator && `
      border-top: 1px solid;
      ${require_styles_fields.standardBorderColor({ theme }).styles};
      padding-top: 32px;
    `}
`;
const PageSectionBoxColumn = _emotion_styled.default.div``;
const PageSectionBoxRow = _emotion_styled.default.div`
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(215px, 1fr)
  ); /* This creates as many columns as can fit, each at least 150px wide */
`;
function PageSectionBox({ action, description, children }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledPageSectionBox, { children: [
		description && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxDescription, { children: require_utils_toReactNodes_toReactNodes.toReactNodes(description) }),
		children,
		action?.label ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: { marginTop: "12px" },
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PageSectionBoxAction, { ...action })
		}) : null
	] });
}
const StyledPageSectionBox = _emotion_styled.default.div`
  & + & {
    margin-top: 32px;
  }

  & > ${PageSectionBoxRow}, & {
    border: 1px solid;
    ${require_styles_fields.standardBorderColor}
  }

  ${require_styles_common.standardBorderRadius(8)}
  padding: 16px;

  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
  &:has(> ${PageSectionBoxRow}) {
    border: none;
    padding: 0;
    ${require_styles_common.standardBorderRadius(0)}
  }

  & > ${PageSectionBoxRow} {
    &:first-of-type {
      ${require_styles_common.standardBorderRadius([
	12,
	12,
	0,
	0
])}
    }

    &:last-of-type {
      ${require_styles_common.standardBorderRadius([
	0,
	0,
	12,
	12
])}
    }

    &:only-of-type {
      ${require_styles_common.standardBorderRadius(12)}
    }

    &:not(:last-of-type) {
      border-bottom: 0;
    }

    ${PageSectionBoxColumn} {
      padding: 32px;
      ${require_styles_breakpoints.bp.sm(`padding: 16px;`)}
      &:not(:first-of-type) {
        border-left: solid 1px;
        ${require_styles_fields.standardBorderColor}
      }
    }

    ${({ theme }) => require_styles_breakpoints.bp.maxMd(`
        grid-template-columns: none;
        ${require_utils_emotion.select(PageSectionBoxColumn)} {
          &:not(:first-of-type) {
            border-left: 0 !important;
            border-top: solid 1px;
            ${require_styles_fields.standardBorderColor({ theme }).styles};
          }
        }
      `)}
  }
`;
const PageSectionBoxTitle = _emotion_styled.default.div`
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  font-size: ${({ lg }) => lg ? 14 : 12}px;
  font-weight: 600;
  line-height: ${({ lg }) => require_styles_common.standardLineHeightEms * (lg ? 14 : 12) + 4}px;
`;
const PageSectionBoxDescription = _emotion_styled.default.div`
  color: ${({ theme }) => theme.mcNeutral};
  ${PageSectionBoxTitle} + & {
    margin-top: 6px;
  }
`;
const gapPx = 24;
const PageSectionRow = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  gap: ${gapPx}px;

  ${require_styles_breakpoints.bp.minSm(`
    flex-direction: row;
  `)}

  margin-top: 40px;
  &:first-of-type {
    margin-top: 0;
  }
`;
const PageSectionRowSubSection = _emotion_styled.default.div`
  box-sizing: border-box;
  width: 100%;

  &:first-of-type {
    margin-right: 0px;
  }

  &:last-of-type {
    margin-left: 0px;
    margin-top: ${gapPx}px;
  }

  ${StyledPageSectionBox} + ${StyledPageSectionBox} {
    /* Less margin for boxes within a single SubSection: */
    margin-top: 16px;
  }

  ${require_styles_breakpoints.bp.minSm(`
    width: calc(50% - ${gapPx / 2}px);

    &:last-of-type {
      margin-top: 0;
    }
  `)}

  ${({ fullWidth }) => fullWidth ? "width: 100% !important;" : ""}
`;
//#endregion
exports.PageSection = PageSection;
exports.PageSectionBox = PageSectionBox;
exports.PageSectionBoxActionColumn = PageSectionBoxActionColumn;
exports.PageSectionBoxActionRow = PageSectionBoxActionRow;
exports.PageSectionBoxColumn = PageSectionBoxColumn;
exports.PageSectionBoxDescription = PageSectionBoxDescription;
exports.PageSectionBoxRow = PageSectionBoxRow;
exports.PageSectionBoxTitle = PageSectionBoxTitle;
exports.PageSectionRow = PageSectionRow;
exports.PageSectionRowSubSection = PageSectionRowSubSection;
exports.PageSectionSubheading = PageSectionSubheading;
exports.StyledPageSectionBox = StyledPageSectionBox;
