Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../styles/colors.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_components_Loading = require("./Loading.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Pill.tsx
function Pill({ text, onDeleteMouseDown, onDeleteMouseUp, onDeleteFromKeyboard, icon, loading = false, cursor = "text", isEditing = false, onChangeTextInput = () => {}, onFocusTextInput = () => {}, onClickPillBody = () => {}, onBlurTextInput = () => {} }) {
	const textInputRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		if (isEditing && textInputRef.current) textInputRef.current.focus();
	}, [isEditing]);
	function handleOnDeleteMouseDown(event) {
		if (onDeleteMouseDown) {
			event.stopPropagation();
			onDeleteMouseDown(event);
		}
	}
	function handleOnDeleteKeyDown(event) {
		if (onDeleteFromKeyboard) {
			event.stopPropagation();
			if (event.key === "Enter") onDeleteFromKeyboard();
		}
	}
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledPill, {
		hasIcon: Boolean(icon || loading || onDeleteMouseDown),
		cursor,
		onClick: (event) => {
			if (onClickPillBody) {
				event.stopPropagation();
				onClickPillBody();
			}
		},
		children: [isEditing ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PillInput, {
			value: text,
			onChange: (event) => onChangeTextInput(event.target.value),
			onFocus: onFocusTextInput,
			onBlur: onBlurTextInput,
			ref: textInputRef
		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(PillText, { children: text }), (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(PillIconContainer, {
			hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
			children: [
				loading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Loading.Loading, {
					size: 16.1,
					center: false,
					ml: 5
				}),
				!loading && onDeleteMouseDown && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_UnstyledButton.UnstyledButton, {
					onMouseDown: handleOnDeleteMouseDown,
					onKeyDown: handleOnDeleteKeyDown,
					type: "button",
					css: {
						display: "flex",
						padding: "10px",
						marginRight: "-10px"
					},
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "DeleteIcon",
						width: 16.1
					})
				}),
				!loading && icon && !onDeleteMouseDown && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: icon,
					width: 16.1,
					color: "white"
				})
			]
		})]
	});
}
const PillText = _emotion_styled.default.div`
  /* For mobile ensure empty values don't prevent div from having height: */
  height: 1.2rem;
  min-width: 100px;
  max-width: 210px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 600;
`;
const StyledPill = _emotion_styled.default.div`
  * + & {
    margin-top: 16px;
  }
  background-color: ${({ theme }) => theme.c05Neutral};
  color: ${({ theme }) => theme.text};
  padding: 12px 18px;
  ${({ hasIcon }) => hasIcon && `padding-right: 48px;`}
  border-radius: 2em;
  display: flex;
  align-items: center;
  cursor: ${({ cursor }) => cursor};
  position: relative;
`;
const PillIconContainer = _emotion_styled.default.div`
  ${require_styles_utils.flexCenter}
  ${({ hasIconInset }) => hasIconInset ? `
    background-color: ${require_styles_colors.colors.blue43};
    padding: 8px;
    right: 4px;
    top: 3.5px;` : `right: 18px;`}
  border-radius: 50%;
  margin-left: 12px;
  position: absolute;
`;
const PillInput = _emotion_styled.default.input`
  background-color: transparent;
  border: none;
  outline: none;
  color: ${({ theme }) => theme.text};
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 210px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
`;
//#endregion
exports.Pill = Pill;
