Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../styles/colors.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.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/components/Toggle.tsx
const defaultProps = {
	on: false,
	ml: 0,
	mt: 0,
	mb: 0,
	disabled: false
};
function Toggle({ onChange, bg, ml = defaultProps.ml, mt = defaultProps.mt, mb = defaultProps.mb, on = defaultProps.on, disabled = defaultProps.disabled, label, id }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(ToggleContainer, {
		mb,
		ml,
		mt,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ToggleButton, {
			bg,
			isOn: on,
			onClick: () => onChange(!on),
			disabled,
			type: "button",
			id
		}), label && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ToggleLabel, {
			htmlFor: id,
			children: label
		})]
	});
}
const width = 44;
const circleDim = 20;
const circleOffset = 2;
const ToggleButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  color: ${require_styles_colors.colors.white};
  font-weight: 500;
  border-radius: 44px;
  width: ${width}px;
  height: 24px;
  opacity: ${({ disabled }) => disabled ? .3 : 1};
  background-color: ${({ bg, theme, isOn }) => {
	if (bg) return require_styles_themes.getColor(theme, bg);
	else if (isOn) return theme.success;
	return require_styles_themes.themeOr(theme.c1Neutral, theme.c4Neutral)({ theme });
}};
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    transition: right 0.1s;
    box-shadow:
      0 3px 8px 0 rgba(0, 0, 0, 0.15),
      0 3px 1px 0 rgba(0, 0, 0, 0.06);
    background-color: ${require_styles_colors.colors.white};
    width: ${circleDim}px;
    height: ${circleDim}px;
    top: ${circleOffset}px;
    right: ${({ isOn }) => isOn ? `${circleOffset}px` : `${width - circleDim - circleOffset}px`};
  }
`;
const gap = 12;
const ToggleContainer = _emotion_styled.default.span`
  display: flex;
  margin-bottom: ${({ mb }) => mb}px;
  margin-top: ${({ mt }) => mt}px;
  margin-left: ${({ ml }) => ml}px;
  align-items: center;
  gap: ${gap}px;
`;
const ToggleLabel = _emotion_styled.default.label`
  width: calc(100% - ${width + gap}px);
  cursor: pointer;
`;
//#endregion
exports.Toggle = Toggle;
exports.ToggleContainer = ToggleContainer;
