chore: improve storybook for passwordinput

Author: aizad-deriv

lib/components/PasswordInput/PasswordMeter.scss

@@ -5,7 +5,7 @@ $ERROR: #ec3f3f;
 .deriv-password__meter__bar {
   height: 100%;
   border-radius: 0px 0px 4px 4px;
-  transition: "width 0.25s ease-in-out";
+  transition: width 0.25s ease-in-out;
 
   &__initial {
     background-color: $NEUTRAL;

src/stories/PasswordInput.stories.ts src/stories/PasswordInput.stories.tsx

@@ -1,5 +1,6 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { PasswordInput } from "../../lib/main";
+import { useState } from "react";
 
 const meta = {
   title: "Components/PasswordInput",
@@ -16,6 +17,11 @@ const meta = {
     hint: "Password should have lower and uppercase English letters with numbers.",
   },
   argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
     autoComplete: {
       control: {
         disable: true,
@@ -50,4 +56,15 @@ export const Default: Story = {
     onChange: () => {},
     hidePasswordMeter: false,
   },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <PasswordInput
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
+  },
 };