@wistia/ui 0.6.23 → 0.6.24-beta.00cd973c.5212f2b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.23
+ * @license @wistia/ui v0.6.24-beta.00cd973c.5212f2b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1237,6 +1237,7 @@ var colorAliasTokens = import_styled_components4.css`
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
+  --wui-color-invalid-indicator: var(--wui-error-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
   --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
@@ -7676,18 +7677,33 @@ var inputSizeSmall = import_styled_components34.css`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 9px;
+    height: 9px;
+  }
 `;
 var inputSizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 11px;
+    height: 11px;
+  }
 `;
 var getSizeCss = (size) => {
   if (size === "sm") return inputSizeSmall;
@@ -7709,9 +7725,10 @@ var StyledCheckboxInput = import_styled_components34.default.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* checkmark icon */
   svg {
@@ -7727,6 +7744,7 @@ var StyledHiddenCheckboxInput = import_styled_components34.default.input`
 
   /* toggles display of faux-input background-color */
   &:checked + label [data-wui-faux-input='true'] {
+    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"};
     background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
@@ -8530,26 +8548,35 @@ var import_react23 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime213 = require("react/jsx-runtime");
-var inputStyles = import_styled_components44.css`
+var inputCssVars = import_styled_components44.css`
   --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);
-  --wui-input-color-border-focus: var(--wui-color-border-active);
-  --wui-input-color-border-error: var(--wui-color-border-error);
+  --wui-input-color-border: var(--wui-color-border-secondary);
+  --wui-input-color-border-focus: var(--wui-color-focus-ring);
+  --wui-input-color-border-error: var(--wui-color-invalid-indicator);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-input-border-radius: var(--wui-border-radius-rounded);
+  --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
   --wui-input-vertical-padding: var(--wui-space-02);
   --wui-input-horizontal-padding: var(--wui-space-03);
   --wui-input-placeholder: var(--wui-gray-10);
-  --wui-input-color-text-error: var(--wui-color-text-error);
-
+  --wui-input-font-size: var(--wui-typography-body-3-size);
+  --wui-input-line-height: 16px;
+`;
+var inputStyles = import_styled_components44.css`
+  ${inputCssVars}
   input,
   textarea {
     padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
     background-color: var(--wui-input-color-bg);
-    border: 1px solid var(--wui-input-color-border);
+    border: none;
+    outline: 1px solid var(--wui-input-color-border);
+    outline-offset: -1px;
     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);
+    color: var(--wui-color-text-primary);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -8557,12 +8584,13 @@ var inputStyles = import_styled_components44.css`
     }
 
     &:focus {
-      border-color: var(--wui-input-color-border-focus);
+      outline: 2px solid var(--wui-input-color-border-focus);
+      outline-offset: -2px;
     }
 
     &[aria-invalid='true'] {
       border-color: var(--wui-input-color-border-error);
-      color: var(--wui-input-color-text-error);
+      outline-color: var(--wui-input-color-border-error);
     }
 
     &:disabled {
@@ -8585,6 +8613,29 @@ var StyledInputContainer = import_styled_components44.default.div`
 
   textarea {
     border-radius: var(--wui-input-multiline-border-radius);
+
+    --wui-input-line-height: var(--wui-typography-body-3-line-height);
+  }
+
+  [type='search'] {
+    &::-webkit-search-cancel-button {
+      appearance: none;
+      height: 16px;
+      width: 16px;
+      margin-right: -4px;
+
+      /* css vars don't work in data URLs, so the stroke color value is hardcoded. if we support dark mode, we'll need to swap the background image based on the users preferred color scheme */
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='%2364646a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      background-color: var(--wui-color-bg-surface-secondary);
+      border-radius: var(--wui-border-radius-rounded);
+
+      &:hover {
+        background-color: var(--wui-color-bg-surface-secondary-hover);
+      }
+    }
   }
 
   .wui-input-left-icon {
@@ -10359,17 +10410,17 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
   "svg",
   {
     fill: "inherit",
-    height: "12",
-    viewBox: "0 0 12 12",
-    width: "12",
+    height: "1",
+    viewBox: "0 0 1 1",
+    width: "1",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       "circle",
       {
-        cx: "6",
-        cy: "6",
+        cx: "0.5",
+        cy: "0.5",
         fill: "currentColor",
-        r: "4"
+        r: "0.5"
       }
     )
   }
@@ -10379,18 +10430,33 @@ var inputSizeSmall2 = import_styled_components65.css`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium2 = import_styled_components65.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 8px;
+    height: 8px;
+  }
 `;
 var inputSizeLarge2 = import_styled_components65.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
 `;
 var getSizeCss2 = (size) => {
   if (size === "sm") return inputSizeSmall2;
@@ -10412,9 +10478,10 @@ var StyledRadioInput = import_styled_components65.default.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* radio button circle icon */
   svg {
@@ -10428,9 +10495,9 @@ var StyledRadioInput = import_styled_components65.default.div`
 var StyledHiddenRadioInput = import_styled_components65.default.input`
   ${visuallyHiddenStyle}
 
-  /* toggles display of faux-input background-color */
+  /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */
@@ -10790,23 +10857,13 @@ var import_styled_components69 = __toESM(require("styled-components"));
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-select-color-border: var(--wui-color-border);
-  --wui-select-color-border-focus: var(--wui-color-border-active);
-  --wui-select-color-border-error: var(--wui-color-border-error);
-  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-select-border-radius: var(--wui-border-radius-rounded);
-  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
-  --wui-select-vertical-padding: var(--wui-space-02);
-  --wui-select-horizontal-padding: var(--wui-space-03);
-  --wui-select-placeholder: var(--wui-gray-10);
-  --wui-select-color-text-error: var(--wui-color-text-error);
-
-  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
-  background-color: var(--wui-select-color-bg);
-  border: 1px solid var(--wui-select-color-border);
-  border-radius: var(--wui-select-border-radius);
+  ${inputCssVars};
+  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+  background-color: var(--wui-input-color-bg);
+  border: none;
+  outline: 1px solid var(--wui-input-color-border);
+  outline-offset: -2px;
+  border-radius: var(--wui-input-border-radius);
   min-width: 200px;
   text-align: left;
   display: inline-flex;
@@ -10814,6 +10871,9 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   justify-content: space-between;
   max-width: 100%;
   width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
+  color: var(--wui-input-color-text);
+  font-size: var(--wui-input-font-size);
+  line-height: var(--wui-input-line-height);
 
   > span {
     white-space: nowrap;
@@ -10827,14 +10887,17 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   }
 
   &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-select-color-border-error);
-    color: var(--wui-select-color-text-error);
+    outline: 2px solid var(--wui-input-color-border-error);
   }
 
   &:disabled {
-    border-color: var(--wui-color-bg-surface-disabled);
+    outline-color: var(--wui-color-bg-surface-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
   }
+
+  [data-placeholder] {
+    color: var(--wui-input-placeholder);
+  }
 `;
 var StyledContent3 = (0, import_styled_components69.default)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
@@ -10878,7 +10941,13 @@ var Select = (0, import_react49.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+                  import_react_select.Value,
+                  {
+                    "data-placeholder": placeholder,
+                    placeholder
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
                   Icon,
                   {
@@ -10914,6 +10983,7 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
+  cursor: pointer;
 
   &:hover,
   &:focus-visible {