@idds/styles 1.5.41 → 1.5.43

package/dist/index.css

@@ -1323,7 +1323,7 @@ dfn {
   pointer-events: none;
 }
 /* Menu container */
-.ina-action-dropdown__menu {
+.ina-action-dropdown .ina-action-dropdown__menu {
   position: absolute;
   background-color: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
@@ -1343,7 +1343,7 @@ dfn {
   pointer-events: none;
   visibility: hidden;
   padding: var(--ina-spacing-0-5);
-  margin-top: var(--ina-spacing-1);
+  margin-top: var(--ina-spacing-2, 0.5rem);
 }
 .ina-action-dropdown__menu--visible {
   opacity: 1;
@@ -2169,7 +2169,7 @@ dfn {
   opacity: 0.6;
 }
 /* Panel Container */
-.ina-basic-dropdown__panel {
+.ina-basic-dropdown .ina-basic-dropdown__panel {
   position: absolute;
   z-index: 10004;
   min-width: 100%;
@@ -2181,7 +2181,7 @@ dfn {
   box-shadow:
     0 10px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  margin: var(--ina-spacing-1, 0.25rem) 0;
+  margin-top: var(--ina-spacing-2, 0.5rem);
   animation: basicDropdownFadeIn var(--ina-transition-duration-200) ease-out;
 }
 @keyframes basicDropdownFadeIn {
@@ -7769,8 +7769,8 @@ dialog.bottom-sheet-dropdown {
 .ina-one-time-password__input--error:focus {
   border-color: var(--ina-negative-500, #f02d2d);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
 }
 /* Disabled state */
 .ina-one-time-password__input:disabled {
@@ -8278,8 +8278,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
   border-color: var(--ina-content-primary, #1f1f1f);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-content-primary, #1f1f1f) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--error {
   border-color: var(--ina-negative-500);
@@ -8287,8 +8287,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--warning {
   border-color: var(--ina-warning-500);
@@ -8296,8 +8296,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-500, #eebb04) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-500, #eebb04) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--success {
   border-color: var(--ina-positive-600);
@@ -8305,8 +8305,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
 }
 /* Prefix icon */
 .ina-password-input__prefix-icon {
@@ -8387,13 +8387,16 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-content-secondary);
   padding-top: var(--ina-spacing-1, 0.25rem);
 }
-.ina-password-input__status-message--error {
+.ina-password-input
+  .ina-password-input__status-message.ina-password-input__status-message--error {
   color: var(--ina-negative-500);
 }
-.ina-password-input__status-message--warning {
+.ina-password-input
+  .ina-password-input__status-message.ina-password-input__status-message--warning {
   color: var(--ina-warning-500);
 }
-.ina-password-input__status-message--success {
+.ina-password-input
+  .ina-password-input__status-message.ina-password-input__status-message--success {
   color: var(--ina-positive-600);
 }
 /* Character count */
@@ -8842,8 +8845,8 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-500);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-50) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-50) !important;
 }
 .ina-phone-input__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -8851,8 +8854,8 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-500);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-50) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-50) !important;
 }
 .ina-phone-input__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -8860,8 +8863,8 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-50) !important;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-50) !important;
 }
 /* Focus styles */
 .ina-phone-input__wrapper:focus-within {
@@ -8901,7 +8904,9 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-content-tertiary);
 }
 /* Country Dropdown */
-.ina-phone-input__country-dropdown {
+.ina-phone-input
+  .ina-phone-input__country-selector
+  .ina-phone-input__country-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
@@ -9778,8 +9783,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-50, #fffafa);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-50, #fffafa);
 }
 .ina-select-dropdown__trigger--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -9787,8 +9792,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-50, #fffefa);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-50, #fffefa);
 }
 .ina-select-dropdown__trigger--status-success {
   border-color: var(--ina-positive-500, #3cc14e);
@@ -9796,8 +9801,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-50, #fafffa);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-50, #fafffa);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -9849,7 +9854,7 @@ dialog.bottom-sheet-dropdown {
   left: 0;
   width: 100%; /* Match trigger width by default */
   min-width: 100%;
-  margin-top: var(--ina-spacing-1, 0.25rem);
+  margin-top: var(--ina-spacing-2, 0.5rem);
   background-color: var(
     --ina-background-primary,
     #ffffff
@@ -12822,8 +12827,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-600);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-area__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -12831,8 +12836,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-600);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-area__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -12840,8 +12845,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -13026,16 +13031,20 @@ dialog.bottom-sheet-dropdown {
   font-size: var(--ina-font-xs);
   padding-top: var(--ina-spacing-1);
 }
-.ina-text-field__helper-text--neutral {
+.ina-text-field
+  .ina-text-field__helper-text.ina-text-field__helper-text--neutral {
   color: var(--ina-content-secondary, #525252);
 }
-.ina-text-field__helper-text--error {
+.ina-text-field
+  .ina-text-field__helper-text.ina-text-field__helper-text--error {
   color: var(--ina-negative-500, #f02d2d);
 }
-.ina-text-field__helper-text--warning {
+.ina-text-field
+  .ina-text-field__helper-text.ina-text-field__helper-text--warning {
   color: var(--ina-warning-500, #eebb04);
 }
-.ina-text-field__helper-text--success {
+.ina-text-field
+  .ina-text-field__helper-text.ina-text-field__helper-text--success {
   color: var(--ina-positive-600, #288034);
 }
 /* Character count */
@@ -13057,8 +13066,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-field__wrapper--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -13066,8 +13075,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-field__wrapper--status-success {
   border-color: var(--ina-positive-600, #288034);
@@ -13075,8 +13084,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -13498,6 +13507,14 @@ dialog.bottom-sheet-dropdown {
   border: none;
   padding: 0;
   cursor: pointer;
+  position: absolute;
+  right: var(--ina-spacing-3, 0.75rem);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .ina-time-picker__clear-button:hover {
   color: var(--ina-content-secondary, #525252);
@@ -13509,8 +13526,8 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-time-picker--status-warning .ina-time-picker__wrapper {
   border-color: var(--ina-warning-500, #eebb04);
@@ -13519,8 +13536,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-time-picker--status-success .ina-time-picker__wrapper {
   border-color: var(--ina-positive-600, #288034);
@@ -13529,8 +13546,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    inset 0 0 0 2px #fff,
-    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled */
 .ina-time-picker--disabled .ina-time-picker__wrapper {
@@ -14181,7 +14198,9 @@ dialog.bottom-sheet-dropdown {
   position: absolute;
   z-index: 999999;
   pointer-events: none;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
 }
 /* Show tooltip on hover - support force state dari dev tools */
 .ina-tooltip:hover .ina-tooltip__content,
@@ -14285,7 +14304,8 @@ dialog.bottom-sheet-dropdown {
   position: relative;
   pointer-events: auto;
   border-radius: 8px;
-  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
+  box-shadow:
+    0 12px 16px -4px rgba(10, 13, 18, 0.08),
     0 4px 6px -2px rgba(10, 13, 18, 0.03);
   overflow: hidden;
   width: 320px;