@cleartrip/ct-design-field 4.0.0 → 5.1.0

package/dist/ct-design-field.umd.js

@@ -1,586 +1,2770 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-box'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-common-constants'), require('@cleartrip/ct-design-common-utils'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-dotted-loader'), require('@cleartrip/ct-design-card')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-box', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-common-constants', '@cleartrip/ct-design-common-utils', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-dotted-loader', '@cleartrip/ct-design-card'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemField = {}, global.jsxRuntime, global.React, global.ctDesignTheme, global.ctDesignTypography, global.ctDesignBox, global.ctDesignContainer, global.styled, global.ctDesignCommonConstants, global.ctDesignCommonUtils, global.ctDesignDivider, global.ctDesignDottedLoader, global.ctDesignCard));
-})(this, (function (exports, jsxRuntime, react, ctDesignTheme, ctDesignTypography, ctDesignBox, ctDesignContainer, styled, ctDesignCommonConstants, ctDesignCommonUtils, ctDesignDivider, ctDesignDottedLoader, ctDesignCard) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-box'), require('@cleartrip/ct-design-style-manager'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-divider'), require('@cleartrip/ct-design-common-constants'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-common-utils'), require('@cleartrip/ct-design-use-merge-refs'), require('@cleartrip/ct-design-dotted-loader')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-box', '@cleartrip/ct-design-style-manager', '@cleartrip/ct-design-container', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-divider', '@cleartrip/ct-design-common-constants', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-common-utils', '@cleartrip/ct-design-use-merge-refs', '@cleartrip/ct-design-dotted-loader'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemField = {}, global.jsxRuntime, global.React, global.ctDesignBox, global.ctDesignStyleManager, global.ctDesignContainer, global.ctDesignTypography, global.ctDesignDivider, global.ctDesignCommonConstants, global.ctDesignTheme, global.ctDesignCommonUtils, global.useMergeRefs, global.ctDesignDottedLoader));
+})(this, (function (exports, jsxRuntime, react, ctDesignBox, ctDesignStyleManager, ctDesignContainer, ctDesignTypography, ctDesignDivider, ctDesignCommonConstants, ctDesignTheme, ctDesignCommonUtils, useMergeRefs, ctDesignDottedLoader) { 'use strict';
 
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
+  var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
-
-    var __assign = function () {
-      __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+  var isDevelopment$1 = false;
+
+  /*
+
+  Based off glamor's StyleSheet, thanks Sunil ❤️
+
+  high performance StyleSheet for css-in-js systems
+
+  - uses multiple style tags behind the scenes for millions of rules
+  - uses `insertRule` for appending in production for *much* faster performance
+
+  // usage
+
+  import { StyleSheet } from '@emotion/sheet'
+
+  let styleSheet = new StyleSheet({ key: '', container: document.head })
+
+  styleSheet.insert('#box { border: 1px solid red; }')
+  - appends a css rule into the stylesheet
+
+  styleSheet.flush()
+  - empties the stylesheet of all its contents
+
+  */
+
+  function sheetForTag(tag) {
+    if (tag.sheet) {
+      return tag.sheet;
+    } // this weirdness brought to you by firefox
+
+    /* istanbul ignore next */
+
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].ownerNode === tag) {
+        return document.styleSheets[i];
+      }
+    } // this function should always return with a value
+    // TS can't understand it though so we make it stop complaining here
+
+    return undefined;
+  }
+  function createStyleElement(options) {
+    var tag = document.createElement('style');
+    tag.setAttribute('data-emotion', options.key);
+    if (options.nonce !== undefined) {
+      tag.setAttribute('nonce', options.nonce);
+    }
+    tag.appendChild(document.createTextNode(''));
+    tag.setAttribute('data-s', '');
+    return tag;
+  }
+  var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
+    function StyleSheet(options) {
+      var _this = this;
+      this._insertTag = function (tag) {
+        var before;
+        if (_this.tags.length === 0) {
+          if (_this.insertionPoint) {
+            before = _this.insertionPoint.nextSibling;
+          } else if (_this.prepend) {
+            before = _this.container.firstChild;
+          } else {
+            before = _this.before;
+          }
+        } else {
+          before = _this.tags[_this.tags.length - 1].nextSibling;
         }
-        return t;
+        _this.container.insertBefore(tag, before);
+        _this.tags.push(tag);
       };
-      return __assign.apply(this, arguments);
+      this.isSpeedy = options.speedy === undefined ? !isDevelopment$1 : options.speedy;
+      this.tags = [];
+      this.ctr = 0;
+      this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+      this.key = options.key;
+      this.container = options.container;
+      this.prepend = options.prepend;
+      this.insertionPoint = options.insertionPoint;
+      this.before = null;
+    }
+    var _proto = StyleSheet.prototype;
+    _proto.hydrate = function hydrate(nodes) {
+      nodes.forEach(this._insertTag);
     };
-    function __rest(s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    _proto.insert = function insert(rule) {
+      // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+      // it's 1 in dev because we insert source maps that map a single rule to a location
+      // and you can only have one source map per style tag
+      if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+        this._insertTag(createStyleElement(this));
       }
-      return t;
-    }
-    function __spreadArray(to, from, pack) {
-      if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-          ar[i] = from[i];
-        }
+      var tag = this.tags[this.tags.length - 1];
+      if (this.isSpeedy) {
+        var sheet = sheetForTag(tag);
+        try {
+          // this is the ultrafast version, works across browsers
+          // the big drawback is that the css won't be editable in devtools
+          sheet.insertRule(rule, sheet.cssRules.length);
+        } catch (e) {}
+      } else {
+        tag.appendChild(document.createTextNode(rule));
       }
-      return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+      this.ctr++;
+    };
+    _proto.flush = function flush() {
+      this.tags.forEach(function (tag) {
+        var _tag$parentNode;
+        return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
+      });
+      this.tags = [];
+      this.ctr = 0;
     };
+    return StyleSheet;
+  }();
 
-    var StyledFieldContainer = styled__default.default.div(function (_a) {
-        var borderColor = _a.borderColor, borderWidth = _a.borderWidth, theme = _a.theme, backgroundColor = _a.backgroundColor, cursor = _a.cursor, css = _a.css;
-        return (__assign({ borderColor: borderColor, borderWidth: borderWidth, borderStyle: theme.border.style.solid, borderRadius: theme.border.radius[8], backgroundColor: backgroundColor, cursor: "".concat(cursor, " !important"), boxSizing: 'border-box', position: 'relative', display: 'flex', alignItems: 'center' }, css));
-    });
+  var stylisExports = {};
+  var stylis = {
+    get exports(){ return stylisExports; },
+    set exports(v){ stylisExports = v; },
+  };
 
-    var StyledFieldPlaceholder = styled__default.default.label(function (_a) {
-        var position = _a.position, marginLeft = _a.marginLeft, top = _a.top, _b = _a.css, css = _b === void 0 ? {} : _b;
-        return (__assign({ position: position || 'absolute', display: 'flex', alignItems: 'center', transition: 'position 1s ease-in-out', marginLeft: marginLeft, top: top, pointerEvents: 'none' }, css));
-    });
+  (function (module, exports) {
+    (function (e, r) {
+      r(exports) ;
+    })(this, function (e) {
 
-    var StyledField = styled__default.default.input(function (_a) {
-        var theme = _a.theme, cursor = _a.cursor, color = _a.color, backgroundColor = _a.backgroundColor, height = _a.height, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom, paddingLeft = _a.paddingLeft, marginLeft = _a.marginLeft, paddingRight = _a.paddingRight, _b = _a.css, css = _b === void 0 ? {} : _b;
-        return (__assign({ width: '100%', border: 'none', outline: 'none', backgroundColor: backgroundColor, cursor: cursor, color: color, height: height, paddingTop: paddingTop, paddingBottom: paddingBottom, paddingRight: paddingRight, paddingLeft: paddingLeft, marginLeft: marginLeft, fontSize: theme.typography.size[16], fontWeight: theme.typography.weight.medium, lineHeight: theme.typography.lineHeight[24] }, css));
-    });
-
-    exports.FieldVariant = void 0;
-    (function (FieldVariant) {
-        FieldVariant["SM"] = "sm";
-        FieldVariant["MD"] = "md";
-    })(exports.FieldVariant || (exports.FieldVariant = {}));
-    exports.FieldType = void 0;
-    (function (FieldType) {
-        FieldType["TEXT"] = "text";
-        FieldType["NUMBER"] = "number";
-        FieldType["PHONE"] = "phone";
-    })(exports.FieldType || (exports.FieldType = {}));
-
-    var getFieldContainerBorderStyle = function (_a) {
-        var theme = _a.theme, hasError = _a.hasError, focus = _a.focus, disabled = _a.disabled;
-        if (hasError) {
-            return {
-                borderColor: theme.color.border.warning,
-                borderWidth: theme.border.width.md,
-            };
-        }
-        if (focus && !disabled) {
-            return {
-                borderColor: theme.color.border.primary,
-                borderWidth: theme.border.width.md,
-            };
-        }
+      var r = "-ms-";
+      var a = "-moz-";
+      var c = "-webkit-";
+      var n = "comm";
+      var t = "rule";
+      var s = "decl";
+      var i = "@page";
+      var u = "@media";
+      var o = "@import";
+      var f = "@charset";
+      var l = "@viewport";
+      var p = "@supports";
+      var h = "@document";
+      var v = "@namespace";
+      var d = "@keyframes";
+      var b = "@font-face";
+      var w = "@counter-style";
+      var m = "@font-feature-values";
+      var g = "@layer";
+      var k = Math.abs;
+      var $ = String.fromCharCode;
+      var x = Object.assign;
+      function E(e, r) {
+        return M(e, 0) ^ 45 ? (((r << 2 ^ M(e, 0)) << 2 ^ M(e, 1)) << 2 ^ M(e, 2)) << 2 ^ M(e, 3) : 0;
+      }
+      function y(e) {
+        return e.trim();
+      }
+      function T(e, r) {
+        return (e = r.exec(e)) ? e[0] : e;
+      }
+      function A(e, r, a) {
+        return e.replace(r, a);
+      }
+      function O(e, r) {
+        return e.indexOf(r);
+      }
+      function M(e, r) {
+        return e.charCodeAt(r) | 0;
+      }
+      function C(e, r, a) {
+        return e.slice(r, a);
+      }
+      function R(e) {
+        return e.length;
+      }
+      function S(e) {
+        return e.length;
+      }
+      function z(e, r) {
+        return r.push(e), e;
+      }
+      function N(e, r) {
+        return e.map(r).join("");
+      }
+      e.line = 1;
+      e.column = 1;
+      e.length = 0;
+      e.position = 0;
+      e.character = 0;
+      e.characters = "";
+      function P(r, a, c, n, t, s, i) {
         return {
-            borderColor: theme.color.border.disabledDark,
-            borderWidth: theme.border.width.sm,
+          value: r,
+          root: a,
+          parent: c,
+          type: n,
+          props: t,
+          children: s,
+          line: e.line,
+          column: e.column,
+          length: i,
+          return: ""
         };
-    };
-    var getFieldSpacingAndHeight = function (_a) {
-        var _b, _c;
-        var theme = _a.theme, variant = _a.variant, focus = _a.focus, value = _a.value, isPrefixComponent = _a.isPrefixComponent, disabledPlaceHolder = _a.disabledPlaceHolder;
-        var isFieldNotEmpty = focus || value.length > 0;
-        var valueWithPlaceholder = isFieldNotEmpty && !disabledPlaceHolder;
-        var leftMargin = isPrefixComponent ? (_b = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _b === void 0 ? void 0 : _b[13] : (_c = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _c === void 0 ? void 0 : _c[4];
-        var commonStyles = {
-            paddingLeft: leftMargin,
-            paddingRight: theme.spacing[4],
-        };
-        switch (variant) {
-            case exports.FieldVariant.SM: {
-                return __assign(__assign({}, commonStyles), { height: theme.size[10] });
-            }
-            case exports.FieldVariant.MD: {
-                return __assign(__assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
-            }
-            default: {
-                return __assign(__assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
-            }
+      }
+      function j(e, r) {
+        return x(P("", null, null, "", null, null, 0), e, {
+          length: -e.length
+        }, r);
+      }
+      function U() {
+        return e.character;
+      }
+      function _() {
+        e.character = e.position > 0 ? M(e.characters, --e.position) : 0;
+        if (e.column--, e.character === 10) e.column = 1, e.line--;
+        return e.character;
+      }
+      function F() {
+        e.character = e.position < e.length ? M(e.characters, e.position++) : 0;
+        if (e.column++, e.character === 10) e.column = 1, e.line++;
+        return e.character;
+      }
+      function I() {
+        return M(e.characters, e.position);
+      }
+      function L() {
+        return e.position;
+      }
+      function D(r, a) {
+        return C(e.characters, r, a);
+      }
+      function Y(e) {
+        switch (e) {
+          case 0:
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            return 5;
+          case 33:
+          case 43:
+          case 44:
+          case 47:
+          case 62:
+          case 64:
+          case 126:
+          case 59:
+          case 123:
+          case 125:
+            return 4;
+          case 58:
+            return 3;
+          case 34:
+          case 39:
+          case 40:
+          case 91:
+            return 2;
+          case 41:
+          case 93:
+            return 1;
         }
-    };
-    var getFieldContainerStyles = function (_a) {
-        var hasError = _a.hasError, theme = _a.theme, focus = _a.focus, disabled = _a.disabled;
-        var fieldContainerBorderStyle = getFieldContainerBorderStyle({
-            theme: theme,
-            hasError: hasError,
-            focus: focus,
-            disabled: disabled,
-        });
-        return __assign(__assign({}, fieldContainerBorderStyle), { backgroundColor: disabled ? theme.color.background.disabled : theme.color.background.neutral, cursor: disabled ? 'not-allowed' : 'auto' });
-    };
-    var getFieldPlaceholderStyles = function (_a) {
-        var _b, _c;
-        var theme = _a.theme, isFocused = _a.isFocused; _a.disabled; var variant = _a.variant, fieldType = _a.fieldType, _d = _a.isPrefixComponent, isPrefixComponent = _d === void 0 ? false : _d;
-        var leftMargin = isPrefixComponent ? (_b = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _b === void 0 ? void 0 : _b[13] : (_c = theme === null || theme === void 0 ? void 0 : theme.spacing) === null || _c === void 0 ? void 0 : _c[4];
-        var fieldPlaceholderStyles = {
-            position: 'absolute',
-            marginLeft: leftMargin,
-        };
-        if (variant === exports.FieldVariant.SM || fieldType === exports.FieldType.PHONE) {
-            return fieldPlaceholderStyles;
+        return 0;
+      }
+      function K(r) {
+        return e.line = e.column = 1, e.length = R(e.characters = r), e.position = 0, [];
+      }
+      function V(r) {
+        return e.characters = "", r;
+      }
+      function W(r) {
+        return y(D(e.position - 1, q(r === 91 ? r + 2 : r === 40 ? r + 1 : r)));
+      }
+      function B(e) {
+        return V(H(K(e)));
+      }
+      function G(r) {
+        while (e.character = I()) if (e.character < 33) F();else break;
+        return Y(r) > 2 || Y(e.character) > 3 ? "" : " ";
+      }
+      function H(r) {
+        while (F()) switch (Y(e.character)) {
+          case 0:
+            z(Q(e.position - 1), r);
+            break;
+          case 2:
+            z(W(e.character), r);
+            break;
+          default:
+            z($(e.character), r);
         }
-        if (isFocused) {
-            fieldPlaceholderStyles = __assign(__assign({}, fieldPlaceholderStyles), { top: theme === null || theme === void 0 ? void 0 : theme.spacing[2] });
+        return r;
+      }
+      function Z(r, a) {
+        while (--a && F()) if (e.character < 48 || e.character > 102 || e.character > 57 && e.character < 65 || e.character > 70 && e.character < 97) break;
+        return D(r, L() + (a < 6 && I() == 32 && F() == 32));
+      }
+      function q(r) {
+        while (F()) switch (e.character) {
+          case r:
+            return e.position;
+          case 34:
+          case 39:
+            if (r !== 34 && r !== 39) q(e.character);
+            break;
+          case 40:
+            if (r === 41) q(r);
+            break;
+          case 92:
+            F();
+            break;
         }
-        return fieldPlaceholderStyles;
-    };
-    var getFieldStyles = function (_a) {
-        var disabled = _a.disabled, theme = _a.theme, variant = _a.variant, focus = _a.focus, value = _a.value, type = _a.type, _b = _a.isPrefixComponent, isPrefixComponent = _b === void 0 ? false : _b, disabledPlaceHolder = _a.disabledPlaceHolder;
-        var fieldSpacingAndHeight = getFieldSpacingAndHeight({
-            theme: theme,
-            variant: variant,
-            focus: focus,
-            value: value,
-            type: type,
-            isPrefixComponent: isPrefixComponent,
-            disabledPlaceHolder: disabledPlaceHolder,
-        });
-        return __assign(__assign({}, fieldSpacingAndHeight), { cursor: disabled ? 'not-allowed' : 'auto', color: disabled ? theme.color.text.disabled : theme.color.text.primary, backgroundColor: disabled ? theme.color.background.disabled : 'transparent' });
-    };
-
-    var Field = react.forwardRef(function (_a, forwardedRef) {
-        var _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '' : _c, onChange = _a.onChange, prefix = _a.prefix, suffix = _a.suffix, _d = _a.variant, variant = _d === void 0 ? exports.FieldVariant.MD : _d, _e = _a.type, type = _e === void 0 ? exports.FieldType.TEXT : _e, prompt = _a.prompt, _f = _a.disabled, disabled = _f === void 0 ? false : _f; _a.prefixGap; _a.suffixGap; var css = _a.css, id = _a.id, autoFocus = _a.autoFocus, rootCss = _a.rootCss, _g = _a.styleConfig, styleConfig = _g === void 0 ? {} : _g, onFocus = _a.onFocus, onBlur = _a.onBlur, rest = __rest(_a, ["value", "placeholder", "onChange", "prefix", "suffix", "variant", "type", "prompt", "disabled", "prefixGap", "suffixGap", "css", "id", "autoFocus", "rootCss", "styleConfig", "onFocus", "onBlur"]);
-        var theme = ctDesignTheme.useTheme();
-        var rootBox = styleConfig.rootBox, fieldContainer = styleConfig.fieldContainer, placeholderLabel = styleConfig.placeholderLabel, placeholderTypography = styleConfig.placeholderTypography, field = styleConfig.field, promptBox = styleConfig.promptBox, promptIconContainer = styleConfig.promptIconContainer, promptMessageTypography = styleConfig.promptMessageTypography;
-        var _h = react.useState(autoFocus || false), focus = _h[0], setFocus = _h[1];
-        var _j = prompt || {}, _k = _j.hasError, hasError = _k === void 0 ? false : _k, promptIcon = _j.Icon, promptMessage = _j.message;
-        var isFocused = focus || value.length > 0;
-        var isPrefixComponent = react.isValidElement(prefix);
-        var disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
-        var fieldContainerStyles = getFieldContainerStyles({
-            variant: variant,
-            theme: theme,
-            hasError: hasError,
-            focus: focus,
-            value: value,
-            disabled: disabled,
-        });
-        var fieldPlaceholderStyles = getFieldPlaceholderStyles({
-            isFocused: isFocused,
-            theme: theme,
-            disabled: disabled,
-            variant: variant,
-            fieldType: type,
-            isPrefixComponent: isPrefixComponent,
-        });
-        var fieldStyles = getFieldStyles({
-            disabled: disabled,
-            theme: theme,
-            variant: variant,
-            focus: focus,
-            value: value,
-            type: type,
-            isPrefixComponent: isPrefixComponent,
-            disabledPlaceHolder: disabledPlaceHolder,
-        });
-        var onFieldChange = function (e) {
-            var value = e.target.value;
-            var isValidValue = true;
-            switch (type) {
-                case exports.FieldType.NUMBER: {
-                    if (value && !ctDesignCommonConstants.ONLY_NUMERIC.test(value)) {
-                        isValidValue = false;
-                    }
+        return e.position;
+      }
+      function J(r, a) {
+        while (F()) if (r + e.character === 47 + 10) break;else if (r + e.character === 42 + 42 && I() === 47) break;
+        return "/*" + D(a, e.position - 1) + "*" + $(r === 47 ? r : F());
+      }
+      function Q(r) {
+        while (!Y(I())) F();
+        return D(r, e.position);
+      }
+      function X(e) {
+        return V(ee("", null, null, null, [""], e = K(e), 0, [0], e));
+      }
+      function ee(e, r, a, c, n, t, s, i, u) {
+        var o = 0;
+        var f = 0;
+        var l = s;
+        var p = 0;
+        var h = 0;
+        var v = 0;
+        var d = 1;
+        var b = 1;
+        var w = 1;
+        var m = 0;
+        var g = "";
+        var k = n;
+        var x = t;
+        var E = c;
+        var y = g;
+        while (b) switch (v = m, m = F()) {
+          case 40:
+            if (v != 108 && M(y, l - 1) == 58) {
+              if (O(y += A(W(m), "&", "&\f"), "&\f") != -1) w = -1;
+              break;
+            }
+          case 34:
+          case 39:
+          case 91:
+            y += W(m);
+            break;
+          case 9:
+          case 10:
+          case 13:
+          case 32:
+            y += G(v);
+            break;
+          case 92:
+            y += Z(L() - 1, 7);
+            continue;
+          case 47:
+            switch (I()) {
+              case 42:
+              case 47:
+                z(ae(J(F(), L()), r, a), u);
+                break;
+              default:
+                y += "/";
+            }
+            break;
+          case 123 * d:
+            i[o++] = R(y) * w;
+          case 125 * d:
+          case 59:
+          case 0:
+            switch (m) {
+              case 0:
+              case 125:
+                b = 0;
+              case 59 + f:
+                if (w == -1) y = A(y, /\f/g, "");
+                if (h > 0 && R(y) - l) z(h > 32 ? ce(y + ";", c, a, l - 1) : ce(A(y, " ", "") + ";", c, a, l - 2), u);
+                break;
+              case 59:
+                y += ";";
+              default:
+                z(E = re(y, r, a, o, f, n, i, g, k = [], x = [], l), t);
+                if (m === 123) if (f === 0) ee(y, r, E, E, k, t, l, i, x);else switch (p === 99 && M(y, 3) === 110 ? 100 : p) {
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    ee(e, E, E, c && z(re(e, E, E, 0, 0, n, i, g, n, k = [], l), x), n, x, l, i, c ? k : x);
                     break;
+                  default:
+                    ee(y, E, E, E, [""], x, 0, i, x);
                 }
             }
-            if (isValidValue) {
-                onChange(e);
+            o = f = h = 0, d = w = 1, g = y = "", l = s;
+            break;
+          case 58:
+            l = 1 + R(y), h = v;
+          default:
+            if (d < 1) if (m == 123) --d;else if (m == 125 && d++ == 0 && _() == 125) continue;
+            switch (y += $(m), m * d) {
+              case 38:
+                w = f > 0 ? 1 : (y += "\f", -1);
+                break;
+              case 44:
+                i[o++] = (R(y) - 1) * w, w = 1;
+                break;
+              case 64:
+                if (I() === 45) y += W(F());
+                p = I(), f = l = R(g = y += Q(L())), m++;
+                break;
+              case 45:
+                if (v === 45 && R(y) == 2) d = 0;
             }
+        }
+        return t;
+      }
+      function re(e, r, a, c, n, s, i, u, o, f, l) {
+        var p = n - 1;
+        var h = n === 0 ? s : [""];
+        var v = S(h);
+        for (var d = 0, b = 0, w = 0; d < c; ++d) for (var m = 0, g = C(e, p + 1, p = k(b = i[d])), $ = e; m < v; ++m) if ($ = y(b > 0 ? h[m] + " " + g : A(g, /&\f/g, h[m]))) o[w++] = $;
+        return P(e, r, a, n === 0 ? t : u, o, f, l);
+      }
+      function ae(e, r, a) {
+        return P(e, r, a, n, $(U()), C(e, 2, -2), 0);
+      }
+      function ce(e, r, a, c) {
+        return P(e, r, a, s, C(e, 0, c), C(e, c + 1, -1), c);
+      }
+      function ne(e, n, t) {
+        switch (E(e, n)) {
+          case 5103:
+            return c + "print-" + e + e;
+          case 5737:
+          case 4201:
+          case 3177:
+          case 3433:
+          case 1641:
+          case 4457:
+          case 2921:
+          case 5572:
+          case 6356:
+          case 5844:
+          case 3191:
+          case 6645:
+          case 3005:
+          case 6391:
+          case 5879:
+          case 5623:
+          case 6135:
+          case 4599:
+          case 4855:
+          case 4215:
+          case 6389:
+          case 5109:
+          case 5365:
+          case 5621:
+          case 3829:
+            return c + e + e;
+          case 4789:
+            return a + e + e;
+          case 5349:
+          case 4246:
+          case 4810:
+          case 6968:
+          case 2756:
+            return c + e + a + e + r + e + e;
+          case 5936:
+            switch (M(e, n + 11)) {
+              case 114:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+              case 108:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+              case 45:
+                return c + e + r + A(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+            }
+          case 6828:
+          case 4268:
+          case 2903:
+            return c + e + r + e + e;
+          case 6165:
+            return c + e + r + "flex-" + e + e;
+          case 5187:
+            return c + e + A(e, /(\w+).+(:[^]+)/, c + "box-$1$2" + r + "flex-$1$2") + e;
+          case 5443:
+            return c + e + r + "flex-item-" + A(e, /flex-|-self/g, "") + (!T(e, /flex-|baseline/) ? r + "grid-row-" + A(e, /flex-|-self/g, "") : "") + e;
+          case 4675:
+            return c + e + r + "flex-line-pack" + A(e, /align-content|flex-|-self/g, "") + e;
+          case 5548:
+            return c + e + r + A(e, "shrink", "negative") + e;
+          case 5292:
+            return c + e + r + A(e, "basis", "preferred-size") + e;
+          case 6060:
+            return c + "box-" + A(e, "-grow", "") + c + e + r + A(e, "grow", "positive") + e;
+          case 4554:
+            return c + A(e, /([^-])(transform)/g, "$1" + c + "$2") + e;
+          case 6187:
+            return A(A(A(e, /(zoom-|grab)/, c + "$1"), /(image-set)/, c + "$1"), e, "") + e;
+          case 5495:
+          case 3959:
+            return A(e, /(image-set\([^]*)/, c + "$1" + "$`$1");
+          case 4968:
+            return A(A(e, /(.+:)(flex-)?(.*)/, c + "box-pack:$3" + r + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + c + e + e;
+          case 4200:
+            if (!T(e, /flex-|baseline/)) return r + "grid-column-align" + C(e, n) + e;
+            break;
+          case 2592:
+          case 3360:
+            return r + A(e, "template-", "") + e;
+          case 4384:
+          case 3616:
+            if (t && t.some(function (e, r) {
+              return n = r, T(e.props, /grid-\w+-end/);
+            })) {
+              return ~O(e + (t = t[n].value), "span") ? e : r + A(e, "-start", "") + e + r + "grid-row-span:" + (~O(t, "span") ? T(t, /\d+/) : +T(t, /\d+/) - +T(e, /\d+/)) + ";";
+            }
+            return r + A(e, "-start", "") + e;
+          case 4896:
+          case 4128:
+            return t && t.some(function (e) {
+              return T(e.props, /grid-\w+-start/);
+            }) ? e : r + A(A(e, "-end", "-span"), "span ", "") + e;
+          case 4095:
+          case 3583:
+          case 4068:
+          case 2532:
+            return A(e, /(.+)-inline(.+)/, c + "$1$2") + e;
+          case 8116:
+          case 7059:
+          case 5753:
+          case 5535:
+          case 5445:
+          case 5701:
+          case 4933:
+          case 4677:
+          case 5533:
+          case 5789:
+          case 5021:
+          case 4765:
+            if (R(e) - 1 - n > 6) switch (M(e, n + 1)) {
+              case 109:
+                if (M(e, n + 4) !== 45) break;
+              case 102:
+                return A(e, /(.+:)(.+)-([^]+)/, "$1" + c + "$2-$3" + "$1" + a + (M(e, n + 3) == 108 ? "$3" : "$2-$3")) + e;
+              case 115:
+                return ~O(e, "stretch") ? ne(A(e, "stretch", "fill-available"), n, t) + e : e;
+            }
+            break;
+          case 5152:
+          case 5920:
+            return A(e, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (a, c, n, t, s, i, u) {
+              return r + c + ":" + n + u + (t ? r + c + "-span:" + (s ? i : +i - +n) + u : "") + e;
+            });
+          case 4949:
+            if (M(e, n + 6) === 121) return A(e, ":", ":" + c) + e;
+            break;
+          case 6444:
+            switch (M(e, M(e, 14) === 45 ? 18 : 11)) {
+              case 120:
+                return A(e, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + c + (M(e, 14) === 45 ? "inline-" : "") + "box$3" + "$1" + c + "$2$3" + "$1" + r + "$2box$3") + e;
+              case 100:
+                return A(e, ":", ":" + r) + e;
+            }
+            break;
+          case 5719:
+          case 2647:
+          case 2135:
+          case 3927:
+          case 2391:
+            return A(e, "scroll-", "scroll-snap-") + e;
+        }
+        return e;
+      }
+      function te(e, r) {
+        var a = "";
+        var c = S(e);
+        for (var n = 0; n < c; n++) a += r(e[n], n, e, r) || "";
+        return a;
+      }
+      function se(e, r, a, c) {
+        switch (e.type) {
+          case g:
+            if (e.children.length) break;
+          case o:
+          case s:
+            return e.return = e.return || e.value;
+          case n:
+            return "";
+          case d:
+            return e.return = e.value + "{" + te(e.children, c) + "}";
+          case t:
+            e.value = e.props.join(",");
+        }
+        return R(a = te(e.children, c)) ? e.return = e.value + "{" + a + "}" : "";
+      }
+      function ie(e) {
+        var r = S(e);
+        return function (a, c, n, t) {
+          var s = "";
+          for (var i = 0; i < r; i++) s += e[i](a, c, n, t) || "";
+          return s;
         };
-        var customOnFocus = function (e) {
-            setFocus(true);
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-        };
-        var customOnBlur = function (e) {
-            setFocus(false);
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+      }
+      function ue(e) {
+        return function (r) {
+          if (!r.root) if (r = r.return) e(r);
         };
-        var getFieldPlaceholder = function () {
-            switch (variant) {
-                case exports.FieldVariant.SM: {
-                    if (!value.length) {
-                        return (jsxRuntime.jsx(StyledFieldPlaceholder, __assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
+      }
+      function oe(e, n, i, u) {
+        if (e.length > -1) if (!e.return) switch (e.type) {
+          case s:
+            e.return = ne(e.value, e.length, i);
+            return;
+          case d:
+            return te([j(e, {
+              value: A(e.value, "@", "@" + c)
+            })], u);
+          case t:
+            if (e.length) return N(e.props, function (n) {
+              switch (T(n, /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  return te([j(e, {
+                    props: [A(n, /:(read-\w+)/, ":" + a + "$1")]
+                  })], u);
+                case "::placeholder":
+                  return te([j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + c + "input-$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, ":" + a + "$1")]
+                  }), j(e, {
+                    props: [A(n, /:(plac\w+)/, r + "input-$1")]
+                  })], u);
+              }
+              return "";
+            });
+        }
+      }
+      function fe(e) {
+        switch (e.type) {
+          case t:
+            e.props = e.props.map(function (r) {
+              return N(B(r), function (r, a, c) {
+                switch (M(r, 0)) {
+                  case 12:
+                    return C(r, 1, R(r));
+                  case 0:
+                  case 40:
+                  case 43:
+                  case 62:
+                  case 126:
+                    return r;
+                  case 58:
+                    if (c[++a] === "global") c[a] = "", c[++a] = "\f" + C(c[a], a = 1, -1);
+                  case 32:
+                    return a === 1 ? "" : r;
+                  default:
+                    switch (a) {
+                      case 0:
+                        e = r;
+                        return S(c) > 1 ? "" : r;
+                      case a = S(c) - 1:
+                      case 2:
+                        return a === 2 ? r + e + e : r + e;
+                      default:
+                        return r;
                     }
-                    break;
                 }
-                case exports.FieldVariant.MD: {
-                    if (type === exports.FieldType.PHONE && value.length)
-                        return;
-                    return (jsxRuntime.jsx(StyledFieldPlaceholder, __assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: type === exports.FieldType.PHONE ? 'B1' : isFocused ? 'B3' : 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
-                }
-                default: {
-                    if (type === exports.FieldType.PHONE && value.length)
-                        return;
-                    return (jsxRuntime.jsx(StyledFieldPlaceholder, __assign({}, fieldPlaceholderStyles, { htmlFor: id, className: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.className, css: placeholderLabel === null || placeholderLabel === void 0 ? void 0 : placeholderLabel.css }, { children: jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: type === exports.FieldType.PHONE ? 'B1' : isFocused ? 'B3' : 'B1', color: 'tertiary', styleConfig: placeholderTypography }, { children: placeholder })) })));
-                }
-            }
-        };
-        return (jsxRuntime.jsxs(ctDesignBox.Box, __assign({ boxSize: 'micro', className: rootBox === null || rootBox === void 0 ? void 0 : rootBox.className, css: (rootBox === null || rootBox === void 0 ? void 0 : rootBox.css) || rootCss }, { children: [jsxRuntime.jsxs(StyledFieldContainer, __assign({}, fieldContainerStyles, { className: fieldContainer === null || fieldContainer === void 0 ? void 0 : fieldContainer.className, css: (fieldContainer === null || fieldContainer === void 0 ? void 0 : fieldContainer.css) || css }, { children: [react.isValidElement(prefix) && react.cloneElement(prefix, { focus: focus }), !disabledPlaceHolder && getFieldPlaceholder(), jsxRuntime.jsx(StyledField, __assign({}, fieldStyles, { id: id, value: value, onChange: onFieldChange, autoComplete: 'off', disabled: disabled, ref: forwardedRef, autoFocus: autoFocus, onFocus: customOnFocus, onBlur: customOnBlur, css: field === null || field === void 0 ? void 0 : field.css, className: field === null || field === void 0 ? void 0 : field.className }, rest)), react.isValidElement(suffix) && react.cloneElement(suffix, { focus: focus })] })), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, __assign({ boxSize: 'pico', horizontal: true, css: __assign({ paddingLeft: theme.spacing[4], paddingRight: theme.spacing[4], display: 'flex', alignItems: 'center' }, promptBox === null || promptBox === void 0 ? void 0 : promptBox.css), className: promptBox === null || promptBox === void 0 ? void 0 : promptBox.className }, { children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ css: __assign({ height: theme.size[4], width: theme.size[4], paddingRight: theme.spacing[1], display: 'flex', justifyContent: 'center', alignItems: 'center' }, promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.css), className: promptIconContainer === null || promptIconContainer === void 0 ? void 0 : promptIconContainer.className }, { children: promptIcon }))), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptMessageTypography }, { children: promptMessage })))] })))] })));
+              });
+            });
+        }
+      }
+      e.CHARSET = f;
+      e.COMMENT = n;
+      e.COUNTER_STYLE = w;
+      e.DECLARATION = s;
+      e.DOCUMENT = h;
+      e.FONT_FACE = b;
+      e.FONT_FEATURE_VALUES = m;
+      e.IMPORT = o;
+      e.KEYFRAMES = d;
+      e.LAYER = g;
+      e.MEDIA = u;
+      e.MOZ = a;
+      e.MS = r;
+      e.NAMESPACE = v;
+      e.PAGE = i;
+      e.RULESET = t;
+      e.SUPPORTS = p;
+      e.VIEWPORT = l;
+      e.WEBKIT = c;
+      e.abs = k;
+      e.alloc = K;
+      e.append = z;
+      e.assign = x;
+      e.caret = L;
+      e.char = U;
+      e.charat = M;
+      e.combine = N;
+      e.comment = ae;
+      e.commenter = J;
+      e.compile = X;
+      e.copy = j;
+      e.dealloc = V;
+      e.declaration = ce;
+      e.delimit = W;
+      e.delimiter = q;
+      e.escaping = Z;
+      e.from = $;
+      e.hash = E;
+      e.identifier = Q;
+      e.indexof = O;
+      e.match = T;
+      e.middleware = ie;
+      e.namespace = fe;
+      e.next = F;
+      e.node = P;
+      e.parse = ee;
+      e.peek = I;
+      e.prefix = ne;
+      e.prefixer = oe;
+      e.prev = _;
+      e.replace = A;
+      e.ruleset = re;
+      e.rulesheet = ue;
+      e.serialize = te;
+      e.sizeof = S;
+      e.slice = D;
+      e.stringify = se;
+      e.strlen = R;
+      e.substr = C;
+      e.token = Y;
+      e.tokenize = B;
+      e.tokenizer = H;
+      e.trim = y;
+      e.whitespace = G;
+      Object.defineProperty(e, "__esModule", {
+        value: true
+      });
     });
+  })(stylis, stylisExports);
+
+  var weakMemoize = function weakMemoize(func) {
+    var cache = new WeakMap();
+    return function (arg) {
+      if (cache.has(arg)) {
+        // Use non-null assertion because we just checked that the cache `has` it
+        // This allows us to remove `undefined` from the return value
+        return cache.get(arg);
+      }
+      var ret = func(arg);
+      cache.set(arg, ret);
+      return ret;
+    };
+  };
+
+  function memoize(fn) {
+    var cache = Object.create(null);
+    return function (arg) {
+      if (cache[arg] === undefined) cache[arg] = fn(arg);
+      return cache[arg];
+    };
+  }
+
+  var isBrowser$1 = typeof document !== 'undefined';
+  var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+    var previous = 0;
+    var character = 0;
+    while (true) {
+      previous = character;
+      character = stylisExports.peek(); // &\f
+
+      if (previous === 38 && character === 12) {
+        points[index] = 1;
+      }
+      if (stylisExports.token(character)) {
+        break;
+      }
+      stylisExports.next();
+    }
+    return stylisExports.slice(begin, stylisExports.position);
+  };
+  var toRules = function toRules(parsed, points) {
+    // pretend we've started with a comma
+    var index = -1;
+    var character = 44;
+    do {
+      switch (stylisExports.token(character)) {
+        case 0:
+          // &\f
+          if (character === 38 && stylisExports.peek() === 12) {
+            // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+            // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+            // and when it should just concatenate the outer and inner selectors
+            // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+            points[index] = 1;
+          }
+          parsed[index] += identifierWithPointTracking(stylisExports.position - 1, points, index);
+          break;
+        case 2:
+          parsed[index] += stylisExports.delimit(character);
+          break;
+        case 4:
+          // comma
+          if (character === 44) {
+            // colon
+            parsed[++index] = stylisExports.peek() === 58 ? '&\f' : '';
+            points[index] = parsed[index].length;
+            break;
+          }
+
+        // fallthrough
+
+        default:
+          parsed[index] += stylisExports.from(character);
+      }
+    } while (character = stylisExports.next());
+    return parsed;
+  };
+  var getRules = function getRules(value, points) {
+    return stylisExports.dealloc(toRules(stylisExports.alloc(value), points));
+  }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
+
+  var fixedElements = /* #__PURE__ */new WeakMap();
+  var compat = function compat(element) {
+    if (element.type !== 'rule' || !element.parent ||
+    // positive .length indicates that this rule contains pseudo
+    // negative .length indicates that this rule has been already prefixed
+    element.length < 1) {
+      return;
+    }
+    var value = element.value;
+    var parent = element.parent;
+    var isImplicitRule = element.column === parent.column && element.line === parent.line;
+    while (parent.type !== 'rule') {
+      parent = parent.parent;
+      if (!parent) return;
+    } // short-circuit for the simplest case
+
+    if (element.props.length === 1 && value.charCodeAt(0) !== 58
+    /* colon */ && !fixedElements.get(parent)) {
+      return;
+    } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+    // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
+
+    if (isImplicitRule) {
+      return;
+    }
+    fixedElements.set(element, true);
+    var points = [];
+    var rules = getRules(value, points);
+    var parentRules = parent.props;
+    for (var i = 0, k = 0; i < rules.length; i++) {
+      for (var j = 0; j < parentRules.length; j++, k++) {
+        element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
+      }
+    }
+  };
+  var removeLabel = function removeLabel(element) {
+    if (element.type === 'decl') {
+      var value = element.value;
+      if (
+      // charcode for l
+      value.charCodeAt(0) === 108 &&
+      // charcode for b
+      value.charCodeAt(2) === 98) {
+        // this ignores label
+        element["return"] = '';
+        element.value = '';
+      }
+    }
+  };
 
-    exports.CURSOR_OPERATION = void 0;
-    (function (CURSOR_OPERATION) {
-        CURSOR_OPERATION["NONE"] = "NONE";
-        CURSOR_OPERATION["ADD"] = "ADD";
-        CURSOR_OPERATION["SUBSTRACT"] = "SUBSTRACT";
-    })(exports.CURSOR_OPERATION || (exports.CURSOR_OPERATION = {}));
-
-    var CardField = react.forwardRef(function (_a, forwardedRef) {
-        var onChange = _a.onChange, _b = _a.gap, gap = _b === void 0 ? 4 : _b, value = _a.value, rest = __rest(_a, ["onChange", "gap", "value"]);
-        var cursorRef = react.useRef({
-            cursorPos: 0,
-            operation: exports.CURSOR_OPERATION.NONE,
+  /* eslint-disable no-fallthrough */
+
+  function prefix(value, length) {
+    switch (stylisExports.hash(value, length)) {
+      // color-adjust
+      case 5103:
+        return stylisExports.WEBKIT + 'print-' + value + value;
+      // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+      case 5737:
+      case 4201:
+      case 3177:
+      case 3433:
+      case 1641:
+      case 4457:
+      case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+      case 5572:
+      case 6356:
+      case 5844:
+      case 3191:
+      case 6645:
+      case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+      case 6391:
+      case 5879:
+      case 5623:
+      case 6135:
+      case 4599:
+      case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+      case 4215:
+      case 6389:
+      case 5109:
+      case 5365:
+      case 5621:
+      case 3829:
+        return stylisExports.WEBKIT + value + value;
+      // appearance, user-select, transform, hyphens, text-size-adjust
+
+      case 5349:
+      case 4246:
+      case 4810:
+      case 6968:
+      case 2756:
+        return stylisExports.WEBKIT + value + stylisExports.MOZ + value + stylisExports.MS + value + value;
+      // flex, flex-direction
+
+      case 6828:
+      case 4268:
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
+      // order
+
+      case 6165:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-' + value + value;
+      // align-items
+
+      case 5187:
+        return stylisExports.WEBKIT + value + stylisExports.replace(value, /(\w+).+(:[^]+)/, stylisExports.WEBKIT + 'box-$1$2' + stylisExports.MS + 'flex-$1$2') + value;
+      // align-self
+
+      case 5443:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-item-' + stylisExports.replace(value, /flex-|-self/, '') + value;
+      // align-content
+
+      case 4675:
+        return stylisExports.WEBKIT + value + stylisExports.MS + 'flex-line-pack' + stylisExports.replace(value, /align-content|flex-|-self/, '') + value;
+      // flex-shrink
+
+      case 5548:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'shrink', 'negative') + value;
+      // flex-basis
+
+      case 5292:
+        return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'basis', 'preferred-size') + value;
+      // flex-grow
+
+      case 6060:
+        return stylisExports.WEBKIT + 'box-' + stylisExports.replace(value, '-grow', '') + stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, 'grow', 'positive') + value;
+      // transition
+
+      case 4554:
+        return stylisExports.WEBKIT + stylisExports.replace(value, /([^-])(transform)/g, '$1' + stylisExports.WEBKIT + '$2') + value;
+      // cursor
+
+      case 6187:
+        return stylisExports.replace(stylisExports.replace(stylisExports.replace(value, /(zoom-|grab)/, stylisExports.WEBKIT + '$1'), /(image-set)/, stylisExports.WEBKIT + '$1'), value, '') + value;
+      // background, background-image
+
+      case 5495:
+      case 3959:
+        return stylisExports.replace(value, /(image-set\([^]*)/, stylisExports.WEBKIT + '$1' + '$`$1');
+      // justify-content
+
+      case 4968:
+        return stylisExports.replace(stylisExports.replace(value, /(.+:)(flex-)?(.*)/, stylisExports.WEBKIT + 'box-pack:$3' + stylisExports.MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + stylisExports.WEBKIT + value + value;
+      // (margin|padding)-inline-(start|end)
+
+      case 4095:
+      case 3583:
+      case 4068:
+      case 2532:
+        return stylisExports.replace(value, /(.+)-inline(.+)/, stylisExports.WEBKIT + '$1$2') + value;
+      // (min|max)?(width|height|inline-size|block-size)
+
+      case 8116:
+      case 7059:
+      case 5753:
+      case 5535:
+      case 5445:
+      case 5701:
+      case 4933:
+      case 4677:
+      case 5533:
+      case 5789:
+      case 5021:
+      case 4765:
+        // stretch, max-content, min-content, fill-available
+        if (stylisExports.strlen(value) - 1 - length > 6) switch (stylisExports.charat(value, length + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            // -
+            if (stylisExports.charat(value, length + 4) !== 45) break;
+          // (f)ill-available, (f)it-content
+
+          case 102:
+            return stylisExports.replace(value, /(.+:)(.+)-([^]+)/, '$1' + stylisExports.WEBKIT + '$2-$3' + '$1' + stylisExports.MOZ + (stylisExports.charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+          // (s)tretch
+
+          case 115:
+            return ~stylisExports.indexof(value, 'stretch') ? prefix(stylisExports.replace(value, 'stretch', 'fill-available'), length) + value : value;
+        }
+        break;
+      // position: sticky
+
+      case 4949:
+        // (s)ticky?
+        if (stylisExports.charat(value, length + 1) !== 115) break;
+      // display: (flex|inline-flex)
+
+      case 6444:
+        switch (stylisExports.charat(value, stylisExports.strlen(value) - 3 - (~stylisExports.indexof(value, '!important') && 10))) {
+          // stic(k)y
+          case 107:
+            return stylisExports.replace(value, ':', ':' + stylisExports.WEBKIT) + value;
+          // (inline-)?fl(e)x
+
+          case 101:
+            return stylisExports.replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + stylisExports.WEBKIT + (stylisExports.charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + stylisExports.WEBKIT + '$2$3' + '$1' + stylisExports.MS + '$2box$3') + value;
+        }
+        break;
+      // writing-mode
+
+      case 5936:
+        switch (stylisExports.charat(value, length + 11)) {
+          // vertical-l(r)
+          case 114:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+          // vertical-r(l)
+
+          case 108:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+          // horizontal(-)tb
+
+          case 45:
+            return stylisExports.WEBKIT + value + stylisExports.MS + stylisExports.replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+        }
+        return stylisExports.WEBKIT + value + stylisExports.MS + value + value;
+    }
+    return value;
+  }
+  var prefixer = function prefixer(element, index, children, callback) {
+    if (element.length > -1) if (!element["return"]) switch (element.type) {
+      case stylisExports.DECLARATION:
+        element["return"] = prefix(element.value, element.length);
+        break;
+      case stylisExports.KEYFRAMES:
+        return stylisExports.serialize([stylisExports.copy(element, {
+          value: stylisExports.replace(element.value, '@', '@' + stylisExports.WEBKIT)
+        })], callback);
+      case stylisExports.RULESET:
+        if (element.length) return stylisExports.combine(element.props, function (value) {
+          switch (stylisExports.match(value, /(::plac\w+|:read-\w+)/)) {
+            // :read-(only|write)
+            case ':read-only':
+            case ':read-write':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(read-\w+)/, ':' + stylisExports.MOZ + '$1')]
+              })], callback);
+            // :placeholder
+
+            case '::placeholder':
+              return stylisExports.serialize([stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.WEBKIT + 'input-$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, ':' + stylisExports.MOZ + '$1')]
+              }), stylisExports.copy(element, {
+                props: [stylisExports.replace(value, /:(plac\w+)/, stylisExports.MS + 'input-$1')]
+              })], callback);
+          }
+          return '';
         });
-        react.useEffect(function () {
-            var _a;
-            (_a = forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
-            cursorRef.current = {
-                cursorPos: cursorRef.current.cursorPos,
-                operation: exports.CURSOR_OPERATION.NONE,
+    }
+  };
+  var getServerStylisCache = isBrowser$1 ? undefined : weakMemoize(function () {
+    return memoize(function () {
+      return {};
+    });
+  });
+  var defaultStylisPlugins = [prefixer];
+  var createCache = function createCache(options) {
+    var key = options.key;
+    if (isBrowser$1 && key === 'css') {
+      var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
+      // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
+      // note this very very intentionally targets all style elements regardless of the key to ensure
+      // that creating a cache works inside of render of a React component
+
+      Array.prototype.forEach.call(ssrStyles, function (node) {
+        // we want to only move elements which have a space in the data-emotion attribute value
+        // because that indicates that it is an Emotion 11 server-side rendered style elements
+        // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
+        // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
+        // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
+        // will not result in the Emotion 10 styles being destroyed
+        var dataEmotionAttribute = node.getAttribute('data-emotion');
+        if (dataEmotionAttribute.indexOf(' ') === -1) {
+          return;
+        }
+        document.head.appendChild(node);
+        node.setAttribute('data-s', '');
+      });
+    }
+    var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+    var inserted = {};
+    var container;
+    var nodesToHydrate = [];
+    if (isBrowser$1) {
+      container = options.container || document.head;
+      Array.prototype.forEach.call(
+      // this means we will ignore elements which don't have a space in them which
+      // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+      document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
+        var attrib = node.getAttribute("data-emotion").split(' ');
+        for (var i = 1; i < attrib.length; i++) {
+          inserted[attrib[i]] = true;
+        }
+        nodesToHydrate.push(node);
+      });
+    }
+    var _insert;
+    var omnipresentPlugins = [compat, removeLabel];
+    if (!getServerStylisCache) {
+      var currentSheet;
+      var finalizingPlugins = [stylisExports.stringify, stylisExports.rulesheet(function (rule) {
+        currentSheet.insert(rule);
+      })];
+      var serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+      var stylis = function stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), serializer);
+      };
+      _insert = function insert(selector, serialized, sheet, shouldCache) {
+        currentSheet = sheet;
+        stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+        if (shouldCache) {
+          cache.inserted[serialized.name] = true;
+        }
+      };
+    } else {
+      var _finalizingPlugins = [stylisExports.stringify];
+      var _serializer = stylisExports.middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+      var _stylis = function _stylis(styles) {
+        return stylisExports.serialize(stylisExports.compile(styles), _serializer);
+      };
+      var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+      var getRules = function getRules(selector, serialized) {
+        var name = serialized.name;
+        if (serverStylisCache[name] === undefined) {
+          serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+        }
+        return serverStylisCache[name];
+      };
+      _insert = function _insert(selector, serialized, sheet, shouldCache) {
+        var name = serialized.name;
+        var rules = getRules(selector, serialized);
+        if (cache.compat === undefined) {
+          // in regular mode, we don't set the styles on the inserted cache
+          // since we don't need to and that would be wasting memory
+          // we return them so that they are rendered in a style tag
+          if (shouldCache) {
+            cache.inserted[name] = true;
+          }
+          return rules;
+        } else {
+          // in compat mode, we put the styles on the inserted cache so
+          // that emotion-server can pull out the styles
+          // except when we don't want to cache it which was in Global but now
+          // is nowhere but we don't want to do a major right now
+          // and just in case we're going to leave the case here
+          // it's also not affecting client side bundle size
+          // so it's really not a big deal
+          if (shouldCache) {
+            cache.inserted[name] = rules;
+          } else {
+            return rules;
+          }
+        }
+      };
+    }
+    var cache = {
+      key: key,
+      sheet: new StyleSheet({
+        key: key,
+        container: container,
+        nonce: options.nonce,
+        speedy: options.speedy,
+        prepend: options.prepend,
+        insertionPoint: options.insertionPoint
+      }),
+      nonce: options.nonce,
+      inserted: inserted,
+      registered: {},
+      insert: _insert
+    };
+    cache.sheet.hydrate(nodesToHydrate);
+    return cache;
+  };
+
+  /* eslint-disable */
+  // Inspired by https://github.com/garycourt/murmurhash-js
+  // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+  function murmur2(str) {
+    // 'm' and 'r' are mixing constants generated offline.
+    // They're not really 'magic', they just happen to work well.
+    // const m = 0x5bd1e995;
+    // const r = 24;
+    // Initialize the hash
+    var h = 0; // Mix 4 bytes at a time into the hash
+
+    var k,
+      i = 0,
+      len = str.length;
+    for (; len >= 4; ++i, len -= 4) {
+      k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+      k = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+      k ^= /* k >>> r: */
+      k >>> 24;
+      h = /* Math.imul(k, m): */
+      (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Handle the last few bytes of the input array
+
+    switch (len) {
+      case 3:
+        h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+      case 2:
+        h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+      case 1:
+        h ^= str.charCodeAt(i) & 0xff;
+        h = /* Math.imul(h, m): */
+        (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    } // Do a few final mixes of the hash to ensure the last few
+    // bytes are well-incorporated.
+
+    h ^= h >>> 13;
+    h = /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+    return ((h ^ h >>> 15) >>> 0).toString(36);
+  }
+
+  var unitlessKeys = {
+    animationIterationCount: 1,
+    aspectRatio: 1,
+    borderImageOutset: 1,
+    borderImageSlice: 1,
+    borderImageWidth: 1,
+    boxFlex: 1,
+    boxFlexGroup: 1,
+    boxOrdinalGroup: 1,
+    columnCount: 1,
+    columns: 1,
+    flex: 1,
+    flexGrow: 1,
+    flexPositive: 1,
+    flexShrink: 1,
+    flexNegative: 1,
+    flexOrder: 1,
+    gridRow: 1,
+    gridRowEnd: 1,
+    gridRowSpan: 1,
+    gridRowStart: 1,
+    gridColumn: 1,
+    gridColumnEnd: 1,
+    gridColumnSpan: 1,
+    gridColumnStart: 1,
+    msGridRow: 1,
+    msGridRowSpan: 1,
+    msGridColumn: 1,
+    msGridColumnSpan: 1,
+    fontWeight: 1,
+    lineHeight: 1,
+    opacity: 1,
+    order: 1,
+    orphans: 1,
+    scale: 1,
+    tabSize: 1,
+    widows: 1,
+    zIndex: 1,
+    zoom: 1,
+    WebkitLineClamp: 1,
+    // SVG-related properties
+    fillOpacity: 1,
+    floodOpacity: 1,
+    stopOpacity: 1,
+    strokeDasharray: 1,
+    strokeDashoffset: 1,
+    strokeMiterlimit: 1,
+    strokeOpacity: 1,
+    strokeWidth: 1
+  };
+
+  var isDevelopment = false;
+  var hyphenateRegex = /[A-Z]|^ms/g;
+  var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+  var isCustomProperty = function isCustomProperty(property) {
+    return property.charCodeAt(1) === 45;
+  };
+  var isProcessableValue = function isProcessableValue(value) {
+    return value != null && typeof value !== 'boolean';
+  };
+  var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+    return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+  });
+  var processStyleValue = function processStyleValue(key, value) {
+    switch (key) {
+      case 'animation':
+      case 'animationName':
+        {
+          if (typeof value === 'string') {
+            return value.replace(animationRegex, function (match, p1, p2) {
+              cursor = {
+                name: p1,
+                styles: p2,
+                next: cursor
+              };
+              return p1;
+            });
+          }
+        }
+    }
+    if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+      return value + 'px';
+    }
+    return value;
+  };
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+  function handleInterpolation(mergedProps, registered, interpolation) {
+    if (interpolation == null) {
+      return '';
+    }
+    var componentSelector = interpolation;
+    if (componentSelector.__emotion_styles !== undefined) {
+      return componentSelector;
+    }
+    switch (typeof interpolation) {
+      case 'boolean':
+        {
+          return '';
+        }
+      case 'object':
+        {
+          var keyframes = interpolation;
+          if (keyframes.anim === 1) {
+            cursor = {
+              name: keyframes.name,
+              styles: keyframes.styles,
+              next: cursor
             };
-        }, [value]);
-        var onFieldChange = function (e) {
-            onChange(ctDesignCommonUtils.removeNonNumerals(ctDesignCommonUtils.removeSpace(e.target.value)), e);
-            var selectionStart = e.target.selectionStart || 0;
-            switch (cursorRef.current.operation) {
-                case exports.CURSOR_OPERATION.SUBSTRACT: {
-                    --selectionStart;
-                    break;
-                }
-                case exports.CURSOR_OPERATION.ADD: {
-                    ++selectionStart;
-                    break;
-                }
+            return keyframes.name;
+          }
+          var serializedStyles = interpolation;
+          if (serializedStyles.styles !== undefined) {
+            var next = serializedStyles.next;
+            if (next !== undefined) {
+              // not the most efficient thing ever but this is a pretty rare case
+              // and there will be very few iterations of this generally
+              while (next !== undefined) {
+                cursor = {
+                  name: next.name,
+                  styles: next.styles,
+                  next: cursor
+                };
+                next = next.next;
+              }
             }
-            cursorRef.current = {
-                cursorPos: selectionStart,
-                operation: exports.CURSOR_OPERATION.NONE,
-            };
-            setTimeout(function () {
-                var _a;
-                (_a = forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
-            }, 0);
-        };
-        var onKeyDown = function (e) {
-            var _a;
-            var oldValues = ctDesignCommonUtils.removeNonNumerals(ctDesignCommonUtils.removeSpace(e.target.value));
-            var cursorOpration = {
-                cursorPos: cursorRef.current.cursorPos,
-                operation: exports.CURSOR_OPERATION.NONE,
-            };
-            switch (e.code) {
-                case 'Backspace': {
-                    cursorOpration.operation = exports.CURSOR_OPERATION.NONE;
-                    break;
-                }
-                case 'Space': {
-                    cursorOpration.operation = exports.CURSOR_OPERATION.SUBSTRACT;
-                    break;
+            var styles = serializedStyles.styles + ";";
+            return styles;
+          }
+          return createStringFromObject(mergedProps, registered, interpolation);
+        }
+      case 'function':
+        {
+          if (mergedProps !== undefined) {
+            var previousCursor = cursor;
+            var result = interpolation(mergedProps);
+            cursor = previousCursor;
+            return handleInterpolation(mergedProps, registered, result);
+          }
+          break;
+        }
+    } // finalize string values (regular strings and functions interpolated into css calls)
+
+    var asString = interpolation;
+    if (registered == null) {
+      return asString;
+    }
+    var cached = registered[asString];
+    return cached !== undefined ? cached : asString;
+  }
+  function createStringFromObject(mergedProps, registered, obj) {
+    var string = '';
+    if (Array.isArray(obj)) {
+      for (var i = 0; i < obj.length; i++) {
+        string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+      }
+    } else {
+      for (var key in obj) {
+        var value = obj[key];
+        if (typeof value !== 'object') {
+          var asString = value;
+          if (registered != null && registered[asString] !== undefined) {
+            string += key + "{" + registered[asString] + "}";
+          } else if (isProcessableValue(asString)) {
+            string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+          }
+        } else {
+          if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {
+            throw new Error(noComponentSelectorMessage);
+          }
+          if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+            for (var _i = 0; _i < value.length; _i++) {
+              if (isProcessableValue(value[_i])) {
+                string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+              }
+            }
+          } else {
+            var interpolated = handleInterpolation(mergedProps, registered, value);
+            switch (key) {
+              case 'animation':
+              case 'animationName':
+                {
+                  string += processStyleName(key) + ":" + interpolated + ";";
+                  break;
                 }
-                default: {
-                    if (oldValues.length % gap === 0) {
-                        cursorOpration.operation = exports.CURSOR_OPERATION.ADD;
-                    }
+              default:
+                {
+                  string += key + "{" + interpolated + "}";
                 }
             }
-            cursorRef.current = cursorOpration;
-            (_a = rest === null || rest === void 0 ? void 0 : rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-        };
-        return (jsxRuntime.jsx(Field, __assign({}, rest, { type: exports.FieldType.TEXT, ref: forwardedRef, onChange: onFieldChange, onKeyDown: onKeyDown, value: ctDesignCommonUtils.addSpaceAtInterval(value, gap) })));
-    });
+          }
+        }
+      }
+    }
+    return string;
+  }
+  var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+  // keyframes are stored on the SerializedStyles object as a linked list
+
+  var cursor;
+  function serializeStyles(args, registered, mergedProps) {
+    if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+      return args[0];
+    }
+    var stringMode = true;
+    var styles = '';
+    cursor = undefined;
+    var strings = args[0];
+    if (strings == null || strings.raw === undefined) {
+      stringMode = false;
+      styles += handleInterpolation(mergedProps, registered, strings);
+    } else {
+      var asTemplateStringsArr = strings;
+      styles += asTemplateStringsArr[0];
+    } // we start at 1 since we've already handled the first arg
 
-    function CheckCircle(props) {
-      return jsxRuntime.jsxs("svg", __assign({
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: 16,
-        height: 16,
-        fill: 'none'
-      }, props, {
-        children: [jsxRuntime.jsx("mask", __assign({
-          id: 'a',
-          width: 16,
-          height: 16,
-          x: 0,
-          y: 0,
-          maskUnits: 'userSpaceOnUse',
-          style: {
-            maskType: 'alpha'
-          }
-        }, {
-          children: jsxRuntime.jsx("path", {
-            fill: '#D9D9D9',
-            d: 'M0 0h16v16H0z'
-          })
-        })), jsxRuntime.jsx("g", __assign({
-          mask: 'url(#a)'
-        }, {
-          children: jsxRuntime.jsx("path", {
-            fill: '#11A670',
-            d: 'M7.033 9.667 5.367 7.983a.293.293 0 0 0-.234-.092A.354.354 0 0 0 4.9 8a.32.32 0 0 0 0 .467l1.767 1.766c.1.1.225.15.374.15a.51.51 0 0 0 .376-.15l3.666-3.666a.293.293 0 0 0 .092-.234.354.354 0 0 0-.108-.233.32.32 0 0 0-.467 0L7.033 9.667ZM8 14a5.805 5.805 0 0 1-2.341-.475 6.096 6.096 0 0 1-1.9-1.284 6.095 6.095 0 0 1-1.284-1.9A5.806 5.806 0 0 1 2 8c0-.833.158-1.614.475-2.342a6.106 6.106 0 0 1 1.284-1.9 6.101 6.101 0 0 1 1.9-1.283A5.806 5.806 0 0 1 8 2a5.81 5.81 0 0 1 2.342.475 6.11 6.11 0 0 1 1.9 1.283c.539.54.966 1.172 1.283 1.9A5.81 5.81 0 0 1 14 8c0 .833-.158 1.614-.475 2.341a6.1 6.1 0 0 1-1.283 1.9c-.54.54-1.172.967-1.9 1.284A5.81 5.81 0 0 1 8 14Zm0-.667c1.478 0 2.736-.519 3.775-1.558 1.039-1.039 1.558-2.297 1.558-3.775 0-1.478-.519-2.736-1.558-3.775C10.736 3.186 9.478 2.667 8 2.667c-1.478 0-2.736.519-3.775 1.558C3.186 5.264 2.667 6.522 2.667 8c0 1.478.52 2.736 1.558 3.775C5.264 12.814 6.522 13.333 8 13.333Z'
-          })
-        }))]
-      }));
+    for (var i = 1; i < args.length; i++) {
+      styles += handleInterpolation(mergedProps, registered, args[i]);
+      if (stringMode) {
+        var templateStringsArr = strings;
+        styles += templateStringsArr[i];
+      }
+    } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+    labelPattern.lastIndex = 0;
+    var identifierName = '';
+    var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+    while ((match = labelPattern.exec(styles)) !== null) {
+      identifierName += '-' + match[1];
     }
-    var DownChevron = function (_a) {
-      var _b = _a.color,
-        color = _b === void 0 ? '#1A1A1A' : _b,
-        rest = __rest(_a, ["color"]);
-      return jsxRuntime.jsx("svg", __assign({
-        xmlns: 'http://www.w3.org/2000/svg',
-        width: '12',
-        height: '12',
-        fill: 'none',
-        viewBox: '0 0 12 12'
-      }, rest, {
-        children: jsxRuntime.jsx("path", {
-          stroke: color,
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '2',
-          d: 'M2 4l4 4 4-4'
-        })
-      }));
+    var name = murmur2(styles) + identifierName;
+    return {
+      name: name,
+      styles: styles,
+      next: cursor
     };
+  }
 
-    var PhoneFieldPrefix = react.forwardRef(function (_a, forwardedRef) {
-        var countryCode = _a.countryCode, _b = _a.disabled, disabled = _b === void 0 ? false : _b, flagIcon = _a.flagIcon, onDropdownClick = _a.onDropdownClick, showDropdownIcon = _a.showDropdownIcon;
-        var theme = ctDesignTheme.useTheme();
-        var onClick = function () {
-            if (disabled)
-                return;
-            onDropdownClick === null || onDropdownClick === void 0 ? void 0 : onDropdownClick();
-        };
-        return (jsxRuntime.jsxs(ctDesignBox.Box, __assign({ boxSize: 'micro', horizontal: true, css: {
-                alignItems: 'center',
-                justifyContent: 'center',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                paddingLeft: '16px',
-            }, onClick: onClick, ref: forwardedRef }, { children: [flagIcon && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: theme.size[6], width: theme.size[6] }, { children: flagIcon }))), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ css: { minWidth: 'fit-content' }, variant: 'B1', color: disabled ? 'disabled' : 'primary', isClickable: true }, { children: countryCode })), showDropdownIcon && jsxRuntime.jsx(DownChevron, { color: disabled ? theme.color.text.disabled : theme.color.text.primary }), jsxRuntime.jsx(ctDesignDivider.Divider, { width: '1px', height: '24px', css: { borderBottom: "24px ".concat(theme.color.background.disabledDark, " solid") } })] })));
+  var isBrowser = typeof document !== 'undefined';
+  function getRegisteredStyles(registered, registeredStyles, classNames) {
+    var rawClassName = '';
+    classNames.split(' ').forEach(function (className) {
+      if (registered[className] !== undefined) {
+        registeredStyles.push(registered[className] + ";");
+      } else if (className) {
+        rawClassName += className + " ";
+      }
     });
+    return rawClassName;
+  }
+  var registerStyles = function registerStyles(cache, serialized, isStringTag) {
+    var className = cache.key + "-" + serialized.name;
+    if (
+    // we only need to add the styles to the registered cache if the
+    // class name could be used further down
+    // the tree but if it's a string tag, we know it won't
+    // so we don't have to add it to registered cache.
+    // this improves memory usage since we can avoid storing the whole style string
+    (isStringTag === false ||
+    // we need to always store it if we're in compat mode and
+    // in node since emotion-server relies on whether a style is in
+    // the registered cache to know whether a style is global or not
+    // also, note that this check will be dead code eliminated in the browser
+    isBrowser === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+      cache.registered[className] = serialized.styles;
+    }
+  };
+  var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+    registerStyles(cache, serialized, isStringTag);
+    var className = cache.key + "-" + serialized.name;
+    if (cache.inserted[serialized.name] === undefined) {
+      var stylesForSSR = '';
+      var current = serialized;
+      do {
+        var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+        if (!isBrowser && maybeStyles !== undefined) {
+          stylesForSSR += maybeStyles;
+        }
+        current = current.next;
+      } while (current !== undefined);
+      if (!isBrowser && stylesForSSR.length !== 0) {
+        return stylesForSSR;
+      }
+    }
+  };
 
-    var PhoneField = react.forwardRef(function (_a, forwardedRef) {
-        var max = _a.max, flagIcon = _a.flagIcon, countryCode = _a.countryCode, showDropdownIcon = _a.showDropdownIcon, onChange = _a.onChange, onDropdownClick = _a.onDropdownClick, disabled = _a.disabled, rest = __rest(_a, ["max", "flagIcon", "countryCode", "showDropdownIcon", "onChange", "onDropdownClick", "disabled"]);
-        var theme = styled.useTheme();
-        var _b = react.useState(0), prefixWidth = _b[0], setPrefixWidth = _b[1];
-        var onFieldChange = function (event) {
-            var value = event.target.value;
-            var isValidValue = value ? new RegExp(ctDesignCommonConstants.ONLY_NUMERIC).test(value) : true;
-            if (value.length <= max && isValidValue) {
-                onChange(event);
-            }
-        };
-        var calculatePrefixWidth = react.useCallback(function (node) {
-            var _a;
-            if (node) {
-                setPrefixWidth(((_a = node.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0) + 16);
+  function insertWithoutScoping(cache, serialized) {
+    if (cache.inserted[serialized.name] === undefined) {
+      return cache.insert('', serialized, cache.sheet, true);
+    }
+  }
+  function merge(registered, css, className) {
+    var registeredStyles = [];
+    var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+    if (registeredStyles.length < 2) {
+      return className;
+    }
+    return rawClassName + css(registeredStyles);
+  }
+  var createEmotion = function createEmotion(options) {
+    var cache = createCache(options);
+    cache.sheet.speedy = function (value) {
+      this.isSpeedy = value;
+    };
+    cache.compat = true;
+    var css = function css() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var serialized = serializeStyles(args, cache.registered, undefined);
+      insertStyles(cache, serialized, false);
+      return cache.key + "-" + serialized.name;
+    };
+    var keyframes = function keyframes() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      var animation = "animation-" + serialized.name;
+      insertWithoutScoping(cache, {
+        name: serialized.name,
+        styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+      });
+      return animation;
+    };
+    var injectGlobal = function injectGlobal() {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      var serialized = serializeStyles(args, cache.registered);
+      insertWithoutScoping(cache, serialized);
+    };
+    var cx = function cx() {
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+      return merge(cache.registered, css, classnames(args));
+    };
+    return {
+      css: css,
+      cx: cx,
+      injectGlobal: injectGlobal,
+      keyframes: keyframes,
+      hydrate: function hydrate(ids) {
+        ids.forEach(function (key) {
+          cache.inserted[key] = true;
+        });
+      },
+      flush: function flush() {
+        cache.registered = {};
+        cache.inserted = {};
+        cache.sheet.flush();
+      },
+      sheet: cache.sheet,
+      cache: cache,
+      getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+      merge: merge.bind(null, cache.registered, css)
+    };
+  };
+  var classnames = function classnames(args) {
+    var cls = '';
+    for (var i = 0; i < args.length; i++) {
+      var arg = args[i];
+      if (arg == null) continue;
+      var toAdd = void 0;
+      switch (typeof arg) {
+        case 'boolean':
+          break;
+        case 'object':
+          {
+            if (Array.isArray(arg)) {
+              toAdd = classnames(arg);
+            } else {
+              toAdd = '';
+              for (var k in arg) {
+                if (arg[k] && k) {
+                  toAdd && (toAdd += ' ');
+                  toAdd += k;
+                }
+              }
             }
-        }, [countryCode, flagIcon]);
-        var customPlaceHolderStyling = {
-            marginLeft: prefixWidth,
-        };
-        return (jsxRuntime.jsx(Field, __assign({}, rest, { type: exports.FieldType.PHONE, ref: forwardedRef, onChange: onFieldChange, disabled: disabled, prefix: jsxRuntime.jsx(PhoneFieldPrefix, { flagIcon: flagIcon, countryCode: countryCode, showDropdownIcon: showDropdownIcon, onDropdownClick: onDropdownClick, disabled: disabled, ref: calculatePrefixWidth }), styleConfig: {
-                field: {
-                    css: {
-                        paddingTop: 'unset',
-                        paddingBottom: 'unset',
-                        paddingLeft: theme.spacing[4],
-                    },
-                },
-                placeholderLabel: {
-                    css: __assign({}, customPlaceHolderStyling),
-                },
-            } })));
-    });
+            break;
+          }
+        default:
+          {
+            toAdd = arg;
+          }
+      }
+      if (toAdd) {
+        cls && (cls += ' ');
+        cls += toAdd;
+      }
+    }
+    return cls;
+  };
 
-    var FieldIcon = function (_a) {
-        var icon = _a.icon, onClick = _a.onClick, focus = _a.focus, focusedIcon = _a.focusedIcon, css = _a.css;
-        var theme = ctDesignTheme.useTheme();
-        var iconPrefix = icon;
-        if (focus && focusedIcon) {
-            iconPrefix = focusedIcon;
-        }
-        var showIconWithoutPointer = !onClick;
-        var iconStyles = showIconWithoutPointer ? { pointerEvents: 'none' } : { cursor: 'pointer' };
-        return (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ height: theme.size[6], width: theme.size[6], display: 'flex', alignItems: 'center', justifyContent: 'center', onClick: onClick, css: __assign(__assign({ position: 'absolute' }, iconStyles), css), marginLeft: theme.spacing[4] }, { children: iconPrefix })));
-    };
+  var _createEmotion = createEmotion({
+      key: 'css'
+    }),
+    css = _createEmotion.css;
 
-    var FieldAction = function (_a) {
-        var _b = _a.actionsList, actionsList = _b === void 0 ? [] : _b;
-        return (jsxRuntime.jsx(ctDesignBox.Box, __assign({ boxSize: 'tiny', horizontal: true, css: { paddingRight: '16px' } }, { children: actionsList.map(function (actionItem) {
-                var _a = actionItem || {}, label = _a.label, color = _a.color, onClick = _a.onClick, isDisabled = _a.isDisabled, isLoading = _a.isLoading;
-                if (isLoading) {
-                    return jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {});
-                }
-                return (jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'HM4', color: isDisabled ? ctDesignTypography.TypographyColor.DISABLED : color, onClick: !isDisabled ? onClick : function () { }, isClickable: true, isDisabled: isDisabled }, { children: label })));
-            }) })));
-    };
+  exports.FieldVariant = void 0;
+  (function (FieldVariant) {
+      FieldVariant["SM"] = "sm";
+      FieldVariant["MD"] = "md";
+  })(exports.FieldVariant || (exports.FieldVariant = {}));
+  exports.FieldType = void 0;
+  (function (FieldType) {
+      FieldType["TEXT"] = "text";
+      FieldType["NUMBER"] = "number";
+      FieldType["PHONE"] = "phone";
+  })(exports.FieldType || (exports.FieldType = {}));
 
-    var SingleOTPField = react.forwardRef(function (_a, forwardedRef) {
-        var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, otpBoxCss = _a.otpBoxCss, rest = __rest(_a, ["isLoading", "otpBoxCss"]);
-        var theme = ctDesignTheme.useTheme();
-        var loadingStyles = isLoading
-            ? {
-                backgroundColor: 'unset',
-            }
-            : {};
-        var OTP_FIELD_TEXT_STYLING = __assign(__assign({}, ctDesignTypography.getTypographyStyles({ theme: theme, variant: ctDesignTypography.TypographyVariant.HM1 })), { letterSpacing: ' -0.25px', textAlign: 'center', padding: theme.spacing[3] });
-        return (jsxRuntime.jsx(Field, __assign({ ref: forwardedRef, disabled: isLoading, styleConfig: {
-                field: {
-                    css: __assign(__assign(__assign({}, otpBoxCss), OTP_FIELD_TEXT_STYLING), loadingStyles),
-                },
-                fieldContainer: {
-                    css: __assign({}, loadingStyles),
-                },
-            } }, rest)));
-    });
+  const getFieldContainerBorderStyle = ({ theme, hasError, focus, disabled, }) => {
+      if (hasError) {
+          return { borderStyle: 'solid', borderColor: theme.color.border.warning, borderWidth: theme.border.width.md };
+      }
+      if (focus && !disabled) {
+          return { borderStyle: 'solid', borderColor: theme.color.border.primary, borderWidth: theme.border.width.md };
+      }
+      return { borderStyle: 'solid', borderColor: theme.color.border.disabledDark, borderWidth: theme.border.width.sm };
+  };
+  const getFieldSpacingAndHeight = ({ isLabeledPlaceholder, theme, variant, focus, value, disabledPlaceHolder, customSpacingTop = 4, }) => {
+      const isFieldNotEmpty = focus || value.length > 0;
+      const valueWithPlaceholder = isFieldNotEmpty && !disabledPlaceHolder;
+      const commonStyles = {
+          paddingRight: theme.spacing[4],
+          paddingLeft: theme.spacing[4],
+      };
+      switch (variant) {
+          case exports.FieldVariant.SM: {
+              return Object.assign(Object.assign({}, commonStyles), { height: theme.size[10] });
+          }
+          case exports.FieldVariant.MD: {
+              return Object.assign(Object.assign({}, commonStyles), { height: theme.size[14], paddingTop: (isLabeledPlaceholder && focus) || (isLabeledPlaceholder && value.length > 0)
+                      ? 24
+                      : valueWithPlaceholder
+                          ? theme.spacing[customSpacingTop]
+                          : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
+          }
+          default: {
+              return Object.assign(Object.assign({}, commonStyles), { height: theme.size[14], paddingTop: valueWithPlaceholder ? theme.spacing[6] : theme.spacing[4], paddingBottom: valueWithPlaceholder ? theme.spacing[2] : theme.spacing[4] });
+          }
+      }
+  };
+  const getFieldContainerStyles = ({ hasError, theme, focus, disabled, variant, value, customSpacingTop, }) => {
+      const fieldContainerBorderStyle = getFieldContainerBorderStyle({
+          theme,
+          hasError,
+          focus,
+          disabled,
+      });
+      const { height } = getFieldSpacingAndHeight({
+          theme,
+          variant,
+          focus,
+          value,
+          customSpacingTop,
+      });
+      return Object.assign(Object.assign({}, fieldContainerBorderStyle), { backgroundColor: disabled ? theme.color.background.disabled : theme.color.background.neutral, height });
+  };
+  const getFieldPlaceholderStyles = ({ isFocused, variant, fieldType, }) => {
+      if (variant === exports.FieldVariant.SM) {
+          return { top: 8 };
+      }
+      if (fieldType === exports.FieldType.PHONE) {
+          return {};
+      }
+      if (isFocused) {
+          return { transform: [{ translateY: -12 }] };
+      }
+      return {};
+  };
+  const getFieldStyles = ({ isLabeledPlaceholder, disabled, theme, variant, focus, value, type, isPrefixComponent = false, disabledPlaceHolder, }) => {
+      const fieldSpacingAndHeight = getFieldSpacingAndHeight({
+          isLabeledPlaceholder,
+          theme,
+          variant,
+          focus,
+          value,
+          type,
+          isPrefixComponent,
+          disabledPlaceHolder,
+          customSpacingTop: 2,
+      });
+      return Object.assign(Object.assign({}, fieldSpacingAndHeight), { backgroundColor: 'transparent', color: disabled ? theme.color.text.disabled : theme.color.text.primary });
+  };
+  const getTypographyVariant = (theme, variant) => {
+      switch (variant) {
+          case ctDesignTypography.TypographyVariant.HD1: {
+              return {
+                  fontSize: theme.typography.size[48],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[56],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HD2: {
+              return {
+                  fontSize: theme.typography.size[40],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[48],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HD3: {
+              return {
+                  fontSize: theme.typography.size[32],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[40],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HM1: {
+              return {
+                  fontSize: theme.typography.size[24],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[32],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HM2: {
+              return {
+                  fontSize: theme.typography.size[20],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[28],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HM3: {
+              return {
+                  fontSize: theme.typography.size[16],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[24],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.HM4: {
+              return {
+                  fontSize: theme.typography.size[14],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[20],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B1: {
+              return {
+                  fontSize: theme.typography.size[16],
+                  fontWeight: theme.typography.weight.medium,
+                  lineHeight: theme.typography.lineHeight[24],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B2: {
+              return {
+                  fontSize: theme.typography.size[14],
+                  fontWeight: theme.typography.weight.medium,
+                  lineHeight: theme.typography.lineHeight[20],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B3: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.medium,
+                  lineHeight: theme.typography.lineHeight[16],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B3CAPS: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[16],
+                  letterSpacing: theme.typography.letterSpacing.point4,
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B4: {
+              return {
+                  fontSize: theme.typography.size[10],
+                  fontWeight: theme.typography.weight.medium,
+                  lineHeight: theme.typography.lineHeight[14],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.B4CAPS: {
+              return {
+                  fontSize: theme.typography.size[10],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[12],
+                  letterSpacing: theme.typography.letterSpacing.point4,
+              };
+          }
+          case ctDesignTypography.TypographyVariant.P1: {
+              return {
+                  fontSize: theme.typography.size[16],
+                  fontWeight: theme.typography.weight.normal,
+                  lineHeight: theme.typography.lineHeight[22],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.P2: {
+              return {
+                  fontSize: theme.typography.size[14],
+                  fontWeight: theme.typography.weight.normal,
+                  lineHeight: theme.typography.lineHeight[20],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.P3: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.normal,
+                  lineHeight: theme.typography.lineHeight[16],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.P4: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.normal,
+                  lineHeight: theme.typography.lineHeight[16],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.L1: {
+              return {
+                  fontSize: theme.typography.size[16],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[24],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.L2: {
+              return {
+                  fontSize: theme.typography.size[14],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[20],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.L3: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[16],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.OVERLINE: {
+              return {
+                  fontSize: theme.typography.size[12],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[16],
+              };
+          }
+          case ctDesignTypography.TypographyVariant.TAG: {
+              return {
+                  fontSize: theme.typography.size[10],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[12],
+                  letterSpacing: theme.typography.letterSpacing.point5,
+              };
+          }
+          default: {
+              return {
+                  fontSize: theme.typography.size[20],
+                  fontWeight: theme.typography.weight.semibold,
+                  lineHeight: theme.typography.lineHeight[28],
+              };
+          }
+      }
+  };
 
-    exports.BoxCount = void 0;
-    (function (BoxCount) {
-        BoxCount[BoxCount["SM"] = 4] = "SM";
-        BoxCount[BoxCount["MD"] = 6] = "MD";
-    })(exports.BoxCount || (exports.BoxCount = {}));
-
-    var _a;
-    var SPACEBAR = ctDesignCommonConstants.KEYBOARD_KEY_CODE.SPACEBAR, LEFT_ARROW = ctDesignCommonConstants.KEYBOARD_KEY_CODE.LEFT_ARROW, RIGHT_ARROW = ctDesignCommonConstants.KEYBOARD_KEY_CODE.RIGHT_ARROW;
-    var boxStyling = (_a = {},
-        _a[exports.BoxCount.MD] = { width: '48px' },
-        _a[exports.BoxCount.SM] = { width: '56px' },
-        _a);
-    var OTPField = react.forwardRef(function (_a, forwardedRef) {
-        var _b = _a.boxCount, boxCount = _b === void 0 ? exports.BoxCount.MD : _b, onChanged = _a.onChanged, onSubmit = _a.onSubmit, onResend = _a.onResend, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, _d = _a.message, message = _d === void 0 ? '' : _d, _e = _a.hasError, hasError = _e === void 0 ? false : _e, _f = _a.showCountDown, showCountDown = _f === void 0 ? true : _f, _g = _a.initialCountDownTime, initialCountDownTime = _g === void 0 ? 30 : _g;
-        var theme = ctDesignTheme.useTheme();
-        var otpInputsArr = Array.from(Array(boxCount), function (_, index) { return index; });
-        var _h = react.useState(initialCountDownTime), countDown = _h[0], setCountDown = _h[1];
-        var _j = react.useState(showCountDown), startCounter = _j[0], setStartCounter = _j[1];
-        var _k = react.useState([]), otpValue = _k[0], setOtpValue = _k[1];
-        var refs = react.useRef(new Array(boxCount));
-        var messageIcon = !hasError && message ? jsxRuntime.jsx(CheckCircle, {}) : null;
-        react.useEffect(function () {
-            var _a;
-            (_a = refs.current) === null || _a === void 0 ? void 0 : _a[0].focus();
-            var timerId;
-            if (showCountDown && startCounter) {
-                timerId = setInterval(function () {
-                    setCountDown(function (prev) {
-                        var updatedValue = --prev;
-                        if (updatedValue === 0) {
-                            clearInterval(timerId);
-                            setStartCounter(false);
-                        }
-                        return updatedValue;
-                    });
-                }, 1000);
-            }
-            return function () {
-                timerId && clearInterval(timerId);
-            };
-        }, [startCounter]);
-        react.useEffect(function () {
-            var val = otpValue.join('');
-            if (val.length === boxCount) {
-                onSubmit(val);
-            }
-        }, [otpValue]);
-        var onFieldChange = function (index) { return function (event) {
-            var _a, _b, _c, _d;
-            var value = event.target.value;
-            if (value.length) {
-                (_b = (_a = refs.current) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            else {
-                (_d = (_c = refs.current) === null || _c === void 0 ? void 0 : _c[index - 1]) === null || _d === void 0 ? void 0 : _d.focus();
-            }
-            var updatedOtp = __spreadArray([], otpValue, true);
-            updatedOtp[index] = value;
-            setOtpValue(updatedOtp);
-            onChanged === null || onChanged === void 0 ? void 0 : onChanged(event, value);
-        }; };
-        var onPasteOTP = function (index) { return function (e) {
-            e.preventDefault();
-            var paste = e.clipboardData.getData('text').split('').slice(0, otpInputsArr.length);
-            if (!ctDesignCommonConstants.ONLY_NUMERIC.test(paste.join(''))) {
-                return;
-            }
-            var focusIndex = Math.min(index + paste.length, otpInputsArr.length - 1);
-            setOtpValue(paste);
-            refs.current[focusIndex].focus();
-        }; };
-        var handleOnKeyDown = function (index) { return function (e) {
-            var _a, _b;
-            if (e.keyCode === LEFT_ARROW) {
-                e.preventDefault();
-                (_a = refs.current) === null || _a === void 0 ? void 0 : _a[index - 1].focus();
-            }
-            else if (e.keyCode === RIGHT_ARROW) {
-                e.preventDefault();
-                (_b = refs.current) === null || _b === void 0 ? void 0 : _b[index + 1].focus();
-            }
-            else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
-                e.preventDefault();
-            }
-        }; };
-        var onResendHandler = function () {
-            onResend === null || onResend === void 0 ? void 0 : onResend();
-            setStartCounter(true);
-            setCountDown(initialCountDownTime);
-        };
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ ref: forwardedRef, position: 'relative', width: 'fit-content' }, { children: [jsxRuntime.jsx(ctDesignBox.Box, __assign({ boxSize: 'micro', horizontal: true }, { children: otpInputsArr.map(function (otp, i) {
-                                return (jsxRuntime.jsx(SingleOTPField, { type: exports.FieldType.NUMBER, ref: function (el) { return (refs.current[i] = el); }, onChange: onFieldChange(i), onKeyDown: handleOnKeyDown(i), onPaste: onPasteOTP(i), value: otpValue === null || otpValue === void 0 ? void 0 : otpValue[i], prompt: { hasError: hasError }, otpBoxCss: __assign({ height: '56px' }, boxStyling[boxCount]), maxLength: 1, isLoading: isLoading }, 'otp_Input_' + otp));
-                            }) })), isLoading && (jsxRuntime.jsx(ctDesignCard.Card, __assign({ shadowDirection: ctDesignCard.CardBorderDirection.BOTTOM, shadowVariant: ctDesignCard.CardShadowVariant.E3, css: {
-                                position: 'absolute',
-                                height: '34px',
-                                width: '66px',
-                                padding: theme.spacing[3],
-                                borderRadius: theme.spacing[8],
-                                top: '50%',
-                                left: '50%',
-                                transform: 'translate(-50%, -50%)',
-                            } }, { children: jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {}) })))] })), (messageIcon || message) && (jsxRuntime.jsxs(ctDesignBox.Box, __assign({ boxSize: 'pico', horizontal: true, css: {
-                        paddingTop: theme.spacing[2],
-                        alignItems: 'center',
-                    } }, { children: [messageIcon && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ css: {
-                                height: theme.size[4],
-                                width: theme.size[4],
-                                display: 'flex',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                            } }, { children: messageIcon }))), message && (jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B3', color: hasError ? 'warning' : 'success' }, { children: message })))] }))), showCountDown && (jsxRuntime.jsxs(ctDesignTypography.Typography, __assign({ className: 'mt-3 flex', variant: 'B2' }, { children: ["Haven\u2019t received OTP yet?", jsxRuntime.jsxs(ctDesignTypography.Typography, __assign({ variant: 'B2', className: 'ml-1', color: countDown ? 'disabled' : 'link', onClick: !countDown ? onResendHandler : undefined, isClickable: !countDown }, { children: [' ', "Resend ", !!countDown && "(".concat(countDown, "s)")] }))] })))] }));
-    });
+  const styles$4 = css `
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+  const staticStyles$5 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          root: {
+              width: '100%',
+              border: 'none',
+              outline: 'none',
+              fontSize: theme.typography.size[16],
+              fontWeight: theme.typography.weight.medium,
+              lineHeight: theme.typography.lineHeight[24],
+          },
+      };
+  });
+  const InputFieldCore$1 = react.forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, prefix, focus, placeholderType, id, maxLength, }, forwardedRef) => {
+      const inputRef = react.useRef(null);
+      const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+      const isPrefixComponent = react.isValidElement(prefix);
+      const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+      const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+          root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
+      }), [fieldTypographyVariant]);
+      const fieldStyles = ctDesignStyleManager.useStyles((theme) => {
+          return {
+              root: getFieldStyles({
+                  isLabeledPlaceholder: placeholderType === 'labeled',
+                  disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                  theme,
+                  variant: variant !== null && variant !== void 0 ? variant : 'md',
+                  focus,
+                  value,
+                  type: type !== null && type !== void 0 ? type : 'text',
+                  isPrefixComponent,
+                  disabledPlaceHolder,
+              }),
+          };
+      }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
+      const mergedStyles = ctDesignStyleManager.useWebMergeStyles([staticStyles$5.root, dynamicStyles.root, styles$4, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+      react.useImperativeHandle(forwardedRef, () => ({
+          focus: () => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+          },
+          blur: () => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+          },
+          setSelection: (start, end) => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+          },
+      }), []);
+      const handleOnChange = react.useCallback((event) => {
+          const inputValue = event.target.value;
+          onChange === null || onChange === void 0 ? void 0 : onChange({
+              target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+          });
+      }, [onChange]);
+      const handleOnFocus = react.useCallback((event) => {
+          onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+              target: { value: event.target.value },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onFocus]);
+      const handleOnBlur = react.useCallback((event) => {
+          onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+              target: { value: event.target.value },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onBlur]);
+      const handleOnKeyDown = react.useCallback((event) => {
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+              target: { value: event.target.value, key: event.key },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onKeyDown]);
+      const handleOnSelect = react.useCallback((event) => {
+          onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+              target: {
+                  value: event.target.value,
+                  selectionStart: event.target.selectionStart || 0,
+              },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onSelect]);
+      const handleOnPressIn = react.useCallback((event) => {
+          var _a;
+          onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn({
+              target: { value: ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '' },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onPressIn]);
+      const webProps = {
+          onChange: handleOnChange,
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur,
+          onKeyDown: handleOnKeyDown,
+          onSelect: handleOnSelect,
+          onMouseDown: handleOnPressIn,
+          placeholder,
+          autoFocus,
+          readOnly,
+          type,
+          inputMode,
+          autoCapitalize,
+      };
+      return (jsxRuntime.jsx("input", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+  });
+  InputFieldCore$1.displayName = 'InputFieldCore';
+
+  const staticStyles$4 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          root: {
+              position: 'absolute',
+              paddingLeft: theme.spacing[4],
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              transform: [{ translateY: 0 }],
+              top: 16,
+          },
+      };
+  });
+  const FieldLabelWrapper = ({ variant, type, value, focus = false, placeholder, placeholderType, disabled = false, styleConfig, prefix, id, }) => {
+      const { placeholder: placeholderStyleConfig } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+      const { placeholderLabel = [], placeholderTypography = {} } = placeholderStyleConfig !== null && placeholderStyleConfig !== void 0 ? placeholderStyleConfig : {};
+      const shiftPlaceholder = placeholderType === 'floating';
+      const isPrefixComponent = react.isValidElement(prefix);
+      const baseStyles = ctDesignStyleManager.useStyles((theme) => ({
+          root: getFieldPlaceholderStyles({
+              theme,
+              isFocused: focus,
+              disabled,
+              variant: variant !== null && variant !== void 0 ? variant : 'md',
+              fieldType: type !== null && type !== void 0 ? type : 'text',
+              isPrefixComponent,
+              shiftPlaceholder,
+          }),
+      }), [focus, disabled, variant, type, isPrefixComponent, shiftPlaceholder]);
+      const labelStyles = ctDesignStyleManager.useWebMergeStyles([baseStyles.root, staticStyles$4.root, ...placeholderLabel], [baseStyles.root, placeholderLabel]);
+      if (placeholderType === 'default' || !focus) {
+          return null;
+      }
+      if (variant === exports.FieldVariant.SM) {
+          if (value.length)
+              return null;
+          return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [baseStyles.root, staticStyles$4.root, ...placeholderLabel] }, children: jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B2', color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
+      }
+      if (type === exports.FieldType.PHONE && value.length)
+          return null;
+      const typographyVariant = type === exports.FieldType.PHONE ? 'B1' : focus ? 'B3' : 'B1';
+      return (jsxRuntime.jsx("label", { className: labelStyles, htmlFor: id, children: jsxRuntime.jsx(ctDesignTypography.Typography, { variant: typographyVariant, color: 'tertiary', styleConfig: placeholderTypography, children: placeholder }) }));
+  };
+
+  const styles$3 = css `
+  outline: none;
+  &:focus {
+    outline: none;
+  }
+`;
+  const staticStyles$3 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          root: {
+              width: '100%',
+              border: 'none',
+              outline: 'none',
+              fontSize: theme.typography.size[16],
+              fontWeight: theme.typography.weight.medium,
+              lineHeight: theme.typography.lineHeight[24],
+          },
+      };
+  });
+  const InputFieldCore = react.forwardRef(({ value, disabled, styleConfig, onChange, onFocus, onBlur, onKeyDown, onSelect, onPressIn, placeholder, autoFocus, readOnly, type, inputMode, autoCapitalize, fieldTypographyVariant, variant, prefix, focus, placeholderType, id, maxLength, }, forwardedRef) => {
+      const inputRef = react.useRef(null);
+      const { field = [] } = styleConfig !== null && styleConfig !== void 0 ? styleConfig : {};
+      const isPrefixComponent = react.isValidElement(prefix);
+      const disabledPlaceHolder = !(placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+      const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
+          root: getTypographyVariant(theme, fieldTypographyVariant !== null && fieldTypographyVariant !== void 0 ? fieldTypographyVariant : 'HM2'),
+      }), [fieldTypographyVariant]);
+      const fieldStyles = ctDesignStyleManager.useStyles((theme) => {
+          return {
+              root: getFieldStyles({
+                  isLabeledPlaceholder: placeholderType === 'labeled',
+                  disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+                  theme,
+                  variant: variant !== null && variant !== void 0 ? variant : 'md',
+                  focus,
+                  value,
+                  type: type !== null && type !== void 0 ? type : 'text',
+                  isPrefixComponent,
+                  disabledPlaceHolder,
+              }),
+          };
+      }, [disabled, variant, focus, value, type, isPrefixComponent, disabledPlaceHolder]);
+      const mergedStyles = ctDesignStyleManager.useWebMergeStyles([staticStyles$3.root, dynamicStyles.root, styles$3, fieldStyles.root, ...field], [fieldStyles.root, dynamicStyles.root, field]);
+      react.useImperativeHandle(forwardedRef, () => ({
+          focus: () => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+          },
+          blur: () => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+          },
+          setSelection: (start, end) => {
+              var _a;
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+          },
+      }), []);
+      const handleOnChange = react.useCallback((event) => {
+          const inputValue = event.target.value;
+          onChange === null || onChange === void 0 ? void 0 : onChange({
+              target: { value: inputValue, selectionStart: event.target.selectionStart || 0 },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+          });
+      }, [onChange]);
+      const handleOnFocus = react.useCallback((event) => {
+          onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+              target: { value: event.target.value },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onFocus]);
+      const handleOnBlur = react.useCallback((event) => {
+          onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+              target: { value: event.target.value },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onBlur]);
+      const handleOnKeyDown = react.useCallback((event) => {
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+              target: { value: event.target.value, key: event.key },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onKeyDown]);
+      const handleOnSelect = react.useCallback((event) => {
+          onSelect === null || onSelect === void 0 ? void 0 : onSelect({
+              target: {
+                  value: event.target.value,
+                  selectionStart: event.target.selectionStart || 0,
+              },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onSelect]);
+      const handleOnPressIn = react.useCallback((event) => {
+          var _a;
+          onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn({
+              target: { value: ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '' },
+              currentTarget: {
+                  focus: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+                  blur: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+                  setSelection: (start, end) => {
+                      var _a;
+                      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+                  },
+              },
+              preventDefault: () => event.preventDefault(),
+          });
+      }, [onPressIn]);
+      const webProps = {
+          onChange: handleOnChange,
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur,
+          onKeyDown: handleOnKeyDown,
+          onSelect: handleOnSelect,
+          onMouseDown: handleOnPressIn,
+          placeholder,
+          autoFocus,
+          readOnly,
+          type,
+          inputMode,
+          autoCapitalize,
+      };
+      return (jsxRuntime.jsx("textarea", Object.assign({ maxLength: maxLength, id: id, ref: inputRef, value: value, disabled: disabled, className: mergedStyles }, webProps)));
+  });
+  InputFieldCore.displayName = 'TextArea';
+
+  const staticStyles$2 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          fieldWrapper: {
+              flex: 1,
+              flexShrink: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              position: 'relative',
+              height: '100%',
+          },
+          promptBox: {
+              paddingLeft: theme.spacing[4],
+              paddingRight: theme.spacing[4],
+              display: 'flex',
+              alignItems: 'center',
+          },
+          promptIcon: {
+              height: theme.size[4],
+              width: theme.size[4],
+              paddingRight: theme.spacing[1],
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+          },
+          flexNoShrink: {
+              flexShrink: 0,
+          },
+          fieldContainer: {
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'row',
+              borderStyle: theme === null || theme === void 0 ? void 0 : theme.border.style.solid,
+              borderRadius: theme === null || theme === void 0 ? void 0 : theme.border.radius[8],
+              boxSizing: 'border-box',
+          },
+      };
+  });
+  const Field = react.forwardRef(({ prefix, onBlur, onFocus, onChange, onKeyDown, onPressIn, onSelect, value, autoCapitalize, autoFocus = false, disabled, inputMode, placeholder, prefixGap: _prefixGap, prompt, readOnly, placeholderType = 'default', suffix, suffixGap: _suffixGap, type, variant, styleConfig = {}, fieldTypographyVariant, id, maxLength, numberOfLines, showSoftInputOnFocus, customSpacingTop, }, ref) => {
+      const [focus, setFocus] = react.useState(autoFocus);
+      const _isFocused = focus || value.length > 0;
+      const { promptStyles } = styleConfig || {};
+      const { Icon: promptIcon, message: promptMessage, hasError = false } = prompt || {};
+      const fieldContainerStyles = ctDesignStyleManager.useStyles((theme) => ({
+          root: getFieldContainerStyles({
+              variant: variant !== null && variant !== void 0 ? variant : 'md',
+              theme,
+              hasError,
+              focus,
+              value,
+              disabled,
+          }),
+      }), [variant, hasError, focus, value, disabled, styleConfig]);
+      const InputField = numberOfLines && numberOfLines > 1 ? InputFieldCore : InputFieldCore$1;
+      return (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'micro', styleConfig: styleConfig, children: [jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                      root: [fieldContainerStyles.root, staticStyles$2.fieldContainer, ...(styleConfig.fieldContainer || [])],
+                  }, children: [react.isValidElement(prefix) && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: react.cloneElement(prefix, { focus }) })), jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.fieldWrapper, ...(styleConfig.field || [])] }, children: [jsxRuntime.jsx(FieldLabelWrapper, { id: id, variant: variant, type: type, value: value, focus: _isFocused, placeholder: placeholder, placeholderType: placeholderType, disabled: disabled, styleConfig: styleConfig, prefix: prefix }), jsxRuntime.jsx(InputField, { id: id, ref: ref, value: value, disabled: disabled, placeholder: placeholder, placeholderType: placeholderType, autoFocus: autoFocus, readOnly: readOnly, type: type, inputMode: inputMode, autoCapitalize: autoCapitalize, fieldTypographyVariant: fieldTypographyVariant, styleConfig: styleConfig, focus: _isFocused, onChange: onChange, onSelect: onSelect, onPressIn: onPressIn, onFocus: (e) => {
+                                      setFocus(true);
+                                      onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                                  }, onBlur: (e) => {
+                                      setFocus(false);
+                                      onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                                  }, onKeyDown: onKeyDown, maxLength: maxLength, numberOfLines: numberOfLines, showSoftInputOnFocus: showSoftInputOnFocus, customSpacingTop: customSpacingTop })] }), react.isValidElement(suffix) && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.flexNoShrink] }, children: react.cloneElement(suffix, { focus }) }))] }), (promptIcon || promptMessage) && (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'pico', horizontal: true, styleConfig: {
+                      root: [staticStyles$2.promptBox, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptBox) || [])],
+                  }, children: [promptIcon && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$2.promptIcon, ...((promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptIconContainer) || [])] }, children: promptIcon })), promptMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B3', color: hasError ? 'warning' : 'success', styleConfig: promptStyles === null || promptStyles === void 0 ? void 0 : promptStyles.promptMessageTypography, children: promptMessage }))] }))] }));
+  });
+  Field.displayName = 'Field';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+  function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  const styles$2 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          wrapper: {
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'row',
+              paddingLeft: 16,
+          },
+          flagContainer: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexDirection: 'row',
+              height: theme.size[6],
+              width: theme.size[6],
+          },
+          countryCode: {
+              alignSelf: 'flex-start',
+          },
+          divider: {
+              borderRightWidth: 1,
+              height: '100%',
+              borderRightColor: theme.color.background.disabledDark,
+          },
+          disabledColor: {
+              color: theme.color.text.disabled,
+          },
+          enabledColor: {
+              color: theme.color.text.primary,
+          },
+          container: {
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: theme.spacing[2],
+          },
+      };
+  });
+  const DownChevronV2 = (_a) => {
+      var { color = '#1A1A1A' } = _a, rest = __rest(_a, ["color"]);
+      return (jsxRuntime.jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', fill: 'none', viewBox: '0 0 12 12' }, rest, { children: jsxRuntime.jsx("path", { stroke: color, strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: 'M2 4l4 4 4-4' }) })));
+  };
+  const PhoneFieldPrefix = ({ countryCode, disabled = false, flagIcon, onDropdownClick, showDropdownIcon, }) => {
+      const onClick = () => {
+          if (disabled)
+              return;
+          onDropdownClick === null || onDropdownClick === void 0 ? void 0 : onDropdownClick();
+      };
+      return (jsxRuntime.jsxs(ctDesignBox.Box, { boxSize: 'micro', styleConfig: { root: [styles$2.wrapper] }, onClick: onClick, children: [jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                      root: [styles$2.container],
+                  }, children: [flagIcon && jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [styles$2.flagContainer] }, children: flagIcon }), jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'B1', color: disabled ? 'disabled' : 'primary', styleConfig: { root: [styles$2.countryCode] }, children: countryCode }), showDropdownIcon && (jsxRuntime.jsx(DownChevronV2, { color: disabled ? styles$2.disabledColor.color : styles$2.enabledColor.color }))] }), jsxRuntime.jsx(ctDesignDivider.Divider, { dividerWidth: 1, dividerLength: 0, orientation: 'vertical', styleConfig: { root: [styles$2.divider] } })] }));
+  };
+
+  const styles$1 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          fieldConfig: {
+              flex: 1,
+              paddingTop: 0,
+              paddingBottom: 0,
+              paddingVertical: 0,
+              lineHeight: 18,
+              paddingLeft: theme.spacing[4],
+          },
+      };
+  });
+  const PhoneField = react.forwardRef((_a, forwardedRef) => {
+      var _b;
+      var { flagIcon, countryCode, showDropdownIcon, onDropdownClick, disabled, max, onChange, styleConfig } = _a, rest = __rest(_a, ["flagIcon", "countryCode", "showDropdownIcon", "onDropdownClick", "disabled", "max", "onChange", "styleConfig"]);
+      const [prefixWidth, setPrefixWidth] = react.useState(0);
+      const handleChange = (event) => {
+          const value = event.target.value;
+          const isValidValue = value ? new RegExp(ctDesignCommonConstants.ONLY_NUMERIC).test(value) : true;
+          if (value.length <= max && isValidValue) {
+              onChange === null || onChange === void 0 ? void 0 : onChange(event);
+          }
+      };
+      const customPlaceHolderStyling = ctDesignStyleManager.useStyles(() => {
+          return {
+              placeholderStyles: {
+                  marginLeft: prefixWidth,
+              },
+          };
+      }, [prefixWidth]);
+      return (jsxRuntime.jsx(Field, Object.assign({}, rest, { type: exports.FieldType.PHONE, ref: forwardedRef, disabled: disabled, onChange: handleChange, prefix: jsxRuntime.jsx("div", { ref: (ref) => { var _a; return setPrefixWidth((_a = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : 0); }, children: jsxRuntime.jsx(PhoneFieldPrefix, { flagIcon: flagIcon, countryCode: countryCode, showDropdownIcon: showDropdownIcon, onDropdownClick: onDropdownClick, disabled: disabled }) }), inputMode: 'numeric', styleConfig: Object.assign({ field: [styles$1.fieldConfig, ...((styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.field) || [])], placeholder: {
+                  placeholderLabel: [
+                      customPlaceHolderStyling.placeholderStyles,
+                      ...(((_b = styleConfig === null || styleConfig === void 0 ? void 0 : styleConfig.placeholder) === null || _b === void 0 ? void 0 : _b.placeholderLabel) || []),
+                  ],
+              } }, styleConfig) })));
+  });
+  PhoneField.displayName = 'PhoneField';
+
+  const styles = ctDesignStyleManager.makeStyles((theme) => ({
+      rootContainer: {
+          justifyContent: 'center',
+      },
+      otpContainer: {
+          display: 'flex',
+          flexDirection: 'row',
+          gap: theme.spacing[3],
+      },
+      otpBox: {
+          width: theme.size[15],
+          height: theme.size[15],
+          borderRadius: theme === null || theme === void 0 ? void 0 : theme.border.radius[8],
+          justifyContent: 'center',
+          alignItems: 'center',
+          borderStyle: theme.border.style.solid,
+      },
+      otpInput: {
+          width: '100%',
+          height: '100%',
+          fontSize: theme === null || theme === void 0 ? void 0 : theme.typography.size[20],
+          fontWeight: theme === null || theme === void 0 ? void 0 : theme.typography.weight.semibold,
+          color: theme.color.text.primary,
+          textAlign: 'center',
+      },
+      errorText: {
+          marginVertical: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
+          fontSize: theme === null || theme === void 0 ? void 0 : theme.typography.size[14],
+          fontWeight: theme === null || theme === void 0 ? void 0 : theme.typography.weight.semibold,
+          color: theme === null || theme === void 0 ? void 0 : theme.color.text.warning,
+      },
+  }));
+  const OtpBox = ({ value, focus, inputMode, onChange, onFocus, readOnly, onBlur, onPressIn, onKeyDown, onSelect, maxLength, prompt, styleConfig, }) => {
+      const theme = ctDesignTheme.useTheme();
+      const ref = react.useRef(null);
+      const { hasError = false } = prompt || {};
+      const { otpBox = [], otpRootInput = [] } = styleConfig || {};
+      react.useEffect(() => {
+          if (focus && ref.current) {
+              ref.current.focus();
+          }
+      }, [focus]);
+      const dynamicStyles = ctDesignStyleManager.useStyles((theme) => {
+          if (hasError) {
+              return {
+                  otpBox: {
+                      borderColor: theme.color.border.warning,
+                      borderWidth: theme.border.width.lg,
+                  },
+              };
+          }
+          return {
+              otpBox: {
+                  borderColor: focus ? theme.color.border.primary : theme.color.border.disabledDark,
+                  borderWidth: focus ? theme.border.width.lg : theme.border.width.sm,
+              },
+          };
+      }, [hasError, focus]);
+      return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+              root: [styles.otpBox, dynamicStyles.otpBox, ...otpBox],
+          }, children: jsxRuntime.jsx(InputFieldCore$1, { id: `otp-box`, disabled: readOnly, ref: ref, value: value, maxLength: maxLength, inputMode: inputMode, onChange: onChange, onBlur: onBlur, onPressIn: onPressIn, onKeyDown: onKeyDown, onSelect: onSelect, autoCapitalize: 'characters', cursorColor: theme.color.text.grapetini900, onFocus: onFocus, focus: focus, styleConfig: { root: [styles.otpInput, ...otpRootInput] } }) }));
+  };
+  const OtpField = ({ value = '', numberOfBoxes = 4, inputMode = 'numeric', autoFocus = true, refocus = false, onChange, readOnly = false, onComplete, onKeyDown, onSelect, onBlur, onPressIn, onFocus, prompt, styleConfig = {}, }) => {
+      const [focusedIndex, setFocusedIndex] = react.useState(autoFocus ? 0 : -1);
+      const { hasError = false, message: errorMessage } = prompt || {};
+      const { promptStyles, otpRootContainer = [], otpRootInput = [] } = styleConfig || {};
+      const { promptMessageTypography } = promptStyles || {};
+      const otpValues = Array(numberOfBoxes)
+          .fill('')
+          .map((_, index) => {
+          const char = value[index];
+          return char && char !== ' ' ? char : '';
+      });
+      react.useEffect(() => {
+          if (autoFocus && !readOnly) {
+              setFocusedIndex(0);
+          }
+      }, [autoFocus, readOnly]);
+      react.useEffect(() => {
+          if (refocus) {
+              setFocusedIndex(0);
+          }
+      }, [refocus]);
+      const validateInput = react.useCallback((text) => {
+          if (inputMode === 'numeric') {
+              return text.replace(/[^0-9]/g, '');
+          }
+          return text.replace(/[^0-9A-Za-z]/g, '').toUpperCase();
+      }, [inputMode]);
+      const handleInputChange = react.useCallback((e, index) => {
+          const validatedText = validateInput(e.target.value);
+          const otpString = value || '';
+          const currentOtpValues = Array(numberOfBoxes)
+              .fill('')
+              .map((_, idx) => {
+              const char = otpString[idx];
+              return char && char !== ' ' ? char : '';
+          });
+          if (validatedText.length > 1) {
+              const newValues = [...currentOtpValues];
+              for (let i = 0; i < validatedText.length && index + i < numberOfBoxes; i++) {
+                  newValues[index + i] = validatedText[i];
+              }
+              const newValue = newValues.join('');
+              onChange === null || onChange === void 0 ? void 0 : onChange({
+                  target: { value: newValue, selectionStart: index },
+                  currentTarget: e.currentTarget,
+                  preventDefault: e.preventDefault,
+              });
+              const nextEmptyIndex = newValues.findIndex((val) => !val);
+              if (nextEmptyIndex !== -1) {
+                  setFocusedIndex(nextEmptyIndex);
+              }
+              else {
+                  setFocusedIndex(numberOfBoxes - 1);
+              }
+              if (!newValues.includes('')) {
+                  onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
+              }
+              return;
+          }
+          if (validatedText) {
+              const newValues = [...currentOtpValues];
+              newValues[index] = validatedText;
+              const newValue = newValues.join('');
+              onChange === null || onChange === void 0 ? void 0 : onChange({
+                  target: { value: newValue, selectionStart: index },
+                  currentTarget: e.currentTarget,
+                  preventDefault: e.preventDefault,
+              });
+              if (index < numberOfBoxes - 1) {
+                  setFocusedIndex(index + 1);
+              }
+              if (!newValues.includes('')) {
+                  onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
+              }
+          }
+      }, [validateInput, value, numberOfBoxes, onChange, onComplete]);
+      const handleKeyPress = react.useCallback((e, index) => {
+          var _a, _b;
+          const key = e.target.key;
+          if (key === 'Backspace') {
+              const otpString = value || '';
+              const currentOtpValues = Array(numberOfBoxes)
+                  .fill('')
+                  .map((_, idx) => {
+                  const char = otpString[idx];
+                  return char && char !== ' ' ? char : '';
+              });
+              if (currentOtpValues[index]) {
+                  const newValues = [...currentOtpValues];
+                  newValues[index] = ' ';
+                  onChange === null || onChange === void 0 ? void 0 : onChange({
+                      target: { value: newValues.join(''), selectionStart: index },
+                      currentTarget: e.currentTarget,
+                      preventDefault: e.preventDefault,
+                  });
+              }
+              else if (index > 0) {
+                  setFocusedIndex(index - 1);
+              }
+          }
+          else if (key === 'ArrowLeft' && index > 0) {
+              (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+              setFocusedIndex(index - 1);
+          }
+          else if (key === 'ArrowRight' && index < numberOfBoxes - 1) {
+              (_b = e.preventDefault) === null || _b === void 0 ? void 0 : _b.call(e);
+              setFocusedIndex(index + 1);
+          }
+          onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown({
+              target: { value, key },
+              currentTarget: e.currentTarget,
+              preventDefault: e.preventDefault,
+          });
+      }, [numberOfBoxes, onKeyDown, value, onChange]);
+      const handleFocus = react.useCallback((e, index) => {
+          onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+              target: { value, index },
+              currentTarget: e.currentTarget,
+              preventDefault: e.preventDefault,
+          });
+          setFocusedIndex(index);
+      }, [onFocus, value]);
+      return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: { root: [styles.rootContainer, ...otpRootContainer] }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [styles.otpContainer, ...otpRootInput] }, children: Array(numberOfBoxes)
+                      .fill(null)
+                      .map((_, index) => (jsxRuntime.jsx(OtpBox, { value: otpValues[index], focus: focusedIndex === index, prompt: { hasError }, inputMode: inputMode, maxLength: ctDesignCommonUtils.isIOS() ? numberOfBoxes : 1, onFocus: (e) => handleFocus(e, index), onChange: (e) => handleInputChange(e, index), readOnly: readOnly, onPressIn: onPressIn, onKeyDown: (e) => handleKeyPress(e, index), onSelect: onSelect, onBlur: onBlur, styleConfig: styleConfig }, index))) }), hasError && !!errorMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: ctDesignTypography.TypographyVariant.P3, color: ctDesignTypography.TypographyColor.WARNING, styleConfig: Object.assign({ root: [styles.errorText] }, promptMessageTypography), children: errorMessage }))] }));
+  };
+
+  var CURSOR_OPERATION;
+  (function (CURSOR_OPERATION) {
+      CURSOR_OPERATION["NONE"] = "NONE";
+      CURSOR_OPERATION["ADD"] = "ADD";
+      CURSOR_OPERATION["SUBSTRACT"] = "SUBSTRACT";
+  })(CURSOR_OPERATION || (CURSOR_OPERATION = {}));
+  const CardField = react.forwardRef((_a, forwardedRef) => {
+      var { onChange, value } = _a, rest = __rest(_a, ["onChange", "value"]);
+      const ref = react.useRef(null);
+      const mergedRef = useMergeRefs__default.default(forwardedRef, ref);
+      const cursorRef = react.useRef({
+          cursorPos: 0,
+          operation: CURSOR_OPERATION.NONE,
+      });
+      react.useEffect(() => {
+          var _a;
+          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setSelection(cursorRef.current.cursorPos, cursorRef.current.cursorPos);
+          cursorRef.current = {
+              cursorPos: cursorRef.current.cursorPos,
+              operation: CURSOR_OPERATION.NONE,
+          };
+      }, [value]);
+      const handleChange = (e) => {
+          onChange === null || onChange === void 0 ? void 0 : onChange(e);
+          let selectionStart = e.target.selectionStart || 0;
+          switch (cursorRef.current.operation) {
+              case CURSOR_OPERATION.SUBSTRACT: {
+                  --selectionStart;
+                  break;
+              }
+              case CURSOR_OPERATION.ADD: {
+                  ++selectionStart;
+                  break;
+              }
+          }
+          cursorRef.current = {
+              cursorPos: selectionStart,
+              operation: CURSOR_OPERATION.NONE,
+          };
+      };
+      return (jsxRuntime.jsx(Field, Object.assign({ ref: mergedRef, onChange: handleChange }, rest, { type: exports.FieldType.NUMBER, value: value, inputMode: 'numeric' })));
+  });
+  CardField.displayName = 'CardField';
+
+  const InputField = react.forwardRef((props, forwardedRef) => {
+      if (props.fieldType === 'phone') {
+          return jsxRuntime.jsx(PhoneField, Object.assign({}, props, { ref: forwardedRef }));
+      }
+      if (props.fieldType === 'otp') {
+          return jsxRuntime.jsx(OtpField, Object.assign({}, props));
+      }
+      if (props.fieldType === 'card') {
+          return jsxRuntime.jsx(CardField, Object.assign({}, props, { ref: forwardedRef }));
+      }
+      return jsxRuntime.jsx(Field, Object.assign({}, props, { ref: forwardedRef }));
+  });
+  InputField.displayName = 'InputField';
+
+  const staticStyles$1 = ctDesignStyleManager.makeStyles((theme) => {
+      return {
+          root: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginLeft: theme.spacing[4],
+              width: theme.size[6],
+              height: theme.size[6],
+          },
+      };
+  });
+  const FieldIcon = ({ icon, onClick, focus, focusedIcon, styleConfig }) => {
+      const { root: customRootStyles = [] } = styleConfig || {};
+      if (!react.isValidElement(icon))
+          return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+      let IconPrefix = icon;
+      if (focus && react.isValidElement(focusedIcon)) {
+          IconPrefix = focusedIcon;
+      }
+      const handleClick = () => {
+          onClick === null || onClick === void 0 ? void 0 : onClick();
+      };
+      return (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles$1.root, ...customRootStyles] }, onClick: handleClick, children: IconPrefix }));
+  };
+
+  const staticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+      root: {
+          paddingRight: theme.spacing[4],
+      },
+  }));
+  const FieldAction = ({ actionsList = [] }) => {
+      return (jsxRuntime.jsx(ctDesignBox.Box, { boxSize: 'tiny', horizontal: true, styleConfig: { root: [staticStyles.root] }, children: actionsList.map((actionItem) => {
+              const { label, color, onClick, isDisabled, isLoading } = actionItem || {};
+              if (isLoading) {
+                  return jsxRuntime.jsx(ctDesignDottedLoader.DottedLoader, {}, 'fieldAction');
+              }
+              return (jsxRuntime.jsx(ctDesignTypography.Typography, { variant: 'HM4', color: isDisabled ? ctDesignTypography.TypographyColor.DISABLED : color, onClick: !isDisabled
+                      ? onClick
+                      : () => {
+                      }, isClickable: true, isDisabled: isDisabled, children: label }, 'fieldAction'));
+          }) }));
+  };
 
-    exports.CardField = CardField;
-    exports.FieldAction = FieldAction;
-    exports.FieldIcon = FieldIcon;
-    exports.FieldV2 = Field;
-    exports.OTPField = OTPField;
-    exports.PhoneField = PhoneField;
-    exports.PhoneFieldPrefix = PhoneFieldPrefix;
+  exports.FieldAction = FieldAction;
+  exports.FieldIcon = FieldIcon;
+  exports.InputField = InputField;
+  exports.TextArea = InputFieldCore;
 
 }));
 //# sourceMappingURL=ct-design-field.umd.js.map