@idds/styles 1.5.28 → 1.5.30

package/dist/index.css

@@ -3092,7 +3092,9 @@ dialog.bottom-sheet-dropdown {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+  transition:
+    background-color 150ms ease-in-out,
+    border-color 150ms ease-in-out;
 }
 @media (min-width: 768px) {
   .ina-checkbox__box {
@@ -3179,17 +3181,26 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-neutral-400);
 }
 /* Focus state menggunakan peer selector untuk accessibility */
+/* Focus state menggunakan peer selector untuk accessibility */
 .ina-checkbox__input:focus + .ina-checkbox__box {
-  outline: 3px solid #f3f3f3;
-  outline-offset: -1px;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Focus state untuk indeterminate checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
-  outline: 3px solid #f3f3f3;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Focus state untuk checked checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--checked {
-  outline: 3px solid #f3f3f3;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Invalid state yang tidak disabled */
 .ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
@@ -3745,11 +3756,12 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-secondary);
 }
 .ina-date-picker__trigger:focus {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-stroke-primary);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
-  border-color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-tertiary, #141414);
 }
 .ina-date-picker__trigger--disabled {
   background-color: var(--ina-background-secondary);
@@ -3822,7 +3834,8 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-xl);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04);
   padding: var(--ina-spacing-4);
   animation: date-picker-panel-fade-in 0.15s ease-out;
@@ -5492,13 +5505,61 @@ dialog.bottom-sheet-dropdown {
   text-align: left;
 }
 /* Trigger variants */
+/* Trigger variants */
 .ina-dropdown__trigger {
   cursor: pointer;
   transition: opacity var(--ina-transition-base);
+  width: 100%; /* Ensure full width availability */
+}
+/* Standardized Trigger Button (Select-like look) */
+.ina-dropdown__trigger-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  padding: var(--ina-spacing-2) var(--ina-spacing-4);
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  cursor: pointer;
+  font-size: var(--ina-font-sm);
+  outline: none;
+  transition: all var(--ina-transition-base);
+  gap: var(--ina-spacing-2);
+  min-height: 40px; /* Match standard input height */
+}
+.ina-dropdown__trigger-button:hover {
+  background-color: var(--ina-background-secondary);
+}
+/* Active/Open State for Trigger Button */
+.ina-dropdown__trigger-button--open,
+.ina-dropdown__trigger-button:focus-within {
+  border-color: var(--ina-stroke-tertiary, #141414);
+  background: var(--ina-background-primary, #fff);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
+}
+.ina-dropdown__trigger-content {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ina-dropdown__trigger-icon {
+  flex-shrink: 0;
+  color: var(--ina-content-tertiary);
+  transition: transform var(--ina-transition-base);
+}
+.ina-dropdown__trigger-button--open .ina-dropdown__trigger-icon {
+  transform: rotate(180deg);
 }
 .ina-dropdown__trigger--disabled {
-  opacity: 0.5;
+  opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 /* Menu container */
 .ina-dropdown__menu {
@@ -5518,6 +5579,16 @@ dialog.bottom-sheet-dropdown {
   min-width: 100%; /* Default match trigger width */
   width: -moz-max-content;
   width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
+  pointer-events: none;
+  visibility: hidden;
+  padding: var(--ina-spacing-0-5);
+  margin-top: var(--ina-spacing-1);
+}
+.ina-dropdown__menu--visible {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+  transform: translateY(0);
 }
 /* ... existing styles ... */
 /* Width variants */
@@ -8162,7 +8233,8 @@ dialog.bottom-sheet-dropdown {
   border: 1px solid var(--ina-stroke-primary);
   padding: var(--ina-spacing-2) var(--ina-spacing-3);
   background-color: var(--ina-background-primary);
-  transition: border-color var(--ina-transition-base),
+  transition:
+    border-color var(--ina-transition-base),
     box-shadow var(--ina-transition-base);
 }
 /* Size variants */
@@ -8216,24 +8288,28 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-negative-500);
 }
 .ina-password-input__wrapper--error:focus-within {
-  border-color: var(--ina-negative-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50) !important;
+  border-color: var(--ina-negative-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-500);
 }
 .ina-password-input__wrapper--warning {
   border-color: var(--ina-warning-500);
 }
 .ina-password-input__wrapper--warning:focus-within {
-  border-color: var(--ina-warning-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
+  border-color: var(--ina-warning-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-password-input__wrapper--success {
   border-color: var(--ina-positive-600);
 }
 .ina-password-input__wrapper--success:focus-within {
   border-color: var(--ina-positive-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-positive-50) !important;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-500);
 }
 /* Prefix icon */
 .ina-password-input__prefix-icon {
@@ -8416,7 +8492,9 @@ dialog.bottom-sheet-dropdown {
 }
 /* Focus styles - Sesuai design Figma */
 .ina-password-input__wrapper:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -8435,7 +8513,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-password-input__strength-bar {
   height: 100%;
-  transition: width var(--ina-transition-duration-300) ease-out,
+  transition:
+    width var(--ina-transition-duration-300) ease-out,
     background-color var(--ina-transition-base);
 }
 .ina-password-input__strength-bar--weak {
@@ -8608,6 +8687,16 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper--size-lg {
   height: 48px;
 }
+.ina-phone-input__country-flag-img {
+  width: 26px;
+  height: 20px;
+  display: block;
+  -o-object-fit: contain;
+     object-fit: contain;
+  box-shadow:
+    0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 2px var(--ina-neutral-25) !important;
+}
 /* Responsive adjustments */
 @media (max-width: 767px) {
   .ina-phone-input__wrapper--size-sm {
@@ -8621,6 +8710,10 @@ dialog.bottom-sheet-dropdown {
   }
 }
 @media (max-width: 639px) {
+  .ina-phone-input__country-flag-img {
+    width: 20px;
+    height: 15px;
+  }
   .ina-phone-input__wrapper {
     padding: var(--ina-spacing-2) var(--ina-spacing-3);
   }
@@ -8689,16 +8782,6 @@ dialog.bottom-sheet-dropdown {
   font-size: var(--ina-font-sm);
   height: 100%;
 }
-.ina-phone-input__country-flag-img {
-  width: 20px;
-  height: 15px;
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  box-shadow:
-    0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 2px var(--ina-neutral-25) !important;
-}
 .ina-phone-input__country-code {
   font-weight: var(--ina-font-medium);
   white-space: nowrap;
@@ -8761,8 +8844,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 1px #fff,
-    inset 0 0 0 2px var(--ina-negative-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-50) !important;
 }
 .ina-phone-input__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -8770,8 +8853,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 1px #fff,
-    inset 0 0 0 2px var(--ina-warning-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-50) !important;
 }
 .ina-phone-input__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -8779,14 +8862,14 @@ 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 1px #fff,
-    inset 0 0 0 2px var(--ina-positive-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-50) !important;
 }
 /* Focus styles */
 .ina-phone-input__wrapper:focus-within {
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-primary-primary);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -8822,33 +8905,36 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__country-dropdown {
   position: absolute;
   top: 100%;
-  left: 0;
-  margin-top: var(--ina-spacing-1);
+  left: calc(-1 * var(--ina-spacing-3, 12px));
+  margin-top: var(--ina-spacing-3, 12px) !important;
   background: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-lg);
   box-shadow: var(--ina-shadow-lg);
   z-index: 100;
-  width: 300px; /* Or min-content depending on design */
-  max-height: 240px;
+  width: 324px; /* Or min-content depending on design */
+  max-height: 348px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  padding: var(--ina-spacing-2);
 }
 .ina-phone-input__country-search {
-  padding: var(--ina-spacing-2);
-  border-bottom: 1px solid var(--ina-stroke-primary);
+  padding: var(--ina-spacing-1) 0 var(--ina-spacing-2) 0;
 }
 .ina-phone-input__country-search-input {
   width: 100%;
   padding: var(--ina-spacing-1) var(--ina-spacing-2);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-md);
-  font-size: var(--ina-font-sm);
+  font-size: var(--ina-font-xs);
 }
 .ina-phone-input__country-search-input:focus {
   outline: none;
   border-color: var(--ina-content-primary);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 .ina-phone-input__country-list {
   overflow-y: auto;
@@ -8867,15 +8953,17 @@ dialog.bottom-sheet-dropdown {
   gap: var(--ina-spacing-2);
 }
 .ina-phone-input__country-option:hover {
-  background-color: var(--ina-neutral-50);
+  background-color: var(--ina-background-secondary, #f5f5f5);
+  border-radius: var(--ina-radius-base, 4px);
 }
 .ina-phone-input__country-option--selected {
-  background-color: var(--ina-neutral-50); /* Or primary-50 */
-  font-weight: var(--ina-font-medium);
+  background-color: var(--ina-background-secondary, #f5f5f5);
+  border-radius: var(--ina-radius-base, 4px);
 }
 .ina-phone-input__country-name {
   flex: 1;
   font-size: var(--ina-font-sm);
+  font-weight: 400;
   color: var(--ina-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -9339,17 +9427,20 @@ dialog.bottom-sheet-dropdown {
 }
 /* Hover state - Add drop shadow */
 .ina-radio-input__field:hover:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  box-shadow: 0 0 3px #737373;
 }
-/* Focus state - Add drop shadow */
-.ina-radio-input__field:focus-visible:not(:disabled) {
+/* Focus state - Add box shadow */
+.ina-radio-input__field:focus-within:not(:disabled),
+.ina-radio-input__field:focus-visible:not(:disabled),
+.ina-radio-input__field:focus:not(:disabled) {
   outline: none;
-  filter: drop-shadow(0 0 0 var(--ina-primary-primary, #141414))
-    drop-shadow(0 0 0 #fff);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414) !important;
 }
 /* Active state - Add drop shadow */
 .ina-radio-input__field:active:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  box-shadow: 0 0 3px #737373;
 }
 /* Selected state */
 .ina-radio-input__field:checked {
@@ -9367,12 +9458,11 @@ dialog.bottom-sheet-dropdown {
   border-radius: 50%;
   background-color: var(--ina-stroke-tertiary, #141414);
 }
-/* Checked + Hover/Focus/Active - Keep drop shadow */
-.ina-radio-input__field:checked:hover:not(:disabled),
-.ina-radio-input__field:checked:focus-visible:not(:disabled),
-.ina-radio-input__field:checked:active:not(:disabled) {
-  filter: drop-shadow(0 0 0 var(--ina-primary-primary, #141414))
-    drop-shadow(0 0 0 #fff);
+/* Checked + Focus - Keep focus ring */
+.ina-radio-input__field:checked:focus-visible:not(:disabled) {
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
 }
 /* Disabled states */
 .ina-radio-input__field:disabled {
@@ -9417,30 +9507,31 @@ dialog.bottom-sheet-dropdown {
   cursor: not-allowed;
 }
 /* Size variants */
-/* .ina-radio-input--size-sm .ina-radio-input__main-label {
-  font-size: var(--ina-font-xs);
-}
-
+/* Size variants */
+.ina-radio-input--size-sm .ina-radio-input__main-label,
 .ina-radio-input--size-sm .ina-radio-input__option-label {
   font-size: var(--ina-font-xs);
 }
-
 .ina-radio-input--size-sm .ina-radio-input__field {
   width: 16px;
   height: 16px;
-} */
-/* .ina-radio-input--size-lg .ina-radio-input__main-label {
-  font-size: var(--ina-font-base);
 }
-
+.ina-radio-input--size-sm .ina-radio-input__field:checked::after {
+  width: 8px;
+  height: 8px;
+}
+.ina-radio-input--size-lg .ina-radio-input__main-label,
 .ina-radio-input--size-lg .ina-radio-input__option-label {
   font-size: var(--ina-font-base);
 }
-
 .ina-radio-input--size-lg .ina-radio-input__field {
   width: 24px;
   height: 24px;
-} */
+}
+.ina-radio-input--size-lg .ina-radio-input__field:checked::after {
+  width: 14px;
+  height: 14px;
+}
 /* Orientation variants */
 .ina-radio-input--orientation-horizontal .ina-radio-input__group {
   flex-direction: row;
@@ -9488,16 +9579,44 @@ dialog.bottom-sheet-dropdown {
 }
 /* Responsive adjustments */
 @media (max-width: 640px) {
-  .ina-radio-input__main-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+  /* Scale down LG to MD size equivalent */
+  .ina-radio-input--size-lg .ina-radio-input__field {
+    width: 20px;
+    height: 20px;
   }
 
+  .ina-radio-input--size-lg .ina-radio-input__field:checked::after {
+    width: 11px;
+    height: 11px;
+  }
+
+  .ina-radio-input--size-lg .ina-radio-input__main-label,
+  .ina-radio-input--size-lg .ina-radio-input__option-label {
+    font-size: var(--ina-font-sm);
+  }
+
+  /* Scale down MD (and default/generic) to SM size equivalent */
+  .ina-radio-input--size-md .ina-radio-input__field,
+  .ina-radio-input:not([class*='ina-radio-input--size-lg'])
+    .ina-radio-input__field {
+    width: 16px;
+    height: 16px;
+  }
+
+  .ina-radio-input--size-md .ina-radio-input__field:checked::after {
+    width: 8px;
+    height: 8px;
+  }
+
+  .ina-radio-input--size-md .ina-radio-input__main-label,
+  .ina-radio-input--size-md .ina-radio-input__option-label,
+  .ina-radio-input__main-label,
   .ina-radio-input__option-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+    font-size: var(--ina-font-xs);
   }
 
   .ina-radio-input__help-text {
-    font-size: var(--ina-font-xs); /* Tetap xs */
+    font-size: var(--ina-font-xs);
   }
 
   .ina-radio-input--orientation-horizontal .ina-radio-input__group {
@@ -9633,8 +9752,8 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-stroke-tertiary, #141414);
   background: var(--ina-background-primary, #fff);
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
 }
 /* Status variants */
 .ina-select-dropdown__trigger--status-neutral {
@@ -9643,8 +9762,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-neutral:focus-within {
   border-color: var(--ina-stroke-tertiary);
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
 }
 .ina-select-dropdown__trigger--status-error {
   border-color: var(--ina-negative-500);
@@ -9652,8 +9771,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-error:focus-within {
   border-color: var(--ina-negative-600);
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-negative-50, #141414);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-50, #141414);
 }
 .ina-select-dropdown__trigger--status-warning {
   border-color: var(--ina-warning-500);
@@ -9661,8 +9780,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-warning:focus-within {
   border-color: var(--ina-warning-600);
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-warning-50, #141414);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-50, #141414);
 }
 .ina-select-dropdown__trigger--status-success {
   border-color: var(--ina-positive-500);
@@ -9670,8 +9789,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-positive-50, #141414);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-50, #141414);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -12687,19 +12806,19 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-negative-500);
 }
 .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-500);
+  border-color: var(--ina-negative-600);
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-negative-50);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-500);
 }
 .ina-text-area__wrapper--status-warning {
   border-color: var(--ina-warning-500);
 }
 .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-500);
+  border-color: var(--ina-warning-600);
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-warning-50);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-text-area__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -12707,8 +12826,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 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-positive-50);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-500);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -12729,8 +12848,8 @@ dialog.bottom-sheet-dropdown {
 /* Focus styles - Sesuai design Figma */
 .ina-text-area__wrapper:focus-within {
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px #f3f3f3;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
 }
@@ -12933,19 +13052,19 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-negative-500);
 }
 .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-500);
+  border-color: var(--ina-negative-600);
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-negative-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-500);
 }
 .ina-text-field__wrapper--status-warning {
   border-color: var(--ina-warning-500);
 }
 .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-500);
+  border-color: var(--ina-warning-600);
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-warning-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-text-field__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -12953,8 +13072,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px var(--ina-positive-50) !important;
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-500);
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -12975,11 +13094,11 @@ dialog.bottom-sheet-dropdown {
 /* Focus styles - Sesuai design Figma */
 .ina-text-field__wrapper:focus-within {
   box-shadow:
-    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    inset 0 0 0 3px #f3f3f3;
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
-  border-color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-tertiary, #141414);
 }
 /* hover styles - Sesuai design Figma */
 .ina-text-field__wrapper:hover {
@@ -13338,8 +13457,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-error-500);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-error-500);
 }
 .ina-time-picker--status-warning .ina-time-picker__wrapper {
   border-color: var(--ina-warning-500);
@@ -13347,8 +13466,8 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker--status-warning.ina-time-picker--open
   .ina-time-picker__wrapper {
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-warning-500);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-time-picker--status-success .ina-time-picker__wrapper {
   border-color: var(--ina-success-500);
@@ -13356,8 +13475,8 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker--status-success.ina-time-picker--open
   .ina-time-picker__wrapper {
   box-shadow:
-    inset 0 0 0 1px #fff,
-    inset 0 0 0 2px var(--ina-success-500);
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-success-500);
 }
 /* ... existing code ... */
 /* Panel */