@idds/styles 1.5.40 → 1.5.42

package/dist/index.css

@@ -1300,7 +1300,7 @@ dfn {
   background: var(--ina-background-primary, #fff);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-action-dropdown__label {
   flex: 1;
@@ -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;
@@ -2145,7 +2145,7 @@ dfn {
   background: var(--ina-background-primary, #ffffff);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-basic-dropdown__trigger-content {
   flex: 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 {
@@ -3513,21 +3513,21 @@ dialog.bottom-sheet-dropdown {
   outline: none;
   box-shadow:
     0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* Focus state untuk indeterminate checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
   outline: none;
   box-shadow:
     0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* Focus state untuk checked checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--checked {
   outline: none;
   box-shadow:
     0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* Invalid state yang tidak disabled */
 .ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
@@ -4085,7 +4085,7 @@ dialog.bottom-sheet-dropdown {
 .ina-date-picker__trigger:focus {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -6481,7 +6481,7 @@ dialog.bottom-sheet-dropdown {
 .ina-input-search__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-content-primary, #1f1f1f);
@@ -7759,7 +7759,7 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-content-primary, #1f1f1f);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   background-color: var(--ina-background-primary, #ffffff);
 }
 /* Error/Invalid state */
@@ -8279,7 +8279,7 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-content-primary, #1f1f1f);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414) !important;
+    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);
@@ -8382,9 +8382,10 @@ dialog.bottom-sheet-dropdown {
   min-height: 16px;
 }
 /* Status messages */
-.ina-password-input__status-message {
+.ina-password-input .ina-password-input__status-message {
   flex: 1;
   color: var(--ina-content-secondary);
+  padding-top: var(--ina-spacing-1, 0.25rem);
 }
 .ina-password-input__status-message--error {
   color: var(--ina-negative-500);
@@ -8491,7 +8492,7 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-content-primary, #1f1f1f);
@@ -8755,7 +8756,7 @@ dialog.bottom-sheet-dropdown {
   }
 
   .ina-phone-input__country-selector .ina-phone-input__country-dropdown {
-    width: 216px !important;
+    width: 100% !important;
   }
 }
 /* Country selector */
@@ -8765,7 +8766,7 @@ dialog.bottom-sheet-dropdown {
   cursor: pointer;
   height: 100%;
   margin-right: var(--ina-spacing-2);
-  position: relative;
+  /* position: relative; Removed to allow dropdown to be relative to wrapper */
 }
 .ina-phone-input__country-button {
   display: flex;
@@ -8816,7 +8817,7 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-content-tertiary, #a3a3a3) !important;
 }
 /* Helper text / Status message */
-.ina-phone-input__helper-text {
+.ina-phone-input .ina-phone-input__helper-text {
   font-size: var(--ina-font-xs, 0.75rem);
   padding-top: var(--ina-spacing-1, 0.25rem);
   color: var(--ina-content-secondary, #525252);
@@ -8866,7 +8867,7 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -8900,11 +8901,13 @@ 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: calc(-1 * var(--ina-spacing-3, 12px));
-  margin-top: var(--ina-spacing-3, 12px) !important;
+  left: 0;
+  margin-top: var(--ina-spacing-2, 0.5rem) !important;
   background: var(--ina-background-primary, #ffffff);
   border: 1px solid var(--ina-stroke-primary, #e5e5e5);
   border-radius: var(--ina-radius-lg, 0.5rem);
@@ -8914,7 +8917,7 @@ dialog.bottom-sheet-dropdown {
     0 4px 6px -4px rgba(0, 0, 0, 0.1)
   );
   z-index: 100;
-  width: 324px; /* Or min-content depending on design */
+  width: 100%;
   max-height: 348px;
   overflow: hidden;
   display: flex;
@@ -8934,9 +8937,6 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__country-search-input:focus {
   outline: none;
   border-color: var(--ina-content-primary, #1f1f1f);
-  box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 .ina-phone-input__country-list {
   overflow-y: auto;
@@ -9438,7 +9438,7 @@ dialog.bottom-sheet-dropdown {
   outline: none;
   box-shadow:
     0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414) !important;
+    0 0 0 2px var(--ina-content-primary, #1f1f1f) !important;
 }
 /* Active state - Add drop shadow */
 .ina-radio-input__field:active:not(:disabled) {
@@ -9464,7 +9464,7 @@ dialog.bottom-sheet-dropdown {
 .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);
+    0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* Disabled states */
 .ina-radio-input__field:disabled {
@@ -9762,7 +9762,7 @@ dialog.bottom-sheet-dropdown {
   background: var(--ina-background-primary, #ffffff);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Status variants */
 .ina-select-dropdown__trigger--status-neutral {
@@ -9772,7 +9772,7 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-stroke-tertiary, #141414);
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-select-dropdown__trigger--status-error {
   border-color: var(--ina-negative-500, #f02d2d);
@@ -9851,7 +9851,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
@@ -12777,9 +12777,9 @@ dialog.bottom-sheet-dropdown {
   height: 16px;
 }
 /* Helper text/status message */
-.ina-text-area__helper-text {
+.ina-text-area .ina-text-area__helper-text {
   font-size: var(--ina-font-xs);
-  margin-top: var(--ina-spacing-1);
+  padding-top: var(--ina-spacing-1);
 }
 .ina-text-area__helper-text--neutral {
   color: var(--ina-content-secondary, #525252);
@@ -12794,16 +12794,16 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-positive-600, #288034);
 }
 /* Character count */
-.ina-text-area__char-count {
+.ina-text-area .ina-text-area__char-count {
   font-size: var(--ina-font-xs, 0.75rem);
   color: var(--ina-content-secondary, #525252);
-  margin-top: var(--ina-spacing-1, 0.25rem);
+  padding-top: var(--ina-spacing-1, 0.25rem);
 }
 /* Focus styles - Sesuai design Figma */
 .ina-text-area__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff) !important;
 }
@@ -13041,9 +13041,10 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-positive-600, #288034);
 }
 /* Character count */
-.ina-text-field__char-count {
+.ina-text-field .ina-text-field__char-count {
   font-size: var(--ina-font-xs);
   color: var(--ina-content-secondary, #525252);
+  padding-top: var(--ina-spacing-1, 0.25rem);
 }
 /* Status variants */
 .ina-text-field__wrapper--status-neutral {
@@ -13099,7 +13100,7 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -13450,7 +13451,7 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker--open .ina-time-picker__wrapper {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -13499,6 +13500,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);
@@ -13608,11 +13617,11 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-secondary, #f8f8f7);
 }
 .ina-time-picker__option--selected {
-  background-color: var(--ina-primary-primary, #141414);
+  background-color: var(--ina-content-primary, #1f1f1f);
   color: var(--ina-white, #fff);
 }
 .ina-time-picker__option--selected:hover {
-  background-color: var(--ina-primary-primary, #141414);
+  background-color: var(--ina-content-primary, #1f1f1f);
 }
 .ina-time-picker__option--disabled {
   color: var(--ina-content-tertiary, #a3a3a3);
@@ -13636,7 +13645,7 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker__action-button {
   background: none;
   border: none;
-  color: var(--ina-primary-primary, #141414);
+  color: var(--ina-content-primary, #1f1f1f);
   font-size: var(--ina-font-sm, 0.875rem);
   font-weight: 500;
   cursor: pointer;
@@ -13647,8 +13656,8 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-primary-50, #f0f0f0);
 }
 .ina-time-picker__confirm-button {
-  background-color: var(--ina-primary-primary, #141414);
-  border: 1px solid var(--ina-primary-primary, #141414);
+  background-color: var(--ina-content-primary, #1f1f1f);
+  border: 1px solid var(--ina-content-primary, #1f1f1f);
   color: #ffffff;
   font-size: var(--ina-font-sm, 0.875rem);
   font-weight: 500;
@@ -13664,7 +13673,7 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker__wrapper:focus-within {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -14108,7 +14117,7 @@ dialog.bottom-sheet-dropdown {
   outline-offset: 0;
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Active states */
 .ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
@@ -14155,7 +14164,7 @@ dialog.bottom-sheet-dropdown {
 [data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
   box-shadow:
     0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414);
+    0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
@@ -14182,7 +14191,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,
@@ -14286,7 +14297,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;