@wistia/ui 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.0
+ * @license @wistia/ui v0.6.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -68,6 +68,7 @@ __export(index_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Image: () => Image,
   Input: () => Input,
   Label: () => Label,
   Link: () => Link,
@@ -10525,6 +10526,55 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
     children
   ] });
 };
+
+// src/components/Image/Image.tsx
+var import_styled_components74 = __toESM(require("styled-components"));
+var import_type_guards43 = require("@wistia/type-guards");
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var getFillStyle2 = (fillContainer) => {
+  if (fillContainer === "horizontal") {
+    return "width: 100%;";
+  }
+  if (fillContainer === "vertical") {
+    return "height: 100%;";
+  }
+  if (fillContainer === true) {
+    return `
+      width: 100%;
+      height: 100%;
+    `;
+  }
+  return void 0;
+};
+var StyledImage = import_styled_components74.default.img`
+  border-radius: ${({ $borderRadius }) => (0, import_type_guards43.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+  ${({ $fillContainer }) => getFillStyle2($fillContainer)};
+  object-fit: ${({ $objFit }) => $objFit};
+  object-position: ${({ $objPosition }) => $objPosition};
+`;
+var Image = ({
+  src,
+  alt,
+  borderRadius,
+  fill: fillContainer = false,
+  fit: objFit,
+  loading = "lazy",
+  position: objPosition,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+  StyledImage,
+  {
+    $borderRadius: borderRadius,
+    $fillContainer: fillContainer,
+    $objFit: objFit,
+    $objPosition: objPosition,
+    alt,
+    loading,
+    src,
+    ...otherProps
+  }
+);
+Image.displayName = "Image";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -10556,6 +10606,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   Heading,
   Icon,
   IconButton,
+  Image,
   Input,
   Label,
   Link,