@juspay/svelte-ui-components 2.7.0 → 2.9.0

package/dist/Button/Button.svelte

@@ -45,7 +45,7 @@
       <div class="button-icon">{@render icon()}</div>
     {/if}
     {#if text}
-      <div class="button-text">{text}</div>
+      <div class="button-text">{@html text}</div>
     {/if}
   </button>
 </div>

package/dist/Input/Input.svelte

@@ -29,7 +29,8 @@
     onInput = () => {},
     onPaste = () => {},
     onStateChange = () => {},
-    onClick = () => {}
+    onClick = () => {},
+    onKeyDown = () => {}
   }: InputProperties = $props();
 
   export function focus() {
@@ -187,6 +188,7 @@
       oninput={handleOnInput}
       onpaste={handleOnPaste}
       onclick={onClick}
+      onkeydown={onKeyDown}
       class:action-input={actionInput}
       style="--focus-border: {addFocusColor ? 1 : 0}px;"
       disabled={disable}
@@ -206,6 +208,7 @@
       oninput={handleOnInput}
       onpaste={handleOnPaste}
       onclick={onClick}
+      onkeydown={onKeyDown}
       data-pw={testId}
       class:action-input={actionInput}
       disabled={disable}
@@ -278,6 +281,7 @@
     flex-direction: column;
     margin: var(--input-container-margin);
     padding: var(--input-container-padding);
+    width: var(--input-container-width);
   }
 
   .label {

package/dist/Input/properties.d.ts

@@ -31,4 +31,5 @@ export type InputEventProperties = {
     onPaste?: (event: ClipboardEvent) => void;
     onClick?: (event: MouseEvent) => void;
     onStateChange?: (state: ValidationState) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
 };

package/dist/InputButton/InputButton.svelte

@@ -112,6 +112,7 @@
   .container {
     display: flex;
     flex-direction: column;
+    margin: var(--input-button-container-margin);
   }
 
   .input-button-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "scripts": {
     "dev": "vite dev --host",
     "build": "vite build && npm run package",