@wistia/ui 0.8.3 → 0.8.4-beta.8500e122.cad205a

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.3
+ * @license @wistia/ui v0.8.4-beta.8500e122.cad205a
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9141,6 +9141,7 @@ var import_type_guards31 = require("@wistia/type-guards");
 // src/css/sharedStyles/inputCssVariables.ts
 var import_styled_components45 = require("styled-components");
 var inputCssVariables = import_styled_components45.css`
+  /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border-secondary);
@@ -9148,13 +9149,20 @@ var inputCssVariables = import_styled_components45.css`
   --wui-input-color-border-error: var(--wui-color-invalid-indicator);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
   --wui-input-color-text: var(--wui-color-text);
+
+  /* Border */
   --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
+
+  /* Padding */
   --wui-input-vertical-padding: var(--wui-space-02);
   --wui-input-horizontal-padding: var(--wui-space-03);
+
+  /* Typography */
   --wui-input-placeholder: var(--wui-gray-10);
   --wui-input-font-size: var(--wui-typography-body-3-size);
   --wui-input-line-height: 16px;
+  --wui-input-font-weight: var(--wui-typography-weight-body);
 `;
 
 // src/components/Input/Input.tsx
@@ -9171,7 +9179,7 @@ var inputStyles = import_styled_components46.css`
     border-radius: var(--wui-input-border-radius);
     font-size: var(--wui-input-font-size);
     line-height: var(--wui-input-line-height);
-    font-weight: var(--wui-typography-weight-body);
+    font-weight: var(--wui-input-font-weight);
     color: var(--wui-input-color-text);
 
     &::placeholder {
@@ -9341,15 +9349,12 @@ var StyledInput = (0, import_styled_components47.default)(Input)`
     min-height: unset;
   }
 
-  resize: vertical;
-  font-size: var(--wui-typography-heading-1-size);
-  font-weight: var(--wui-typography-heading-1-weight);
-  line-height: var(--wui-typography-heading-1-line-height);
-  font-family: var(--wui-typography-heading-1-family);
-  outline: 2px solid var(--wui-color-focus-ring);
-  outline-offset: -2px;
-
   && {
+    --wui-input-font-size: var(--wui-typography-heading-1-size);
+    --wui-input-font-weight: var(--wui-typography-heading-1-weight);
+    --wui-input-line-height: var(--wui-typography-heading-1-line-height);
+
+    font-family: var(--wui-typography-heading-1-family);
     width: 100%;
     padding: var(--wui-space-02);
     border: none;
@@ -9380,7 +9385,7 @@ var EditableHeading = ({
   onEditingChange,
   tooltipText = "Click to edit title",
   ariaLabel = "Edit title",
-  forceEditing = false,
+  __forceEditing = false,
   editingDisabled = false
 }) => {
   const [isEditing, setIsEditing] = (0, import_react29.useState)(false);
@@ -9433,7 +9438,7 @@ var EditableHeading = ({
   if (editingDisabled) {
     return HeadingComponent2;
   }
-  if (isEditing || forceEditing) {
+  if (isEditing || __forceEditing) {
     return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       StyledInput,
       {
@@ -12660,11 +12665,15 @@ var StyledThumbnail = import_styled_components89.default.div`
   background-position: center center;
   background-size: cover;
   aspect-ratio: 16 / 9;
-  border-radius: var(--wui-border-radius-01);
   display: flex;
   overflow: hidden;
   position: relative;
   width: ${({ $width }) => $width};
+
+  &,
+  img {
+    border-radius: calc(8% * (9 / 16)) / 8%;
+  }
 `;
 var Thumbnail = (0, import_react66.forwardRef)(
   ({