@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/collection/helpers/change-manager/test/domNodeSubjectFactory.test.js

@@ -12,15 +12,15 @@ test('domNodesSubjectFactory', () => {
   expect(divSubject.getDescription()).toEqual(`, this is a dom nodes subject of ${div.tagName}:${VegaClick.getVegaName()}.(class name:test, id:)`);
   expect(domNodesSubjectFactory['isExist'].call(null, null)).toBeFalsy();
 });
-test('addObserverToNode', () => {
+test('addUniqueObserverToNode', () => {
   const div = document.createElement('div');
   const length = changeManager['pubSubMap'].size;
   const mockCallback = jest.fn();
-  DomNodeSubjectObserverFactory.addObserverToNode(div, VegaClick, mockCallback);
+  DomNodeSubjectObserverFactory.addUniqueObserverToNode(div, VegaClick, mockCallback);
   expect(changeManager['pubSubMap'].size).toEqual(length + 1);
   changeManager.notify(domNodesSubjectFactory.getSubject(div, VegaClick), div);
   expect(mockCallback).toBeCalledTimes(1);
-  DomNodeSubjectObserverFactory.addObserverToNode(div, VegaClick, mockCallback, (node) => node.tagName === 'SPAN');
+  DomNodeSubjectObserverFactory.addUniqueObserverToNode(div, VegaClick, mockCallback, (node) => node.tagName === 'SPAN');
   changeManager.notify(domNodesSubjectFactory.getSubject(div, VegaClick), div);
   expect(mockCallback).toBeCalledTimes(1);
 });

package/dist/collection/helpers/event-manager/event-delegated/baseStrategy.js

@@ -28,7 +28,7 @@ export class BaseStrategy {
     const target = this.createEventTarget(vegaHost);
     target.style.display = 'none';
     vegaHost.appendChild(target);
-    const clonedEvent = new Event(this.eventName, { bubbles: true, cancelable: true });
+    const clonedEvent = this.createEvent(this.eventName);
     if (detail) {
       Object.defineProperty(clonedEvent, 'detail', {
         configurable: true,
@@ -60,4 +60,18 @@ export class BaseStrategy {
       });
     }
   }
+  /**
+   * The function creates and returns a new event object based on the given event name.
+   *
+   * @param {VegaNativeEventNameType} eventName - The eventName parameter is the name of the event that
+   * you want to create. It can be any valid event name, such as "click", "keydown", "mouseover", etc.
+   * @returns {Event} a cloned event object.
+   */
+  createEvent(eventName) {
+    let clonedEvent = new Event(eventName, { bubbles: true, cancelable: true });
+    if (eventName === 'click') {
+      clonedEvent = new MouseEvent(eventName, { bubbles: true, cancelable: true });
+    }
+    return clonedEvent;
+  }
 }

package/dist/collection/helpers/event-manager/event-delegated/jqueryDelegatedStrategyController.js

@@ -26,7 +26,7 @@ class JQueryDelegatedStrategyController {
    * The function checks if a given event on a specific HTML element is supported for delegation.
    *
    * @param {HTMLElement} host - The `host` parameter is an HTMLElement, which represents the element on which the event listener is attached.
-   * @param {VegaEventIDInterface} eventId - The `eventName` parameter is a string that represents the name of the event.
+   * @param {VegaEventID} eventId - The `eventName` parameter is a string that represents the name of the event.
    * @returns {boolean} a boolean value.
    */
   isSupportDelegated(host, eventId) {
@@ -65,7 +65,7 @@ class JQueryDelegatedStrategyController {
    *
    * @param {HTMLElement} host - The `host` parameter is an HTMLElement that represents the element on
    * which the event strategy is being applied. It is the element to which the event listener is attached.
-   * @param {VegaEventIDInterface} eventId - The `eventName` parameter is a string that represents the name of the event for which you want to retrieve the strategy.
+   * @param {VegaEventID} eventId - The `eventName` parameter is a string that represents the name of the event for which you want to retrieve the strategy.
    * @returns {Nullable<JQueryDelegatedEventStrategy>} a Nullable<JQueryDelegatedEventStrategy>.
    */
   getStrategy(host, eventId) {

package/dist/collection/helpers/event-manager/eventID/vegaEventId.js

@@ -10,6 +10,14 @@ export class VegaEventID {
     this.vegaName = vegaName;
     this.nativeName = nativeName;
   }
+  /**
+   * The function `getName` returns the name of an object using the `getVegaName` method.
+   *
+   * @returns {string} The `getName` method is returning the result of calling the `getVegaName` method.
+   */
+  getName() {
+    return this.getVegaName();
+  }
   /**
    * use the Event Name Manager API to determined to return the vega name of the native name
    *

package/dist/collection/helpers/event-manager/eventID/vegaInternalEventId.js

@@ -0,0 +1,21 @@
+/** The class VegaInternalEventID implements the VegaEventIDInterface and provides a method to get the current name. */
+export class VegaInternalEventID {
+  /**
+   * This TypeScript constructor function takes a string parameter and assigns it to a private property called "name".
+   *
+   * @param {string} name - It is used to initialize an instance of the class with a specific name value.
+   */
+  constructor(name) {
+    this.name = name;
+  }
+  /**
+   * This TypeScript function returns the name stored in the object.
+   *
+   * @returns {string} The `name` property of the current object is being returned as a string.
+   */
+  getName() {
+    return this.name;
+  }
+}
+export const VegaInternalValid = new VegaInternalEventID('valid');
+export const VegaInternalFieldErrorStateChange = new VegaInternalEventID('fieldErrorStateChange');

package/dist/collection/helpers/event-manager/internalVegaEventManager.js

@@ -37,7 +37,7 @@ class InternalVegaEventManager {
    *
    * @param {VegaComponentName} componentName - The `componentName` parameter is a string that represents
    * the name of a Vega component.
-   * @returns {Nullable<VegaEventIDInterface[]>} a nullable array of VegaEventIDInterface objects.
+   * @returns {Nullable<VegaEventID[]>} a nullable array of VegaEventID objects.
    */
   getEnabledEventIdsByComponent(componentName) {
     return VEGA_COMPONENT_EVENT_MAP.get(componentName);

package/dist/collection/helpers/event-manager/slimmers/childNodesEventPreventSlimmer.js

@@ -13,7 +13,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   /**
    * The constructor function takes in an array of event names and a function to get the parent element, and assigns them to the corresponding properties of the class.
    *
-   * @param {VegaEventIDInterface[]} eventIds - The eventNames parameter is an array of VegaEventID that represents the names of the events that will be handled by the constructor.
+   * @param {VegaEventID[]} eventIds - The eventNames parameter is an array of VegaEventID that represents the names of the events that will be handled by the constructor.
    * @param {HTMLElement} getHostElement - The `getHostElement` parameter is a function that returns an `HTMLElement`. It is used to get the parent element where the events will be attached.
    * @param {boolean | EventPreventOptions} options - add event listener in capture or bubbles.
    */
@@ -90,7 +90,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   /**
    * get the current event name
    *
-   * @param {VegaEventIDInterface} eventId event id class
+   * @param {VegaEventID} eventId event id class
    * @returns {string} native or vega event name string
    */
   getCurrentEventName(eventId) {
@@ -100,7 +100,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
    * The function shouldPrevent checks if a given event ID should be prevented based on whether it is a
    * native event and if it is enabled for the host.
    *
-   * @param {VegaEventIDInterface} eventId - The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of an event.
+   * @param {VegaEventID} eventId - The `eventId` parameter is of type `VegaEventID`. It represents the ID of an event.
    * @returns {boolean} a boolean value.
    */
   shouldPrevent(eventId) {

package/dist/collection/helpers/event-manager/slimmers/event-emit-handlers/jqueryDelegatedEventEmitHandler.js

@@ -40,9 +40,9 @@ export class JqueryDelegatedEventEmitHandlerSlimmer extends VegaSlimmer {
     };
   }
   /**
-   * The function "setEventID" sets the eventID property of the current object to the provided VegaEventIDInterface value.
+   * The function "setEventID" sets the eventID property of the current object to the provided VegaEventID value.
    *
-   * @param {VegaEventIDInterface} eventID - The eventID parameter is of type VegaEventIDInterface.
+   * @param {VegaEventID} eventID - The eventID parameter is of type VegaEventID.
    */
   setEventID(eventID) {
     this.eventID = eventID;

package/dist/collection/helpers/event-manager/slimmers/eventEmitSlimmer.js

@@ -52,7 +52,7 @@ export class EventEmitSlimmerBase extends VegaSlimmer {
       // add promise to fix the testPolyfill#replaceChildren
       void Promise.resolve(true).then(() => {
         if (this.isNodeRemovedFromDocument(this.host)) {
-          DomNodeSubjectObserverFactory.removeObserverFromNode(this.host, this.eventID);
+          DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, this.eventID);
         }
       });
     };
@@ -100,7 +100,7 @@ __decorate([
  * The function `createEventEmitSlimmer` creates a slimmer version of an event emitter class by mapping specific properties and events.
  *
  * @param {ClassPrototype<unknown>} mapFromClass - The class prototype from which the event emitter will be created.
- * @param {VegaEventIDInterface} eventID - The eventName parameter is a VegaEventID that represents the name of the event.
+ * @param {VegaEventID} eventID - The eventName parameter is a VegaEventID that represents the name of the event.
  * @param {string} [nativeEventPropertyName] - usually the native event name is eventID#nativeName, set a property name when the native name is used by other method or property
  * @returns {EventEmitSlimmerBase} an instance of the `EventEmitSlimmerBase` class.
  */

package/dist/collection/helpers/event-manager/test/childNodesEventPreventSlimmer.test.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { ChildNodesEventPreventSlimmer } from '../slimmers/childNodesEventPreventSlimmer';
 import { VegaChange, VegaClick, VegaValidate } from '../eventID/vegaEventId';

package/dist/collection/helpers/event-manager/test/childNodesNotifyObserverSlimmer.test.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { ChildNodesNotifyObserverSlimmer } from '../slimmers/childNodesNotifyObserverSlimmer';
 import { CHECKBOX_VALUE_CHANGE } from '../../change-manager/subject/static-subject/staticSubjectTitle';

package/dist/collection/helpers/event-manager/test/jqueryDelegatedStrategyController.test.js

@@ -1,8 +1,22 @@
 import { LogUtility } from '../../../utils/log';
+import { VegaJQueryDelegatedEventStrategy } from '../../publicApi';
 import jqueryDelegatedStrategyController from '../event-delegated/jqueryDelegatedStrategyController';
 import { VegaInputStrategy } from '../event-delegated/vegaInputStrategy';
 import { VegaChange, VegaClick } from '../eventID/vegaEventId';
 import internalVegaEventManager from '../internalVegaEventManager';
+class ButtonCircleFocus extends VegaJQueryDelegatedEventStrategy {
+  constructor() {
+    super(...arguments);
+    this.eventName = 'focus';
+    this.vegaComponentName = 'vega-button-circle';
+  }
+  createEventTarget() {
+    return document.createElement('button');
+  }
+  createEvent(eventName) {
+    return new FocusEvent(eventName);
+  }
+}
 test('jqueryDelegatedStrategyController isSupportDelegated', () => {
   const button = document.createElement('vega-button');
   const buttonCircle = document.createElement('vega-button-circle');
@@ -40,6 +54,26 @@ test('jqueryDelegatedStrategyController getStrategy', () => {
   expect(event['detail']).toEqual('testDetail');
   internalVegaEventManager.setSemantics({ global: { namespace: 'vega' } });
 });
+test('jqueryDelegatedStrategyController strategy event type', () => {
+  const vegaButton = document.createElement('vega-button-circle');
+  const strategy = new ButtonCircleFocus();
+  const event = strategy.handle(vegaButton);
+  expect(event instanceof FocusEvent).toBeTruthy();
+});
+test('jqueryDelegatedStrategyController getStrategy', () => {
+  internalVegaEventManager.setSemantics({
+    global: { namespace: 'vega', jqueryDelegatedEvent: false },
+    components: {
+      'vega-input': { namespace: 'native', jqueryDelegatedEvent: [new VegaInputStrategy('click')] },
+    },
+  });
+  const vegaInput = document.createElement('vega-input');
+  const strategy = jqueryDelegatedStrategyController.getStrategy(vegaInput, VegaClick);
+  expect(strategy).not.toBeNull();
+  expect(strategy.createEventTarget(vegaInput).tagName).toEqual('INPUT');
+  const event = strategy.handle(vegaInput);
+  expect(event instanceof MouseEvent).toBeTruthy();
+});
 test('jqueryDelegatedStrategyController updateRegistryFromEventSemantics', () => {
   internalVegaEventManager.setSemantics({
     components: {
@@ -93,6 +127,5 @@ test('jqueryDelegatedStrategy copyAttributeToTarget throw error', () => {
   spyOn(LogUtility, 'error');
   testStrategy['copyAttributesToTarget'](vegaInput, input);
   expect(LogUtility.error).toBeCalledWith("Delegated strategy copy VEGA-INPUT attribute 'data-test-error' error.");
-  console.log(input.outerHTML);
   expect(input.hasAttribute('data-test')).toBeTruthy();
 });

package/dist/collection/helpers/event-manager/vegaEventManager.js

@@ -31,7 +31,7 @@ class VegaEventManager {
    *
    * @param {VegaComponentName} componentName - The component name,
    * etc.
-   * @returns {Nullable<VegaEventIDInterface[]>} All eventIds.
+   * @returns {Nullable<VegaEventID[]>} All eventIds.
    */
   getEnabledEventIdsByComponent(componentName) {
     return EventManager.getEnabledEventIdsByComponent(componentName);

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -6,22 +6,24 @@ const FeatureFlagsMap = {
     description: `Feature flag to enable the required decorator for the date picker component. <br/> <b>Note: This feature flag is for demonstration purpose and will be persisted permanently.</b>`,
     createdTimestamp: 1660330561422,
     createdAtVersion: '1.2.0',
+    removedAfterVersion: '1.11.1',
   },
   'VEGA_COMPONENT.SANITIZE_VEGA_COMPONENT': {
     description: `Feature flag to enable sanitize vega components.`,
     createdTimestamp: 1664262689486,
     createdAtVersion: '1.8.1',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_TEXT.LABEL_OR_CONTENT_NESTED_VEGA_TEXT_COMPONENT': {
     description: 'Feature flag to enable the label or content of other component nested vega-text component.',
     createdTimestamp: 1665218525140,
     createdAtVersion: '1.8.1',
+    removedAfterVersion: '1.9.1',
   },
   'VEGA_FLEX.ENABLE_DIRECTION_ONLY': {
     description: `Feature flag to make direction take effect only regardless of breakpoint for vega-flex component.`,
     createdTimestamp: 1665639912117,
     createdAtVersion: '1.9.0',
-    removedAfterVersion: '2.0.0',
   },
   'VEGA_FIELD_LABEL.SHOW_LABEL': {
     description: `Feature flag to enable the vega-field-label component for vega-input, vega-input-select and vega-date-picker.`,
@@ -51,11 +53,13 @@ const FeatureFlagsMap = {
     description: `Feature flag to deprecate the form field should validate only have data-vega-from attribute`,
     createdTimestamp: 1676017004107,
     createdAtVersion: '1.19.0',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_FORM_FIELD.CHANGE_BLOCK_TO_INLINE_BLOCK': {
     description: `Feature flag to deprecate the form fields like input/datePicker/timePicker should use inline block`,
     createdTimestamp: 1676512727310,
     createdAtVersion: '1.20.0',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_CHECKBOX_RADIO_GROUP.FLEX_DIRECTION_COL_DEFAULT': {
     description: `Feature flag to make the checkbox group and radio group prop vegaFlexProp default direction to col`,
@@ -73,9 +77,10 @@ const FeatureFlagsMap = {
     description: `Feature flag to rename the prop input-editable to input-disabled `,
     createdTimestamp: 1683252081350,
     createdAtVersion: '1.30.0',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_FLEX.ALIGNITEM_JUSTIFYCONTENT_USE_PREFIX_V_INSTEAD_OF_VEGA': {
-    description: `Feature flag to render vega-flex prop alignItem and justifyContent classes by using v- instead of vega-`,
+    description: `Feature flag to render vega-flex prop alignItems and justifyContent classes by using v- instead of vega-`,
     createdTimestamp: 1684128467390,
     createdAtVersion: '1.32.0',
     removedAfterVersion: '1.48.3',
@@ -100,11 +105,13 @@ const FeatureFlagsMap = {
     description: `Feature flag to deprecated the component vega-item-toggle property isError`,
     createdTimestamp: 1687934508330,
     createdAtVersion: '1.36.0',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_BUTTON_LINK.DEPRECATED_EVENTFUL': {
     description: `Feature flag to deprecated eventful property`,
     createdTimestamp: 1689313658898,
     createdAtVersion: '1.36.1',
+    removedAfterVersion: '2.0.0',
   },
   'VEGA_DROPDOWN.RENAME_PREFIX_TO_PREFIX_ICON': {
     description: `Feature flag to rename prefix to prefixIcon`,
@@ -117,5 +124,15 @@ const FeatureFlagsMap = {
     createdTimestamp: 1706598728908,
     createdAtVersion: '2.0.0',
   },
+  'VEGA_FRAMEWORK.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD': {
+    description: `Feature flag to prevent call watch method before componnentDidLoad in all framework`,
+    createdTimestamp: 1708495728180,
+    createdAtVersion: '2.0.0',
+  },
+  'VEGA_REACT.ENABLE_ON_CHANGE_HANDLE_UNDER_LOW_VERSION': {
+    description: `Feature flag to enable the onChange event handle under react version 19 or below`,
+    createdTimestamp: 1709603823660,
+    createdAtVersion: '2.0.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/formatter/responsive-map-formatter/responsiveBorderRadiusFomatter.js

@@ -0,0 +1,56 @@
+import { isBreakpointsForPrefixType, isBorderRadiusTokenType, isDirectionalBorderRadiusType, } from '../../../types/typeGuard';
+import { LogUtility } from '../../../utils/log';
+import { ResponsiveClassStringFormatter } from './responsiveClassStringFormatter';
+import { BorderRadius } from '../../../constants/publicApi';
+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 = 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');
+  }
+}
+export default new ResponsiveBorderRadiusFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsiveFormatFacade.js

@@ -11,6 +11,8 @@ import ResponsiveFlexAlignItemFormatter from './responsiveFlexAlignItemFormatter
 import ResponsiveFlexJustifyContentFormatter from './responsiveFlexJustifyContentFormatter';
 import ResponsiveCustomFormatterSingleton from './responsiveCustomFormatter';
 import ResponsiveBoxDisplayFormatter from './responsiveBoxDisplayFormatter';
+import ResponsiveWidthAndHeightFormatter from './responsiveWidthAndHeightFormatter';
+import ResponsiveBorderRadiusFormatter from './responsiveBorderRadiusFomatter';
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -55,6 +57,10 @@ class ResponsiveFormatFacade {
         return ResponsiveFlexJustifyContentFormatter.format(input);
       case 'boxDisplay':
         return ResponsiveBoxDisplayFormatter.format(input);
+      case 'widthAndHeight':
+        return ResponsiveWidthAndHeightFormatter.format(input);
+      case 'corners':
+        return ResponsiveBorderRadiusFormatter.format(input);
       default:
         throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
     }

package/dist/collection/helpers/formatter/responsive-map-formatter/responsiveWidthAndHeightFormatter.js

@@ -0,0 +1,52 @@
+import { isResponsiveType } from '../../../types/typeGuard';
+import { getCurrentBreakpoint, createCompleteResponsiveMap } from '../../../utils/breakpoints';
+import { Spacing } from '../../../../design_tokens/js/spacing.js';
+/**
+ * A class for format WidthType and HeightType
+ *
+ * @augments ResponsiveWidthAndHeightFormatter
+ */
+export 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 this.formatWidthAndHeight(input[breakpoint]);
+    }
+    else {
+      return this.formatWidthAndHeight(input);
+    }
+  }
+  /**
+   * The function `formatWidthAndHeight` takes an input of type `WidthType` or `HeightType` and returns a
+   * string representation with 'px' appended if the input is a number or a string that can be converted
+   * to a number, otherwise it returns the input as is.
+   *
+   * @param {WidthType | HeightType} input - The `input` parameter in the `formatWidthAndHeight` function
+   * can be either a `number`, a `string` that can be converted to a number, or a key from the `Spacing`
+   * object.
+   * @returns {string} The `formatWidthAndHeight` function takes an input of type `WidthType` or `HeightType` and
+   * returns a string.
+   */
+  formatWidthAndHeight(input) {
+    if (!isNaN(Number(input))) {
+      return `${input}px`;
+    }
+    else if (Object.keys(Spacing).includes(input)) {
+      return `${Spacing[input]}px`;
+    }
+    else {
+      return input;
+    }
+  }
+}
+export default new ResponsiveWidthAndHeightFormatter();

package/dist/collection/helpers/formatter/state-formatter/stateBackgroundColorFormatter.js

@@ -0,0 +1,46 @@
+import { isBackgroundColorTokenType } from '../../../types/typeGuard';
+import { LogUtility } from '../../../utils/log';
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BackgroundColorMap, BackgroundColors } from '../../../constants/publicApi';
+/**
+ * The `StateBackgroundColorFormatter` class in TypeScript formats background color tokens
+ * and handles different CSS states.
+ */
+class StateBackgroundColorFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'hover', 'active', 'focus-visible'];
+  }
+  /**
+   * 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) {
+    if (isBackgroundColorTokenType(input)) {
+      const tokenValue = BackgroundColorMap[input];
+      return `background-color: ${tokenValue};`;
+    }
+    else {
+      LogUtility.warn(`The backgroundColor value ${input} is invalid, it must be a value of: `, BackgroundColors);
+      return '';
+    }
+  }
+  /**
+   * 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() {
+    return this.states;
+  }
+}
+export default new StateBackgroundColorFormatter();

package/dist/collection/helpers/formatter/state-formatter/stateBorderColorFormatter.js

@@ -0,0 +1,45 @@
+import { isBorderColorTokenType } from '../../../types/typeGuard';
+import { LogUtility } from '../../../utils/log';
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BorderColorMap, BorderColors } from '../../../constants/publicApi';
+/**
+ * The `StateBorderColorFormatter` class in TypeScript formats border color tokens based on
+ * input values and provides an array of CSS states.
+ */
+class StateBorderColorFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * 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) {
+    if (isBorderColorTokenType(input)) {
+      const tokenValue = BorderColorMap[input];
+      return `border-color: ${tokenValue};`;
+    }
+    else {
+      LogUtility.warn(`The borderColor value ${input} is invalid, it must be a value of: `, BorderColors);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+export default new StateBorderColorFormatter();

package/dist/collection/helpers/formatter/state-formatter/stateBorderFormatter.js

@@ -0,0 +1,47 @@
+import { isBorderTokenType } from '../../../types/typeGuard';
+import { LogUtility } from '../../../utils/log';
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { BorderMap, Borders } from '../../../constants/tokens/borders';
+/**
+ * The `StateBorderFormatter` class in TypeScript formats border token values into CSS border properties
+ * and provides state information.
+ */
+class StateBorderFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * 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) {
+    if (isBorderTokenType(input)) {
+      const tokenValue = BorderMap[input];
+      return `border: ${tokenValue};`;
+    }
+    else {
+      LogUtility.warn(`The border value ${input} is invalid, it must be a value of: `, Borders);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[] } An array of objects of type CssStatesType, which represents the states.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+export default new StateBorderFormatter();