Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_typography = require("../styles/typography.cjs");
const require_utils_emotion = require("../utils/emotion.cjs");
const require_components_typography_renderTypography = require("./typography/renderTypography.cjs");
const require_router = require("../router.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_components_Loading = require("./Loading.cjs");
const require_components_Tooltip = require("./Tooltip.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let lodash_es = require("lodash-es");
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Button.tsx
const buttonKinds = [
	"secondary",
	"primary",
	"ghost",
	"transparent",
	"green33",
	"green37",
	"purple55",
	"blue43",
	"blue39",
	"linkLight",
	"danger",
	"warning",
	"warningLight",
	"tertiary",
	"quaternary",
	"roundSingleChar",
	"roundIcon",
	"gray",
	"grayGradient",
	"gray99",
	"white21",
	"locked",
	"warningLight"
];
function resolveBackgroundColorKey(theme, kind, defaultKey) {
	let backgroundColorKey = theme.buttons.kinds[kind]?.[defaultKey];
	if (!backgroundColorKey && require_styles_themes.isThemeOrColorKey(kind)) backgroundColorKey = kind;
	const defaultBackgroundColor = theme.buttons[defaultKey];
	return require_styles_themes.getBackgroundColor(theme, backgroundColorKey, defaultBackgroundColor);
}
function resolveProp(prop, kind, defaultKey, theme) {
	return prop || theme.buttons.kinds[kind]?.[defaultKey] || theme.buttons[defaultKey];
}
function resolveProps(props, theme) {
	const isSingleCharRoundButton = Boolean(props.text && props.text.length === 1 && !props.icon);
	const isRoundIconButton = Boolean(!props.text && props.icon);
	const defaultKind = isSingleCharRoundButton ? "roundSingleChar" : isRoundIconButton ? "roundIcon" : "secondary";
	const { kind = defaultKind, size: sizeProp, gap: gapProp, paddingY: paddingYType = "regular", borderRadius, typography: typographyProp, ...rest } = props;
	const size = resolveProp(sizeProp, kind, "defaultSize", theme);
	const defaultPaddingY = resolveProp(null, kind, "defaultPaddingsY", theme)[size];
	const numericDefaultPaddingY = typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType];
	const defaultPaddingX = resolveProp(null, kind, "defaultPaddingsX", theme)[size];
	const backgroundColor = resolveBackgroundColorKey(theme, kind, "defaultBackgroundColor");
	const borderColor = resolveBackgroundColorKey(theme, kind, "defaultBorderColor");
	const hoverBackgroundColor = resolveBackgroundColorKey(theme, kind, "defaultHoverBackgroundColor");
	const hoverBorderColor = resolveBackgroundColorKey(theme, kind, "defaultHoverBorderColor");
	const activeBackgroundColor = resolveBackgroundColorKey(theme, kind, "defaultActiveBackgroundColor");
	const activeBorderColor = resolveBackgroundColorKey(theme, kind, "defaultActiveBorderColor");
	const gap = resolveProp(props.gap, kind, "defaultGap", theme);
	const typography = {
		type: typographyProp?.type || resolveProp(null, kind, "defaultTypographyType", theme),
		color: typographyProp?.color || resolveProp(null, kind, "defaultColor", theme),
		size
	};
	return {
		...rest,
		kind,
		size,
		typography,
		...props.text ? {
			paddingY: numericDefaultPaddingY,
			paddingX: defaultPaddingX
		} : {
			paddingY: numericDefaultPaddingY,
			paddingX: numericDefaultPaddingY
		},
		borderRadius: kind === "roundSingleChar" || kind === "roundIcon" ? 999 : resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
		backgroundColor,
		borderColor,
		hoverBackgroundColor,
		hoverBorderColor,
		activeBackgroundColor,
		activeBorderColor,
		gap
	};
}
const Button = (0, react.forwardRef)((props, ref) => {
	const { kind, typography, size, paddingX, paddingY, text, to, id, hash, externalLink, filename, toParams, onClick, onMouseEnter, onMouseDown, onMouseUp, onMouseLeave, onFocus, onBlur, icon, backgroundColor, borderColor, hoverBackgroundColor, hoverBorderColor, activeBackgroundColor, activeBorderColor, justifyContent = "center", gap, iconSide = "left", loading = false, loadingKind = "primary", fullWidth = false, disabled = false, mt = 0, ml = 0, mb = 0, type = "button", newTab = false, zIndex = void 0, tooltipText, borderRadius } = resolveProps(props, (0, _emotion_react.useTheme)());
	const tooltipId = (0, react.useRef)((0, lodash_es.uniqueId)());
	const defaultIconWidth = size === "ExtraSmall" ? 12 : 16;
	let currentIcon = null;
	if (loading) currentIcon = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ButtonIcon, {
		iconSide,
		text,
		typography,
		kind,
		paddingX,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Loading.Loading, {
			size: defaultIconWidth,
			center: false,
			kind: loadingKind
		})
	});
	else if (icon) currentIcon = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ButtonIcon, {
		iconSide,
		text,
		typography,
		kind,
		paddingX,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
			...icon,
			width: icon.width || defaultIconWidth,
			square: icon.square === void 0 ? true : icon.square,
			color: icon.color || typography.color
		})
	});
	const content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
		...tooltipText ? { "data-tooltip-id": tooltipId.current } : {},
		css: {
			display: "flex",
			alignItems: "center",
			justifyContent,
			gap: gap ? `${gap}px` : void 0,
			overflow: "hidden"
		},
		children: [
			iconSide === "left" && currentIcon,
			text && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
				css: {
					textOverflow: "ellipsis",
					overflow: "hidden"
				},
				children: require_components_typography_renderTypography.renderTypography(typography.type, {
					children: text,
					color: typography.color,
					size: typography.size
				})
			}),
			iconSide === "right" && currentIcon
		]
	}), tooltipText ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Tooltip.Tooltip, {
		id: tooltipId.current,
		content: tooltipText
	}) : null] });
	const commonProps = {
		id,
		kind,
		type,
		typography,
		onClick,
		onMouseEnter,
		onMouseDown,
		onMouseUp,
		onMouseLeave,
		onFocus,
		onBlur,
		fullWidth,
		iconSide,
		paddingX,
		paddingY,
		backgroundColor,
		borderColor,
		hoverBackgroundColor,
		hoverBorderColor,
		activeBackgroundColor,
		activeBorderColor,
		isLoading: loading,
		disabled: disabled || loading,
		css: {
			marginTop: mt ? typeof mt === "number" ? `${mt}px` : "auto" : void 0,
			marginLeft: ml ? typeof ml === "number" ? `${ml}px` : "auto" : void 0,
			marginBottom: mb ? typeof mb === "number" ? `${mb}px` : "auto" : void 0
		},
		newTab,
		borderRadius,
		zIndex
	};
	if (to) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ButtonLink, {
		...commonProps,
		to,
		params: toParams,
		hash,
		ref,
		children: content
	});
	return externalLink ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ButtonHrefLink, {
		...commonProps,
		href: externalLink,
		download: filename,
		target: "_blank",
		ref,
		children: content
	}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledButton, {
		...commonProps,
		ref,
		children: content
	});
});
Button.displayName = "Button";
const buttonStyle = ({ paddingX, paddingY, kind, theme, disabled, isLoading, typography, fullWidth, zIndex, iconSide, borderColor: borderColorProp, borderRadius, backgroundColor, hoverBackgroundColor, hoverBorderColor, activeBackgroundColor, activeBorderColor }) => {
	const borderColor = borderColorProp || backgroundColor;
	return _emotion_react.css`
    display: inline-flex;
    opacity: ${disabled && !isLoading ? .2 : 1};
    transition: opacity 0.2s;
    position: relative;

    ${zIndex && `z-index: ${zIndex};`}

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

    &:focus-visible {
      outline: ${require_styles_common.getFocusOutline({ theme })};
      /* Slightly different offset for buttons so the outline is visible: */
      outline-offset: 0px;
    }

    width: ${fullWidth ? "100%" : "fit-content"};

    & > * {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      background-color: ${backgroundColor};
      box-sizing: content-box;
      border: 1px solid;
      border-color: ${borderColor};
      border-radius: ${typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius};
      padding: ${paddingY}px ${paddingX}px;
      transition:
        background-color 0.2s ease-out,
        border-color 0.2s ease-out;

      &:hover {
        background-color: ${hoverBackgroundColor};
        border-color: ${hoverBorderColor};
      }

      &:active {
        background-color: ${activeBackgroundColor};
        border-color: ${activeBorderColor};
      }
    }
  `;
};
const ButtonIcon = _emotion_styled.default.div`
  display: flex;
  align-items: center;
  justify-content: center;
  ${({ iconSide, paddingX }) => `${iconSide}: ${paddingX}px;`}
`;
const LinkWithoutTypography = (0, react.forwardRef)((props, ref) => {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_router.Link, {
		...props,
		ref
	});
});
const StyledButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${(props) => buttonStyle(props)}
`;
const ButtonLink = (0, _emotion_styled.default)(LinkWithoutTypography)`
  ${(props) => buttonStyle(props)}
`;
const ButtonHrefLink = _emotion_styled.default.a`
  ${(props) => buttonStyle(props)}
`;
const ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${require_utils_emotion.select(StyledButton)}, ${require_utils_emotion.select(ButtonLink)}, ${require_utils_emotion.select(ButtonHrefLink)})${append}`;
//#endregion
exports.Button = Button;
exports.ButtonSelector = ButtonSelector;
exports.StyledButton = StyledButton;
exports.buttonKinds = buttonKinds;
