@juspay/svelte-ui-components 2.2.3 → 2.7.0

package/dist/Banner/properties.d.ts

@@ -1,9 +1,14 @@
 import type { Snippet } from 'svelte';
-export type BannerProperties = {
-    icon?: string | null;
+export type BannerProperties = MandatoryBannerProperties & OptionalBannerProperties & BannerEventProperties;
+export type MandatoryBannerProperties = {
     text: string;
+};
+export type OptionalBannerProperties = {
+    icon?: string | null;
     linkText?: string | null;
     rightContent?: Snippet;
+};
+export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Button/Button.svelte

@@ -31,8 +31,7 @@
     <div class="button-progress-bar"></div>
   {/if}
   <button
-    style:--opacity={enable ? 1 : 0.4}
-    style:--cursor={enable ? 'pointer' : 'not-allowed'}
+    class:disabled={!enable}
     onclick={handleButtonClick}
     {onkeyup}
     disabled={!(enable && !showLoader)}
@@ -81,6 +80,11 @@
     box-shadow: var(--button-box-shadow, none);
   }
 
+  .disabled {
+    cursor: var(--disabled-cursor, not-allowed);
+    opacity: var(--disabled-opacity, 0.4);
+  }
+
   .button-loader {
     order: var(--button-loader-order, 1);
   }

package/dist/Button/properties.d.ts

@@ -1,14 +1,19 @@
 import type { Snippet } from 'svelte';
 export type LoaderType = 'Circular' | 'ProgressBar';
-export type ButtonProperties = {
+export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties & MandatoryButtonProperties;
+export type MandatoryButtonProperties = {
     text: string;
+};
+export type OptionalButtonProperties = {
     enable?: boolean;
     showProgressBar?: boolean;
     showLoader?: boolean;
     loaderType?: LoaderType;
     type?: 'submit' | 'reset' | 'button';
     testId?: string;
+    icon?: Snippet;
+};
+export type ButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeyup?: (event: KeyboardEvent) => void;
-    icon?: Snippet;
 };

package/dist/Carousel/properties.d.ts

@@ -3,11 +3,16 @@ export type CarouselView = {
     properties?: Record<string, unknown>;
     component: Component<Record<string, unknown>>;
 };
-export type CarouselProperties = {
+export type CarouselProperties = CarouselEventProperties & OptionalCarouselProperties & MandatoryCarouselProperties;
+export type MandatoryCarouselProperties = {
     views: CarouselView[];
+};
+export type OptionalCarouselProperties = {
     autoplay?: boolean;
     autoplayInterval?: number;
     showDots?: boolean;
     isScrollableLast?: boolean;
+};
+export type CarouselEventProperties = {
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/CheckListItem/properties.d.ts

@@ -1,7 +1,12 @@
 import type { Snippet } from 'svelte';
-export type CheckListItemProperties = {
+export type CheckListItemProperties = OptionalCheckListItemProperties & CheckListItemEventProperties & MandatoryCheckListItemProperties;
+export type MandatoryCheckListItemProperties = {
     text: string;
+};
+export type OptionalCheckListItemProperties = {
     checked?: boolean;
     checkboxLabel?: Snippet;
+};
+export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;
 };

package/dist/GridItem/properties.d.ts

@@ -1,8 +1,13 @@
-export type GridItemProperties = {
+export type GridItemProperties = OptionalGridItemProperties & GridItemEventProperties & MandatoryGridItemProperties;
+export type MandatoryGridItemProperties = {
     icon: string;
     text: string;
+};
+export type OptionalGridItemProperties = {
     headerIcon?: string | null;
     showLoader?: boolean;
+};
+export type GridItemEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Icon/properties.d.ts

@@ -1,6 +1,11 @@
-export type IconProperties = {
+export type IconProperties = OptionalIconProperties & IconEventProperties & MandatoryIconProperties;
+export type MandatoryIconProperties = {
     icon: string;
+};
+export type OptionalIconProperties = {
     text?: string | null;
+};
+export type IconEventProperties = {
     onclick?: (event: MouseEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/Img/properties.d.ts

@@ -1,5 +1,8 @@
-export type ImgProperties = {
+export type ImgProperties = OptionalImgProperties & MandatoryImgProperties;
+export type MandatoryImgProperties = {
     src: string;
     alt: string;
+};
+export type OptionalImgProperties = {
     fallback?: string | null;
 };

package/dist/Input/Input.svelte

@@ -23,6 +23,8 @@
     name = '',
     testId = '',
     textTransformers = [],
+    textViewPresentation = [],
+    onFocus = () => {},
     onFocusout = () => {},
     onInput = () => {},
     onPaste = () => {},
@@ -60,7 +62,7 @@
     return valueValidation;
   });
 
-  let showErrorMessage = $derived(validationState === 'Invalid');
+  const showErrorMessage = $derived(validationState === 'Invalid');
 
   function handleOnInput(event: Event) {
     if (inputElement === null) {
@@ -81,12 +83,16 @@
       }
       if (numberLength > maxLength) {
         const existingInput = value;
-        if (existingInput.length == maxLength) {
-          inputElement.value = value;
+        if (existingInput.length === maxLength) {
+          inputElement.value = applyTextPresentation(value);
           return;
         }
+        /**
+         * choose last max length number of digits if length is bigger than max length passed in props
+         */
         currentValue = currentValue.substring(numberLength - maxLength);
       }
+      currentValue = applyTextPresentation(currentValue);
       inputElement.value = currentValue;
     }
     value = inputElement.value;
@@ -128,7 +134,9 @@
           /**
            * choose last max length number of digits if length is bigger than max length passed in props
            */
-          const finalValue = filteredNumber.substring(filteredNumberLength - maxLength);
+          const finalValue = applyTextPresentation(
+            filteredNumber.substring(filteredNumberLength - maxLength)
+          );
           // Adding reactivity
           value = finalValue;
           onPaste(event);
@@ -141,6 +149,13 @@
     }
   }
 
+  function applyTextPresentation(currentValue: string): string {
+    return textViewPresentation.reduce((prevValue, currIndexFunction) => {
+      let newValue = currIndexFunction(prevValue);
+      return newValue;
+    }, currentValue);
+  }
+
   function _onFocusOut(event: FocusEvent) {
     if (validationState === 'InProgress' && value.length > 0) {
       validationState = 'Invalid';
@@ -167,6 +182,7 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
       onpaste={handleOnPaste}
@@ -185,9 +201,11 @@
       {placeholder}
       autocomplete={autoComplete}
       {name}
+      onfocus={onFocus}
       onfocusout={_onFocusOut}
       oninput={handleOnInput}
-      onpaste={onPaste}
+      onpaste={handleOnPaste}
+      onclick={onClick}
       data-pw={testId}
       class:action-input={actionInput}
       disabled={disable}
@@ -239,13 +257,19 @@
   }
 
   .input-error {
-    --input-focus-border: var(--input-error-border, 1px solid var(--input-error-msg-text-color, #fa1405)) !important;
-    --input-border: var(--input-error-border, 1px solid var(--input-error-msg-text-color, #fa1405)) !important;
+    --input-focus-border: var(
+      --input-error-border,
+      1px solid var(--input-error-msg-text-color, #fa1405)
+    ) !important;
+    --input-border: var(
+      --input-error-border,
+      1px solid var(--input-error-msg-text-color, #fa1405)
+    ) !important;
   }
 
   .action-input {
     border-radius: var(--input-radius, 4px 0px 0px 4px);
-    box-shadow: 0px 0px 0px #ffffff;
+    box-shadow: var(--input-box-shadow, 0px 0px 0px #ffffff);
     margin-bottom: 0;
   }
 

package/dist/Input/properties.d.ts

@@ -1,8 +1,9 @@
 import type { AutoCompleteType, CustomValidator, InputDataType, TextTransformer, ValidationState } from '../types';
-export type InputProperties = OptionalInputProps & {
+export type InputProperties = OptionalInputProperties & InputEventProperties & MandatoryInputProperties;
+export type MandatoryInputProperties = {
     value: string;
 };
-export type OptionalInputProps = {
+export type OptionalInputProperties = {
     placeholder?: string | null;
     dataType?: InputDataType;
     label?: string | null;
@@ -20,8 +21,12 @@ export type OptionalInputProps = {
     autoComplete?: AutoCompleteType;
     name?: string;
     textTransformers?: TextTransformer[];
+    textViewPresentation?: TextTransformer[];
     testId?: string;
+};
+export type InputEventProperties = {
     onInput?: (value: string, event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
     onFocusout?: (event: FocusEvent) => void;
     onPaste?: (event: ClipboardEvent) => void;
     onClick?: (event: MouseEvent) => void;

package/dist/InputButton/InputButton.svelte

@@ -11,7 +11,12 @@
     rightButtonProperties,
     leftButtonProperties,
     bottomButtonProperties,
-    leftIcon
+    inputEventProperties,
+    rightButtonEventProperties,
+    leftButtonEventProperties,
+    bottomButtonEventProperties,
+    leftIcon,
+    rightIcon
   }: InputButtonProperties = $props();
 
   let validationState = $state<ValidationState>('InProgress');
@@ -19,29 +24,29 @@
   let inputRef: SvelteComponent | null = $state(null);
 
   // Derive enable state for right button
-  let isRightButtonEnabled = $derived(validationState === 'Valid');
+  const isRightButtonEnabled = $derived(validationState === 'Valid');
 
   function rightButtonClick(event: MouseEvent): void {
     if (validationState === 'Valid') {
-      rightButtonProperties?.onclick?.(event);
+      rightButtonEventProperties?.onclick?.(event);
     }
   }
 
   function bottomButtonClick(event: MouseEvent): void {
     if (validationState === 'Valid') {
-      bottomButtonProperties?.onclick?.(event);
+      bottomButtonEventProperties?.onclick?.(event);
     }
   }
 
   function triggerRightClickIfValid(event: KeyboardEvent): void {
     if (event?.key === 'Enter' && validationState === 'Valid') {
-      rightButtonProperties?.onkeyup?.(event);
+      rightButtonEventProperties?.onkeyup?.(event);
     }
   }
 
   function handleStateChange(state: ValidationState): void {
     validationState = state;
-    inputProperties.onStateChange?.(state);
+    inputEventProperties?.onStateChange?.(state);
   }
 
   export function focus() {
@@ -49,59 +54,59 @@
   }
 </script>
 
-
 <div class="container">
-{#if inputProperties.label && inputProperties.label !== ''}
-  <label class="label" for={inputProperties.name}>
-    {inputProperties.label}
-  </label>
-{/if}
-
-<div class="input-button-container">
-  <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
-    {#if leftButtonProperties != null}
-      <div class="left-button">
-        <Button {...leftButtonProperties} icon={leftIcon} />
+  {#if inputProperties.label && inputProperties.label !== ''}
+    <label class="label" for={inputProperties.name}>
+      {inputProperties.label}
+    </label>
+  {/if}
+
+  <div class="input-button-container">
+    <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
+      {#if leftButtonProperties != null}
+        <div class="left-button">
+          <Button {...leftButtonProperties} {...leftButtonEventProperties} icon={leftIcon} />
+        </div>
+      {/if}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="input" onkeyup={triggerRightClickIfValid}>
+        <Input
+          {...inputProperties}
+          {...inputEventProperties}
+          bind:value
+          bind:this={inputRef}
+          onStateChange={handleStateChange}
+          actionInput={true}
+        />
       </div>
-    {/if}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="input" onkeyup={triggerRightClickIfValid}>
-      <Input
-        {...inputProperties}
-        bind:value
-        bind:this={inputRef}
-        onStateChange={handleStateChange}
-        actionInput={true}
-      />
+      {#if rightButtonProperties != null}
+        <div class="right-button">
+          <Button
+            {...rightButtonProperties}
+            enable={isRightButtonEnabled}
+            onclick={rightButtonClick}
+            icon={rightIcon}
+          />
+        </div>
+      {/if}
     </div>
-    {#if rightButtonProperties != null}
-      <div class="right-button">
-        <Button
-          {...rightButtonProperties}
-          enable={isRightButtonEnabled}
-          onclick={rightButtonClick}
-        />
+    {#if bottomButtonProperties != null}
+      <div class="bottom-button">
+        <Button {...bottomButtonProperties} onclick={bottomButtonClick} />
       </div>
     {/if}
   </div>
-  {#if bottomButtonProperties != null}
-    <div class="bottom-button">
-      <Button {...bottomButtonProperties} onclick={bottomButtonClick} />
+  {#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
+    <div class="error-message">
+      {inputProperties.onErrorMessage}
+    </div>
+  {/if}
+  {#if inputProperties.infoMessage !== ''}
+    <div class="info-message">
+      {inputProperties.infoMessage}
     </div>
   {/if}
 </div>
-{#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
-  <div class="error-message">
-    {inputProperties.onErrorMessage}
-  </div>
-{/if}
-{#if inputProperties.infoMessage !== ''}
-  <div class="info-message">
-    {inputProperties.infoMessage}
-  </div>
-{/if}
-</div>
-
 
 <style>
   .container {
@@ -161,7 +166,7 @@
     font-size: var(--input-label-msg-text-size, 12px);
     color: var(--input-label-msg-text-color, #637c95);
     line-height: var(--input-label-msg-text-line-height);
-    margin-bottom: 6px;
+    margin: var(--input-label-msg-text-margin, 0px 0px 6px 0px);
   }
 
   .invalid {
@@ -201,6 +206,11 @@
     flex-direction: row;
     --button-content-gap: var(--left-button-content-gap);
     --button-content-flex-direction: var(--left-button-content-flex-direction, row);
+    --button-icon-order: var(--left-button-icon-order);
+    --button-icon-display: var(--left-button-icon-display);
+    --button-text-order: var(--left-button-text-order);
+    --disabled-cursor: var(--left-button-disabled-cursor);
+    --disabled-opacity: var(--left-button-disabled-opacity);
   }
 
   .right-button {
@@ -225,5 +235,10 @@
     --button-content-gap: var(--right-button-content-gap);
     --button-visibility: var(--right-button-visibility, visible);
     --button-content-flex-direction: var(--right-button-content-flex-direction, row);
+    --button-icon-order: var(--right-button-icon-order);
+    --button-icon-display: var(--right-button-icon-display);
+    --button-text-order: var(--right-button-text-order);
+    --disabled-cursor: var(--right-button-disabled-cursor);
+    --disabled-opacity: var(--right-button-disabled-opacity);
   }
 </style>

package/dist/InputButton/properties.d.ts

@@ -1,13 +1,22 @@
-import type { ButtonProperties } from '../Button/properties';
-import type { InputProperties } from '../Input/properties';
+import type { ButtonEventProperties, MandatoryButtonProperties, OptionalButtonProperties } from '../Button/properties';
+import type { InputEventProperties, OptionalInputProperties } from '../Input/properties';
 import type { Snippet } from 'svelte';
-export type InputButtonProperties = OptionalInputButtonProperties & {
+export type InputButtonProperties = OptionalInputButtonProperties & InputButtonEventProperties & {
     value: string;
 };
+type _ButtonProperties = OptionalButtonProperties & MandatoryButtonProperties;
 export type OptionalInputButtonProperties = {
-    inputProperties: Omit<InputProperties, 'value'>;
-    rightButtonProperties?: ButtonProperties | null;
-    leftButtonProperties?: ButtonProperties | null;
-    bottomButtonProperties?: ButtonProperties | null;
+    inputProperties: OptionalInputProperties;
+    rightButtonProperties?: _ButtonProperties | null;
+    leftButtonProperties?: _ButtonProperties | null;
+    bottomButtonProperties?: _ButtonProperties | null;
     leftIcon?: Snippet;
+    rightIcon?: Snippet;
 };
+export type InputButtonEventProperties = {
+    inputEventProperties?: InputEventProperties;
+    rightButtonEventProperties?: ButtonEventProperties | null;
+    leftButtonEventProperties?: ButtonEventProperties | null;
+    bottomButtonEventProperties?: ButtonEventProperties | null;
+};
+export {};

package/dist/ListItem/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ListItemProperties = {
+export type ListItemProperties = ListItemEventProperties & {
     leftImageUrl?: string | null;
     leftImageFallbackUrl?: string | null;
     rightImageUrl?: string | null;
@@ -19,6 +19,8 @@ export type ListItemProperties = {
     centerContent?: Snippet;
     rightContent?: Snippet;
     bottomContent?: Snippet;
+};
+export type ListItemEventProperties = {
     onleftImageClick?: (event: MouseEvent) => void;
     onrightImageClick?: (event: MouseEvent) => void;
     oncenterTextClick?: (event: MouseEvent) => void;

package/dist/Modal/properties.d.ts

@@ -3,7 +3,7 @@ import type { ModalTransition } from '../types';
 import type { Snippet } from 'svelte';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
-export type ModalProperties = {
+export type ModalProperties = ModalEventProperties & {
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
@@ -26,6 +26,8 @@ export type ModalProperties = {
     testId?: string;
     content?: Snippet;
     footerSnippet?: Snippet;
+};
+export type ModalEventProperties = {
     onclose?: () => void;
     onheaderRightImageClick?: (event: MouseEvent) => void;
     onheaderLeftImageClick?: (event: MouseEvent) => void;

package/dist/Select/properties.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ImgProperties } from '../Img/properties';
-export type SelectProperties = {
+export type SelectProperties = SelectEventProperties & {
     dropDownIconAlt?: string;
     placeholder?: string | null;
     label?: string | null;
@@ -20,6 +20,8 @@ export type SelectProperties = {
     itemTestId?: string;
     leftContent?: Snippet;
     bottomContent?: Snippet;
+};
+export type SelectEventProperties = {
     onselect?: (event: {
         selectedItems: string | string[];
     }) => void;

package/dist/Status/properties.d.ts

@@ -1,8 +1,10 @@
 import type { ButtonProperties } from '../Button/properties';
-export type StatusProperties = {
+export type StatusProperties = StatusEventProperties & {
     statusIcon: string;
     statusText: string;
     statusDescription: string;
     buttonProperties?: ButtonProperties;
+};
+export type StatusEventProperties = {
     onbuttonClick?: () => void;
 };

package/dist/Stepper/properties.d.ts

@@ -9,10 +9,14 @@ export type Step = {
     label: string;
     icon?: string;
 };
-export type StepProperties = {
+export type StepProperties = OptionalStepProperties & StepEventProperties & {
     stepIndex: number;
     label: string;
+};
+export type OptionalStepProperties = {
     icon?: string;
+};
+export type StepEventProperties = {
     onclick?: (event: {
         selectedIndex: number;
     }) => void;

package/dist/Toast/Toast.svelte

@@ -46,7 +46,7 @@
    */
   function getAnimationConfig(
     overlapPage: boolean,
-    toastDirection?: ToastDirection,
+    toastDirection?: ToastDirection
   ): FlyAnimationConfig {
     // Initializing variables to store animation offsets
     let inX: number = 0;
@@ -172,7 +172,9 @@
     top: var(--toast-top, 10px);
     left: var(--toast-left, 0);
     right: var(--toast-right, 0);
-    background-color: var(--default-background-color, #87ceeb);
+    background-color: var(--toast-background-color, #87ceeb);
+    opacity: var(--toast-opacity, 1);
+    box-sizing: var(--toast-box-sizing);
   }
 
   .no-page-overlap {
@@ -180,14 +182,17 @@
   }
 
   .toast-icon-wrapper {
+    display: flex;
     width: var(--toast-icon-wrapper-width, 20px);
     height: var(--toast-icon-wrapper-height, 20px);
     margin: var(--toast-icon-margin, 0px 6px 0px 0px);
     padding: var(--toast-icon-wrapper-padding, 1px);
+    align-items: center;
   }
 
   .toast-icon {
     height: var(--toast-icon-height, 100%);
+    filter: var(--toast-icon-filter);
     border-radius: var(--toast-icon-border-radius, 50%);
   }
 
@@ -219,25 +224,25 @@
 
   .success {
     color: var(--toast-success-text, #fff);
-    background-color: var(--toast-background-color, #24aa5a);
+    background-color: var(--toast-success-background-color, var(--toast-background-color, #24aa5a));
     --toast-border: var(--toast-success-border);
   }
 
   .info {
     color: var(--toast-info-text, #fff);
-    background-color: var(--toast-background-color, #87ceeb);
+    background-color: var(--toast-info-background-color, var(--toast-background-color, #87ceeb));
     --toast-border: var(--toast-info-border);
   }
 
   .warn {
     color: var(--toast-warn-text, #fff);
-    background-color: var(--toast-background-color, #f3a42d);
+    background-color: var(--toast-warn-background-color, var(--toast-background-color, #f3a42d));
     --toast-border: var(--toast-warn-border);
   }
 
   .error {
     color: var(--toast-error-text, #fff);
-    background-color: var(--toast-background-color, #f04438);
+    background-color: var(--toast-error-background-color, var(--toast-background-color, #f04438));
     --toast-border: var(--toast-error-border);
   }
 </style>

package/dist/Toast/properties.d.ts

@@ -1,7 +1,7 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 export type ToastType = 'success' | 'error' | 'info' | 'warn';
 export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
-export type ToastProperties = {
+export type ToastProperties = ToastEventProperties & {
     duration?: number;
     leftIcon?: string | null;
     message: string;
@@ -19,5 +19,7 @@ export type ToastProperties = {
     subTextTestId?: string;
     closeIconTestId?: string;
     bottomContent?: Snippet;
+};
+export type ToastEventProperties = {
     onToastHide?: () => void;
 };

package/dist/Toggle/properties.d.ts

@@ -1,5 +1,7 @@
-export type ToggleProperties = {
+export type ToggleProperties = ToggleEventProperties & {
     checked?: boolean;
     text: string;
+};
+export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;
 };

package/dist/Toolbar/properties.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-export type ToolbarProperties = {
+export type ToolbarProperties = ToolbarEventProperties & {
     showBackButton?: boolean;
     text?: string | null;
     backIcon?: string | null;
@@ -7,6 +7,8 @@ export type ToolbarProperties = {
     centerContent?: Snippet;
     rightContent?: Snippet;
     additionalContent?: Snippet;
+};
+export type ToolbarEventProperties = {
     onbackClick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };

package/dist/index.d.ts

@@ -23,26 +23,24 @@ export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
 export { default as GridItem } from './GridItem/GridItem.svelte';
 export { default as IconStack } from './IconStack/IconStack.svelte';
-export type { ButtonProperties } from './Button/properties';
-export type { ModalProperties, ModalAlign, ModalSize } from './Modal/properties';
-export type { InputProperties, OptionalInputProps } from './Input/properties';
-export type { InputButtonProperties, OptionalInputButtonProperties } from './InputButton/properties';
-export type { ListItemProperties } from './ListItem/properties';
-export type { InputDataType } from './types';
-export type { AutoCompleteType } from './types';
-export type { CustomValidator } from './types';
-export type { ValidationState } from './types';
-export type { FlyAnimationConfig } from './types';
-export type { IconProperties } from './Icon/properties';
-export type { BrandLoaderProperties } from './BrandLoader/properties';
-export type { StatusProperties } from './Status/properties';
-export type { SelectProperties } from './Select/properties';
-export type { ToolbarProperties } from './Toolbar/properties';
-export type { CarouselProperties } from './Carousel/properties';
-export type { BadgeProperties } from './Badge/properties';
-export type { BannerProperties } from './Banner/properties';
-export type { TableProperties } from './Table/properties';
-export type { StepperProperties } from './Stepper/properties';
-export type { ToastProperties } from './Toast/properties';
-export type { IconStackProperties } from './IconStack/properties';
+export { default as Img } from './Img/Img.svelte';
+export type * from './Button/properties';
+export type * from './Modal/properties';
+export type * from './Input/properties';
+export type * from './InputButton/properties';
+export type * from './ListItem/properties';
+export type * from './types';
+export type * from './Icon/properties';
+export type * from './BrandLoader/properties';
+export type * from './Status/properties';
+export type * from './Select/properties';
+export type * from './Toolbar/properties';
+export type * from './Carousel/properties';
+export type * from './Badge/properties';
+export type * from './Banner/properties';
+export type * from './Table/properties';
+export type * from './Stepper/properties';
+export type * from './Toast/properties';
+export type * from './IconStack/properties';
+export type * from './Img/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -23,4 +23,5 @@ export { default as Step } from './Stepper/Step.svelte';
 export { default as Toast } from './Toast/Toast.svelte';
 export { default as GridItem } from './GridItem/GridItem.svelte';
 export { default as IconStack } from './IconStack/IconStack.svelte';
+export { default as Img } from './Img/Img.svelte';
 export { validateInput } from './utils';

package/package.json

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