@globalpayments/vega 2.45.0 → 2.47.0

package/dist/esm/responsive-format-facade-299d8ee9.js

@@ -0,0 +1,919 @@
+import { v as isResponsiveType, w as isBreakpointsForPrefixType, o as isSpacingTokenType, x as isDirectionalSpacingType, h as Spacing, y as isGridColumnsType, z as isGridRowsType, A as isTranslocationType, D as isFlexDirectionType, E as isFlexAlignItemType, G as isFlexJustifyContentType, H as isFlexWrapType, I as isBoxDisplayType, p as isBorderRadiusTokenType, J as isDirectionalBorderRadiusType, B as BorderRadius, K as isTextAlignType } from './type-guard-158f6d7a.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './page-resize-observer-slimmer-15a84d26.js';
+import { i as isValidPercentage } from './number-4398f2e1.js';
+import { F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign } from './ui-8424715a.js';
+import { p as parseToPixelString } from './pixel-f32c07ce.js';
+import { B as Breakpoints } from './breakpoints-d9faf11c.js';
+import { s as sortAsExistArray } from './array-3113609f.js';
+import './vega-env-manager-8f8dc473.js';
+import './vega-skeleton-loader-controller-90e8d34d.js';
+import { F as FeatureFlag } from './feature-flag-controller-690eac1d.js';
+import './icon-manager-638dd4d4.js';
+import './wait-for-vega-handler-b18eb955.js';
+import './ui-ed1283bb.js';
+import './translation-78207e81.js';
+import './content-state-8d0d38d7.js';
+
+/**
+ * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
+ */
+class ResponsiveClassStringFormatter {
+  /**
+   * > 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 class string.
+   */
+  format(input) {
+    if (isResponsiveType(input)) {
+      return Object.keys(input)
+        .map((breakpoint) => {
+        const breakpointValue = input[breakpoint];
+        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
+        return this.formatToken(breakpointValue, breakPointFormatted);
+      })
+        .join(' ');
+    }
+    else {
+      return this.formatToken(input);
+    }
+  }
+}
+
+const PADDING_DIRECTION_CLASS_PARTIAL_MAP = {
+  top: 'pt',
+  bottom: 'pb',
+  left: 'pl',
+  right: 'pr',
+  x: 'px',
+  y: 'py',
+};
+/**
+ * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
+ *
+ * @deprecated Please use the `ResponsivePaddingStyleFormatter` instead.
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * Given a padding type, return the corresponding string of CSS class names
+   *
+   * @param {PaddingType} input - PaddingType
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isSpacingTokenType(input)) {
+      return `${prefix}v-p-${input}`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${PADDING_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
+    else {
+      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+const ResponsivePaddingFormatter$1 = new ResponsivePaddingFormatter();
+
+const MARGIN_DIRECTION_CLASS_PARTIAL_MAP = {
+  top: 'mt',
+  bottom: 'mb',
+  left: 'ml',
+  right: 'mr',
+  x: 'mx',
+  y: 'my',
+};
+/**
+ * A class for format MarginType with BreakpointsForPrefixType to CSS class string
+ *
+ * @deprecated Please use the `ResponsiveMarginStyleFormatter` instead.
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * Given a margin type, return a string of CSS classes that can be used to apply the margin to an element
+   *
+   * @param {MarginType} input - MarginType
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isSpacingTokenType(input)) {
+      return `${prefix}v-m-${input}`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${MARGIN_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
+    else {
+      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+const ResponsiveMarginFormatter$1 = new ResponsiveMarginFormatter();
+
+const GAP_DIRECTION_CLASS_PARTIAL_MAP = {
+  x: 'gap-col',
+  y: 'gap-row',
+};
+/**
+ * A class for format GapType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveGapFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * Given a gap value, return the corresponding CSS class name
+   *
+   * @param {GapType} input - GapType
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - Css class for corresponding gap.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isSpacingTokenType(input)) {
+      return `${prefix}v-gap-${input}`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${GAP_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
+    else {
+      LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+const ResponsiveGapFormatter$1 = new ResponsiveGapFormatter();
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const GridRows = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  "1-auto",
+  "2-auto",
+  "3-auto",
+  "4-auto",
+  "5-auto",
+  "6-auto",
+  "7-auto",
+  "8-auto",
+  "9-auto",
+  "10-auto",
+  "11-auto",
+  "12-auto"
+];
+const GridColumns = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  '1-auto',
+  '2-auto',
+  '3-auto',
+  '4-auto',
+  '5-auto',
+  '6-auto',
+  '7-auto',
+  '8-auto',
+  '9-auto',
+  '10-auto',
+  '11-auto',
+  '12-auto',
+];
+
+/**
+ * A class for format GridColumnsType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveGridColumnsFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * It takes a GridColumnsType and a breakpoint and returns a CSS class string.
+   *
+   * @param {GridColumnsType} input - GridColumnsType input for formatting
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isGridColumnsType(input)) {
+      return `${prefix}v-grid-cols-${input}`;
+    }
+    else {
+      LogUtility.warn(`The column value ${input} is invalid, it must be a value of: `, GridColumns);
+      return '';
+    }
+  }
+}
+const ResponsiveColumnsFormatter = new ResponsiveGridColumnsFormatter();
+
+/**
+ * A class for format GridRowsType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveGridRowsFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a GridRowsType and a breakpoint and returns CSS class string.
+   *
+   * @param {GridRowsType} input - GridRowsType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isGridRowsType(input)) {
+      return `${prefix}v-grid-rows-${input}`;
+    }
+    else {
+      LogUtility.warn(`The row value ${input} is invalid, it must be a value of: `, GridRows);
+      return '';
+    }
+  }
+}
+const ResponsiveRowsFormatter = new ResponsiveGridRowsFormatter();
+
+/**
+ * A class for format SizeType
+ *
+ * @augments ResponsiveSizeFormatter
+ */
+class ResponsiveSizeFormatter {
+  /**
+   * Given a responsive size, return the size according current window width
+   *
+   * @param {ResponsiveType<SizeType>} input - ResponsiveScope
+   * @returns {ResponsiveSizeType} - size.
+   */
+  format(input) {
+    const breakpoint = 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);
+    }
+    else if (typeof input === 'string' && isValidPercentage(input)) {
+      return input;
+    }
+    else if (isResponsiveType(input)) {
+      input = createCompleteResponsiveMap(input);
+      return input[breakpoint];
+    }
+    else {
+      return null;
+    }
+  }
+}
+const ResponsiveSizeFormatter$1 = new ResponsiveSizeFormatter();
+
+/**
+ * A class for format TranslocationType
+ *
+ * @augments ResponsiveTranslocationFormatter
+ */
+class ResponsiveTranslocationFormatter {
+  /**
+   * Given a responsive size, return the size according current window width
+   *
+   * @param {ResponsiveType<TranslocationType>} input - ResponsiveScope
+   * @returns {Nullable<TranslocationType>} - size.
+   */
+  format(input) {
+    if (isTranslocationType(input)) {
+      return input;
+    }
+    else if (isResponsiveType(input)) {
+      const breakpoint = getCurrentBreakpoint();
+      input = createCompleteResponsiveMap(input);
+      return input[breakpoint];
+    }
+    else {
+      return null;
+    }
+  }
+}
+const ResponsiveTranslocationFormatter$1 = new ResponsiveTranslocationFormatter();
+
+/**
+ * A class for format display with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveDisplayFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * Given a margin type, return a string of CSS classes that can be used to apply the margin to an element
+   *
+   * @param {boolean} input - display or not
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if ((typeof input === 'string' && input === 'false') || input === false) {
+      return `${prefix}v-hidden`;
+    }
+    else if ((typeof input === 'string' && input === 'true') || input === true) {
+      return `${prefix}v-block`;
+    }
+    else {
+      LogUtility.warn(`The display value ${input} is invalid, it must be a boolean`);
+      return '';
+    }
+  }
+}
+const ResponsiveDisplayFormatter$1 = new ResponsiveDisplayFormatter();
+
+/**
+ * A class for format FlexDirectionType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveFlexDirectionFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a FlexDirectionType and a breakpoint and returns CSS class string.
+   *
+   * @param {FlexDirectionType} input - FlexDirectionType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isFlexDirectionType(input)) {
+      return `${prefix}v-flex-${input}`;
+    }
+    else {
+      LogUtility.warn(`The direction value ${input} is invalid, it must be a value of: `, FlexDirections);
+      return '';
+    }
+  }
+}
+const ResponsiveFlexDirectionFormatter$1 = new ResponsiveFlexDirectionFormatter();
+
+/**
+ * A class for format FlexAlignItemType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveFlexAlignItemFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a FlexAlignItemType and a breakpoint and returns CSS class string.
+   *
+   * @param {FlexAlignItemType} input - FlexAlignItemType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isFlexAlignItemType(input)) {
+      return `${prefix}v-items-${input}`;
+    }
+    else {
+      LogUtility.warn(`The flex alignItem value ${input} is invalid, it must be a value of: `, FlexAlignItem);
+      return '';
+    }
+  }
+}
+const ResponsiveFlexAlignItemFormatter$1 = new ResponsiveFlexAlignItemFormatter();
+
+/**
+ * A class for format FlexJustifyContentType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveFlexJustifyContentFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a FlexJustifyContentType and a breakpoint and returns CSS class string.
+   *
+   * @param {FlexJustifyContentType} input - FlexJustifyContentType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isFlexJustifyContentType(input)) {
+      const mappedInput = this.mapInput(input);
+      return `${prefix}v-justify-${mappedInput}`;
+    }
+    else {
+      LogUtility.warn(`The flex justifyContent value ${input} is invalid, it must be a value of: `, FlexJustifyContent);
+      return '';
+    }
+  }
+  /**
+   * The function maps a FlexJustifyContentType input to a corresponding string value.
+   *
+   * @param {FlexJustifyContentType} input - The input parameter is of type FlexJustifyContentType, which
+   * is likely an enum or a string type that represents the different options for justifying content
+   * within a flex container. The function maps these options to their corresponding values in CSS.
+   * @returns {string} The function `mapInput` takes in a parameter `input` of type `FlexJustifyContentType` and
+   * returns a string based on the value of `input`. If `input` is `"start"`, `"center"`, or `"end"`, the
+   * function returns the same string. If `input` is `"space-around"`, `"space-between"`, or
+   * `"space-evenly"`,
+   */
+  mapInput(input) {
+    switch (input) {
+      case 'start':
+        return 'start';
+      case 'center':
+        return 'center';
+      case 'end':
+        return 'end';
+      case 'space-around':
+        return 'around';
+      case 'space-between':
+        return 'between';
+      case 'space-evenly':
+        return 'evenly';
+    }
+  }
+}
+const ResponsiveFlexJustifyContentFormatter$1 = new ResponsiveFlexJustifyContentFormatter();
+
+/**
+ * A class for format FlexWrapType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveFlexWrapFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a FlexWrapType and a breakpoint and returns CSS class string.
+   *
+   * @param {FlexWrapType} input - FlexWrapType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isFlexWrapType(input)) {
+      return `${prefix}v-flex-${input}`;
+    }
+    else {
+      LogUtility.warn(`The flex flexWrap value ${input} is invalid, it must be a value of: `, FlexWrap);
+      return '';
+    }
+  }
+}
+const ResponsiveFlexWrapFormatter$1 = new ResponsiveFlexWrapFormatter();
+
+/**
+ * A class for format Custom types
+ *
+ * @augments ResponsiveCustomFormatter
+ */
+class ResponsiveCustomFormatter {
+  /**
+   * If the input is not a responsive type, return it. If it is a responsive type, return the value for
+   * the current breakpoint
+   *
+   * @typedef T generic type parameter
+   * @param {ResponsiveType<T>} input - ResponsiveType<T>
+   * @returns {T} The value of the current breakpoint.
+   */
+  format(input) {
+    const breakpoint = getCurrentBreakpoint();
+    if (isResponsiveType(input)) {
+      input = createCompleteResponsiveMap(input);
+      return input[breakpoint];
+    }
+    else {
+      return input;
+    }
+  }
+}
+const ResponsiveCustomFormatterSingleton = new ResponsiveCustomFormatter();
+
+/**
+ * A class for format BoxDisplayType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBoxDisplayFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * The `formatToken` function takes an input value and an optional breakpoint value, and returns a formatted string based on the input value.
+   *
+   * @param {BoxDisplayType} input - The `input` parameter is of type `BoxDisplayType`. It represents the display value for a box element.
+   * @param {BreakpointsForPrefixType} [breakpoint] - The `breakpoint` parameter is an optional parameter of type `BreakpointsForPrefixType`. It is used to specify a breakpoint value for the prefix.
+   * @returns {string} a string value.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isBoxDisplayType(input)) {
+      if (input == 'none') {
+        return `${prefix}v-hidden`;
+      }
+      return `${prefix}v-${input}`;
+    }
+    else {
+      LogUtility.warn(`The box display value ${input} is invalid, it must be a value of: `, BoxDisplay);
+      return '';
+    }
+  }
+}
+const ResponsiveBoxDisplayFormatter$1 = new ResponsiveBoxDisplayFormatter();
+
+/**
+ * A class for format WidthType and HeightType
+ *
+ * @augments ResponsiveWidthAndHeightFormatter
+ */
+class ResponsiveWidthAndHeightFormatter {
+  /**
+   * The function takes a responsive type input, determines the current breakpoint, and formats the width
+   * and height based on the breakpoint.
+   *
+   * @param {ResponsiveType<WidthType | HeightType>} input - The `input` parameter in the `format` function is of type `ResponsiveType<WidthType |
+   * HeightType>`. This means that it can accept values that are either of type `WidthType` or
+   * `HeightType` within a responsive context.
+   * @returns {string} The `format` function returns a string value.
+   */
+  format(input) {
+    const breakpoint = getCurrentBreakpoint();
+    if (isResponsiveType(input)) {
+      input = createCompleteResponsiveMap(input);
+      return parseToPixelString(input[breakpoint]);
+    }
+    else {
+      return parseToPixelString(input);
+    }
+  }
+}
+const ResponsiveWidthAndHeightFormatter$1 = new ResponsiveWidthAndHeightFormatter();
+
+const BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP = {
+  'top': 't',
+  'right': 'r',
+  'bottom': 'b',
+  'left': 'l',
+  'top-left': 'tl',
+  'top-right': 'tr',
+  'bottom-left': 'bl',
+  'bottom-right': 'br',
+};
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
+ *
+ * @deprecated Please use the `ResponsiveBorderRadiusStyleStyleFormatter` instead.
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * 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
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isBorderRadiusTokenType(input)) {
+      return `${prefix}v-${this.transformRoundedNoneAndFill(input)}`;
+    }
+    else if (isDirectionalBorderRadiusType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-rounded-${BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${this.transformRoundedNoneAndFill(input[direction]).replace('rounded-', '')}`;
+      })
+        .join(' ');
+    }
+    else {
+      LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, BorderRadius);
+      return '';
+    }
+  }
+  /**
+   * The function `transformRoundedNoneAndFill` replaces 'rounded-none' with 'rounded-0' and
+   * 'rounded-full' with 'rounded-9999'.
+   *
+   * @param {string} rounded - The `rounded` parameter is a string that represents a CSS class related to the rounding of elements
+   * @returns {string} The transformed value .
+   */
+  transformRoundedNoneAndFill(rounded) {
+    return rounded.replace('rounded-none', 'rounded-0').replace('rounded-full', 'rounded-9999');
+  }
+}
+const ResponsiveBorderRadiusFormatter$1 = new ResponsiveBorderRadiusFormatter();
+
+/**
+ * A class for format TextAlignType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveTextAlignFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * This function takes a TextAlignType and a breakpoint and returns CSS class string.
+   *
+   * @param {TextAlignType} input - TextAlignType input
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isTextAlignType(input)) {
+      return `${prefix}v-text-${input}`;
+    }
+    else {
+      LogUtility.warn(`The text align value ${input} is invalid, it must be a value of: `, TextAlign);
+      return '';
+    }
+  }
+}
+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 (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[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 (isSpacingTokenType(input)) {
+      return `padding:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return PADDING_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, 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 (isSpacingTokenType(input)) {
+      return `margin:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return MARGIN_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, 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 (isBorderRadiusTokenType(input)) {
+      return `border-radius:${BorderRadius[input]}px`;
+    }
+    else if (isDirectionalBorderRadiusType(input)) {
+      return this.getDirectionKeys(input)
+        .map((direction) => {
+        return BORDER_RADIUS_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${BorderRadius[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, 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 FeatureFlag.isEnabled('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR')
+      ? sortAsExistArray(directionKeys, (direction) => map[direction], undefined, Object.keys(BorderRadius))
+      : directionKeys;
+  }
+}
+const responsiveBorderRadiusStyleFormatter = new ResponsiveBorderRadiusStyleFormatter();
+
+/**
+ * A facade class for delegating format input with different responsive formatters given the flag:
+ *
+ * @requires ResponsivePaddingFormatter
+ * @requires ResponsiveMarginFormatter
+ * @requires ResponsiveGapFormatter
+ * @requires ResponsiveColumnFormatter
+ * @requires ResponsiveRowFormatter
+ */
+class ResponsiveFormatFacade {
+  /**
+   * It takes in a flag and a responsive type, and returns a formatted responsive type
+   *
+   * @typedef Flag key of ManagedResponsiveScopeInput
+   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - The input value to be formatted
+   * @param {Flag} flag - The flag that is being formatted.
+   * @returns {ManagedResponsiveScopeOutput[Flag]} The return type is a union of all the possible return types of the formatters.
+   */
+  format(input, flag) {
+    switch (flag) {
+      case 'padding':
+        return ResponsivePaddingFormatter$1.format(input);
+      case 'margin':
+        return ResponsiveMarginFormatter$1.format(input);
+      case 'gap':
+        return ResponsiveGapFormatter$1.format(input);
+      case 'gridColumn':
+        return ResponsiveColumnsFormatter.format(input);
+      case 'gridRow':
+        return ResponsiveRowsFormatter.format(input);
+      case 'size':
+        return ResponsiveSizeFormatter$1.format(input);
+      case 'translocation':
+        return ResponsiveTranslocationFormatter$1.format(input);
+      case 'display':
+        return ResponsiveDisplayFormatter$1.format(input);
+      case 'flexDirection':
+        return ResponsiveFlexDirectionFormatter$1.format(input);
+      case 'flexAlignItem':
+        return ResponsiveFlexAlignItemFormatter$1.format(input);
+      case 'flexJustifyContent':
+        return ResponsiveFlexJustifyContentFormatter$1.format(input);
+      case 'flexWrap':
+        return ResponsiveFlexWrapFormatter$1.format(input);
+      case 'boxDisplay':
+        return ResponsiveBoxDisplayFormatter$1.format(input);
+      case 'widthAndHeight':
+        return ResponsiveWidthAndHeightFormatter$1.format(input);
+      case 'corners':
+        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`);
+    }
+  }
+  /**
+   * Given a responsive type and a flag, return the formatted CSS class string.
+   *
+   * @typedef T generic type parameter
+   * @param {ResponsiveType<T>} input - ResponsiveType<T>
+   * @returns {T} - return the formatted T.
+   */
+  formatCustom(input) {
+    return ResponsiveCustomFormatterSingleton.format(input);
+  }
+}
+const ResponsiveFormatFacade$1 = new ResponsiveFormatFacade();
+
+export { GridColumns as G, ResponsiveFormatFacade$1 as R, GridRows as a };