From d41e5d96dba2f78d615b53210db8f64ff117e27e Mon Sep 17 00:00:00 2001
From: Shayna Hay <shayna_hay@comcast.com>
Date: Tue, 18 Jun 2024 09:11:47 -0400
Subject: [PATCH] fix(Input): separates mask and password into tewo different
 properties

---
 packages/solid/components/Input/Input.stories.tsx | 6 +++++-
 packages/solid/components/Input/Input.tsx         | 7 +++----
 packages/solid/components/Input/Input.types.ts    | 7 ++++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/solid/components/Input/Input.stories.tsx b/packages/solid/components/Input/Input.stories.tsx
index 7120b89e..756cf19f 100644
--- a/packages/solid/components/Input/Input.stories.tsx
+++ b/packages/solid/components/Input/Input.stories.tsx
@@ -47,9 +47,13 @@ const meta: Meta<typeof Input> = {
         defaultValue: { summary: 'neutral' }
       }
     },
-    password: {
+    mask: {
       description: 'character to use as a mask when password is true',
       control: 'text'
+    },
+    password: {
+      description: 'hen true the content will be masked to the user',
+      control: 'boolean'
     }
   }
 };
diff --git a/packages/solid/components/Input/Input.tsx b/packages/solid/components/Input/Input.tsx
index fe5e4456..6a1bbe08 100644
--- a/packages/solid/components/Input/Input.tsx
+++ b/packages/solid/components/Input/Input.tsx
@@ -20,16 +20,15 @@ import { View, Text } from '@lightningtv/solid';
 import styles from './Input.styles.js';
 import type { InputProps } from './Input.types.js';
 
-const getformatTitleText = (props, title) => 
-props.password ? props.password.repeat(title.length) : title;
+const getformatTitleText = (props, title) =>
+  props.password ? (props.mask ?? '').repeat(title.length ?? 0) : title;
 
 const Input: Component<InputProps> = props => {
   /* eslint-disable solid/reactivity */
   const [title, setTitle] = props.titleSignal;
   const [position, setPosition] = createSignal(props.position ?? title().length);
   const [keyEvent, setKeyEvent] = props.keyEvent;
-  const formatTitleText = createMemo(() => getformatTitleText(props,title()));
-  
+  const formatTitleText = createMemo(() => getformatTitleText(props, title()));
 
   const formatInputText = (key: string) => {
     if (key === undefined || key === '') {
diff --git a/packages/solid/components/Input/Input.types.ts b/packages/solid/components/Input/Input.types.ts
index 7308a431..8a13f113 100644
--- a/packages/solid/components/Input/Input.types.ts
+++ b/packages/solid/components/Input/Input.types.ts
@@ -19,10 +19,15 @@ export interface InputProps extends UIComponentProps, InputStyleProperties {
    */
   titleSignal: Signal<string>;
 
+  /**
+   * when true the content will be masked to the user
+   */
+  password?: boolean;
+
   /**
    * character to use as a mask when password is true
    */
-  password?: string;
+  mask?: string;
 }
 
 export interface InputStyleProperties {