import {
  __spreadProps,
  __spreadValues
} from "./chunk-W7FAWX6T.js";

// src/components/Flex.tsx
import styled from "@emotion/styled";
import { isNumber } from "lodash-es";
import { jsx } from "@emotion/react/jsx-runtime";
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
}) {
  const justify = justifyProp ? justifyProp : center ? "center" : "stretch";
  const align = alignProp ? alignProp : center ? "center" : "stretch";
  const asButtonProps = asButtonType ? { type: asButtonType, disabled } : {};
  return /* @__PURE__ */ jsx(
    StyledFlex,
    __spreadProps(__spreadValues({
      justify,
      align,
      column,
      as,
      onClick: disabled ? void 0 : onClick,
      cursorProp: onClick ? disabled ? "not-allowed" : "pointer" : "unset",
      overflowProp: overflow,
      whiteSpace,
      mr,
      ml,
      mt,
      mb,
      pt,
      pr,
      pb,
      pl,
      gap,
      height,
      width,
      position,
      grow
    }, asButtonProps), {
      children
    })
  );
}
function marginPropToString(margin, type) {
  if (typeof margin === "number") {
    return `margin-${type}: ${margin}px;`;
  } else if (margin === "auto") {
    return `margin-${type}: auto;`;
  }
  return "";
}
var StyledFlex = styled.div`
  display: flex;
  text-overflow: ellipsis;

  ${({ as }) => (
  /* reset button styles */
  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 }) => `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 && (isNumber(height) ? `height: ${height}px;` : `height: ${height};`)}
  ${({ width }) => width && (isNumber(width) ? `width: ${width}px;` : `width: ${width};`)}
  ${({ position }) => position && `position: ${position};`}
  ${({ grow }) => grow && `flex-grow: ${grow};`}
`;

export {
  Flex,
  StyledFlex
};
