@wistia/ui 0.6.0 → 0.6.1-beta.15189fdc.6d80e38

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.0
+ * @license @wistia/ui v0.6.1-beta.15189fdc.6d80e38
  *
  * 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,
@@ -2282,45 +2283,55 @@ var defaultScheme = import_styled_components14.css`
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
 var navScheme = import_styled_components14.css`
-  --wui-color-bg-fill-active: var(--wui-blue-5);
-  --wui-color-bg-fill-hover: var(--wui-blue-4);
+  --wui-color-bg-app: #1e3399;
+
   --wui-color-bg-fill: var(--wui-blue-1);
-  --wui-color-bg-surface-active: #15246b;
-  --wui-color-bg-surface-hover: #18297a;
-  --wui-color-bg-surface-secondary-active: #121f5c;
-  --wui-color-bg-surface-secondary-hover: #15246b;
-  --wui-color-bg-surface-secondary: #18297a;
-  --wui-color-bg-surface-tertiary: #3547a3;
-  --wui-color-bg-surface: #1e3399;
-  --wui-color-border: var(--wui-blue-1);
-  --wui-color-border-hover: var(--wui-blue-2);
-  --wui-color-border-active: var(--wui-blue-3);
-  --wui-color-border-secondary: var(--wui-blue-9);
-  --wui-color-border-secondary-hover: var(--wui-blue-10);
-  --wui-color-border-secondary-active: var(--wui-blue-12);
-  --wui-color-icon-on-fill: var(--wui-blue-9);
-  --wui-color-icon: var(--wui-blue-4);
-  --wui-color-text-link: var(--wui-blue-4);
-  --wui-color-text-on-fill: var(--wui-blue-9);
-  --wui-color-text-secondary: var(--wui-blue-4);
+  --wui-color-bg-fill-hover: #e7e9f4;
+  --wui-color-bg-fill-active: #dcdfef;
+
+  --wui-color-bg-surface: transparent;
+  --wui-color-bg-surface-hover: #15267b;
+  --wui-color-bg-surface-active: #122271;
+
+  --wui-color-bg-surface-secondary: #15267b;
+  --wui-color-bg-surface-secondary-hover: #122271;
+  --wui-color-bg-surface-secondary-active: #101e67;
+
+  --wui-color-bg-surface-tertiary: #0d1a5c;
+
+  --wui-color-border: #101e67;
+  --wui-color-border-hover: #0e1c61;
+  --wui-color-border-active: #0d1a5c;
+
+  --wui-color-border-secondary: var(--wui-color-bg-fill);
+  --wui-color-border-secondary-hover: var(--wui-color-bg-fill-hover);
+  --wui-color-border-secondary-active: var(--wui-color-bg-fill-active);
+
+  --wui-color-icon: var(--wui-blue-1);
+  --wui-color-icon-on-fill: var(--wui-color-bg-app);
+
   --wui-color-text: var(--wui-blue-1);
+  --wui-color-text-on-fill: var(--wui-color-bg-app);
+  --wui-color-text-link: var(--wui-blue-4);
+  --wui-color-text-secondary: var(--wui-blue-6);
   --wui-color-text-button: var(--wui-blue-1);
+
   --wui-color-focus-ring: var(--wui-blue-1);
 
   /* Nav - Disabled */
-  --wui-color-bg-surface-disabled: var(--wui-blue-12);
+  --wui-color-bg-surface-disabled: transparent;
   --wui-color-icon-disabled: var(--wui-blue-8);
   --wui-color-text-disabled: var(--wui-blue-8);
 
   /* Nav - Selected */
-  --wui-color-bg-surface-selected: var(--wui-blue-3);
-  --wui-color-bg-surface-selected-active: var(--wui-blue-5);
-  --wui-color-bg-surface-selected-hover: var(--wui-blue-4);
-  --wui-color-icon-selected: var(--wui-blue-9);
-  --wui-color-text-selected: var(--wui-blue-9);
-  --wui-color-border-selected: rgba(0, 0, 0, 0);
-  --wui-color-border-hover-selected: rgba(0, 0, 0, 0);
-  --wui-color-border-active-selected: rgba(0, 0, 0, 0);
+  --wui-color-bg-surface-selected: var(--wui-color-bg-fill);
+  --wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
+  --wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
+  --wui-color-icon-selected: var(--wui-color-bg-app);
+  --wui-color-text-selected: var(--wui-color-bg-app);
+  --wui-color-border-selected: transparent;
+  --wui-color-border-hover-selected: transparent;
+  --wui-color-border-active-selected: transparent;
 `;
 var getColorScheme = (colorScheme) => {
   if (colorScheme === "nav") {
@@ -10525,6 +10536,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 +10616,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   Heading,
   Icon,
   IconButton,
+  Image,
   Input,
   Label,
   Link,