@globalpayments/vega 2.19.0 → 2.20.0

package/dist/cjs/responsive-format-facade-a5cfa51a.js

@@ -0,0 +1,707 @@
+'use strict';
+
+const typeGuard = require('./type-guard-4d05d4b2.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const breakpoints = require('./breakpoints-cb3291ba.js');
+const number = require('./number-459031f7.js');
+const ui = require('./ui-077fc009.js');
+const pixel = require('./pixel-98f2a10c.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 (typeGuard.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
+ *
+ * @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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isSpacingTokenType(input)) {
+      return `${prefix}v-p-${input}`;
+    }
+    else if (typeGuard.isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${PADDING_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, typeGuard.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
+ *
+ * @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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isSpacingTokenType(input)) {
+      return `${prefix}v-m-${input}`;
+    }
+    else if (typeGuard.isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${MARGIN_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, typeGuard.Spacing);
+      return '';
+    }
+  }
+}
+const ResponsiveMarginFormatter$1 = new ResponsiveMarginFormatter();
+
+/**
+ * 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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isSpacingTokenType(input)) {
+      return `${prefix}v-gap-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, typeGuard.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isGridColumnsType(input)) {
+      return `${prefix}v-grid-cols-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isGridRowsType(input)) {
+      return `${prefix}v-grid-rows-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.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 {SizeType} - size.
+   */
+  format(input) {
+    const breakpoint = breakpoints.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' && number.isValidPercentage(input)) {
+      return input;
+    }
+    else if (typeGuard.isResponsiveType(input)) {
+      input = breakpoints.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 {TranslocationType} - size.
+   */
+  format(input) {
+    if (typeGuard.isTranslocationType(input)) {
+      return input;
+    }
+    else if (typeGuard.isResponsiveType(input)) {
+      const breakpoint = breakpoints.getCurrentBreakpoint();
+      input = breakpoints.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 = typeGuard.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 {
+      globalSlimmerRegistry.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isFlexDirectionType(input)) {
+      return `${prefix}v-flex-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The direction value ${input} is invalid, it must be a value of: `, ui.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isFlexAlignItemType(input)) {
+      return `${prefix}v-items-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The flex alignItem value ${input} is invalid, it must be a value of: `, ui.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isFlexJustifyContentType(input)) {
+      const mappedInput = this.mapInput(input);
+      return `${prefix}v-justify-${mappedInput}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The flex justifyContent value ${input} is invalid, it must be a value of: `, ui.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isFlexWrapType(input)) {
+      return `${prefix}v-flex-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The flex flexWrap value ${input} is invalid, it must be a value of: `, ui.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 = breakpoints.getCurrentBreakpoint();
+    if (typeGuard.isResponsiveType(input)) {
+      input = breakpoints.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isBoxDisplayType(input)) {
+      if (input == 'none') {
+        return `${prefix}v-hidden`;
+      }
+      return `${prefix}v-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The box display value ${input} is invalid, it must be a value of: `, ui.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 = breakpoints.getCurrentBreakpoint();
+    if (typeGuard.isResponsiveType(input)) {
+      input = breakpoints.createCompleteResponsiveMap(input);
+      return pixel.parseToPixelString(input[breakpoint]);
+    }
+    else {
+      return pixel.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
+ *
+ * @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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isBorderRadiusTokenType(input)) {
+      return `${prefix}v-${this.transformRoundedNoneAndFill(input)}`;
+    }
+    else if (typeGuard.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 {
+      globalSlimmerRegistry.LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, typeGuard.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 = typeGuard.isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (typeGuard.isTextAlignType(input)) {
+      return `${prefix}v-text-${input}`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The text align value ${input} is invalid, it must be a value of: `, ui.TextAlign);
+      return '';
+    }
+  }
+}
+const ResponsiveTextAlignFormatter$1 = new ResponsiveTextAlignFormatter();
+
+/**
+ * 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);
+      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();
+
+exports.ResponsiveFormatFacade = ResponsiveFormatFacade$1;