Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("./colors.cjs");
const require_styles_themes = require("./themes.cjs");
const require_styles_typography = require("./typography.cjs");
const require_styles_common = require("./common.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_styles_z_index = require("./z-index.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/styles/fields.tsx
const maxFieldWidth = "100%";
const fieldWidth = "100%";
const inputSpacingPx = 24;
const formButtonTopMargin = "32px";
const formButtonTopMarginStyle = _emotion_react.css`
  margin-top: ${formButtonTopMargin};
`;
const standardBorderColor = ({ theme }) => _emotion_react.css`
  border-color: ${require_styles_themes.themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
`;
const inputBlockStyle = ({ theme, hasValue, hasError }) => _emotion_react.css`
  ${require_styles_common.subtext({ theme })}
  ${standardBorderColor({ theme })}
  ${require_styles_common.standardBorderRadius(8)}
  background-color: ${theme.bg};
  border-width: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  padding: 52.5px;
  ${hasError ? `border-style: solid; border-color: ${theme.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
`;
const textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
const textInputFontWeight = 600;
const textInputPaddingPx = 12;
const textInputPadding = `12px`;
const textInputBorderColor = ({ theme }) => require_styles_themes.isBridge(theme) ? require_styles_colors.colors.gray4 : require_styles_themes.themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
const textInputBorderColorFocused = ({ theme }) => require_styles_themes.themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
const textInputActiveStyles = ({ theme, paddingLeftPx, paddingRightPx, paddingTopPx, paddingBottomPx, activeOutline, activeOutlineColor }) => {
	if (activeOutline) {
		const outlineColor = activeOutlineColor ? require_styles_themes.getColor(theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
		return _emotion_react.css`
      outline: 2px solid ${outlineColor};
      outline-offset: 2px;
      caret-color: ${outlineColor};
    `;
	}
	return _emotion_react.css`
    border-color: ${textInputBorderColorFocused({ theme })};
    border-width: 2px;
    padding: ${11}px;
    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
    ${paddingTopPx ? `padding-top: ${paddingTopPx - 1}px;` : ""}
    ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - 1}px;` : ""}
  `;
};
const defaultTextInputTypography = {
	type: "Body",
	size: "Small",
	color: "text"
};
const getBorderRadiusCSS = (borderRadius) => {
	if (!borderRadius) return "8px  ";
	if (typeof borderRadius === "number") return `${borderRadius}px  `;
	const { topLeft = 8, topRight = 8, bottomLeft = 8, bottomRight = 8 } = borderRadius;
	return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
};
const textInputStyle = ({ theme, active, disabled, hasError, paddingLeftPx, paddingRightPx, paddingTopPx, paddingBottomPx, activeOutline, activeOutlineColor, typography, borderRadius, borderWidth }) => _emotion_react.css`
  border-radius: ${getBorderRadiusCSS(borderRadius)};
  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
  cursor: ${disabled ? "not-allowed" : "auto"};
  box-sizing: border-box;
  font-weight: ${600};

  position: relative;
  z-index: ${require_styles_z_index.z.textInput};
  font-family: ${theme.typography?.fontFamilies.main};
  padding: ${12 - (hasError ? 1 : 0)}px;
  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
  ${paddingTopPx ? `padding-top: ${paddingTopPx - (hasError ? 1 : 0)}px;` : ""}
  ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - (hasError ? 1 : 0)}px;` : ""}
  border-style: solid;
  border-width: ${hasError ? "2" : borderWidth !== void 0 ? borderWidth : "1"}px;
  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
  line-height: 22px;
  outline: none;

  ${require_styles_typography.applyTypography(theme, typography?.type || defaultTextInputTypography.type, typography?.size || defaultTextInputTypography.size, typography?.color || defaultTextInputTypography.color)}

  width: ${fieldWidth};
  max-width: ${maxFieldWidth};
  text-overflow: ellipsis;
  &:focus,
  &:active,
  &:has(:focus) {
    ${textInputActiveStyles({
	theme,
	paddingLeftPx,
	paddingRightPx,
	paddingTopPx,
	paddingBottomPx,
	activeOutline,
	activeOutlineColor
})}
  }

  ${active && textInputActiveStyles({
	theme,
	paddingLeftPx,
	paddingRightPx,
	paddingTopPx,
	paddingBottomPx,
	activeOutline,
	activeOutlineColor
})}

  &::placeholder {
    color: ${textInputPlaceholderColor({ theme })};
  }

  &:focus::placeholder {
    color: ${textInputPlaceholderColor({ theme })};
  }
`;
const FieldError = _emotion_styled.default.div`
  background-color: rgba(242, 239, 255, 1);
  padding: 16px 16px 8px;
  margin-top: -8px;
  border-radius: 0 0 8px 8px;
  position: relative;
  z-index: ${require_styles_z_index.z.fieldError};
`;
const aboveFieldError = ({ theme, hasError }) => _emotion_react.css`
  ${hasError ? "border: none !important" : ""};
  background-color: ${theme.bg};
  position: relative;
  z-index: ${require_styles_z_index.z.fieldError + 1};
  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
`;
const inputSubtextSeconds = .25;
function InputSubtext({ text, content, hasError = false, hasSuccess = false, tooltipId, hideNonErrorsIfBlurred = false, focused = false, subTextPaddingX }) {
	const timeoutRef = (0, react.useRef)(null);
	const [subtext, setSubtext] = (0, react.useState)(text);
	const [visible, setVisible] = (0, react.useState)(Boolean(text));
	(0, react.useLayoutEffect)(() => {
		if (text || content) {
			setSubtext(text);
			setVisible(true);
			if (timeoutRef.current) clearTimeout(timeoutRef.current);
		} else {
			setVisible(false);
			timeoutRef.current = setTimeout(() => {
				setSubtext(void 0);
			}, inputSubtextSeconds * 1e3);
		}
	}, [text, content]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledInputSubtext, {
		visible: visible && (hasError || focused || !hideNonErrorsIfBlurred),
		hasError,
		hasSuccess,
		cursorPointer: Boolean(tooltipId),
		usingContent: content !== void 0,
		subTextPaddingX,
		children: tooltipId ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
			"data-tooltip-id": tooltipId,
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(InputSubtextContent, {
				text: subtext,
				content
			})
		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(InputSubtextContent, {
			text: subtext,
			content
		})
	});
}
function InputSubtextContent({ text, content }) {
	if (content) return content;
	if (typeof text === "string") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: text });
	return require_utils_toReactNodes_toReactNodes.toReactNodes(text);
}
const StyledInputSubtext = _emotion_styled.default.div`
  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
  margin-left: ${({ visible, usingContent }) => visible && !usingContent ? "8px" : "0px"};
  font-size: 12px;
  font-size: ${({ visible }) => visible ? "12px" : "0px"};
  opacity: ${({ visible }) => visible ? "1" : "0"};
  overflow: hidden;
  transition:
    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
    opacity ${inputSubtextSeconds * .8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
  color: ${({ hasError, hasSuccess, theme }) => hasError ? theme.danger : hasSuccess ? theme.success : theme.text};
  cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
  ${({ subTextPaddingX }) => subTextPaddingX ? `
        padding-left: ${subTextPaddingX}px;
        padding-right: ${subTextPaddingX}px;
      ` : ""};
`;
const labelStyle = ({ theme, hasError }) => _emotion_react.css`
  color: ${hasError ? theme.danger : theme.text};
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  & + * {
    margin-top: 12px;
  }
  * ~ & {
    margin-top: 40px;
  }
`;
const Label = _emotion_styled.default.label`
  ${require_styles_common.subtext}
  ${labelStyle}
`;
const LabelDiv = _emotion_styled.default.div`
  ${require_styles_common.subtext}
  ${labelStyle}
`;
//#endregion
exports.FieldError = FieldError;
exports.InputSubtext = InputSubtext;
exports.Label = Label;
exports.LabelDiv = LabelDiv;
exports.StyledInputSubtext = StyledInputSubtext;
exports.aboveFieldError = aboveFieldError;
exports.defaultTextInputTypography = defaultTextInputTypography;
exports.fieldWidth = fieldWidth;
exports.formButtonTopMargin = formButtonTopMargin;
exports.formButtonTopMarginStyle = formButtonTopMarginStyle;
exports.getBorderRadiusCSS = getBorderRadiusCSS;
exports.inputBlockStyle = inputBlockStyle;
exports.inputSpacingPx = inputSpacingPx;
exports.labelStyle = labelStyle;
exports.maxFieldWidth = maxFieldWidth;
exports.standardBorderColor = standardBorderColor;
exports.textInputBorderColor = textInputBorderColor;
exports.textInputBorderColorFocused = textInputBorderColorFocused;
exports.textInputFontWeight = textInputFontWeight;
exports.textInputPadding = textInputPadding;
exports.textInputPaddingPx = textInputPaddingPx;
exports.textInputPlaceholderColor = textInputPlaceholderColor;
exports.textInputStyle = textInputStyle;
