@heartlandone/vega 2.78.0 → 2.80.0

package/dist/esm/responsive-format-facade-b3799ff9.js

@@ -1,912 +0,0 @@
-import { x as isResponsiveType, y as isBreakpointsForPrefixType, q as isSpacingTokenType, z as isDirectionalSpacingType, h as Spacing, E as isGridColumnsType, G as isGridRowsType, H as isTranslocationType, I as isFlexDirectionType, J as isFlexAlignItemType, K as isFlexJustifyContentType, L as isFlexWrapType, N as isBoxDisplayType, r as isBorderRadiusTokenType, O as isDirectionalBorderRadiusType, B as BorderRadius, P as isTextAlignType } from './type-guard-f69d2935.js';
-import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './breakpoints-13353e09.js';
-import { i as isValidPercentage } from './number-4398f2e1.js';
-import { F as FlexDirections, a as FlexAlignItem, b as FlexJustifyContent, c as FlexWrap, d as BoxDisplay, T as TextAlign } from './ui-41f725b7.js';
-import { p as parseToPixelString } from './pixel-f32c07ce.js';
-import { B as Breakpoints } from './breakpoints-d9faf11c.js';
-import { s as sortAsExistArray } from './array-7888f339.js';
-import { F as FeatureFlag } from './feature-flag-controller-30f7b625.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 };