@globalpayments/vega 2.45.0 → 2.47.0

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -9,15 +9,15 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { CountryFlags } from '../../assets/country-flags';
 import { getCountryCallingCode } from 'libphonenumber-js';
 import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-import { VegaDropdownRenderItemInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.valueUpdatedByCountryCodeChange = false;
     /**
      * The `openSelectDropdown` function is an arrow function that is defined within the
      * `CountrySelectRenderer` class. It is responsible for triggering the `doOpen` method on the
@@ -33,7 +33,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
     this.renderDropdownItem = (item, fixHeight) => {
       return (h("vega-dropdown-item", { height: fixHeight, label: item.label, itemKey: item.key, key: item.key },
         h("vega-flex", { alignItems: "center", gap: "size-12" },
-          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(item.key), size: "size-16" }),
+          h("vega-flag-icon", { country: item.key }),
           h("vega-font", { variant: "font-field-value", color: "text-primary" }, COUNTRIES[item.key]),
           h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${item.label})`))));
     };
@@ -64,6 +64,20 @@ export class CountrySelectRenderer extends VegaSlimmer {
       name: CountrySelectRenderer.allCountries[newCountryCode],
     });
   }
+  /**
+   * set valueUpdatedByCountryCodeChange
+   *
+   * @param {boolean} valueUpdatedByCountryCodeChange state of valueUpdatedByCountryCodeChange
+   */
+  setValueUpdatedByCountryCodeChange(valueUpdatedByCountryCodeChange) {
+    this.valueUpdatedByCountryCodeChange = valueUpdatedByCountryCodeChange;
+  }
+  /**
+   * get valueUpdatedByCountryCodeChange
+   */
+  getValueUpdatedByCountryCodeChange() {
+    return this.valueUpdatedByCountryCodeChange;
+  }
   /**
    * The `render()` method in the `VegaInputPhoneNumberCountryCodeRenderer` class is responsible for
    * rendering the JSX structure of the component. Here's a breakdown of what it is doing:
@@ -89,8 +103,12 @@ export class CountrySelectRenderer extends VegaSlimmer {
             this.handleCountrySelectChange(e.detail);
           });
           remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
+          remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInputSelectRenderPrefixIconInternalOverridden), this.renderDropdownPrefixIconWithFlagIcon.bind(this));
         }, value: this.countryCode })));
   }
+  renderDropdownPrefixIconWithFlagIcon(prefixIcon) {
+    return h("vega-flag-icon", { country: prefixIcon.split(' ')[1] });
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-phone-number-country-select-change}
@@ -102,8 +120,15 @@ export class CountrySelectRenderer extends VegaSlimmer {
    *element of the component. Here's a breakdown of what it is doing:
    */
   handleCountrySelectChange(countryCode) {
+    this.valueUpdatedByCountryCodeChange = true;
     this.countrySelectController.setCountryCode(countryCode);
-    this.valueController.updateValueWithNewCountry(countryCode);
+    if (this.valueController.shouldSetEmptyValue(this.phoneNumberInputValue)) {
+      this.valueController.setValue('');
+    }
+    else {
+      this.valueController.setValue(`+${getCountryCallingCode(countryCode)}` + this.phoneNumberInputValue.replace(/\D/g, ''));
+    }
+    this.valueUpdatedByCountryCodeChange = false;
   }
   /**
    * The function `getCountrySelectOptions` returns an array of country options based on custom and
@@ -141,9 +166,6 @@ export class CountrySelectRenderer extends VegaSlimmer {
     return maxLength * 8.5 + 162;
   }
 }
-(() => {
-  VegaInternalIconManager.register(CountryFlags);
-})();
 CountrySelectRenderer.allCountries = COUNTRIES;
 __decorate([
   MapToComponentField()
@@ -169,6 +191,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], CountrySelectRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "phoneNumberInputValue", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "value", void 0);
 __decorate([
   MapToComponentMethod('watchCountryCode')
 ], CountrySelectRenderer.prototype, "watchCountryCode", null);

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/phone-number-input-renderer.js

@@ -71,9 +71,16 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
      * @see{module:vega-input-phone-number-input-prevent-non-number}
      */
     /* istanbul ignore next */
-    this.valueController.updateValue(newInputValue.startsWith('+')
-      ? newInputValue
-      : `${this.valueController.getCallingCodePrefix(this.countryCode)}${newInputValue}`);
+    if (this.valueController.shouldSetEmptyValue(newInputValue)) {
+      this.valueController.setValue('');
+    }
+    else {
+      const value = newInputValue.startsWith('+')
+        ? newInputValue
+        : `${this.valueController.getCallingCodePrefix(this.countryCode)}` +
+          newInputValue.replace(/\D/g, '');
+      this.valueController.setValue(value);
+    }
   }
 }
 __decorate([

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.css

@@ -23,7 +23,7 @@
 }
 :host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
   box-shadow: 0 0 0;
 }

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -40,7 +40,7 @@ export class VegaInputPhoneNumber {
         {
           propertyName: 'required',
           ruleFactory: (isRequired) => isRequired
-            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputValue)
             : null,
         },
         {
@@ -273,7 +273,7 @@ export class VegaInputPhoneNumber {
         "references": {
           "VegaCountryCode": {
             "location": "import",
-            "path": "./types"
+            "path": "../../types/flag.type"
           }
         }
       },
@@ -302,7 +302,7 @@ export class VegaInputPhoneNumber {
         "references": {
           "VegaCountryCode": {
             "location": "import",
-            "path": "./types"
+            "path": "../../types/flag.type"
           }
         }
       },

package/dist/collection/components/vega-input-range/vega-input-range.css

@@ -51,7 +51,7 @@
 }
 .vega-input-range-input-container vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   position: relative;
   box-shadow: 0 0 0;
@@ -105,7 +105,7 @@
 }
 .vega-input-range-container.error vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-dropdown-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
@@ -60,6 +60,9 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
       }));
       this.sourceController.appendSourceItems(addedItems);
     });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaReset, async () => {
+      this.vegaInputSelectValueController.setValue(this.selectType === 'multiple' ? [] : '');
+    });
   }
 }
 __decorate([
@@ -89,3 +92,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "hideEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "selectType", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -15,14 +15,13 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
     };
     this.renderPrefixIcon = () => {
-      return (this.prefixIcon && (h("div", { class: "vega-input-select-prefix-icon" },
-        h("vega-icon", { icon: this.prefixIcon, size: "size-16" }))));
+      return this.vegaInputSelectPrefixIconRenderer.render();
     };
     this.renderToggleIcon = () => {
       return (h("div", { class: "vega-input-select-toggle-icon" },
@@ -122,9 +121,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaDropdownProps", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "prefixIcon", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "placeholder", void 0);
@@ -137,9 +133,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-prefix-icon-renderer.js

@@ -0,0 +1,48 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInputSelectRenderPrefixIconInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+/** Manager remote invocation */
+export class VegaInputSelectPrefixIconRenderer extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.remotePhoneNumberPrefixIconRenderSubject =
+      domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaInputSelectRenderPrefixIconInternalOverridden);
+  }
+  /**
+   * Call the render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {Nullable<HTMLVegaFlagIconElement>} - returned vega-flag-icon.
+   */
+  callRemotePrefixIconRender(...args) {
+    if (this.remotePhoneNumberPrefixIconRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberPrefixIconRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+  render() {
+    const renderResult = this.callRemotePrefixIconRender(this.prefixIcon);
+    return (this.prefixIcon && (h("div", { class: "vega-input-select-prefix-icon" }, renderResult ? (renderResult) : (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputSelectPrefixIconRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectPrefixIconRenderer.prototype, "prefixIcon", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputSelectPrefixIconRenderer.prototype, "connectedCallback", null);

package/dist/collection/components/vega-input-select/vega-input-select.css

@@ -82,7 +82,7 @@
 }
 :host .vega-input-select-container:focus {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 
@@ -94,7 +94,7 @@
 }
 :host .error .vega-input-select-container:focus {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -24,6 +24,7 @@ import { VegaInputSelectRuntimeMetricsPayloadDefinition } from '../../constants/
 import { VegaInputSelectSourceController } from './slimmers/controllers/vega-input-select-source-controller';
 import { VegaInputSelectItemsSlotController } from './slimmers/controllers/vega-input-select-items-slot-controler';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaInputSelectPrefixIconRenderer } from './slimmers/renderers/vega-input-select-prefix-icon-renderer';
 /**
  * @vegaVersion 1.0.7
  */
@@ -33,6 +34,7 @@ export class VegaInputSelect {
     this.translationSlimmer = new TranslationSlimmer();
     this.sourceController = new VegaInputSelectSourceController();
     this.vegaInputSelectRenderer = new VegaInputSelectRenderer();
+    this.vegaInputSelectPrefixIconRenderer = new VegaInputSelectPrefixIconRenderer();
     this.vegaInputSelectDropdownController = new VegaInputSelectDropdownController();
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
@@ -516,7 +518,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -870,6 +872,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectDropdownController", void 0);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/renderers/vega-left-nav-header-renderer.js

@@ -9,6 +9,7 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { VegaLeftNavSeparator } from '../../internal/vega-left-nav-separator';
 import { Icons } from '../../assets/icons';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { VegaInternalThemeManager } from '../../../../../helpers/theme/internal-theme-manager';
 export class VegaLeftNavHeaderRenderer extends VegaSlimmer {
   componentWillLoad() {
     this.hasHeaderSlot = !!this.host.querySelector('[slot="header-slot"]');
@@ -20,10 +21,20 @@ export class VegaLeftNavHeaderRenderer extends VegaSlimmer {
     const { title, subtitle } = this.headerConfig;
     return (h(Fragment, null,
       h("div", { class: "header-container" },
-        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('heartland-logo') })),
+        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (this.renderHeaderLogo()),
         subtitle && h("div", { class: "header-subtitle" }, subtitle)),
       h(VegaLeftNavSeparator, null)));
   }
+  renderHeaderLogo() {
+    const newBrandOptions = VegaInternalThemeManager.getNewBrandOptions();
+    if (newBrandOptions === 'gp') {
+      return h("vega-brand-logo", { name: "global-payments", size: "small" });
+    }
+    if (newBrandOptions === 'genius') {
+      return h("vega-brand-logo", { name: "genius", size: "small" });
+    }
+    return h("vega-icon", { icon: VegaInternalIconManager.getIconKey('heartland-logo') });
+  }
 }
 (() => {
   VegaInternalIconManager.register(Icons);

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.css

@@ -193,11 +193,6 @@ body.vega-overflow-hidden {
   overflow: hidden;
 }
 
-.header-container vega-icon {
-  width: 142px;
-  height: 26px;
-}
-
 .header-container vega-icon[icon="v-internal-icon heartland-logo"] + .header-subtitle {
   margin-top: 8px;
 }

package/dist/collection/components/vega-nav/vega-left-nav-group/vega-left-nav-group.css

@@ -46,7 +46,6 @@
   letter-spacing: 0px;
   cursor: pointer;
   text-decoration: none;
-  outline: none;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .vega-li-main > a {
@@ -76,7 +75,8 @@
   }
 }
 .vega-li-main > a:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
 }
 .vega-li-main > a:hover {
   background-color: rgba(var(--v-bg-tertiary, 240, 243, 247, 1));

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.css

@@ -95,9 +95,7 @@
   background-color: rgba(var(--v-bg-tertiary, 240, 243, 247, 1));
 }
 
-:host > a {
-  outline: none;
-}
 :host > a:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
 }

package/dist/collection/components/vega-pagination/vega-pagination.css

@@ -165,7 +165,8 @@
 }
 
 .vega-pagination .vega-pagination-item button:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
   border-radius: 9999px;
 }
 

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -67,7 +67,8 @@
 }
 :host .vega-progress-step:focus-visible .vega-progress-step-icon-container {
   border-radius: 8px;
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 :host .vega-progress-step .vega-progress-step-icon-divider {
   display: flex;

package/dist/collection/components/vega-radio/vega-radio.css

@@ -58,8 +58,8 @@
 }
 
 .vega-radio-container input[type=radio]:focus-visible + .vega-radio-icon {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
 }
 
 .vega-radio-container:not(.vega-radio-disabled):active .vega-radio-icon {
@@ -185,12 +185,13 @@ label {
 }
 
 .vega-radio-container.error input[type=radio]:focus-visible + .vega-radio-icon {
-  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
 }
 
 .vega-radio-container.error:active .vega-radio-icon {
-  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
 }
 
 .vega-radio-checked.error .vega-radio-circle {

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.css

@@ -79,7 +79,8 @@
 :host .rich-text-content a.v-rte--link:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   border-radius: 8px;
 }
 :host .rich-text-content .v-rte--underline {

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-color-annotation.js

@@ -1,6 +1,6 @@
 import { NodeAnnotation, NodeAnnotationTypeEnum } from './node-annotation.abstract';
 import { RTE_TEXT_COLORS } from '../../constants/constant';
-import { VegaThemeManager } from '../../../../helpers/theme/theme-manager';
+import { VegaInternalThemeManager } from '../../../../helpers/theme/internal-theme-manager';
 /**
  * Annotation to make text with text color
  */
@@ -44,7 +44,7 @@ export class TextColorAnnotation extends NodeAnnotation {
    */
   render() {
     return {
-      color: VegaThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+      color: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
     };
   }
   /**

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -103,7 +103,7 @@
 :host .rich-text-editor-container:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 :host .rich-text-editor-container.disabled {
@@ -129,7 +129,7 @@
 }
 :host .rich-text-editor-container.error:focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 :host .rich-text-editor-container .text-editor-counter {

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -31,7 +31,6 @@ import { HorizontalAlignmentToolbarButtonSlimmer } from './slimmers/renderers/to
 import { SelectionController } from './slimmers/controllers/selection-controller';
 import { ValueController } from './slimmers/controllers/value-controller';
 import { VegaRTEContent } from './dto/content-state';
-import { VegaThemeManager } from '../../helpers/public-api';
 import { DarkModeStateControllerSlimmer } from '../../helpers/slimmers/dark-mode-state-controller-slimmer';
 import { RichTextContentController } from './slimmers/controllers/rich-text-content-controller';
 import { UserInputController } from './slimmers/controllers/user-input-controller';
@@ -43,6 +42,7 @@ import { TextNodeColorController } from './slimmers/controllers/text-node-color-
 import { InsertCompositionTextController } from './slimmers/controllers/insert-composition-text-controller';
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 /**
  * @vegaVersion 2.34.0
  */
@@ -97,7 +97,7 @@ export class VegaRichTextEditor {
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
-    this.isInDarkMode = VegaThemeManager.isDarkMode();
+    this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     /**
      * Specifies the label for the rich text editor.
      *

package/dist/collection/components/vega-signature-capture/vega-signature-capture.css

@@ -21,7 +21,7 @@
 .signature-capture-written-container:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 .signature-capture-written-container .placeholder-container {
@@ -80,7 +80,7 @@
 }
 .signature-capture-written-container.error:focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
   border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
 }

package/dist/collection/components/vega-stepper/vega-stepper.css

@@ -105,6 +105,6 @@
 }
 :host .vega-stepper-container.error vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }

package/dist/collection/components/vega-tab-group/vega-tab-group.css

@@ -137,7 +137,7 @@
 }
 
 .vega-tab > div > div.vega-close-icon vega-icon {
-  color: rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1));
+  color: rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));
 }
 
 .vega-tab.disabled {

package/dist/collection/components/vega-textarea/vega-textarea.css

@@ -257,7 +257,9 @@
 
 :host .vega-textarea-container:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 
 :host .vega-textarea-container.error {
@@ -270,7 +272,9 @@
 
 :host .vega-textarea-container.error:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 :host(.disabled) textarea {

package/dist/collection/components/vega-time-picker/vega-time-picker.css

@@ -81,7 +81,7 @@ vega-input::part(field-error-message) {
 
 .vega-time-picker-input-container.error:focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
@@ -137,7 +137,7 @@ vega-input::part(field-error-message) {
 .range-mode:not(.error) .time-picker-input-start vega-input::part(input-container):focus-within,
 .range-mode:not(.error) .time-picker-input-end vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   margin: -1px;
 }

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.css

@@ -95,7 +95,8 @@ div.vega-container > span {
 }
 
 div.vega-container:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 
 div.vega-container-checked > span {