Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let lodash_es = require("lodash-es");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Flex.tsx
function Flex({ center = false, justify: justifyProp, align: alignProp, column = false, children, onClick, disabled = false, gap, as = "div", asButtonType, overflow, whiteSpace, mt, mr, mb, ml, pt, pr, pb, pl, height, width, position, grow, flexWrap }) {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledFlex, {
		justify: justifyProp ? justifyProp : center ? "center" : "stretch",
		align: alignProp ? alignProp : center ? "center" : "stretch",
		column,
		as,
		onClick: disabled ? void 0 : onClick,
		cursorProp: onClick ? disabled ? "not-allowed" : "pointer" : void 0,
		overflowProp: overflow,
		whiteSpace,
		mr,
		ml,
		mt,
		mb,
		pt,
		pr,
		pb,
		pl,
		gap,
		height,
		width,
		position,
		grow,
		flexWrap,
		...asButtonType ? {
			type: asButtonType,
			disabled
		} : {},
		children
	});
}
function marginPropToString(margin, type) {
	if (typeof margin === "number") return `margin-${type}: ${margin}px;`;
	else if (margin === "auto") return `margin-${type}: auto;`;
	return "";
}
const StyledFlex = _emotion_styled.default.div`
  display: flex;
  text-overflow: ellipsis;

  ${({ as }) => as === "button" && `
    border: 0;
    appearance: none;
    background: transparent;
    padding: 0;
    /* needed in Safari for some reason */
    font-size: 1rem;
    color: inherit;
    font-weight: inherit;
  `}

  ${({ column }) => column && `flex-direction: column;`}
  ${({ justify }) => `justify-content: ${justify};`}
  ${({ align }) => `align-items: ${align};`}
  ${({ cursorProp }) => cursorProp && `cursor: ${cursorProp};`}
  ${({ overflowProp }) => overflowProp ? `overflow: ${overflowProp}; max-width: 100%;` : ""}
  ${({ whiteSpace }) => whiteSpace ? `white-space: ${whiteSpace};` : ""}
  ${({ gap }) => gap && `gap: ${gap}px;`}

  ${({ mt }) => marginPropToString(mt, "top")}
  ${({ mr }) => marginPropToString(mr, "right")}
  ${({ mb }) => marginPropToString(mb, "bottom")}
  ${({ ml }) => marginPropToString(ml, "left")}

  ${({ pt }) => pt && `padding-top: ${pt}px;`}
  ${({ pr }) => pr && `padding-right: ${pr}px;`}
  ${({ pb }) => pb && `padding-bottom: ${pb}px;`}
  ${({ pl }) => pl && `padding-left: ${pl}px;`}

  ${({ height }) => height && ((0, lodash_es.isNumber)(height) ? `height: ${height}px;` : `height: ${height};`)}
  ${({ width }) => width && ((0, lodash_es.isNumber)(width) ? `width: ${width}px;` : `width: ${width};`)}
  ${({ position }) => position && `position: ${position};`}
  ${({ grow }) => grow && `flex-grow: ${grow};`}
  ${({ flexWrap }) => flexWrap && `flex-wrap: ${flexWrap};`}
`;
//#endregion
exports.Flex = Flex;
exports.StyledFlex = StyledFlex;
