@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/styles/otp-input/_material-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material-dark' as *;
+@forward 'ej2-base/styles/definition/material-dark';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 14px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: rgba($grey-white, .38) !default;
 $otp-input-disabled-border-color: $grey-700 !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material' as *;
+@forward 'ej2-base/styles/definition/material';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 14px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: transparent !default;
 $otp-input-disabled-color: rgba($grey-light-font, .38) !default;
 $otp-input-disabled-border-color: $grey-300 !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_material3-dark-definition.scss

@@ -1 +1,62 @@
-@import './material3-definition.scss';
+@use 'ej2-base/styles/definition/material3-dark' as *;
+@forward 'ej2-base/styles/definition/material3-dark';
+$otp-input-width: 32px !default;
+$otp-input-height: 32px !default;
+$otp-input-gap: 14px !default;
+$otp-separator-input-gap: 6px !default;
+$otp-input-padding: 0 !default;
+$otp-input-font-size: 14px !default;
+$otp-input-font-weight: 400 !default;
+$otp-input-password-font-size: 18px !default;
+$otp-input-line-height: 20px !default;
+$otp-input-border-radius-outlined: $radius-4 !default;
+$otp-input-border-radius-underlined: $radius-0 !default;
+$otp-input-border-radius-filled: $radius-4 $radius-4 $radius-0 $radius-0 !default;
+$otp-separator-font-size: 16px !default;
+$otp-separator-font-weight: 400 !default;
+$otp-separator-line-height: 24px !default;
+
+$otp-small-input-width: 24px !default;
+$otp-small-input-height: 24px !default;
+$otp-small-input-gap: 8px !default;
+$otp-small-separator-input-gap: 4px !default;
+$otp-small-input-font-size: 12px !default;
+$otp-small-input-password-font-size: 18px !default;
+$otp-small-input-line-height: 16px !default;
+$otp-small-separator-font-size: 16px !default;
+$otp-small-separator-line-height: 24px !default;
+
+$otp-bigger-small-input-width: 36px !default;
+$otp-bigger-small-input-height: 36px !default;
+$otp-bigger-small-input-gap: 16px !default;
+$otp-bigger-small-separator-input-gap: 6px !default;
+$otp-bigger-small-input-font-size: 14px !default;
+$otp-bigger-small-input-password-font-size: 20px !default;
+$otp-bigger-small-input-line-height: 20px !default;
+$otp-bigger-small-separator-font-size: 16px !default;
+$otp-bigger-small-separator-line-height: 24px !default;
+
+$otp-bigger-input-width: 40px !default;
+$otp-bigger-input-height: 40px !default;
+$otp-bigger-input-gap: 16px !default;
+$otp-bigger-separator-input-gap: 8px !default;
+$otp-bigger-input-font-size: 16px !default;
+$otp-bigger-input-password-font-size: 20px !default;
+$otp-bigger-input-line-height: 24px !default;
+$otp-bigger-separator-font-size: 16px !default;
+$otp-bigger-separator-line-height: 24px !default;
+
+$otp-input-text-color: rgba($content-text-color) !default;
+$otp-background-color: $transparent !default;
+$otp-input-border-color: rgba($border) !default;
+$otp-input-border-bottom-color: rgba($border) !default;
+$otp-input-filled-bg-color: rgba($series-1) !default;
+$otp-input-error-color: rgba($border-error) !default;
+$otp-input-success-color: rgba($border-success) !default;
+$otp-input-warning-color: rgba($border-warning) !default;
+$otp-input-separator-color: $border !default;
+$otp-input-underlined-bg-color: $transparent !default;
+$otp-input-disabled-color: rgba($content-text-color) !default;
+$otp-input-disabled-border-color: rgba($border) !default;
+$otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_material3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/material3' as *;
+@forward 'ej2-base/styles/definition/material3';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 14px !default;
@@ -7,9 +9,9 @@ $otp-input-font-size: 14px !default;
 $otp-input-font-weight: 400 !default;
 $otp-input-password-font-size: 18px !default;
 $otp-input-line-height: 20px !default;
-$otp-input-border-radius-outlined: 4px !default;
-$otp-input-border-radius-underlined: 0 !default;
-$otp-input-border-radius-filled: 4px 4px 0 0 !default;
+$otp-input-border-radius-outlined: $radius-4 !default;
+$otp-input-border-radius-underlined: $radius-0 !default;
+$otp-input-border-radius-filled: $radius-4 $radius-4 $radius-0 $radius-0 !default;
 $otp-separator-font-size: 16px !default;
 $otp-separator-font-weight: 400 !default;
 $otp-separator-line-height: 24px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: rgba($content-text-color) !default;
 $otp-input-disabled-border-color: rgba($border) !default;
 $otp-input-disabled-bg-color: $otp-background-color !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_tailwind-dark-definition.scss

@@ -1 +1,62 @@
-@import './tailwind-definition.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@forward 'ej2-base/styles/definition/tailwind-dark';
+$otp-input-width: 32px !default;
+$otp-input-height: 32px !default;
+$otp-input-gap: 12px !default;
+$otp-separator-input-gap: 4px !default;
+$otp-input-padding: 0 !default;
+$otp-input-font-size: 14px !default;
+$otp-input-font-weight: 400 !default;
+$otp-input-password-font-size: 18px !default;
+$otp-input-line-height: 22px !default;
+$otp-input-border-radius-outlined: 4px !default;
+$otp-input-border-radius-underlined: 4px 4px 0 0 !default;
+$otp-input-border-radius-filled: 4px 4px 0 0 !default;
+$otp-separator-font-size: 14px !default;
+$otp-separator-font-weight: 400 !default;
+$otp-separator-line-height: 22px !default;
+
+$otp-small-input-width: 26px !default;
+$otp-small-input-height: 26px !default;
+$otp-small-input-gap: 8px !default;
+$otp-small-separator-input-gap: 4px !default;
+$otp-small-input-font-size: 12px !default;
+$otp-small-input-password-font-size: 18px !default;
+$otp-small-input-line-height: 18px !default;
+$otp-small-separator-font-size: 12px !default;
+$otp-small-separator-line-height: 18px !default;
+
+$otp-bigger-small-input-width: 34px !default;
+$otp-bigger-small-input-height: 34px !default;
+$otp-bigger-small-input-gap: 12px !default;
+$otp-bigger-small-separator-input-gap: 6px !default;
+$otp-bigger-small-input-font-size: 14px !default;
+$otp-bigger-small-input-password-font-size: 20px !default;
+$otp-bigger-small-input-line-height: 22px !default;
+$otp-bigger-small-separator-font-size: 14px !default;
+$otp-bigger-small-separator-line-height: 22px !default;
+
+$otp-bigger-input-width: 38px !default;
+$otp-bigger-input-height: 38px !default;
+$otp-bigger-input-gap: 16px !default;
+$otp-bigger-separator-input-gap: 8px !default;
+$otp-bigger-input-font-size: 16px !default;
+$otp-bigger-input-password-font-size: 20px !default;
+$otp-bigger-input-line-height: 24px !default;
+$otp-bigger-separator-font-size: 16px !default;
+$otp-bigger-separator-line-height: 24px !default;
+
+$otp-input-text-color: $content-text-color !default;
+$otp-background-color: $content-bg-color !default;
+$otp-input-border-color: $border !default;
+$otp-input-border-bottom-color: $border !default;
+$otp-input-filled-bg-color: $content-bg-color-alt1 !default;
+$otp-input-error-color: $danger !default;
+$otp-input-success-color: $success !default;
+$otp-input-warning-color: $warning !default;
+$otp-input-separator-color: $border !default;
+$otp-input-underlined-bg-color: $transparent !default;
+$otp-input-disabled-color: $content-text-color-disabled !default;
+$otp-input-disabled-border-color: $border !default;
+$otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_tailwind-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind' as *;
+@forward 'ej2-base/styles/definition/tailwind';
 $otp-input-width: 30px !default;
 $otp-input-height: 30px !default;
 $otp-input-gap: 12px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $content-bg-color-alt2 !default;
 $otp-input-disabled-bg-color: $content-bg-color-alt2 !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_tailwind3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $otp-input-width: 32px !default;
 $otp-input-height: 32px !default;
 $otp-input-gap: 12px !default;
@@ -7,9 +9,9 @@ $otp-input-font-size: 14px !default;
 $otp-input-font-weight: 400 !default;
 $otp-input-password-font-size: 18px !default;
 $otp-input-line-height: 22px !default;
-$otp-input-border-radius-outlined: 6px !default;
-$otp-input-border-radius-underlined: 0 !default;
-$otp-input-border-radius-filled: 0 !default;
+$otp-input-border-radius-outlined: $radius-6 !default;
+$otp-input-border-radius-underlined: $radius-0 !default;
+$otp-input-border-radius-filled: $radius-0 !default;
 $otp-separator-font-size: 14px !default;
 $otp-separator-font-weight: 400 !default;
 $otp-separator-line-height: 22px !default;
@@ -57,3 +59,4 @@ $otp-input-underlined-bg-color: $transparent !default;
 $otp-input-disabled-color: $content-text-color-disabled !default;
 $otp-input-disabled-border-color: $content-bg-color-alt2 !default;
 $otp-input-disabled-bg-color: $content-bg-color-disabled !default;
+$otp-input-zero-padding-margin: 0 !default;

package/styles/otp-input/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/otp-input/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('otp-input-theme') {
   .e-otpinput {
     .e-otp-input-field {
@@ -19,6 +21,9 @@
         @if ($skin-name == 'bootstrap5.3') {
           border-bottom: 1px solid $otp-input-border-bottom-color;
         }
+        @else if $skin-name == 'tailwind3' {
+          border-bottom: $border-2 solid $otp-input-border-bottom-color;
+        }
         @else {
           border-bottom: 2px solid $otp-input-border-bottom-color;
         }

package/styles/otp-input/bds.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 .e-otpinput {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -38,13 +118,13 @@
   padding-bottom: 0;
 }
 .e-otpinput.e-outline .e-otp-input-field {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-otpinput.e-underlined .e-otp-input-field {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
 }
 .e-otpinput.e-filled .e-otp-input-field {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   padding: 0;
 }
 .e-otpinput .e-otp-separator {

package/styles/otp-input/bootstrap5.3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/fluent-dark.css

@@ -34,13 +34,13 @@
   padding-bottom: 0;
 }
 .e-otpinput.e-outline .e-otp-input-field {
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .e-otpinput.e-underlined .e-otp-input-field {
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 .e-otpinput.e-filled .e-otp-input-field {
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   padding: 0;
 }
 .e-otpinput .e-otp-separator {
@@ -98,7 +98,7 @@
 
 .e-otpinput .e-otp-input-field {
   color: #f3f2f1;
-  background: transparent;
+  background: #1b1a19;
 }
 .e-otpinput .e-otp-separator {
   color: #a19f9d;
@@ -110,7 +110,7 @@
   border-bottom: 2px solid #a19f9d;
 }
 .e-otpinput.e-outline .e-otp-input-field:disabled, .e-otpinput.e-underlined .e-otp-input-field:disabled, .e-otpinput.e-filled .e-otp-input-field:disabled {
-  border-color: #292827;
+  border-color: #a19f9d;
   color: #484644;
   background: #252423;
 }
@@ -136,7 +136,7 @@
 .e-otpinput.e-warning.e-outline .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-warning.e-underlined .e-otp-input-field,
 .e-otpinput.e-warning.e-underlined .e-otp-input-field.e-otp-input-focus, .e-otpinput.e-warning.e-filled .e-otp-input-field,
 .e-otpinput.e-warning.e-filled .e-otp-input-field.e-otp-input-focus {
-  border-color: #db7b48;
+  border-color: #ca5010;
 }
 
 .e-bigger.e-otpinput,
@@ -145,12 +145,12 @@
 }
 .e-bigger.e-otpinput:has(.e-otp-separator):not(:empty),
 .e-bigger .e-otpinput:has(.e-otp-separator):not(:empty) {
-  gap: 6px;
+  gap: 8px;
 }
 .e-bigger.e-otpinput .e-otp-input-field,
 .e-bigger .e-otpinput .e-otp-input-field {
-  min-width: 40px;
-  min-height: 40px;
+  min-width: 38px;
+  min-height: 38px;
   font-size: 16px;
   line-height: 24px;
   padding: 0;
@@ -190,8 +190,8 @@
 .e-bigger.e-small .e-otpinput .e-otp-input-field,
 .e-bigger .e-small.e-otpinput .e-otp-input-field,
 .e-small .e-bigger.e-otpinput .e-otp-input-field {
-  min-width: 36px;
-  min-height: 36px;
+  min-width: 34px;
+  min-height: 34px;
   font-size: 14px;
   line-height: 22px;
   padding: 0;

package/styles/otp-input/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'fluent-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'fluent-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'fluent-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'fluent-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 .e-otpinput {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -40,13 +120,13 @@
   padding-bottom: 0;
 }
 .e-otpinput.e-outline .e-otp-input-field {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-otpinput.e-underlined .e-otp-input-field {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
 }
 .e-otpinput.e-filled .e-otp-input-field {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   padding: 0;
 }
 .e-otpinput .e-otp-separator {

package/styles/otp-input/fluent2.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/otp-input/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/definition/material-dark.scss';
-@import 'material-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material-dark' as *;
+@use 'material-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;