@wistia/ui 0.0.24 → 0.0.25

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -87,8 +87,7 @@ type BaseProps = {
      */
     children: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Link`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -143,8 +142,7 @@ type BaseButtonProps = {
      */
     children?: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Button`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -292,8 +290,7 @@ declare const Avatar: {
 
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -310,8 +307,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -839,7 +835,7 @@ declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingPr
      */
     variant?: keyof typeof variantStyleMap$1;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 declare const iconMap: {
@@ -1008,8 +1004,7 @@ declare const iconSizeMap: {
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Icon`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1475,7 +1470,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     variant?: keyof typeof variantStyleMap | undefined;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type MenuItemLabelProps = {
@@ -1702,12 +1697,12 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
 } & StackProps & {
     ref?: any;
 }) | (StackProps & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1732,7 +1727,7 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1832,4 +1827,68 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -87,8 +87,7 @@ type BaseProps = {
      */
     children: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Link`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -143,8 +142,7 @@ type BaseButtonProps = {
      */
     children?: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Button`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -292,8 +290,7 @@ declare const Avatar: {
 
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -310,8 +307,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -839,7 +835,7 @@ declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingPr
      */
     variant?: keyof typeof variantStyleMap$1;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 declare const iconMap: {
@@ -1008,8 +1004,7 @@ declare const iconSizeMap: {
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Icon`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1475,7 +1470,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     variant?: keyof typeof variantStyleMap | undefined;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type MenuItemLabelProps = {
@@ -1702,12 +1697,12 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
 } & StackProps & {
     ref?: any;
 }) | (StackProps & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1732,7 +1727,7 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1832,4 +1827,68 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -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.
  */
@@ -1114,7 +1114,7 @@ var colorAliasTokens = css4`
   --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;
@@ -6323,8 +6323,8 @@ import { jsx as jsx174 } from "react/jsx-runtime";
 var StyledForm = styled17.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 = createContext2({
   values: {},
@@ -6395,8 +6395,8 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
         gap: "space-05",
         ...props,
         ref,
+        $fullWidth: fullWidth,
         as: StyledForm,
-        fullWidth,
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -7874,6 +7874,151 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx195("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Input/Input.tsx
+import { forwardRef as forwardRef14, cloneElement as cloneElement5 } from "react";
+import styled32, { css as css19 } from "styled-components";
+import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { jsx as jsx196, jsxs as jsxs20 } from "react/jsx-runtime";
+var inputStyles = css19`
+  --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 = styled32.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 = forwardRef14(
+  ({
+    fullWidth = false,
+    monospace = false,
+    type = "text",
+    leftIcon,
+    rightIcon,
+    ...props
+  }, ref) => {
+    let leftIconToDisplay = leftIcon;
+    if (isNil11(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ jsx196(Icon, { type: "search" });
+    }
+    if (isNotNil13(leftIconToDisplay)) {
+      leftIconToDisplay = cloneElement5(leftIconToDisplay, {
+        size: "md",
+        className: "wui-input-left-icon"
+      });
+    }
+    let rightIconToDisplay = rightIcon;
+    if (isNotNil13(rightIconToDisplay)) {
+      rightIconToDisplay = cloneElement5(rightIconToDisplay, {
+        size: "md",
+        className: "wui-input-right-icon"
+      });
+    }
+    return /* @__PURE__ */ jsxs20(
+      StyledInputContainer,
+      {
+        $fullWidth: fullWidth,
+        $monospace: monospace,
+        children: [
+          leftIconToDisplay ?? null,
+          type === "multiline" ? /* @__PURE__ */ jsx196(
+            "textarea",
+            {
+              ...props,
+              ref
+            }
+          ) : /* @__PURE__ */ jsx196(
+            "input",
+            {
+              ...props,
+              ref,
+              type
+            }
+          ),
+          rightIconToDisplay ?? null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 export {
   Avatar,
   Badge,
@@ -7893,6 +8038,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Input,
   Label,
   Link,
   Menu,