@wistia/ui 0.0.24 → 0.0.25

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*
- * @license @wistia/ui v0.0.24
+ * @license @wistia/ui v0.0.25
  *
- * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
+ * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
@@ -37,8 +37,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
@@ -57,6 +57,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Input: () => Input,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -89,7 +90,7 @@ __export(src_exports, {
   useToast: () => useToast,
   useWindowSize: () => useWindowSize
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/providers/UIProvider/UIProvider.tsx
 var import_react_tooltip = require("@radix-ui/react-tooltip");
@@ -1197,7 +1198,7 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
-  --wui-color-overlay: var(--wui-gray-alpha-9);
+  --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
   --wui-color-text-on-fill-white-selected: var(--wui-blue-9);
   --wui-color-bg-tooltip: #242528;
@@ -6406,8 +6407,8 @@ var import_jsx_runtime174 = require("react/jsx-runtime");
 var StyledForm = import_styled_components29.default.form`
   --form-default-width: 690px;
 
-  max-width: ${({ fullWidth }) => fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ fullWidth }) => fullWidth ? "stretch" : "flex-start"};
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = (0, import_react16.createContext)({
   values: {},
@@ -6478,8 +6479,8 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
         gap: "space-05",
         ...props,
         ref,
+        $fullWidth: fullWidth,
         as: StyledForm,
-        fullWidth,
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -7932,6 +7933,151 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Input/Input.tsx
+var import_react30 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_type_guards27 = require("@wistia/type-guards");
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var inputStyles = 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-disabled: var(--wui-color-border-disabled);
+  --wui-input-border-radius: var(--wui-border-radius-rounded);
+  --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);
+
+  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-radius: var(--wui-input-border-radius);
+
+    &::placeholder {
+      color: var(--wui-input-placeholder);
+      opacity: 1; /* Firefox */
+    }
+
+    &:focus {
+      border-color: var(--wui-input-color-border-focus);
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--wui-input-color-border-error);
+      color: var(--wui-input-color-text-error);
+    }
+
+    &:disabled {
+      border-color: var(--wui-color-bg-surface-disabled);
+      background-color: var(--wui-color-bg-surface-disabled);
+    }
+  }
+`;
+var StyledInputContainer = import_styled_components44.default.div`
+  display: inline-flex;
+  position: relative;
+  ${inputStyles};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+
+  input,
+  textarea {
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    ${({ $monospace }) => $monospace && "font-family: var(--wui-typography-family-mono);"}
+  }
+
+  textarea {
+    border-radius: var(--wui-input-multiline-border-radius);
+  }
+
+  .wui-input-left-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-left-icon) input,
+  :has(.wui-input-left-icon) textarea {
+    padding-left: 32px;
+  }
+
+  .wui-input-right-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-right-icon) input,
+  :has(.wui-input-right-icon) textarea {
+    padding-right: 32px;
+  }
+`;
+var Input = (0, import_react30.forwardRef)(
+  ({
+    fullWidth = false,
+    monospace = false,
+    type = "text",
+    leftIcon,
+    rightIcon,
+    ...props
+  }, ref) => {
+    let leftIconToDisplay = leftIcon;
+    if ((0, import_type_guards27.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { type: "search" });
+    }
+    if ((0, import_type_guards27.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react30.cloneElement)(leftIconToDisplay, {
+        size: "md",
+        className: "wui-input-left-icon"
+      });
+    }
+    let rightIconToDisplay = rightIcon;
+    if ((0, import_type_guards27.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react30.cloneElement)(rightIconToDisplay, {
+        size: "md",
+        className: "wui-input-right-icon"
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(
+      StyledInputContainer,
+      {
+        $fullWidth: fullWidth,
+        $monospace: monospace,
+        children: [
+          leftIconToDisplay ?? null,
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "textarea",
+            {
+              ...props,
+              ref
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "input",
+            {
+              ...props,
+              ref,
+              type
+            }
+          ),
+          rightIconToDisplay ?? null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -7952,6 +8098,7 @@ WistiaLogo.displayName = "WistiaLogo";
   Heading,
   Icon,
   IconButton,
+  Input,
   Label,
   Link,
   Menu,