@wistia/ui 0.10.17 → 0.10.18

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.17
+ * @license @wistia/ui v0.10.18
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -83,6 +83,7 @@ __export(index_exports, {
   ImageDimensionsValidator: () => import_validators.ImageDimensionsValidator,
   Input: () => Input,
   InputClickToCopy: () => InputClickToCopy,
+  InputPassword: () => InputPassword,
   KeyboardShortcut: () => KeyboardShortcut,
   Label: () => Label,
   Link: () => Link,
@@ -8973,10 +8974,12 @@ var StyledFormControlLabel = import_styled_components39.default.label`
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
   line-height: var(--wui-typography-label-3-line-height);
+  justify-content: ${({ $align }) => $align === "left" ? "flex-start" : "space-between"};
 
   ${({ $disabled }) => $disabled && disabledStyle2}
 `;
 var FormControlLabel = ({
+  align = "left",
   label,
   description,
   disabled = false,
@@ -8992,15 +8995,17 @@ var FormControlLabel = ({
     label,
     /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(FormControlLabelDescription, { children: description })
   ] });
+  const slot = (0, import_type_guards27.isNotNil)(controlSlot) ? controlSlot : null;
   return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
     StyledFormControlLabel,
     {
+      $align: align,
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        (0, import_type_guards27.isNotNil)(controlSlot) ? controlSlot : null,
-        labelContent
+        align === "left" ? slot : labelContent,
+        align === "left" ? labelContent : slot
       ]
     }
   );
@@ -13428,6 +13433,7 @@ var StyledHiddenSwitchInput = import_styled_components84.default.input`
 `;
 var Switch = (0, import_react68.forwardRef)(
   ({
+    align = "left",
     checked,
     disabled = false,
     id,
@@ -13462,6 +13468,7 @@ var Switch = (0, import_react68.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
         FormControlLabel,
         {
+          align,
           controlSlot: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
             StyledSwitchInput,
             {
@@ -14482,6 +14489,53 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/InputPassword/InputPassword.tsx
+var import_styled_components100 = __toESM(require("styled-components"));
+var import_react76 = require("react");
+var import_type_guards66 = require("@wistia/type-guards");
+var import_jsx_runtime284 = require("react/jsx-runtime");
+var StyledIconButton = (0, import_styled_components100.default)(IconButton)`
+  /* override size for icon button since prop gets changed by Input */
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
+
+  /* override input padding variable since it is used for Input Icon positioning */
+  --wui-input-horizontal-padding: 4px;
+`;
+var InputPassword = (0, import_react76.forwardRef)(
+  ({ onVisibilityToggle, disabled = false, ...props }, ref) => {
+    const [isVisible, setIsVisible] = (0, import_react76.useState)(false);
+    const handleClick = () => {
+      const newVisibility = !isVisible;
+      setIsVisible(newVisibility);
+      if ((0, import_type_guards66.isFunction)(onVisibilityToggle)) {
+        onVisibilityToggle(newVisibility);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+      Input,
+      {
+        ...props,
+        ref,
+        disabled,
+        rightIcon: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(
+          StyledIconButton,
+          {
+            disabled,
+            label: isVisible ? "Hide password" : "Show password",
+            onClick: handleClick,
+            tabIndex: disabled ? -1 : 0,
+            variant: "ghost",
+            children: /* @__PURE__ */ (0, import_jsx_runtime284.jsx)(Icon, { type: isVisible ? "preview" : "hide" })
+          }
+        ),
+        type: isVisible ? "text" : "password"
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -14528,6 +14582,7 @@ WistiaLogo.displayName = "WistiaLogo";
   ImageDimensionsValidator,
   Input,
   InputClickToCopy,
+  InputPassword,
   KeyboardShortcut,
   Label,
   Link,