@wistia/ui 0.6.0-beta.cfc2a53c.6423353 → 0.6.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.0-beta.cfc2a53c.6423353
+ * @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,
@@ -8135,18 +8136,9 @@ var FormContext = (0, import_react25.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
-  formId: "",
-  appearance: "block"
+  formId: ""
 });
-var FormComponent = ({
-  children,
-  action,
-  values = {},
-  appearance = "block",
-  validate,
-  fullWidth = false,
-  ...props
-}, forwardedRef) => {
+var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
   const [errors, setErrors] = (0, import_react25.useState)({});
   const [hasSubmitted, setHasSubmitted] = (0, import_react25.useState)(false);
   const innerRef = (0, import_react25.useRef)();
@@ -8198,20 +8190,19 @@ var FormComponent = ({
       values,
       errors,
       hasSubmitted,
-      formId: id,
-      appearance
+      formId: id
     };
-  }, [appearance, values, errors, id, hasSubmitted]);
+  }, [values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
     /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
       Stack,
       {
+        gap: "space-05",
         ...props,
         ref,
         $fullWidth: fullWidth,
         as: StyledForm,
-        gap: "space-05",
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -8364,27 +8355,11 @@ CheckboxGroup.displayName = "CheckboxGroup";
 var import_jsx_runtime193 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components48.default.div`
   --form-field-spacing: var(--wui-space-01);
-  --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--form-field-spacing);
-  justify-content: flex-start;
-  align-items: center;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr;
-
-  &[data-appearance='inline'] {
-    gap: var(--form-field-spacing-inline);
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
-  }
-
-  &[data-appearance='block'] {
-    gap: var(--form-field-spacing);
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
 `;
 var StyledErrorList = import_styled_components48.default.ul`
   margin: 0;
@@ -8424,19 +8399,18 @@ var FormField = ({
   name,
   error,
   value,
-  appearance,
   ...props
 }) => {
   const formState = (0, import_react30.useContext)(FormContext);
   const checkboxGroup = (0, import_react30.useContext)(CheckboxGroupContext);
   const id = props.id ?? `${formState.formId}-${name}`;
-  const isIntegratedLabel = children.type === Checkbox;
+  const isInlineLabel = children.type === Checkbox;
   const computedError = error ?? formState.errors[name];
   const defaultValue = formState.values[name];
   let childProps = {
     name,
     id,
-    label: isIntegratedLabel ? label : void 0,
+    label: isInlineLabel ? label : void 0,
     ...props
   };
   if ((0, import_type_guards28.isUndefined)(value) && (0, import_type_guards28.isNotUndefined)(defaultValue)) {
@@ -8463,30 +8437,18 @@ var FormField = ({
       "aria-describedby": (0, import_type_guards28.isNotNil)(error) ? `${id}-error` : void 0
     };
   }
-  const computedApperance = appearance ?? formState.appearance;
-  console.log(appearance, formState.appearance);
   import_react30.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
-    StyledFormField,
-    {
-      ...props,
-      "data-appearance": computedApperance,
-      children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Label, { htmlFor: id, children: label }),
-        (0, import_react30.cloneElement)(children, childProps),
-        (0, import_type_guards28.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-            ErrorMessages,
-            {
-              errors: computedError,
-              id: `${id}-error`
-            }
-          )
-        ] }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Label, { htmlFor: id, children: label }),
+    (0, import_react30.cloneElement)(children, childProps),
+    (0, import_type_guards28.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+      ErrorMessages,
+      {
+        errors: computedError,
+        id: `${id}-error`
+      }
+    ) : null
+  ] });
 };
 FormField.displayName = "FormField";
 
@@ -10442,7 +10404,6 @@ var StyledContent3 = (0, import_styled_components71.default)(import_react_select
   border-radius: var(--wui-select-content-border-radius);
   padding: var(--wui-select-option-padding);
   min-width: 200px;
-  z-index: var(--wui-zindex-menu);
 `;
 var Select = (0, import_react55.forwardRef)(
   ({
@@ -10565,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,
@@ -10596,6 +10606,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   Heading,
   Icon,
   IconButton,
+  Image,
   Input,
   Label,
   Link,