welcome-ui/dist/Shape.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as m } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as n } from "./System.mjs";
import l, { system as o, css as s } from "@xstyled/styled-components";
import { Box as p } from "./Box.mjs";
import { g as r } from "./get-max-width-height-DoUro2T7.mjs";
const c = (t, e, i) => s`
  width: ${r(t, e)};
  height: ${r(t, e)};
  border-radius: ${i === "circle" && "50%"};
`, f = l(p)(
  ({ h: t, shape: e, w: i }) => s`
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      object-fit: cover;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    ${o};

    /* we must override shapeStyles (let this line under ${o}) */
    ${e && c(i, t, e)}
  `
), h = n(
  ({ children: t, dataTestId: e, shape: i, ...a }, d) => /* @__PURE__ */ m.jsx(f, { "data-testid": e, ref: d, shape: i, ...a, children: t })
);
h.displayName = "Shape";
export {
  h as Shape
};