Merged in feat/new-passwordinput-component (pull request #3376)

feat(SW-3672): Update PasswordInput component

* Update PasswordInput component

* Removed some tests not working as expected

* Remove IconButton from PasswordInput

* Remove IconButton from Input

* Merge branch 'master' into feat/new-passwordinput-component


Approved-by: Linus Flood

packages/design-system/lib/components/PasswordInput/passwordInput.module.css

@@ -0,0 +1,53 @@
+.helpText {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--Space-x05);
+}
+
+.error {
+  align-items: center;
+  color: var(--Text-Interactive-Error);
+  display: flex;
+  gap: var(--Space-x05);
+  margin: var(--Space-x1) 0 0;
+}
+
+.errors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Space-x15) var(--Space-x1);
+  padding-top: var(--Space-x1);
+}
+
+.inputWrapper {
+  position: relative;
+}
+
+.toggleButton {
+  position: absolute;
+  right: var(--Space-x2);
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggleButton:focus-visible {
+  outline: 2px solid var(--Focus-ring-color, currentColor);
+  border-radius: 100%;
+}
+
+/* Hide the built-in password reveal icon in Microsoft Edge.
+ * See: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
+ */
+.inputWrapper input::-ms-reveal {
+  display: none;
+}
+.inputWrapper input::-ms-clear {
+  display: none;
+}