const require_chunk = require("./chunk-BN4qSVkS.cjs");
const require_utils_toReactNodes_toReactNodes = require("./utils/toReactNodes/toReactNodes.cjs");
const require_utils_toReactNodes_setReactNodesTypography = require("./utils/toReactNodes/setReactNodesTypography.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/static/images/Checkmark.svg?url
var Checkmark_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMC41MDA0IDEuODQ5OThMNS43OTY2MiA2LjYzMTAzQzQuOTk2OTcgNy40NDM4MyA0LjU5NzE0IDcuODUwMjMgNC4xMDAzIDcuODUwMjNDMy42MDM0NiA3Ljg1MDIzIDMuMjAzNjMgNy40NDM4MyAyLjQwMzk4IDYuNjMxMDNMMS41IDUuNzEyMiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjkwOTE3IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==";
//#endregion
//#region src/components/Checkbox.tsx
function Checkbox({ checked, onChange, id, label, mt = 0, mb = 0, ml = 0, mr = 0, alignItems = "center", disabled = false, typography: typographyProp }) {
	const content = require_utils_toReactNodes_toReactNodes.toReactNodes(require_utils_toReactNodes_setReactNodesTypography.setDefaultReactNodesTypography(label, { default: {
		type: typographyProp?.type || "Body",
		size: typographyProp?.size || "Medium",
		color: typographyProp?.color || "text"
	} }));
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(CheckboxContainer, {
		mt,
		mb,
		ml,
		mr,
		alignItems,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledCheckbox, {
			id,
			type: "checkbox",
			checked,
			onChange: () => onChange(!checked),
			disabled,
			onKeyDown: (event) => {
				if (event.key === "Enter") {
					event.preventDefault();
					onChange(!checked);
				}
			}
		}), label && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CheckboxLabel, {
			htmlFor: id,
			children: content
		})]
	});
}
const StyledCheckbox = _emotion_styled.default.input`
  margin: 0;
  cursor: pointer;
  appearance: none;
  width: 18px;
  height: 18px;
  /* min-width needed when in flex container: */
  min-width: 18px;
  border-radius: 2.25px;
  ${({ checked, theme }) => !checked && `border: 1px solid ${theme.mcNeutral};`}
  background-color: ${({ theme, checked }) => checked ? theme.info : theme.bg};
  background-image: ${({ checked }) => checked ? `url("${Checkmark_default}");` : "none;"}
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px auto;
  ${({ disabled }) => disabled && "opacity: 0.2;"}
`;
const CheckboxContainer = _emotion_styled.default.span`
  display: flex;
  ${({ mt }) => mt === 0 ? "" : `margin-top: ${mt}px;`}
  ${({ mb }) => mb === 0 ? "" : `margin-bottom: ${mb}px;`}
  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
  ${({ mr }) => mr === 0 ? "" : `margin-right: ${mr}px;`}
  align-items: ${({ alignItems }) => alignItems};

  & + & {
    margin-top: 12px;
  }
`;
const CheckboxLabel = _emotion_styled.default.label`
  margin-left: 12px;
  cursor: pointer;
`;
//#endregion
Object.defineProperty(exports, "Checkbox", {
	enumerable: true,
	get: function() {
		return Checkbox;
	}
});
Object.defineProperty(exports, "CheckboxContainer", {
	enumerable: true,
	get: function() {
		return CheckboxContainer;
	}
});
