"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunkMFKERIW4cjs = require('./chunk-MFKERIW4.cjs');


var _chunkOA2TKY4Kcjs = require('./chunk-OA2TKY4K.cjs');


var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');


var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');


var _chunkQQDRBCBYcjs = require('./chunk-QQDRBCBY.cjs');

// src/components/Pill.tsx
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
var _react = require('react');
var _jsxruntime = require('@emotion/react/jsx-runtime');
function Pill({
  text,
  onDeleteMouseDown,
  onDeleteMouseUp,
  onDeleteFromKeyboard,
  icon,
  loading = false,
  cursor = "text",
  isEditing = false,
  onChangeTextInput = () => {
  },
  onFocusTextInput = () => {
  },
  onClickPillBody = () => {
  },
  onBlurTextInput = () => {
  }
}) {
  const textInputRef = _react.useRef.call(void 0, null);
  _react.useEffect.call(void 0, () => {
    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__ */ _jsxruntime.jsxs.call(void 0, 
    StyledPill,
    {
      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
      cursor,
      onClick: (event) => {
        if (onClickPillBody) {
          event.stopPropagation();
          onClickPillBody();
        }
      },
      children: [
        isEditing ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
          PillInput,
          {
            value: text,
            onChange: (event) => onChangeTextInput(event.target.value),
            onFocus: onFocusTextInput,
            onBlur: onBlurTextInput,
            ref: textInputRef
          }
        ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PillText, { children: text }),
        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
          PillIconContainer,
          {
            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
            children: [
              loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOA2TKY4Kcjs.Loading, { size: 16.1, center: false, ml: 5 }),
              !loading && onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                _chunkSNSG4HBQcjs.UnstyledButton,
                {
                  onMouseDown: handleOnDeleteMouseDown,
                  onKeyDown: handleOnDeleteKeyDown,
                  type: "button",
                  css: {
                    display: "flex",
                    padding: "10px",
                    marginRight: "-10px"
                  },
                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "DeleteIcon", width: 16.1 })
                }
              ),
              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: icon, width: 16.1, color: "white" })
            ]
          }
        )
      ]
    }
  );
}
var PillText = _styled2.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;
`;
var StyledPill = _styled2.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;
`;
var PillIconContainer = _styled2.default.div`
  ${_chunkMFKERIW4cjs.flexCenter}
  ${({ hasIconInset }) => hasIconInset ? `
    background-color: ${_chunkQQDRBCBYcjs.colors.blue43};
    padding: 8px;
    right: 4px;
    top: 3.5px;` : `right: 18px;`}
  border-radius: 50%;
  margin-left: 12px;
  position: absolute;
`;
var PillInput = _styled2.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};
`;



exports.Pill = Pill;
