@welcome-ui/shape/dist/index.mjs

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

"use client"

// src/index.tsx
import React from "react";
import { forwardRef } from "@welcome-ui/system";

// src/styles.ts
import styled, { css, system } from "@xstyled/styled-components";
import { getMax } from "@welcome-ui/utils";
import { Box } from "@welcome-ui/box";
var shapeStyles = (w, h, shape) => css`
  width: ${getMax(w, h)};
  height: ${getMax(w, h)};
  border-radius: ${shape === "circle" && "50%"};
`;
var Shape = styled(Box)(
  ({ h, shape, w }) => css`
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

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

    ${system};

    /* we must override shapeStyles (let this line under ${system}) */
    ${shape && shapeStyles(w, h, shape)}
  `
);

// src/index.tsx
var Shape2 = forwardRef(
  ({ children, dataTestId, shape, ...rest }, ref) => /* @__PURE__ */ React.createElement(Shape, { "data-testid": dataTestId, ref, shape, ...rest }, children)
);
Shape2.displayName = "Shape";
export {
  Shape2 as Shape
};