@globalpayments/vega 2.18.1 → 2.20.0

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-class-string-formatter.d.ts

@@ -0,0 +1,17 @@
+import { BreakpointsForPrefixType, ManagedResponsiveScopeInput, ResponsiveType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsive-formatter';
+import { Nullable } from '../../../types/general';
+/**
+ * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
+ */
+export declare abstract class ResponsiveClassStringFormatter<Flag extends keyof ManagedResponsiveScopeInput> implements ResponsiveFormatter<ManagedResponsiveScopeInput[Flag], string> {
+  /**
+   * > 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: ResponsiveType<ManagedResponsiveScopeInput[Flag]>): string;
+  abstract formatToken(input: ManagedResponsiveScopeInput[Flag], breakpoint?: Nullable<BreakpointsForPrefixType>): string;
+}

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-custom-formatter.d.ts

@@ -0,0 +1,20 @@
+import { ResponsiveType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsive-formatter';
+/**
+ * A class for format Custom types
+ *
+ * @augments ResponsiveCustomFormatter
+ */
+export declare class ResponsiveCustomFormatter<T> implements ResponsiveFormatter<T, T> {
+  /**
+   * 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: ResponsiveType<T>): T;
+}
+declare const _default: ResponsiveCustomFormatter<unknown>;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-display-formatter.d.ts

@@ -0,0 +1,19 @@
+import { BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format display with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveDisplayFormatter extends ResponsiveClassStringFormatter<'display'> {
+  /**
+   * 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: boolean, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveDisplayFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-flex-align-item-formatter.d.ts

@@ -0,0 +1,19 @@
+import { BreakpointsForPrefixType, FlexAlignItemType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format FlexAlignItemType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveFlexAlignItemFormatter extends ResponsiveClassStringFormatter<'flexAlignItem'> {
+  /**
+   * 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: FlexAlignItemType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveFlexAlignItemFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-flex-direction-formatter.d.ts

@@ -0,0 +1,19 @@
+import { FlexDirectionType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format FlexDirectionType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveFlexDirectionFormatter extends ResponsiveClassStringFormatter<'flexDirection'> {
+  /**
+   * 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: FlexDirectionType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveFlexDirectionFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-flex-justify-content-formatter.d.ts

@@ -0,0 +1,31 @@
+import { BreakpointsForPrefixType, FlexJustifyContentType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format FlexJustifyContentType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveFlexJustifyContentFormatter extends ResponsiveClassStringFormatter<'flexJustifyContent'> {
+  /**
+   * 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: FlexJustifyContentType, breakpoint?: BreakpointsForPrefixType): string;
+  /**
+   * 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: FlexJustifyContentType): string;
+}
+declare const _default: ResponsiveFlexJustifyContentFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-flex-wrap-formatter.d.ts

@@ -0,0 +1,19 @@
+import { BreakpointsForPrefixType, FlexWrapType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format FlexWrapType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveFlexWrapFormatter extends ResponsiveClassStringFormatter<'flexWrap'> {
+  /**
+   * 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: FlexWrapType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveFlexWrapFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-gap-formatter.d.ts

@@ -0,0 +1,19 @@
+import { GapType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format GapType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveGapFormatter extends ResponsiveClassStringFormatter<'gap'> {
+  /**
+   * 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: GapType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveGapFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-grid-columns-formatter.d.ts

@@ -0,0 +1,19 @@
+import { GridColumnsType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format GridColumnsType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveGridColumnsFormatter extends ResponsiveClassStringFormatter<'gridColumn'> {
+  /**
+   * 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: GridColumnsType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveGridColumnsFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-grid-rows-formatter.d.ts

@@ -0,0 +1,19 @@
+import { GridRowsType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format GridRowsType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveGridRowsFormatter extends ResponsiveClassStringFormatter<'gridRow'> {
+  /**
+   * 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: GridRowsType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveGridRowsFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-margin-formatter.d.ts

@@ -0,0 +1,19 @@
+import { MarginType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format MarginType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter<'margin'> {
+  /**
+   * 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: MarginType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveMarginFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-padding-formatter.d.ts

@@ -0,0 +1,19 @@
+import { PaddingType, BreakpointsForPrefixType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter<'padding'> {
+  /**
+   * 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: PaddingType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsivePaddingFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-size-formatter.d.ts

@@ -0,0 +1,18 @@
+import { ResponsiveType, SizeType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsive-formatter';
+/**
+ * A class for format SizeType
+ *
+ * @augments ResponsiveSizeFormatter
+ */
+declare class ResponsiveSizeFormatter implements ResponsiveFormatter<SizeType, number | string | null> {
+  /**
+   * Given a responsive size, return the size according current window width
+   *
+   * @param {ResponsiveType<SizeType>} input - ResponsiveScope
+   * @returns {SizeType} - size.
+   */
+  format(input: ResponsiveType<SizeType>): number | `${number}%` | null;
+}
+declare const _default: ResponsiveSizeFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-text-align-formatter.d.ts

@@ -0,0 +1,19 @@
+import { BreakpointsForPrefixType, TextAlignType } from '../../../types/ui.type';
+import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+/**
+ * A class for format TextAlignType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+declare class ResponsiveTextAlignFormatter extends ResponsiveClassStringFormatter<'textAlign'> {
+  /**
+   * 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: TextAlignType, breakpoint?: BreakpointsForPrefixType): string;
+}
+declare const _default: ResponsiveTextAlignFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-translocation-formatter.d.ts

@@ -0,0 +1,19 @@
+import { ResponsiveType, TranslocationType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsive-formatter';
+import { Nullable } from '../../../types/general';
+/**
+ * A class for format TranslocationType
+ *
+ * @augments ResponsiveTranslocationFormatter
+ */
+declare class ResponsiveTranslocationFormatter implements ResponsiveFormatter<TranslocationType, Nullable<TranslocationType>> {
+  /**
+   * Given a responsive size, return the size according current window width
+   *
+   * @param {ResponsiveType<TranslocationType>} input - ResponsiveScope
+   * @returns {TranslocationType} - size.
+   */
+  format(input: ResponsiveType<TranslocationType>): Nullable<TranslocationType>;
+}
+declare const _default: ResponsiveTranslocationFormatter;
+export default _default;

package/dist/types/helpers/formatter/responsive-map-formatter/responsive-width-and-height-formatter.d.ts

@@ -0,0 +1,21 @@
+import { HeightType, ResponsiveType, WidthType } from '../../../types/ui.type';
+import { ResponsiveFormatter } from './responsive-formatter';
+/**
+ * A class for format WidthType and HeightType
+ *
+ * @augments ResponsiveWidthAndHeightFormatter
+ */
+export declare class ResponsiveWidthAndHeightFormatter implements ResponsiveFormatter<WidthType | HeightType, string> {
+  /**
+   * 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: ResponsiveType<WidthType | HeightType>): string;
+}
+declare const _default: ResponsiveWidthAndHeightFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/state-background-color-formatter.d.ts

@@ -0,0 +1,32 @@
+import { StateVariantFormatter } from './state-variant-formatter';
+import { BackgroundColorsTokenType } from '../../../types/design-token.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBackgroundColorFormatter` class in TypeScript formats background color tokens
+ * and handles different CSS states.
+ */
+declare class StateBackgroundColorFormatter extends StateVariantFormatter<'backgroundColor'> {
+  private readonly states;
+  /**
+   * The function `formatToken` takes a `BackgroundColorsTokenType` input, checks if it is a valid
+   * background color token type, and returns the corresponding CSS background color value or logs a
+   * warning if the input is invalid.
+   *
+   * @param {BackgroundColorsTokenType} input - The `input` parameter is of type
+   * `BackgroundColorsTokenType`, which is used to represent different background color tokens.
+   * @returns {string} The `formatToken` function takes a `BackgroundColorsTokenType` input and checks if it is a
+   * valid background color token type. If it is valid, it retrieves the corresponding color value from
+   * the `BackgroundColorMap` and returns a CSS style string with the background color. If the input is
+   * not valid, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input: BackgroundColorsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of objects of type CssStatesType, which represents the states stored in the
+   * variable this.states.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBackgroundColorFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/state-border-color-formatter.d.ts

@@ -0,0 +1,31 @@
+import { StateVariantFormatter } from './state-variant-formatter';
+import { BorderColorsTokenType } from '../../../types/design-token.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBorderColorFormatter` class in TypeScript formats border color tokens based on
+ * input values and provides an array of CSS states.
+ */
+declare class StateBorderColorFormatter extends StateVariantFormatter<'borderColor'> {
+  private readonly states;
+  /**
+   * The function `formatToken` takes a BorderColorsTokenType input, checks if it is a valid border
+   * color token type, and returns the corresponding CSS border-color value or logs a warning if the
+   * input is invalid.
+   *
+   * @param {BorderColorsTokenType} input - BorderColorsTokenType
+   * @returns {string} The `formatToken` function returns a string that represents a CSS style for border color
+   * based on the input `BorderColorsTokenType`. If the input is a valid border color token type, it
+   * retrieves the corresponding value from the `BorderColorMap` and returns a CSS style string with the
+   * border color value. If the input is not a valid border color token type, it logs a warning message
+   * and returns an
+   */
+  formatToken(input: BorderColorsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of CssStatesType objects is being returned.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBorderColorFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/state-border-formatter.d.ts

@@ -0,0 +1,33 @@
+import { StateVariantFormatter } from './state-variant-formatter';
+import { BordersTokenType } from '../../../types/design-token.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateBorderFormatter` class in TypeScript formats border token values into CSS border properties
+ * and provides state information.
+ */
+declare class StateBorderFormatter extends StateVariantFormatter<'border'> {
+  private readonly states;
+  /**
+   * The `formatToken` function in TypeScript formats a border token value into a CSS border property
+   * string or logs a warning if the input is invalid.
+   *
+   * @param {BordersTokenType} input - The `formatToken` function takes a `BordersTokenType` as input
+   * and returns a formatted string representing a CSS border property based on the input token value.
+   * If the input is a valid border token type, it retrieves the corresponding CSS value from the
+   * `BorderMap` and returns it in a `border
+   * @returns {string} The `formatToken` function returns a string that represents a CSS border property based on
+   * the input `BordersTokenType`. If the input is a valid border token type, it retrieves the
+   * corresponding value from the `BorderMap` and returns a CSS `border` property string. If the input
+   * is not a valid border token type, it logs a warning message using `LogUtility.warn` and returns an
+   * empty
+   */
+  formatToken(input: BordersTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[] } An array of objects of type CssStatesType, which represents the states.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateBorderFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/state-shadow-formatter.d.ts

@@ -0,0 +1,28 @@
+import { StateVariantFormatter } from './state-variant-formatter';
+import { ShadowsTokenType } from '../../../types/design-token.type';
+import { CssStatesType } from '../../../types/ui.type';
+/**
+ * The `StateShadowFormatter` class in TypeScript formats a CSS `box-shadow` property based on a
+ * ShadowsTokenType input and provides an array of CssStatesType objects.
+ */
+declare class StateShadowFormatter extends StateVariantFormatter<'shadow'> {
+  private readonly states;
+  /**
+   * The `formatToken` function in TypeScript takes a ShadowsTokenType input, validates it, and returns a
+   * formatted CSS box-shadow property string or logs a warning if the input is invalid.
+   *
+   * @param {ShadowsTokenType} input - ShadowsTokenType
+   * @returns {string} The `formatToken` function takes a `ShadowsTokenType` input and returns a CSS `box-shadow`
+   * property with the corresponding value from the `ShadowMap` object. If the input is not a valid
+   * `ShadowsTokenType`, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input: ShadowsTokenType): string;
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]}An array of CssStatesType objects is being returned.
+   */
+  getStates(): CssStatesType[];
+}
+declare const _default: StateShadowFormatter;
+export default _default;

package/dist/types/helpers/formatter/state-formatter/state-variant-formatter.d.ts

@@ -0,0 +1,23 @@
+import { CssStatesType, ManagedStateScopeInput, StateVariantType } from '../../../types/ui.type';
+import { StateFormatter } from './state-formatter';
+/**
+ * StateVariantFormatter: Format state token to CSS styles
+ */
+export declare abstract class StateVariantFormatter<Flag extends keyof ManagedStateScopeInput> implements StateFormatter<ManagedStateScopeInput[Flag], string> {
+  /**
+   * The function `format` takes an input state variant type and returns formatted CSS styles based on
+   * the input.
+   *
+   * @param {StateVariantType} input - The `format` function takes an `input` parameter of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that the `input` parameter
+   * should be an object that contains styles for different states, where the keys are state names and
+   * the values are the corresponding styles
+   * @returns {string} The `format` function returns a string that contains CSS styles based on the input
+   * provided. If the input is determined to be a state variant token type, the function generates CSS
+   * styles for each state in the input and returns them joined by newlines. If the input is not a state
+   * variant token type, the function generates CSS styles for the default state and returns them.
+   */
+  format<State extends CssStatesType>(input: StateVariantType<ManagedStateScopeInput[Flag], State>): string;
+  abstract formatToken(input: ManagedStateScopeInput[Flag]): string;
+  abstract getStates(): CssStatesType[];
+}

package/dist/types/helpers/formatter/string-formatter/custom-formatter-strategy.d.ts

@@ -1,4 +1,4 @@
-import { StringFormatStrategy } from './stringFormatStrategy';
+import { StringFormatStrategy } from './string-format-strategy';
 import { Nullable } from '../../../types/general';
 export declare type CustomStringFormatter = (rawValue: string) => string;
 /**

package/dist/types/helpers/formatter/string-formatter/number-mask-strategy.d.ts

@@ -0,0 +1,52 @@
+import { StringFormatStrategy } from './string-format-strategy';
+export declare type NumberMaskConfig = {
+  /**
+   * 0 - will only allow integer
+   */
+  precision?: number;
+  /**
+   * Whether allow negative. Default is true
+   */
+  allowNegative?: boolean;
+};
+/**
+ * A class for formatting number with the given mask format
+ */
+export declare class NumberMaskStrategy implements StringFormatStrategy {
+  private readonly maskConfig;
+  private mask;
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {NumberMaskConfig} maskConfig - MaskConfig
+   */
+  constructor(maskConfig?: NumberMaskConfig);
+  /**
+   * Given a number string, it replaces the mask with the matched input value
+   *
+   * @param {string} input - input number
+   * @returns {string} The formatted number string.
+   */
+  format(input: string): string;
+  /**
+   * if allow negative, will skip '-', e.g. when input '-' -> '-1.2'
+   * if precision is not null, then user can fill input with decimal places, e.g. when input '1.' -> '1.2'
+   *
+   * @param {string} input - input number
+   * @returns {boolean} need skip if return true, otherwise false
+   */
+  private skipFormat;
+  /**
+   * Get the number RegExp
+   *
+   * @returns {string} - The number regExp
+   */
+  private getRegExp;
+  /**
+   * Whether the input string need delete the latest char
+   *
+   * @param {string} value - the input value
+   * @returns {boolean} return true if the value need mask format. otherwise false
+   */
+  private inputNeedFormat;
+}

package/dist/types/helpers/formatter/string-formatter/string-mask-strategy.d.ts

@@ -0,0 +1,94 @@
+import { Nullable } from '../../../types/general';
+import { StringFormatStrategy } from './string-format-strategy';
+export declare type MaskConfig = {
+  mask: string;
+  slot: string | RegExp;
+  accept: RegExp;
+  insertMode?: boolean;
+  overrideValue?: boolean;
+  triggerAtInit?: boolean;
+};
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+export declare class StringMaskStrategy implements StringFormatStrategy {
+  static PHONE_MASK: StringMaskStrategy;
+  static ZIPCODE_MASK: StringMaskStrategy;
+  static TAX_ID_MASK: StringMaskStrategy;
+  private maskConfig;
+  private slotRegex;
+  private acceptRegex;
+  /**
+   * The insert mode means adding some special character in the input string, will replace part of input string if insertMode set to false.
+   *
+   * @example
+   * mask: ****9999
+   * slot: 9
+   * value = 12345678
+   *
+   * insertMode=true The mask value should be ****1234
+   * insertMode=false The mask value should be ****5678
+   */
+  private insertMode;
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {MaskConfig} maskConfig - MaskConfig
+   */
+  constructor(maskConfig: MaskConfig);
+  /**
+   * Given a string, it replaces the mask with the matched input slot value
+   *
+   * @param {string} input - The input string that needs to be formatted.
+   * @param {number} caretPosition - The current position of caret
+   * @returns {string} The formatted string.
+   */
+  format(input: string, caretPosition?: Nullable<number>): string;
+  /**
+   * Get the position of
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current position of caret
+   * @returns {number} The new position of caret
+   */
+  calculateCaretPosition(input: string, caretPosition: Nullable<number>): Nullable<number>;
+  /**
+   * This TypeScript function determines whether a component value should be overridden based on the mask configuration.
+   *
+   * @returns {boolean} The result overrideValue controls whether the component value same as the internal input value after the input blur
+   * return false if property overrideValue is not exist or set to true, return false if maskConfig is not exist
+   */
+  shouldOverrideComponentValueAfterBlur(): boolean;
+  /**
+   * The function shouldTriggerAtInit returns true if the maskConfig is defined and its triggerAtInit
+   * property is set to true, otherwise it returns false.
+   *
+   * @returns {boolean} The function shouldTriggerAtInit() returns a boolean value. If the condition is met
+   * (this.maskConfig is truthy and this.maskConfig.triggerAtInit is true), it returns true. Otherwise,
+   * it returns false.
+   */
+  shouldTriggerAtInit(): boolean;
+  /**
+   * Get the length limit by mask
+   *
+   * @returns {number} the max limit length
+   */
+  private getLengthLimit;
+  /**
+   * Given a string, return an array of all the digits in that string
+   *
+   * @param {string} input - The input string to be parsed.
+   * @returns {string[]} - An array of strings.
+   */
+  private getMatchedInputSlotValue;
+  /**
+   * Replace the mask with the matched input slots
+   *
+   * @param {string} input - The input string that is being typed by the user.
+   * @param {string[]} matchedInputSlot - an array of the input slots that were matched by the mask.
+   * @returns {string} The result string builder.
+   */
+  private replaceMaskWithMatchedInputSlots;
+}