@idds/styles 1.5.40 → 1.5.41

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;
@@ -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;
@@ -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 */
@@ -7769,8 +7769,8 @@ dialog.bottom-sheet-dropdown {
 .ina-one-time-password__input--error:focus {
   border-color: var(--ina-negative-500, #f02d2d);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    inset 0 0 0 2px #fff,
+    inset 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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-primary-primary, #141414) !important;
+    inset 0 0 0 2px #fff,
+    inset 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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    inset 0 0 0 2px #fff,
+    inset 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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-500, #eebb04) !important;
+    inset 0 0 0 2px #fff,
+    inset 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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
 }
 /* Prefix icon */
 .ina-password-input__prefix-icon {
@@ -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);
@@ -8841,8 +8842,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-50) !important;
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-negative-50) !important;
 }
 .ina-phone-input__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -8850,8 +8851,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-50) !important;
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-warning-50) !important;
 }
 .ina-phone-input__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -8859,14 +8860,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-50) !important;
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-50) !important;
 }
 /* Focus styles */
 .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);
@@ -8903,8 +8904,8 @@ dialog.bottom-sheet-dropdown {
 .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 +8915,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 +8935,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 +9436,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 +9462,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 +9760,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 +9770,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);
@@ -9780,8 +9778,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-50, #fffafa);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-negative-50, #fffafa);
 }
 .ina-select-dropdown__trigger--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -9789,8 +9787,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-50, #fffefa);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-warning-50, #fffefa);
 }
 .ina-select-dropdown__trigger--status-success {
   border-color: var(--ina-positive-500, #3cc14e);
@@ -9798,8 +9796,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-50, #fafffa);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-50, #fafffa);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -12777,9 +12775,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 +12792,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;
 }
@@ -12824,8 +12822,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-area__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -12833,8 +12831,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-area__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -12842,8 +12840,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -13041,9 +13039,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 {
@@ -13058,8 +13057,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-field__wrapper--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -13067,8 +13066,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-field__wrapper--status-success {
   border-color: var(--ina-positive-600, #288034);
@@ -13076,8 +13075,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -13099,7 +13098,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 +13449,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);
@@ -13510,8 +13509,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:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px #fff,
+    inset 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);
@@ -13520,8 +13519,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px #fff,
+    inset 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);
@@ -13530,8 +13529,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px #fff,
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px #fff,
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled */
 .ina-time-picker--disabled .ina-time-picker__wrapper {
@@ -13608,11 +13607,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 +13635,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 +13646,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 +13663,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 +14107,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 +14154,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) {