@globalpayments/vega 2.40.0 → 2.42.0

package/dist/cjs/{responsive-format-facade-a1983026.js → responsive-format-facade-9439e9ae.js}

@@ -2,10 +2,20 @@
 
 const typeGuard = require('./type-guard-4ba85fdc.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const breakpoints = require('./breakpoints-17d6c4c7.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
 const number = require('./number-4816603d.js');
 const ui = require('./ui-32e69595.js');
 const pixel = require('./pixel-98f2a10c.js');
+const breakpoints = require('./breakpoints-ebde4837.js');
+const array = require('./array-3aa164ce.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./vega-skeleton-loader-controller-1c91112a.js');
+const featureFlagController = require('./feature-flag-controller-ccf4a113.js');
+require('./content-state-45707be4.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./ui-13b42af0.js');
+require('./translation-2c8a32bb.js');
 
 /**
  * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
@@ -45,6 +55,7 @@ const PADDING_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsivePaddingStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {
@@ -86,6 +97,7 @@ const MARGIN_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format MarginType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsiveMarginStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {
@@ -272,10 +284,10 @@ class ResponsiveSizeFormatter {
    * Given a responsive size, return the size according current window width
    *
    * @param {ResponsiveType<SizeType>} input - ResponsiveScope
-   * @returns {SizeType} - size.
+   * @returns {ResponsiveSizeType} - size.
    */
   format(input) {
-    const breakpoint = breakpoints.getCurrentBreakpoint();
+    const breakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     // string type assertion is needed here, cause if we have <vega-modal size=650/>, stencil is not able to parse it as number but string since the property is a union type of number and string
     if ((typeof input === 'number' || typeof input === 'string') && !isNaN(input)) {
       return Number(input);
@@ -284,7 +296,7 @@ class ResponsiveSizeFormatter {
       return input;
     }
     else if (typeGuard.isResponsiveType(input)) {
-      input = breakpoints.createCompleteResponsiveMap(input);
+      input = pageResizeObserverSlimmer.createCompleteResponsiveMap(input);
       return input[breakpoint];
     }
     else {
@@ -304,15 +316,15 @@ class ResponsiveTranslocationFormatter {
    * Given a responsive size, return the size according current window width
    *
    * @param {ResponsiveType<TranslocationType>} input - ResponsiveScope
-   * @returns {TranslocationType} - size.
+   * @returns {Nullable<TranslocationType>} - size.
    */
   format(input) {
     if (typeGuard.isTranslocationType(input)) {
       return input;
     }
     else if (typeGuard.isResponsiveType(input)) {
-      const breakpoint = breakpoints.getCurrentBreakpoint();
-      input = breakpoints.createCompleteResponsiveMap(input);
+      const breakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
+      input = pageResizeObserverSlimmer.createCompleteResponsiveMap(input);
       return input[breakpoint];
     }
     else {
@@ -498,9 +510,9 @@ class ResponsiveCustomFormatter {
    * @returns {T} The value of the current breakpoint.
    */
   format(input) {
-    const breakpoint = breakpoints.getCurrentBreakpoint();
+    const breakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     if (typeGuard.isResponsiveType(input)) {
-      input = breakpoints.createCompleteResponsiveMap(input);
+      input = pageResizeObserverSlimmer.createCompleteResponsiveMap(input);
       return input[breakpoint];
     }
     else {
@@ -555,9 +567,9 @@ class ResponsiveWidthAndHeightFormatter {
    * @returns {string} The `format` function returns a string value.
    */
   format(input) {
-    const breakpoint = breakpoints.getCurrentBreakpoint();
+    const breakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     if (typeGuard.isResponsiveType(input)) {
-      input = breakpoints.createCompleteResponsiveMap(input);
+      input = pageResizeObserverSlimmer.createCompleteResponsiveMap(input);
       return pixel.parseToPixelString(input[breakpoint]);
     }
     else {
@@ -580,6 +592,7 @@ const BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsiveBorderRadiusStyleStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter {
@@ -646,6 +659,190 @@ class ResponsiveTextAlignFormatter extends ResponsiveClassStringFormatter {
 }
 const ResponsiveTextAlignFormatter$1 = new ResponsiveTextAlignFormatter();
 
+/**
+ * Get the style text from the responsive property.
+ */
+class ResponsiveCSSTextFormatter {
+  /**
+   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
+   *
+   * @typedef Flag key of ManagedResponsiveScopeInput
+   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
+   * @returns {string} - CSS text string.
+   */
+  format(input) {
+    if (typeGuard.isResponsiveType(input)) {
+      return Object.keys(input)
+        .map((breakpoint) => {
+        const breakpointValue = input[breakpoint];
+        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
+        return this.generateCssText(this.formatToken(breakpointValue, breakPointFormatted), breakpoint);
+      })
+        .join(' ');
+    }
+    else {
+      return this.generateCssText(this.formatToken(input));
+    }
+  }
+  /**
+   * Create the complete style text with media query selector.
+   *
+   * @param {string} cssText - The style snippet.
+   * @param {BreakpointsTokenType} breakpoint - The screen breakpoint.
+   * @returns {string} - Style content with css selector.
+   */
+  generateCssText(cssText, breakpoint) {
+    let result = '';
+    if (cssText) {
+      result =
+        breakpoint && breakpoint !== 'default'
+          ? `@media (min-width:${breakpoints.Breakpoints[breakpoint]}px){:host{${cssText}}}`
+          : `:host{${cssText}}`;
+    }
+    return result;
+  }
+}
+
+const PADDING_DIRECTION_STYLE_MAP = {
+  top: ['padding-top'],
+  bottom: ['padding-bottom'],
+  left: ['padding-left'],
+  right: ['padding-right'],
+  x: ['padding-left', 'padding-right'],
+  y: ['padding-top', 'padding-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsivePaddingStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a padding type, return the corresponding string of CSS text.
+   *
+   * @param {PaddingType} input - PaddingType
+   * @returns {string} - CSS text.
+   */
+  formatToken(input) {
+    if (typeGuard.isSpacingTokenType(input)) {
+      return `padding:${typeGuard.Spacing[input]}px`;
+    }
+    else if (typeGuard.isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return PADDING_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${typeGuard.Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
+      return '';
+    }
+  }
+}
+const responsivePaddingStyleFormatter = new ResponsivePaddingStyleFormatter();
+
+const MARGIN_DIRECTION_STYLE_MAP = {
+  top: ['margin-top'],
+  bottom: ['margin-bottom'],
+  left: ['margin-left'],
+  right: ['margin-right'],
+  x: ['margin-left', 'margin-right'],
+  y: ['margin-top', 'margin-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsiveMarginStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a margin type, return a string of style content that can be used to apply the margin to an element
+   *
+   * @param {MarginType} input - MarginType
+   * @returns {string} - A string of style content.
+   */
+  formatToken(input) {
+    if (typeGuard.isSpacingTokenType(input)) {
+      return `margin:${typeGuard.Spacing[input]}px`;
+    }
+    else if (typeGuard.isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return MARGIN_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${typeGuard.Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
+      return '';
+    }
+  }
+}
+const responsiveMarginStyleFormatter = new ResponsiveMarginStyleFormatter();
+
+const BORDER_RADIUS_DIRECTION_STYLE_MAP = {
+  'top': ['border-top-left-radius', 'border-top-right-radius'],
+  'right': ['border-top-right-radius', 'border-bottom-right-radius'],
+  'bottom': ['border-bottom-left-radius', 'border-bottom-right-radius'],
+  'left': ['border-top-left-radius', 'border-bottom-left-radius'],
+  'top-left': ['border-top-left-radius'],
+  'top-right': ['border-top-right-radius'],
+  'bottom-left': ['border-bottom-left-radius'],
+  'bottom-right': ['border-bottom-right-radius'],
+};
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS text string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBorderRadiusStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
+   *
+   * @param {CornersType} input - CornersType
+   * @returns {string} - A string of CSS text.
+   */
+  formatToken(input) {
+    if (typeGuard.isBorderRadiusTokenType(input)) {
+      return `border-radius:${typeGuard.BorderRadius[input]}px`;
+    }
+    else if (typeGuard.isDirectionalBorderRadiusType(input)) {
+      return this.getDirectionKeys(input)
+        .map((direction) => {
+        return BORDER_RADIUS_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${typeGuard.BorderRadius[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, typeGuard.BorderRadius);
+      return '';
+    }
+  }
+  /**
+   * Get the corners object keys. Order the keys as exist array if the feature flag enabled.
+   * The order affects the weight of the styles.
+   *
+   * @param {DirectionalBorderRadiusType} map - The corners input object.
+   * @returns {string[]} - The input object keys.
+   */
+  getDirectionKeys(map) {
+    const directionKeys = Object.keys(map);
+    return featureFlagController.FeatureFlag.isEnabled('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR')
+      ? array.sortAsExistArray(directionKeys, (direction) => map[direction], undefined, Object.keys(typeGuard.BorderRadius))
+      : directionKeys;
+  }
+}
+const responsiveBorderRadiusStyleFormatter = new ResponsiveBorderRadiusStyleFormatter();
+
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -698,6 +895,12 @@ class ResponsiveFormatFacade {
         return ResponsiveBorderRadiusFormatter$1.format(input);
       case 'textAlign':
         return ResponsiveTextAlignFormatter$1.format(input);
+      case 'paddingStyle':
+        return responsivePaddingStyleFormatter.format(input);
+      case 'marginStyle':
+        return responsiveMarginStyleFormatter.format(input);
+      case 'cornersStyle':
+        return responsiveBorderRadiusStyleFormatter.format(input);
       default:
         throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
     }

package/dist/cjs/{rich-text-editor-required-rule-cacc5fe0.js → rich-text-editor-required-rule-11d07c7d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const contentState = require('./content-state-c5b47ca1.js');
+const contentState = require('./content-state-45707be4.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 
 /**

package/dist/cjs/{static-subject-title-c589a1bd.js → static-subject-title-64175f06.js}

@@ -15,7 +15,7 @@ class StaticSubject {
   /**
    * Get the title of the subject
    *
-   * @returns {SubjectTitle} The title of the subject.
+   * @returns {string} The title of the subject.
    */
   getDescription() {
     return this.title;

package/dist/cjs/{string-input-formatter-slimmer-f45931fd.js → string-input-formatter-slimmer-017370ec.js}

@@ -3,9 +3,9 @@
 const typeGuard = require('./type-guard-4ba85fdc.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
-const index = require('./index-0546e2ea.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
+const index = require('./index-84ce6b33.js');
 
 /**
  * String format strategy abstract class
@@ -107,7 +107,7 @@ class StringMaskStrategy extends StringFormatStrategy {
    *
    * @param {string} input - The input string
    * @param {number} caretPosition - The current position of caret
-   * @returns {number} The new position of caret
+   * @returns {Nullable<number>} The new position of caret
    */
   calculateCaretPosition(input, caretPosition) {
     if (!typeGuard.isNonNullable(caretPosition))

package/dist/cjs/{style-formatter-d446562b.js → style-formatter-65652117.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9439e9ae.js');
 
 /**
  * Fomatter flex styles.
@@ -10,7 +10,7 @@ const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js')
  * @param {Nullable<ResponsiveType<FlexGrowType>>} flexGrow - flex-grow
  * @param {Nullable<ResponsiveType<FlexShrinkType>>} flexShrink - flex-shrink
  * @param {Nullable<ResponsiveType<FlexBasisType>>} flexBasis - flex-basis
- * @returns {object} - formatted styles
+ * @returns {FormattedStylesType} - formatted styles
  */
 function formatFlexStyles(flex, flexGrow, flexShrink, flexBasis) {
   if (typeGuard.isNonNullable(flex)) {

package/dist/cjs/{sub-state-notify-slimmer-b1f1e61a.js → sub-state-notify-slimmer-b9e39b9d.js}

@@ -3,9 +3,8 @@
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const observer = require('./observer-f49483e8.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
 
 /**
  * Sub state notify slimmer
@@ -29,7 +28,7 @@ class SubStateNotifySlimmerBase extends globalSlimmerRegistry.VegaSlimmer {
    * Register the observer in connectedCallback
    */
   connectedCallback() {
-    this.subStateObserver = new observer.Observer(this.isAcceptableObserverPayload.bind(this), (payload) => {
+    this.subStateObserver = new domNodeSubjectFactory.Observer(this.isAcceptableObserverPayload.bind(this), (payload) => {
       payload.callback(this.propValue);
     });
     changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalSubStatePull), this.subStateObserver);

package/dist/cjs/{sub-state-observer-slimmer-02634647.js → sub-state-observer-slimmer-c6665cec.js}

@@ -1,11 +1,10 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const observer = require('./observer-f49483e8.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const ui = require('./ui-5fd9b267.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
+const ui = require('./ui-13b42af0.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -41,7 +40,7 @@ class SubStateObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     if (!this.parent)
       return;
     const { subStates } = this.observerEntry;
-    this.subStateObserver = new observer.Observer(this.isAcceptableObserverPayload, (payload) => {
+    this.subStateObserver = new domNodeSubjectFactory.Observer(this.isAcceptableObserverPayload, (payload) => {
       const subState = subStates.find((subState) => subState.parentStateName === payload.stateName);
       if (subState) {
         this.updateState(subState, payload.value);

package/dist/cjs/{translation-6848c389.js → translation-2c8a32bb.js}

@@ -2,8 +2,8 @@
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
-const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const staticTranslations = {
@@ -30,6 +30,7 @@ const staticTranslations = {
   'Show': 'Show',
   'Go To': 'Go To',
   'Viewing {0}-{1} of {2}': 'Viewing {0}-{1} of {2}',
+  'Items Per Page': 'Items Per Page',
   'Upload': 'Upload',
   'Clear': 'Clear',
   'Today': 'Today',

package/dist/cjs/{translation-slimmer-510906bc.js → translation-slimmer-593b92fe.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const translation = require('./translation-6848c389.js');
+const translation = require('./translation-2c8a32bb.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/{ui-5fd9b267.js → ui-13b42af0.js}

@@ -20,7 +20,7 @@ exports.DeviceType = void 0;
  * @typedef T
  * @param {HTMLElement} el - The element to start searching from.
  * @param {keyof HTMLElementTagNameMap | string} selector - The selector to find the parent element with.
- * @returns {T | null} The first element that matches the selector.
+ * @returns {Nullable<T>} The first element that matches the selector.
  */
 function findParent(el, selector) {
   if (!el)
@@ -192,7 +192,7 @@ function getElementComputedStyle(element, styleName) {
  * Get the deep active element in shadow component
  *
  * @param {Document | ShadowRoot} root the root element
- * @returns {HTMLElement|null} active element
+ * @returns {Nullable<HTMLElement>} active element
  */
 function getDeepActiveElementInShadow(root = document) {
   const activeEl = root.activeElement;

package/dist/cjs/vega-accordion.cjs.entry.js

@@ -7,31 +7,40 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
 const component = require('./component-73a88c4e.js');
-const designToken = require('./design-token-36eb5def.js');
-const ui = require('./ui-5fd9b267.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
+const designToken = require('./design-token-d8362603.js');
+const ui = require('./ui-13b42af0.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-8f9ed458.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
-const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
-const observer = require('./observer-f49483e8.js');
+const internalIconManager = require('./internal-icon-manager-cf3347e7.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
 require('./breakpoints-ebde4837.js');
-require('./responsive-format-facade-a1983026.js');
-require('./breakpoints-17d6c4c7.js');
+require('./responsive-format-facade-9439e9ae.js');
+require('./page-resize-observer-slimmer-44e08878.js');
 require('./ui-32e69595.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
+require('./array-3aa164ce.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./vega-skeleton-loader-controller-1c91112a.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-cd87600e.js');
+require('./feature-flag-controller-ccf4a113.js');
+require('./index-8b247c17.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./content-state-45707be4.js');
+require('./vega-internal-event-id-4ba74761.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-2c8a32bb.js');
 require('./typography-4560e7f1.js');
 require('./state-background-color-formatter-e585a027.js');
-require('./icon-manager-edc2400b.js');
-require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
-require('./dynamic-slimmer-f31fdfd7.js');
 require('./regex-c1f70fd4.js');
-require('./internal-vega-event-manager-981dfd1c.js');
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -143,7 +152,7 @@ class VegaAccordionExpandController extends globalSlimmerRegistry.VegaSlimmer {
     this.expandEventEmitter.emit(this.expand);
   }
   registerObserver() {
-    this.observer = new observer.Observer(typeGuard.isAccordionObserverPayload, this.shouldCollapseSelfIfOtherExpand.bind(this));
+    this.observer = new domNodeSubjectFactory.Observer(typeGuard.isAccordionObserverPayload, this.shouldCollapseSelfIfOtherExpand.bind(this));
     changeManager.ChangeManager.register(staticSubjectTitle.ACCORDION_EXPAND_TOPIC, this.observer);
   }
   unregisterObserver() {

package/dist/cjs/vega-app-header-button.cjs.entry.js

@@ -4,20 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
-const ui = require('./ui-5fd9b267.js');
-const designToken = require('./design-token-36eb5def.js');
-const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js');
+const ui = require('./ui-13b42af0.js');
+const designToken = require('./design-token-d8362603.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9439e9ae.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const breakpoints = require('./breakpoints-17d6c4c7.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-bb1eaebe.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-7f59159e.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-93183c4d.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const internalIconManager = require('./internal-icon-manager-cf3347e7.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-8f9ed458.js');
 require('./type-guard-4ba85fdc.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
@@ -26,16 +25,22 @@ require('./typography-4560e7f1.js');
 require('./state-background-color-formatter-e585a027.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
-require('./internal-vega-event-manager-981dfd1c.js');
+require('./array-3aa164ce.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-7b22e598.js');
+require('./vega-skeleton-loader-controller-1c91112a.js');
+require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-cd87600e.js');
+require('./feature-flag-controller-ccf4a113.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./dynamic-slimmer-f31fdfd7.js');
+require('./content-state-45707be4.js');
 require('./change-manager-a297e4d2.js');
-require('./icon-manager-edc2400b.js');
-require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
-require('./observer-f49483e8.js');
+require('./vega-internal-event-id-4ba74761.js');
+require('./static-subject-title-64175f06.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-2c8a32bb.js');
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -220,7 +225,7 @@ const VegaAppHeaderButton = class {
      */
     this.avatarImgLoaded = null;
     this.isDropdownShow = false;
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     /**
      * Specifies the configuration for the dropdown functionality
      *    of the app header button.

package/dist/cjs/vega-backdrop.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const ui = require('./ui-5fd9b267.js');
+const ui = require('./ui-13b42af0.js');
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;