import {
  setDefaultReactNodesTypography
} from "./chunk-EZI6E6UO.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";

// src/components/Checkbox.tsx
import styled from "@emotion/styled";

// src/static/images/Checkmark.svg?url
var Checkmark_default = 'data:image/svg+xml,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10.5004 1.84998L5.79662 6.63103C4.99697 7.44383 4.59714 7.85023 4.1003 7.85023C3.60346 7.85023 3.20363 7.44383 2.40398 6.63103L1.5 5.7122" stroke="white" stroke-width="1.90917" stroke-linecap="round"/>%0A</svg>%0A';

// src/components/Checkbox.tsx
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Checkbox({
  checked,
  onChange,
  id,
  label,
  mt = 0,
  mb = 0,
  ml = 0,
  mr = 0,
  alignItems = "center",
  disabled = false,
  typography: typographyProp
}) {
  const defaultTypography = {
    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
    size: (typographyProp == null ? void 0 : typographyProp.size) || "Medium",
    color: (typographyProp == null ? void 0 : typographyProp.color) || "text"
  };
  const nodesWithTypography = setDefaultReactNodesTypography(label, {
    default: defaultTypography
  });
  const content = toReactNodes(nodesWithTypography);
  return /* @__PURE__ */ jsxs(CheckboxContainer, { mt, mb, ml, mr, alignItems, children: [
    /* @__PURE__ */ jsx(
      StyledCheckbox,
      {
        id,
        type: "checkbox",
        checked,
        onChange: () => onChange(!checked),
        disabled,
        onKeyDown: (event) => {
          if (event.key === "Enter") {
            event.preventDefault();
            onChange(!checked);
          }
        }
      }
    ),
    label && /* @__PURE__ */ jsx(CheckboxLabel, { htmlFor: id, children: content })
  ] });
}
var StyledCheckbox = styled.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;"}
`;
var CheckboxContainer = styled.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;
  }
`;
var CheckboxLabel = styled.label`
  margin-left: 12px;
  cursor: pointer;
`;

export {
  Checkbox,
  CheckboxContainer
};
