@bolttech/molecules-dropdown 0.1.7 → 0.1.9

package/index.cjs

@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-var fails$g = function (exec) {
+var fails$h = function (exec) {
   try {
     return !!exec();
   } catch (error) {
@@ -23,45 +23,45 @@ var fails$g = function (exec) {
   }
 };
 
-var fails$f = fails$g;
+var fails$g = fails$h;
 
-var functionBindNative = !fails$f(function () {
+var functionBindNative = !fails$g(function () {
   // eslint-disable-next-line es/no-function-prototype-bind -- safe
   var test = (function () { /* empty */ }).bind();
   // eslint-disable-next-line no-prototype-builtins -- safe
   return typeof test != 'function' || test.hasOwnProperty('prototype');
 });
 
-var NATIVE_BIND$1 = functionBindNative;
+var NATIVE_BIND$2 = functionBindNative;
 
-var FunctionPrototype$1 = Function.prototype;
-var call$9 = FunctionPrototype$1.call;
-var uncurryThisWithBind = NATIVE_BIND$1 && FunctionPrototype$1.bind.bind(call$9, call$9);
+var FunctionPrototype$2 = Function.prototype;
+var call$b = FunctionPrototype$2.call;
+var uncurryThisWithBind = NATIVE_BIND$2 && FunctionPrototype$2.bind.bind(call$b, call$b);
 
-var functionUncurryThis = NATIVE_BIND$1 ? uncurryThisWithBind : function (fn) {
+var functionUncurryThis = NATIVE_BIND$2 ? uncurryThisWithBind : function (fn) {
   return function () {
-    return call$9.apply(fn, arguments);
+    return call$b.apply(fn, arguments);
   };
 };
 
-var uncurryThis$e = functionUncurryThis;
+var uncurryThis$h = functionUncurryThis;
 
-var toString$5 = uncurryThis$e({}.toString);
-var stringSlice$2 = uncurryThis$e(''.slice);
+var toString$7 = uncurryThis$h({}.toString);
+var stringSlice$5 = uncurryThis$h(''.slice);
 
 var classofRaw$2 = function (it) {
-  return stringSlice$2(toString$5(it), 8, -1);
+  return stringSlice$5(toString$7(it), 8, -1);
 };
 
-var uncurryThis$d = functionUncurryThis;
-var fails$e = fails$g;
+var uncurryThis$g = functionUncurryThis;
+var fails$f = fails$h;
 var classof$3 = classofRaw$2;
 
 var $Object$4 = Object;
-var split = uncurryThis$d(''.split);
+var split = uncurryThis$g(''.split);
 
 // fallback for non-array-like ES3 and non-enumerable old V8 strings
-var indexedObject = fails$e(function () {
+var indexedObject = fails$f(function () {
   // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
   // eslint-disable-next-line no-prototype-builtins -- safe
   return !$Object$4('z').propertyIsEnumerable(0);
@@ -71,27 +71,27 @@ var indexedObject = fails$e(function () {
 
 // we can't use just `it == null` since of `document.all` special case
 // https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot-aec
-var isNullOrUndefined$3 = function (it) {
+var isNullOrUndefined$4 = function (it) {
   return it === null || it === undefined;
 };
 
-var isNullOrUndefined$2 = isNullOrUndefined$3;
+var isNullOrUndefined$3 = isNullOrUndefined$4;
 
 var $TypeError$7 = TypeError;
 
 // `RequireObjectCoercible` abstract operation
 // https://tc39.es/ecma262/#sec-requireobjectcoercible
-var requireObjectCoercible$4 = function (it) {
-  if (isNullOrUndefined$2(it)) throw $TypeError$7("Can't call method on " + it);
+var requireObjectCoercible$6 = function (it) {
+  if (isNullOrUndefined$3(it)) throw $TypeError$7("Can't call method on " + it);
   return it;
 };
 
 // toObject with fallback for non-array-like ES3 strings
 var IndexedObject$1 = indexedObject;
-var requireObjectCoercible$3 = requireObjectCoercible$4;
+var requireObjectCoercible$5 = requireObjectCoercible$6;
 
 var toIndexedObject$5 = function (it) {
-  return IndexedObject$1(requireObjectCoercible$3(it));
+  return IndexedObject$1(requireObjectCoercible$5(it));
 };
 
 var check = function (it) {
@@ -144,36 +144,36 @@ var store$2 = sharedStore;
   source: 'https://github.com/zloirock/core-js'
 });
 
-var requireObjectCoercible$2 = requireObjectCoercible$4;
+var requireObjectCoercible$4 = requireObjectCoercible$6;
 
 var $Object$3 = Object;
 
 // `ToObject` abstract operation
 // https://tc39.es/ecma262/#sec-toobject
-var toObject$3 = function (argument) {
-  return $Object$3(requireObjectCoercible$2(argument));
+var toObject$4 = function (argument) {
+  return $Object$3(requireObjectCoercible$4(argument));
 };
 
-var uncurryThis$c = functionUncurryThis;
-var toObject$2 = toObject$3;
+var uncurryThis$f = functionUncurryThis;
+var toObject$3 = toObject$4;
 
-var hasOwnProperty = uncurryThis$c({}.hasOwnProperty);
+var hasOwnProperty = uncurryThis$f({}.hasOwnProperty);
 
 // `HasOwnProperty` abstract operation
 // https://tc39.es/ecma262/#sec-hasownproperty
 // eslint-disable-next-line es/no-object-hasown -- safe
 var hasOwnProperty_1 = Object.hasOwn || function hasOwn(it, key) {
-  return hasOwnProperty(toObject$2(it), key);
+  return hasOwnProperty(toObject$3(it), key);
 };
 
-var uncurryThis$b = functionUncurryThis;
+var uncurryThis$e = functionUncurryThis;
 
 var id = 0;
 var postfix = Math.random();
-var toString$4 = uncurryThis$b(1.0.toString);
+var toString$6 = uncurryThis$e(1.0.toString);
 
 var uid$2 = function (key) {
-  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$4(++id + postfix, 36);
+  return 'Symbol(' + (key === undefined ? '' : key) + ')_' + toString$6(++id + postfix, 36);
 };
 
 var engineUserAgent = typeof navigator != 'undefined' && String(navigator.userAgent) || '';
@@ -209,10 +209,10 @@ var engineV8Version = version;
 /* eslint-disable es/no-symbol -- required for testing */
 
 var V8_VERSION = engineV8Version;
-var fails$d = fails$g;
+var fails$e = fails$h;
 
 // eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing
-var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$d(function () {
+var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$e(function () {
   var symbol = Symbol();
   // Chrome 38 Symbol has incorrect toString conversion
   // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
@@ -240,7 +240,7 @@ var Symbol$1 = global$a.Symbol;
 var WellKnownSymbolsStore = shared$3('wks');
 var createWellKnownSymbol = USE_SYMBOL_AS_UID$1 ? Symbol$1['for'] || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || uid$1;
 
-var wellKnownSymbol$9 = function (name) {
+var wellKnownSymbol$a = function (name) {
   if (!hasOwn$8(WellKnownSymbolsStore, name)) {
     WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$8(Symbol$1, name)
       ? Symbol$1[name]
@@ -265,21 +265,21 @@ var documentAll$1 = $documentAll$1.all;
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-var isCallable$g = $documentAll$1.IS_HTMLDDA ? function (argument) {
+var isCallable$h = $documentAll$1.IS_HTMLDDA ? function (argument) {
   return typeof argument == 'function' || argument === documentAll$1;
 } : function (argument) {
   return typeof argument == 'function';
 };
 
-var isCallable$f = isCallable$g;
+var isCallable$g = isCallable$h;
 var $documentAll = documentAll_1;
 
 var documentAll = $documentAll.all;
 
 var isObject$6 = $documentAll.IS_HTMLDDA ? function (it) {
-  return typeof it == 'object' ? it !== null : isCallable$f(it) || it === documentAll;
+  return typeof it == 'object' ? it !== null : isCallable$g(it) || it === documentAll;
 } : function (it) {
-  return typeof it == 'object' ? it !== null : isCallable$f(it);
+  return typeof it == 'object' ? it !== null : isCallable$g(it);
 };
 
 var isObject$5 = isObject$6;
@@ -288,27 +288,27 @@ var $String$4 = String;
 var $TypeError$6 = TypeError;
 
 // `Assert: Type(argument) is Object`
-var anObject$8 = function (argument) {
+var anObject$9 = function (argument) {
   if (isObject$5(argument)) return argument;
   throw $TypeError$6($String$4(argument) + ' is not an object');
 };
 
 var objectDefineProperties = {};
 
-var fails$c = fails$g;
+var fails$d = fails$h;
 
 // Detect IE8's incomplete defineProperty implementation
-var descriptors = !fails$c(function () {
+var descriptors = !fails$d(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;
 });
 
 var DESCRIPTORS$9 = descriptors;
-var fails$b = fails$g;
+var fails$c = fails$h;
 
 // V8 ~ Chrome 36-
 // https://bugs.chromium.org/p/v8/issues/detail?id=3334
-var v8PrototypeDefineBug = DESCRIPTORS$9 && fails$b(function () {
+var v8PrototypeDefineBug = DESCRIPTORS$9 && fails$c(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(function () { /* empty */ }, 'prototype', {
     value: 42,
@@ -330,42 +330,42 @@ var documentCreateElement$2 = function (it) {
 };
 
 var DESCRIPTORS$8 = descriptors;
-var fails$a = fails$g;
+var fails$b = fails$h;
 var createElement = documentCreateElement$2;
 
 // Thanks to IE8 for its funny defineProperty
-var ie8DomDefine = !DESCRIPTORS$8 && !fails$a(function () {
+var ie8DomDefine = !DESCRIPTORS$8 && !fails$b(function () {
   // eslint-disable-next-line es/no-object-defineproperty -- required for testing
   return Object.defineProperty(createElement('div'), 'a', {
     get: function () { return 7; }
   }).a != 7;
 });
 
-var NATIVE_BIND = functionBindNative;
+var NATIVE_BIND$1 = functionBindNative;
 
-var call$8 = Function.prototype.call;
+var call$a = Function.prototype.call;
 
-var functionCall = NATIVE_BIND ? call$8.bind(call$8) : function () {
-  return call$8.apply(call$8, arguments);
+var functionCall = NATIVE_BIND$1 ? call$a.bind(call$a) : function () {
+  return call$a.apply(call$a, arguments);
 };
 
 var global$8 = global$e;
-var isCallable$e = isCallable$g;
+var isCallable$f = isCallable$h;
 
 var aFunction = function (argument) {
-  return isCallable$e(argument) ? argument : undefined;
+  return isCallable$f(argument) ? argument : undefined;
 };
 
 var getBuiltIn$3 = function (namespace, method) {
   return arguments.length < 2 ? aFunction(global$8[namespace]) : global$8[namespace] && global$8[namespace][method];
 };
 
-var uncurryThis$a = functionUncurryThis;
+var uncurryThis$d = functionUncurryThis;
 
-var objectIsPrototypeOf = uncurryThis$a({}.isPrototypeOf);
+var objectIsPrototypeOf = uncurryThis$d({}.isPrototypeOf);
 
 var getBuiltIn$2 = getBuiltIn$3;
-var isCallable$d = isCallable$g;
+var isCallable$e = isCallable$h;
 var isPrototypeOf = objectIsPrototypeOf;
 var USE_SYMBOL_AS_UID = useSymbolAsUid;
 
@@ -375,7 +375,7 @@ var isSymbol$2 = USE_SYMBOL_AS_UID ? function (it) {
   return typeof it == 'symbol';
 } : function (it) {
   var $Symbol = getBuiltIn$2('Symbol');
-  return isCallable$d($Symbol) && isPrototypeOf($Symbol.prototype, $Object$2(it));
+  return isCallable$e($Symbol) && isPrototypeOf($Symbol.prototype, $Object$2(it));
 };
 
 var $String$3 = String;
@@ -388,29 +388,29 @@ var tryToString$1 = function (argument) {
   }
 };
 
-var isCallable$c = isCallable$g;
+var isCallable$d = isCallable$h;
 var tryToString = tryToString$1;
 
 var $TypeError$5 = TypeError;
 
 // `Assert: IsCallable(argument) is true`
 var aCallable$2 = function (argument) {
-  if (isCallable$c(argument)) return argument;
+  if (isCallable$d(argument)) return argument;
   throw $TypeError$5(tryToString(argument) + ' is not a function');
 };
 
 var aCallable$1 = aCallable$2;
-var isNullOrUndefined$1 = isNullOrUndefined$3;
+var isNullOrUndefined$2 = isNullOrUndefined$4;
 
 // `GetMethod` abstract operation
 // https://tc39.es/ecma262/#sec-getmethod
-var getMethod$2 = function (V, P) {
+var getMethod$3 = function (V, P) {
   var func = V[P];
-  return isNullOrUndefined$1(func) ? undefined : aCallable$1(func);
+  return isNullOrUndefined$2(func) ? undefined : aCallable$1(func);
 };
 
-var call$7 = functionCall;
-var isCallable$b = isCallable$g;
+var call$9 = functionCall;
+var isCallable$c = isCallable$h;
 var isObject$3 = isObject$6;
 
 var $TypeError$4 = TypeError;
@@ -419,31 +419,31 @@ var $TypeError$4 = TypeError;
 // https://tc39.es/ecma262/#sec-ordinarytoprimitive
 var ordinaryToPrimitive$1 = function (input, pref) {
   var fn, val;
-  if (pref === 'string' && isCallable$b(fn = input.toString) && !isObject$3(val = call$7(fn, input))) return val;
-  if (isCallable$b(fn = input.valueOf) && !isObject$3(val = call$7(fn, input))) return val;
-  if (pref !== 'string' && isCallable$b(fn = input.toString) && !isObject$3(val = call$7(fn, input))) return val;
+  if (pref === 'string' && isCallable$c(fn = input.toString) && !isObject$3(val = call$9(fn, input))) return val;
+  if (isCallable$c(fn = input.valueOf) && !isObject$3(val = call$9(fn, input))) return val;
+  if (pref !== 'string' && isCallable$c(fn = input.toString) && !isObject$3(val = call$9(fn, input))) return val;
   throw $TypeError$4("Can't convert object to primitive value");
 };
 
-var call$6 = functionCall;
+var call$8 = functionCall;
 var isObject$2 = isObject$6;
 var isSymbol$1 = isSymbol$2;
-var getMethod$1 = getMethod$2;
+var getMethod$2 = getMethod$3;
 var ordinaryToPrimitive = ordinaryToPrimitive$1;
-var wellKnownSymbol$8 = wellKnownSymbol$9;
+var wellKnownSymbol$9 = wellKnownSymbol$a;
 
 var $TypeError$3 = TypeError;
-var TO_PRIMITIVE = wellKnownSymbol$8('toPrimitive');
+var TO_PRIMITIVE = wellKnownSymbol$9('toPrimitive');
 
 // `ToPrimitive` abstract operation
 // https://tc39.es/ecma262/#sec-toprimitive
 var toPrimitive$1 = function (input, pref) {
   if (!isObject$2(input) || isSymbol$1(input)) return input;
-  var exoticToPrim = getMethod$1(input, TO_PRIMITIVE);
+  var exoticToPrim = getMethod$2(input, TO_PRIMITIVE);
   var result;
   if (exoticToPrim) {
     if (pref === undefined) pref = 'default';
-    result = call$6(exoticToPrim, input, pref);
+    result = call$8(exoticToPrim, input, pref);
     if (!isObject$2(result) || isSymbol$1(result)) return result;
     throw $TypeError$3("Can't convert object to primitive value");
   }
@@ -464,7 +464,7 @@ var toPropertyKey$2 = function (argument) {
 var DESCRIPTORS$7 = descriptors;
 var IE8_DOM_DEFINE$1 = ie8DomDefine;
 var V8_PROTOTYPE_DEFINE_BUG$1 = v8PrototypeDefineBug;
-var anObject$7 = anObject$8;
+var anObject$8 = anObject$9;
 var toPropertyKey$1 = toPropertyKey$2;
 
 var $TypeError$2 = TypeError;
@@ -479,9 +479,9 @@ var WRITABLE = 'writable';
 // `Object.defineProperty` method
 // https://tc39.es/ecma262/#sec-object.defineproperty
 objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function defineProperty(O, P, Attributes) {
-  anObject$7(O);
+  anObject$8(O);
   P = toPropertyKey$1(P);
-  anObject$7(Attributes);
+  anObject$8(Attributes);
   if (typeof O === 'function' && P === 'prototype' && 'value' in Attributes && WRITABLE in Attributes && !Attributes[WRITABLE]) {
     var current = $getOwnPropertyDescriptor$1(O, P);
     if (current && current[WRITABLE]) {
@@ -494,9 +494,9 @@ objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
     }
   } return $defineProperty(O, P, Attributes);
 } : $defineProperty : function defineProperty(O, P, Attributes) {
-  anObject$7(O);
+  anObject$8(O);
   P = toPropertyKey$1(P);
-  anObject$7(Attributes);
+  anObject$8(Attributes);
   if (IE8_DOM_DEFINE$1) try {
     return $defineProperty(O, P, Attributes);
   } catch (error) { /* empty */ }
@@ -506,55 +506,55 @@ objectDefineProperty.f = DESCRIPTORS$7 ? V8_PROTOTYPE_DEFINE_BUG$1 ? function de
 };
 
 var ceil = Math.ceil;
-var floor = Math.floor;
+var floor$1 = Math.floor;
 
 // `Math.trunc` method
 // https://tc39.es/ecma262/#sec-math.trunc
 // eslint-disable-next-line es/no-math-trunc -- safe
 var mathTrunc = Math.trunc || function trunc(x) {
   var n = +x;
-  return (n > 0 ? floor : ceil)(n);
+  return (n > 0 ? floor$1 : ceil)(n);
 };
 
 var trunc = mathTrunc;
 
 // `ToIntegerOrInfinity` abstract operation
 // https://tc39.es/ecma262/#sec-tointegerorinfinity
-var toIntegerOrInfinity$2 = function (argument) {
+var toIntegerOrInfinity$4 = function (argument) {
   var number = +argument;
   // eslint-disable-next-line no-self-compare -- NaN check
   return number !== number || number === 0 ? 0 : trunc(number);
 };
 
-var toIntegerOrInfinity$1 = toIntegerOrInfinity$2;
+var toIntegerOrInfinity$3 = toIntegerOrInfinity$4;
 
-var max = Math.max;
-var min$1 = Math.min;
+var max$1 = Math.max;
+var min$2 = Math.min;
 
 // Helper for a popular repeating case of the spec:
 // Let integer be ? ToInteger(index).
 // If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).
 var toAbsoluteIndex$1 = function (index, length) {
-  var integer = toIntegerOrInfinity$1(index);
-  return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+  var integer = toIntegerOrInfinity$3(index);
+  return integer < 0 ? max$1(integer + length, 0) : min$2(integer, length);
 };
 
-var toIntegerOrInfinity = toIntegerOrInfinity$2;
+var toIntegerOrInfinity$2 = toIntegerOrInfinity$4;
 
-var min = Math.min;
+var min$1 = Math.min;
 
 // `ToLength` abstract operation
 // https://tc39.es/ecma262/#sec-tolength
-var toLength$1 = function (argument) {
-  return argument > 0 ? min(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
+var toLength$2 = function (argument) {
+  return argument > 0 ? min$1(toIntegerOrInfinity$2(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991
 };
 
-var toLength = toLength$1;
+var toLength$1 = toLength$2;
 
 // `LengthOfArrayLike` abstract operation
 // https://tc39.es/ecma262/#sec-lengthofarraylike
 var lengthOfArrayLike$1 = function (obj) {
-  return toLength(obj.length);
+  return toLength$1(obj.length);
 };
 
 var toIndexedObject$4 = toIndexedObject$5;
@@ -562,7 +562,7 @@ var toAbsoluteIndex = toAbsoluteIndex$1;
 var lengthOfArrayLike = lengthOfArrayLike$1;
 
 // `Array.prototype.{ indexOf, includes }` methods implementation
-var createMethod$1 = function (IS_INCLUDES) {
+var createMethod$2 = function (IS_INCLUDES) {
   return function ($this, el, fromIndex) {
     var O = toIndexedObject$4($this);
     var length = lengthOfArrayLike(O);
@@ -584,31 +584,31 @@ var createMethod$1 = function (IS_INCLUDES) {
 var arrayIncludes = {
   // `Array.prototype.includes` method
   // https://tc39.es/ecma262/#sec-array.prototype.includes
-  includes: createMethod$1(true),
+  includes: createMethod$2(true),
   // `Array.prototype.indexOf` method
   // https://tc39.es/ecma262/#sec-array.prototype.indexof
-  indexOf: createMethod$1(false)
+  indexOf: createMethod$2(false)
 };
 
 var hiddenKeys$4 = {};
 
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$c = functionUncurryThis;
 var hasOwn$7 = hasOwnProperty_1;
 var toIndexedObject$3 = toIndexedObject$5;
 var indexOf$1 = arrayIncludes.indexOf;
 var hiddenKeys$3 = hiddenKeys$4;
 
-var push = uncurryThis$9([].push);
+var push$1 = uncurryThis$c([].push);
 
 var objectKeysInternal = function (object, names) {
   var O = toIndexedObject$3(object);
   var i = 0;
   var result = [];
   var key;
-  for (key in O) !hasOwn$7(hiddenKeys$3, key) && hasOwn$7(O, key) && push(result, key);
+  for (key in O) !hasOwn$7(hiddenKeys$3, key) && hasOwn$7(O, key) && push$1(result, key);
   // Don't enum bug & hidden keys
   while (names.length > i) if (hasOwn$7(O, key = names[i++])) {
-    ~indexOf$1(result, key) || push(result, key);
+    ~indexOf$1(result, key) || push$1(result, key);
   }
   return result;
 };
@@ -637,7 +637,7 @@ var objectKeys$2 = Object.keys || function keys(O) {
 var DESCRIPTORS$6 = descriptors;
 var V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug;
 var definePropertyModule$3 = objectDefineProperty;
-var anObject$6 = anObject$8;
+var anObject$7 = anObject$9;
 var toIndexedObject$2 = toIndexedObject$5;
 var objectKeys$1 = objectKeys$2;
 
@@ -645,7 +645,7 @@ var objectKeys$1 = objectKeys$2;
 // https://tc39.es/ecma262/#sec-object.defineproperties
 // eslint-disable-next-line es/no-object-defineproperties -- safe
 objectDefineProperties.f = DESCRIPTORS$6 && !V8_PROTOTYPE_DEFINE_BUG ? Object.defineProperties : function defineProperties(O, Properties) {
-  anObject$6(O);
+  anObject$7(O);
   var props = toIndexedObject$2(Properties);
   var keys = objectKeys$1(Properties);
   var length = keys.length;
@@ -670,7 +670,7 @@ var sharedKey$3 = function (key) {
 
 /* global ActiveXObject -- old IE, WSH */
 
-var anObject$5 = anObject$8;
+var anObject$6 = anObject$9;
 var definePropertiesModule = objectDefineProperties;
 var enumBugKeys$1 = enumBugKeys$3;
 var hiddenKeys$2 = hiddenKeys$4;
@@ -744,7 +744,7 @@ hiddenKeys$2[IE_PROTO$1] = true;
 var objectCreate = Object.create || function create(O, Properties) {
   var result;
   if (O !== null) {
-    EmptyConstructor[PROTOTYPE] = anObject$5(O);
+    EmptyConstructor[PROTOTYPE] = anObject$6(O);
     result = new EmptyConstructor();
     EmptyConstructor[PROTOTYPE] = null;
     // add "__proto__" for Object.getPrototypeOf polyfill
@@ -753,11 +753,11 @@ var objectCreate = Object.create || function create(O, Properties) {
   return Properties === undefined ? result : definePropertiesModule.f(result, Properties);
 };
 
-var wellKnownSymbol$7 = wellKnownSymbol$9;
+var wellKnownSymbol$8 = wellKnownSymbol$a;
 var create$2 = objectCreate;
 var defineProperty$4 = objectDefineProperty.f;
 
-var UNSCOPABLES = wellKnownSymbol$7('unscopables');
+var UNSCOPABLES = wellKnownSymbol$8('unscopables');
 var ArrayPrototype = Array.prototype;
 
 // Array.prototype[@@unscopables]
@@ -777,11 +777,11 @@ var addToUnscopables$1 = function (key) {
 var iterators = {};
 
 var global$7 = global$e;
-var isCallable$a = isCallable$g;
+var isCallable$b = isCallable$h;
 
 var WeakMap$1 = global$7.WeakMap;
 
-var weakMapBasicDetection = isCallable$a(WeakMap$1) && /native code/.test(String(WeakMap$1));
+var weakMapBasicDetection = isCallable$b(WeakMap$1) && /native code/.test(String(WeakMap$1));
 
 var createPropertyDescriptor$3 = function (bitmap, value) {
   return {
@@ -893,7 +893,7 @@ objectPropertyIsEnumerable.f = NASHORN_BUG ? function propertyIsEnumerable(V) {
 } : $propertyIsEnumerable;
 
 var DESCRIPTORS$4 = descriptors;
-var call$5 = functionCall;
+var call$7 = functionCall;
 var propertyIsEnumerableModule$1 = objectPropertyIsEnumerable;
 var createPropertyDescriptor$1 = createPropertyDescriptor$3;
 var toIndexedObject$1 = toIndexedObject$5;
@@ -912,7 +912,7 @@ objectGetOwnPropertyDescriptor.f = DESCRIPTORS$4 ? $getOwnPropertyDescriptor : f
   if (IE8_DOM_DEFINE) try {
     return $getOwnPropertyDescriptor(O, P);
   } catch (error) { /* empty */ }
-  if (hasOwn$5(O, P)) return createPropertyDescriptor$1(!call$5(propertyIsEnumerableModule$1.f, O, P), O[P]);
+  if (hasOwn$5(O, P)) return createPropertyDescriptor$1(!call$7(propertyIsEnumerableModule$1.f, O, P), O[P]);
 };
 
 var makeBuiltIn$2 = {exports: {}};
@@ -920,14 +920,14 @@ var makeBuiltIn$2 = {exports: {}};
 var DESCRIPTORS$3 = descriptors;
 var hasOwn$4 = hasOwnProperty_1;
 
-var FunctionPrototype = Function.prototype;
+var FunctionPrototype$1 = Function.prototype;
 // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
 var getDescriptor = DESCRIPTORS$3 && Object.getOwnPropertyDescriptor;
 
-var EXISTS = hasOwn$4(FunctionPrototype, 'name');
+var EXISTS = hasOwn$4(FunctionPrototype$1, 'name');
 // additional protection from minified / mangled / dropped function names
 var PROPER = EXISTS && (function something() { /* empty */ }).name === 'something';
-var CONFIGURABLE = EXISTS && (!DESCRIPTORS$3 || (DESCRIPTORS$3 && getDescriptor(FunctionPrototype, 'name').configurable));
+var CONFIGURABLE = EXISTS && (!DESCRIPTORS$3 || (DESCRIPTORS$3 && getDescriptor(FunctionPrototype$1, 'name').configurable));
 
 var functionName = {
   EXISTS: EXISTS,
@@ -935,14 +935,14 @@ var functionName = {
   CONFIGURABLE: CONFIGURABLE
 };
 
-var uncurryThis$8 = functionUncurryThis;
-var isCallable$9 = isCallable$g;
+var uncurryThis$b = functionUncurryThis;
+var isCallable$a = isCallable$h;
 var store = sharedStore;
 
-var functionToString = uncurryThis$8(Function.toString);
+var functionToString = uncurryThis$b(Function.toString);
 
 // this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper
-if (!isCallable$9(store.inspectSource)) {
+if (!isCallable$a(store.inspectSource)) {
   store.inspectSource = function (it) {
     return functionToString(it);
   };
@@ -950,9 +950,9 @@ if (!isCallable$9(store.inspectSource)) {
 
 var inspectSource$1 = store.inspectSource;
 
-var uncurryThis$7 = functionUncurryThis;
-var fails$9 = fails$g;
-var isCallable$8 = isCallable$g;
+var uncurryThis$a = functionUncurryThis;
+var fails$a = fails$h;
+var isCallable$9 = isCallable$h;
 var hasOwn$3 = hasOwnProperty_1;
 var DESCRIPTORS$2 = descriptors;
 var CONFIGURABLE_FUNCTION_NAME$1 = functionName.CONFIGURABLE;
@@ -964,19 +964,19 @@ var getInternalState$2 = InternalStateModule$1.get;
 var $String$2 = String;
 // eslint-disable-next-line es/no-object-defineproperty -- safe
 var defineProperty$3 = Object.defineProperty;
-var stringSlice$1 = uncurryThis$7(''.slice);
-var replace$2 = uncurryThis$7(''.replace);
-var join = uncurryThis$7([].join);
+var stringSlice$4 = uncurryThis$a(''.slice);
+var replace$3 = uncurryThis$a(''.replace);
+var join = uncurryThis$a([].join);
 
-var CONFIGURABLE_LENGTH = DESCRIPTORS$2 && !fails$9(function () {
+var CONFIGURABLE_LENGTH = DESCRIPTORS$2 && !fails$a(function () {
   return defineProperty$3(function () { /* empty */ }, 'length', { value: 8 }).length !== 8;
 });
 
 var TEMPLATE = String(String).split('String');
 
 var makeBuiltIn$1 = makeBuiltIn$2.exports = function (value, name, options) {
-  if (stringSlice$1($String$2(name), 0, 7) === 'Symbol(') {
-    name = '[' + replace$2($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
+  if (stringSlice$4($String$2(name), 0, 7) === 'Symbol(') {
+    name = '[' + replace$3($String$2(name), /^Symbol\(([^)]*)\)/, '$1') + ']';
   }
   if (options && options.getter) name = 'get ' + name;
   if (options && options.setter) name = 'set ' + name;
@@ -1002,10 +1002,10 @@ var makeBuiltIn$1 = makeBuiltIn$2.exports = function (value, name, options) {
 // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative
 // eslint-disable-next-line no-extend-native -- required
 Function.prototype.toString = makeBuiltIn$1(function toString() {
-  return isCallable$8(this) && getInternalState$2(this).source || inspectSource(this);
+  return isCallable$9(this) && getInternalState$2(this).source || inspectSource(this);
 }, 'toString');
 
-var isCallable$7 = isCallable$g;
+var isCallable$8 = isCallable$h;
 var definePropertyModule$1 = objectDefineProperty;
 var makeBuiltIn = makeBuiltIn$2.exports;
 var defineGlobalProperty$1 = defineGlobalProperty$3;
@@ -1014,7 +1014,7 @@ var defineBuiltIn$4 = function (O, key, value, options) {
   if (!options) options = {};
   var simple = options.enumerable;
   var name = options.name !== undefined ? options.name : key;
-  if (isCallable$7(value)) makeBuiltIn(value, name, options);
+  if (isCallable$8(value)) makeBuiltIn(value, name, options);
   if (options.global) {
     if (simple) O[key] = value;
     else defineGlobalProperty$1(key, value);
@@ -1053,18 +1053,18 @@ var objectGetOwnPropertySymbols = {};
 objectGetOwnPropertySymbols.f = Object.getOwnPropertySymbols;
 
 var getBuiltIn = getBuiltIn$3;
-var uncurryThis$6 = functionUncurryThis;
+var uncurryThis$9 = functionUncurryThis;
 var getOwnPropertyNamesModule = objectGetOwnPropertyNames;
 var getOwnPropertySymbolsModule$1 = objectGetOwnPropertySymbols;
-var anObject$4 = anObject$8;
+var anObject$5 = anObject$9;
 
-var concat$1 = uncurryThis$6([].concat);
+var concat$2 = uncurryThis$9([].concat);
 
 // all object keys, includes non-enumerable and symbols
 var ownKeys$1 = getBuiltIn('Reflect', 'ownKeys') || function ownKeys(it) {
-  var keys = getOwnPropertyNamesModule.f(anObject$4(it));
+  var keys = getOwnPropertyNamesModule.f(anObject$5(it));
   var getOwnPropertySymbols = getOwnPropertySymbolsModule$1.f;
-  return getOwnPropertySymbols ? concat$1(keys, getOwnPropertySymbols(it)) : keys;
+  return getOwnPropertySymbols ? concat$2(keys, getOwnPropertySymbols(it)) : keys;
 };
 
 var hasOwn$2 = hasOwnProperty_1;
@@ -1084,8 +1084,8 @@ var copyConstructorProperties$1 = function (target, source, exceptions) {
   }
 };
 
-var fails$8 = fails$g;
-var isCallable$6 = isCallable$g;
+var fails$9 = fails$h;
+var isCallable$7 = isCallable$h;
 
 var replacement = /#|\.prototype\./;
 
@@ -1093,7 +1093,7 @@ var isForced$1 = function (feature, detection) {
   var value = data[normalize(feature)];
   return value == POLYFILL ? true
     : value == NATIVE ? false
-    : isCallable$6(detection) ? fails$8(detection)
+    : isCallable$7(detection) ? fails$9(detection)
     : !!detection;
 };
 
@@ -1162,9 +1162,9 @@ var _export = function (options, source) {
   }
 };
 
-var fails$7 = fails$g;
+var fails$8 = fails$h;
 
-var correctPrototypeGetter = !fails$7(function () {
+var correctPrototypeGetter = !fails$8(function () {
   function F() { /* empty */ }
   F.prototype.constructor = null;
   // eslint-disable-next-line es/no-object-getprototypeof -- required for testing
@@ -1172,8 +1172,8 @@ var correctPrototypeGetter = !fails$7(function () {
 });
 
 var hasOwn$1 = hasOwnProperty_1;
-var isCallable$5 = isCallable$g;
-var toObject$1 = toObject$3;
+var isCallable$6 = isCallable$h;
+var toObject$2 = toObject$4;
 var sharedKey = sharedKey$3;
 var CORRECT_PROTOTYPE_GETTER = correctPrototypeGetter;
 
@@ -1185,22 +1185,22 @@ var ObjectPrototype = $Object$1.prototype;
 // https://tc39.es/ecma262/#sec-object.getprototypeof
 // eslint-disable-next-line es/no-object-getprototypeof -- safe
 var objectGetPrototypeOf = CORRECT_PROTOTYPE_GETTER ? $Object$1.getPrototypeOf : function (O) {
-  var object = toObject$1(O);
+  var object = toObject$2(O);
   if (hasOwn$1(object, IE_PROTO)) return object[IE_PROTO];
   var constructor = object.constructor;
-  if (isCallable$5(constructor) && object instanceof constructor) {
+  if (isCallable$6(constructor) && object instanceof constructor) {
     return constructor.prototype;
   } return object instanceof $Object$1 ? ObjectPrototype : null;
 };
 
-var fails$6 = fails$g;
-var isCallable$4 = isCallable$g;
+var fails$7 = fails$h;
+var isCallable$5 = isCallable$h;
 var isObject = isObject$6;
 var getPrototypeOf$1 = objectGetPrototypeOf;
 var defineBuiltIn$2 = defineBuiltIn$4;
-var wellKnownSymbol$6 = wellKnownSymbol$9;
+var wellKnownSymbol$7 = wellKnownSymbol$a;
 
-var ITERATOR$2 = wellKnownSymbol$6('iterator');
+var ITERATOR$2 = wellKnownSymbol$7('iterator');
 var BUGGY_SAFARI_ITERATORS$1 = false;
 
 // `%IteratorPrototype%` object
@@ -1218,7 +1218,7 @@ if ([].keys) {
   }
 }
 
-var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails$6(function () {
+var NEW_ITERATOR_PROTOTYPE = !isObject(IteratorPrototype$2) || fails$7(function () {
   var test = {};
   // FF44- legacy iterators case
   return IteratorPrototype$2[ITERATOR$2].call(test) !== test;
@@ -1228,7 +1228,7 @@ if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype$2 = {};
 
 // `%IteratorPrototype%[@@iterator]()` method
 // https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator
-if (!isCallable$4(IteratorPrototype$2[ITERATOR$2])) {
+if (!isCallable$5(IteratorPrototype$2[ITERATOR$2])) {
   defineBuiltIn$2(IteratorPrototype$2, ITERATOR$2, function () {
     return this;
   });
@@ -1241,9 +1241,9 @@ var iteratorsCore = {
 
 var defineProperty$2 = objectDefineProperty.f;
 var hasOwn = hasOwnProperty_1;
-var wellKnownSymbol$5 = wellKnownSymbol$9;
+var wellKnownSymbol$6 = wellKnownSymbol$a;
 
-var TO_STRING_TAG$3 = wellKnownSymbol$5('toStringTag');
+var TO_STRING_TAG$3 = wellKnownSymbol$6('toStringTag');
 
 var setToStringTag$2 = function (target, TAG, STATIC) {
   if (target && !STATIC) target = target.prototype;
@@ -1268,30 +1268,30 @@ var iteratorCreateConstructor = function (IteratorConstructor, NAME, next, ENUME
   return IteratorConstructor;
 };
 
-var uncurryThis$5 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 var aCallable = aCallable$2;
 
 var functionUncurryThisAccessor = function (object, key, method) {
   try {
     // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
-    return uncurryThis$5(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
+    return uncurryThis$8(aCallable(Object.getOwnPropertyDescriptor(object, key)[method]));
   } catch (error) { /* empty */ }
 };
 
-var isCallable$3 = isCallable$g;
+var isCallable$4 = isCallable$h;
 
 var $String$1 = String;
 var $TypeError$1 = TypeError;
 
 var aPossiblePrototype$1 = function (argument) {
-  if (typeof argument == 'object' || isCallable$3(argument)) return argument;
+  if (typeof argument == 'object' || isCallable$4(argument)) return argument;
   throw $TypeError$1("Can't set " + $String$1(argument) + ' as a prototype');
 };
 
 /* eslint-disable no-proto -- safe */
 
 var uncurryThisAccessor = functionUncurryThisAccessor;
-var anObject$3 = anObject$8;
+var anObject$4 = anObject$9;
 var aPossiblePrototype = aPossiblePrototype$1;
 
 // `Object.setPrototypeOf` method
@@ -1308,7 +1308,7 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
     CORRECT_SETTER = test instanceof Array;
   } catch (error) { /* empty */ }
   return function setPrototypeOf(O, proto) {
-    anObject$3(O);
+    anObject$4(O);
     aPossiblePrototype(proto);
     if (CORRECT_SETTER) setter(O, proto);
     else O.__proto__ = proto;
@@ -1317,16 +1317,16 @@ var objectSetPrototypeOf = Object.setPrototypeOf || ('__proto__' in {} ? functio
 }() : undefined);
 
 var $$3 = _export;
-var call$4 = functionCall;
+var call$6 = functionCall;
 var FunctionName = functionName;
-var isCallable$2 = isCallable$g;
+var isCallable$3 = isCallable$h;
 var createIteratorConstructor = iteratorCreateConstructor;
 var getPrototypeOf = objectGetPrototypeOf;
 var setPrototypeOf = objectSetPrototypeOf;
 var setToStringTag = setToStringTag$2;
 var createNonEnumerableProperty$2 = createNonEnumerableProperty$5;
 var defineBuiltIn$1 = defineBuiltIn$4;
-var wellKnownSymbol$4 = wellKnownSymbol$9;
+var wellKnownSymbol$5 = wellKnownSymbol$a;
 var Iterators$1 = iterators;
 var IteratorsCore = iteratorsCore;
 
@@ -1334,7 +1334,7 @@ var PROPER_FUNCTION_NAME$1 = FunctionName.PROPER;
 var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE;
 var IteratorPrototype = IteratorsCore.IteratorPrototype;
 var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;
-var ITERATOR$1 = wellKnownSymbol$4('iterator');
+var ITERATOR$1 = wellKnownSymbol$5('iterator');
 var KEYS = 'keys';
 var VALUES = 'values';
 var ENTRIES = 'entries';
@@ -1371,7 +1371,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       if (getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {
         if (setPrototypeOf) {
           setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);
-        } else if (!isCallable$2(CurrentIteratorPrototype[ITERATOR$1])) {
+        } else if (!isCallable$3(CurrentIteratorPrototype[ITERATOR$1])) {
           defineBuiltIn$1(CurrentIteratorPrototype, ITERATOR$1, returnThis);
         }
       }
@@ -1386,7 +1386,7 @@ var iteratorDefine = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
       createNonEnumerableProperty$2(IterablePrototype, 'name', VALUES);
     } else {
       INCORRECT_VALUES_NAME = true;
-      defaultIterator = function values() { return call$4(nativeIterator, this); };
+      defaultIterator = function values() { return call$6(nativeIterator, this); };
     }
   }
 
@@ -1529,10 +1529,10 @@ var DOMIterables = domIterables;
 var DOMTokenListPrototype = domTokenListPrototype;
 var ArrayIteratorMethods = es_array_iterator;
 var createNonEnumerableProperty$1 = createNonEnumerableProperty$5;
-var wellKnownSymbol$3 = wellKnownSymbol$9;
+var wellKnownSymbol$4 = wellKnownSymbol$a;
 
-var ITERATOR = wellKnownSymbol$3('iterator');
-var TO_STRING_TAG$2 = wellKnownSymbol$3('toStringTag');
+var ITERATOR = wellKnownSymbol$4('iterator');
+var TO_STRING_TAG$2 = wellKnownSymbol$4('toStringTag');
 var ArrayValues = ArrayIteratorMethods.values;
 
 var handlePrototype = function (CollectionPrototype, COLLECTION_NAME) {
@@ -1564,24 +1564,24 @@ for (var COLLECTION_NAME in DOMIterables) {
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 var DESCRIPTORS = descriptors;
-var uncurryThis$4 = functionUncurryThis;
-var call$3 = functionCall;
-var fails$5 = fails$g;
+var uncurryThis$7 = functionUncurryThis;
+var call$5 = functionCall;
+var fails$6 = fails$h;
 var objectKeys = objectKeys$2;
 var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
 var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject = toObject$3;
+var toObject$1 = toObject$4;
 var IndexedObject = indexedObject;
 
 // eslint-disable-next-line es/no-object-assign -- safe
 var $assign = Object.assign;
 // eslint-disable-next-line es/no-object-defineproperty -- required for testing
 var defineProperty = Object.defineProperty;
-var concat = uncurryThis$4([].concat);
+var concat$1 = uncurryThis$7([].concat);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$5(function () {
+var objectAssign = !$assign || fails$6(function () {
   // should have correct order of operations (Edge bug)
   if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
     enumerable: true,
@@ -1602,20 +1602,20 @@ var objectAssign = !$assign || fails$5(function () {
   alphabet.split('').forEach(function (chr) { B[chr] = chr; });
   return $assign({}, A)[symbol] != 7 || objectKeys($assign({}, B)).join('') != alphabet;
 }) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
-  var T = toObject(target);
+  var T = toObject$1(target);
   var argumentsLength = arguments.length;
   var index = 1;
   var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
   var propertyIsEnumerable = propertyIsEnumerableModule.f;
   while (argumentsLength > index) {
     var S = IndexedObject(arguments[index++]);
-    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
+    var keys = getOwnPropertySymbols ? concat$1(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
     var length = keys.length;
     var j = 0;
     var key;
     while (length > j) {
       key = keys[j++];
-      if (!DESCRIPTORS || call$3(propertyIsEnumerable, S, key)) T[key] = S[key];
+      if (!DESCRIPTORS || call$5(propertyIsEnumerable, S, key)) T[key] = S[key];
     }
   } return T;
 } : $assign;
@@ -1655,271 +1655,9 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-const ClickableElement = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "molecules-dropdownstyles__ClickableElement",
-  componentId: "sc-3wugi4-0"
-})(["cursor:pointer;"]);
-const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withConfig({
-  displayName: "molecules-dropdownstyles__ContainerDropdown",
-  componentId: "sc-3wugi4-1"
-})(["padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";border:", ";border-radius:", ";box-shadow:", ";.fieldLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}svg{width:", ";fill:", ";}input{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}&:focus-within{background-color:", ";border:", ";", "}", " ", ""], ({
-  theme
-}) => theme.components.dropdown.paddingHorizontal, ({
-  theme
-}) => theme.components.dropdown.paddingHorizontal, ({
-  theme
-}) => theme.components.dropdown.paddingVertical, ({
-  theme
-}) => theme.components.dropdown.paddingVertical, ({
-  theme
-}) => theme.components.dropdown.gap, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].container.color.default, ({
-  theme,
-  variant
-}) => `1px solid ${theme.components.dropdown[variant].container.border.default}`, ({
-  theme
-}) => theme.components.dropdown.borderRadius, ({
-  theme: {
-    effects: {
-      shadow
-    }
-  }
-}) => `${shadow.lvl0.x} ${shadow.lvl0.y} ${shadow.lvl0.blur} ${shadow.lvl0.spread} ${shadow.lvl0.color}`, ({
-  theme,
-  variant,
-  hasValue
-}) => theme.components.dropdown[variant].text.color.fieldLabel[hasValue ? 'filled' : 'default'], ({
-  theme
-}) => theme.components.dropdown.fieldLabel.fontFamily, ({
-  theme
-}) => theme.components.dropdown.fieldLabel.fontWeight, ({
-  theme
-}) => theme.components.dropdown.fieldLabel.lineHeight, ({
-  theme
-}) => theme.components.dropdown.fieldLabel.fontSize, ({
-  theme
-}) => theme.components.dropdown.fieldLabel.letterSpacing, ({
-  theme,
-  variant,
-  hasValue
-}) => theme.components.dropdown[variant].text.color.required[hasValue ? 'filled' : 'default'], ({
-  theme
-}) => theme.components.dropdown.required.fontFamily, ({
-  theme
-}) => theme.components.dropdown.required.fontWeight, ({
-  theme
-}) => theme.components.dropdown.required.lineHeight, ({
-  theme
-}) => theme.components.dropdown.required.fontSize, ({
-  theme
-}) => theme.components.dropdown.required.letterSpacing, ({
-  theme
-}) => theme.components.dropdown.icon.size, ({
-  theme,
-  variant,
-  hasValue
-}) => theme.components.dropdown[variant].icon.color[hasValue ? 'filled' : 'default'], ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.fieldLabel.default, ({
-  theme
-}) => theme.components.dropdown.required.fontFamily, ({
-  theme
-}) => theme.components.dropdown.required.fontWeight, ({
-  theme
-}) => theme.components.dropdown.required.lineHeight, ({
-  theme
-}) => theme.components.dropdown.required.fontSize, ({
-  theme
-}) => theme.components.dropdown.required.letterSpacing, ({
-  theme,
-  variant,
-  hasError
-}) => theme.components.dropdown[variant].container.color[hasError ? 'error' : 'focus'], ({
-  theme,
-  variant,
-  hasError
-}) => `1px solid ${theme.components.dropdown[variant].container.border[hasError ? 'error' : 'focus']}`, ({
-  hasError
-}) => !hasError && styled.css([".fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.fieldLabel.focus, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.required.focus, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].icon.color.focus), ({
-  hasError,
-  hasValue
-}) => hasError && styled.css(["border:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
-  theme,
-  variant
-}) => `1px solid ${theme.components.dropdown[variant].container.border[hasValue ? 'errorFilled' : 'error']}`, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].container.color[hasValue ? 'errorFilled' : 'error'], ({
-  theme,
-  variant,
-  hasValue
-}) => theme.components.dropdown[variant].text.color.fieldLabel[hasValue ? 'errorFilled' : 'error'], ({
-  theme,
-  variant,
-  hasValue
-}) => theme.components.dropdown[variant].text.color.required[hasValue ? 'errorFilled' : 'error'], ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].icon.color[hasValue ? 'errorFilled' : 'error']), ({
-  disabled
-}) => disabled && styled.css(["cursor:not-allowed;border:", ";background-color:", ";*{cursor:not-allowed;}.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}input{::placeholder{color:", ";}}"], ({
-  theme,
-  variant
-}) => `1px solid ${theme.components.dropdown[variant].container.border.disable}`, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].container.color.disable, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.fieldLabel.disable, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.required.disable, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].icon.color.disable, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.required.disable));
-const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
-  displayName: "molecules-dropdownstyles__SectionContainer",
-  componentId: "sc-3wugi4-2"
-})([".errorMessage{width:100%;padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
-  theme
-}) => theme.components.dropdown.paddingVertical, ({
-  theme
-}) => theme.components.dropdown.paddingVertical, ({
-  theme,
-  variant
-}) => theme.components.dropdown[variant].text.color.errorMessage.error, ({
-  theme
-}) => theme.components.dropdown.error.fontFamily, ({
-  theme
-}) => theme.components.dropdown.error.fontWeight, ({
-  theme
-}) => theme.components.dropdown.error.lineHeight, ({
-  theme
-}) => theme.components.dropdown.error.fontSize, ({
-  theme
-}) => theme.components.dropdown.error.letterSpacing);
-const InputAndIconDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "molecules-dropdownstyles__InputAndIconDropdown",
-  componentId: "sc-3wugi4-3"
-})(["display:flex;"]);
-const ContentDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
-  displayName: "molecules-dropdownstyles__ContentDropdown",
-  componentId: "sc-3wugi4-4"
-})(["gap:", ";"], ({
-  theme
-}) => theme.components.dropdown.gap);
-const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default["default"](ClickableElement).withConfig({
-  displayName: "molecules-dropdownstyles__FieldLabelAndRequiredLabelDropdown",
-  componentId: "sc-3wugi4-5"
-})(["gap:", ";display:flex;"], ({
-  theme
-}) => theme.components.dropdown.requiredGap);
+var wellKnownSymbol$3 = wellKnownSymbol$a;
 
-const ReusableDropdownComponent = ({
-  label,
-  variant: _variant = 'grey',
-  required,
-  inputValue,
-  hasError,
-  disabled,
-  errorMessage,
-  onChangeInputValue,
-  setShowSelectComponent,
-  showSelectComponent,
-  setSelectedOptionOnInputValue,
-  inputRef,
-  dataTestId,
-  placeholder
-}) => {
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(ContainerDropdown, Object.assign({
-      variant: _variant,
-      hasValue: inputValue,
-      hasError: hasError,
-      disabled: disabled,
-      "data-testid": `${dataTestId}-dropdown-container`
-    }, {
-      children: jsxRuntime.jsxs(ContentDropdown, {
-        children: [jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
-          onClick: () => {
-            setShowSelectComponent(disabled ? false : !showSelectComponent);
-          }
-        }, {
-          children: [jsxRuntime.jsx("label", Object.assign({
-            className: "fieldLabel",
-            "data-testid": `${dataTestId}-label`
-          }, {
-            children: label
-          })), required && jsxRuntime.jsx("label", Object.assign({
-            className: "requiredLabel",
-            "data-testid": `${dataTestId}-label-required`
-          }, {
-            children: "*"
-          }))]
-        })), jsxRuntime.jsxs(InputAndIconDropdown, {
-          children: [jsxRuntime.jsx(atomsInput.InputStyled, {
-            "data-testid": `${dataTestId}-input`,
-            ref: inputRef,
-            disabled: disabled,
-            value: inputValue,
-            variant: _variant,
-            placeholder: placeholder,
-            onChange: e => {
-              var _a;
-              onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
-              setShowSelectComponent(true);
-            },
-            onFocus: () => {
-              onChangeInputValue('');
-              setShowSelectComponent(true);
-            },
-            onBlur: () => {
-              setSelectedOptionOnInputValue();
-              setShowSelectComponent(false);
-            }
-          }), jsxRuntime.jsx(ClickableElement, Object.assign({
-            onClick: () => {
-              if (!disabled) setShowSelectComponent(!showSelectComponent);
-            }
-          }, {
-            children: jsxRuntime.jsx(atomsIcon.Icon, {
-              dataTestId: `${dataTestId}-icon`,
-              icon: !showSelectComponent ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
-            })
-          }))]
-        })]
-      })
-    })), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", Object.assign({
-      className: "errorMessage"
-    }, {
-      children: jsxRuntime.jsx("label", Object.assign({
-        "data-testid": `${dataTestId}-label-error-message`
-      }, {
-        children: errorMessage
-      }))
-    }))]
-  });
-};
-
-var wellKnownSymbol$2 = wellKnownSymbol$9;
-
-var TO_STRING_TAG$1 = wellKnownSymbol$2('toStringTag');
+var TO_STRING_TAG$1 = wellKnownSymbol$3('toStringTag');
 var test = {};
 
 test[TO_STRING_TAG$1] = 'z';
@@ -1927,11 +1665,11 @@ test[TO_STRING_TAG$1] = 'z';
 var toStringTagSupport = String(test) === '[object z]';
 
 var TO_STRING_TAG_SUPPORT = toStringTagSupport;
-var isCallable$1 = isCallable$g;
+var isCallable$2 = isCallable$h;
 var classofRaw$1 = classofRaw$2;
-var wellKnownSymbol$1 = wellKnownSymbol$9;
+var wellKnownSymbol$2 = wellKnownSymbol$a;
 
-var TO_STRING_TAG = wellKnownSymbol$1('toStringTag');
+var TO_STRING_TAG = wellKnownSymbol$2('toStringTag');
 var $Object = Object;
 
 // ES3 wrong here
@@ -1953,24 +1691,24 @@ var classof$2 = TO_STRING_TAG_SUPPORT ? classofRaw$1 : function (it) {
     // builtinTag case
     : CORRECT_ARGUMENTS ? classofRaw$1(O)
     // ES3 arguments fallback
-    : (result = classofRaw$1(O)) == 'Object' && isCallable$1(O.callee) ? 'Arguments' : result;
+    : (result = classofRaw$1(O)) == 'Object' && isCallable$2(O.callee) ? 'Arguments' : result;
 };
 
 var classof$1 = classof$2;
 
 var $String = String;
 
-var toString$3 = function (argument) {
+var toString$5 = function (argument) {
   if (classof$1(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
   return $String(argument);
 };
 
-var anObject$2 = anObject$8;
+var anObject$3 = anObject$9;
 
 // `RegExp.prototype.flags` getter implementation
 // https://tc39.es/ecma262/#sec-get-regexp.prototype.flags
 var regexpFlags$1 = function () {
-  var that = anObject$2(this);
+  var that = anObject$3(this);
   var result = '';
   if (that.hasIndices) result += 'd';
   if (that.global) result += 'g';
@@ -1983,13 +1721,13 @@ var regexpFlags$1 = function () {
   return result;
 };
 
-var fails$4 = fails$g;
+var fails$5 = fails$h;
 var global$3 = global$e;
 
 // babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
 var $RegExp$2 = global$3.RegExp;
 
-var UNSUPPORTED_Y$1 = fails$4(function () {
+var UNSUPPORTED_Y$1 = fails$5(function () {
   var re = $RegExp$2('a', 'y');
   re.lastIndex = 2;
   return re.exec('abcd') != null;
@@ -1997,11 +1735,11 @@ var UNSUPPORTED_Y$1 = fails$4(function () {
 
 // UC Browser bug
 // https://github.com/zloirock/core-js/issues/1008
-var MISSED_STICKY = UNSUPPORTED_Y$1 || fails$4(function () {
+var MISSED_STICKY = UNSUPPORTED_Y$1 || fails$5(function () {
   return !$RegExp$2('a', 'y').sticky;
 });
 
-var BROKEN_CARET = UNSUPPORTED_Y$1 || fails$4(function () {
+var BROKEN_CARET = UNSUPPORTED_Y$1 || fails$5(function () {
   // https://bugzilla.mozilla.org/show_bug.cgi?id=773687
   var re = $RegExp$2('^r', 'gy');
   re.lastIndex = 2;
@@ -2014,24 +1752,24 @@ var regexpStickyHelpers = {
   UNSUPPORTED_Y: UNSUPPORTED_Y$1
 };
 
-var fails$3 = fails$g;
+var fails$4 = fails$h;
 var global$2 = global$e;
 
 // babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
 var $RegExp$1 = global$2.RegExp;
 
-var regexpUnsupportedDotAll = fails$3(function () {
+var regexpUnsupportedDotAll = fails$4(function () {
   var re = $RegExp$1('.', 's');
   return !(re.dotAll && re.exec('\n') && re.flags === 's');
 });
 
-var fails$2 = fails$g;
+var fails$3 = fails$h;
 var global$1 = global$e;
 
 // babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
 var $RegExp = global$1.RegExp;
 
-var regexpUnsupportedNcg = fails$2(function () {
+var regexpUnsupportedNcg = fails$3(function () {
   var re = $RegExp('(?<a>b)', 'g');
   return re.exec('b').groups.a !== 'b' ||
     'b'.replace(re, '$<a>c') !== 'bc';
@@ -2039,9 +1777,9 @@ var regexpUnsupportedNcg = fails$2(function () {
 
 /* eslint-disable regexp/no-empty-capturing-group, regexp/no-empty-group, regexp/no-lazy-ends -- testing */
 /* eslint-disable regexp/no-useless-quantifier -- testing */
-var call$2 = functionCall;
-var uncurryThis$3 = functionUncurryThis;
-var toString$2 = toString$3;
+var call$4 = functionCall;
+var uncurryThis$6 = functionUncurryThis;
+var toString$4 = toString$5;
 var regexpFlags = regexpFlags$1;
 var stickyHelpers = regexpStickyHelpers;
 var shared = shared$4.exports;
@@ -2053,16 +1791,16 @@ var UNSUPPORTED_NCG = regexpUnsupportedNcg;
 var nativeReplace = shared('native-string-replace', String.prototype.replace);
 var nativeExec = RegExp.prototype.exec;
 var patchedExec = nativeExec;
-var charAt = uncurryThis$3(''.charAt);
-var indexOf = uncurryThis$3(''.indexOf);
-var replace$1 = uncurryThis$3(''.replace);
-var stringSlice = uncurryThis$3(''.slice);
+var charAt$3 = uncurryThis$6(''.charAt);
+var indexOf = uncurryThis$6(''.indexOf);
+var replace$2 = uncurryThis$6(''.replace);
+var stringSlice$3 = uncurryThis$6(''.slice);
 
 var UPDATES_LAST_INDEX_WRONG = (function () {
   var re1 = /a/;
   var re2 = /b*/g;
-  call$2(nativeExec, re1, 'a');
-  call$2(nativeExec, re2, 'a');
+  call$4(nativeExec, re1, 'a');
+  call$4(nativeExec, re2, 'a');
   return re1.lastIndex !== 0 || re2.lastIndex !== 0;
 })();
 
@@ -2077,33 +1815,33 @@ if (PATCH) {
   patchedExec = function exec(string) {
     var re = this;
     var state = getInternalState(re);
-    var str = toString$2(string);
+    var str = toString$4(string);
     var raw = state.raw;
     var result, reCopy, lastIndex, match, i, object, group;
 
     if (raw) {
       raw.lastIndex = re.lastIndex;
-      result = call$2(patchedExec, raw, str);
+      result = call$4(patchedExec, raw, str);
       re.lastIndex = raw.lastIndex;
       return result;
     }
 
     var groups = state.groups;
     var sticky = UNSUPPORTED_Y && re.sticky;
-    var flags = call$2(regexpFlags, re);
+    var flags = call$4(regexpFlags, re);
     var source = re.source;
     var charsAdded = 0;
     var strCopy = str;
 
     if (sticky) {
-      flags = replace$1(flags, 'y', '');
+      flags = replace$2(flags, 'y', '');
       if (indexOf(flags, 'g') === -1) {
         flags += 'g';
       }
 
-      strCopy = stringSlice(str, re.lastIndex);
+      strCopy = stringSlice$3(str, re.lastIndex);
       // Support anchored sticky behavior.
-      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt(str, re.lastIndex - 1) !== '\n')) {
+      if (re.lastIndex > 0 && (!re.multiline || re.multiline && charAt$3(str, re.lastIndex - 1) !== '\n')) {
         source = '(?: ' + source + ')';
         strCopy = ' ' + strCopy;
         charsAdded++;
@@ -2118,12 +1856,12 @@ if (PATCH) {
     }
     if (UPDATES_LAST_INDEX_WRONG) lastIndex = re.lastIndex;
 
-    match = call$2(nativeExec, sticky ? reCopy : re, strCopy);
+    match = call$4(nativeExec, sticky ? reCopy : re, strCopy);
 
     if (sticky) {
       if (match) {
-        match.input = stringSlice(match.input, charsAdded);
-        match[0] = stringSlice(match[0], charsAdded);
+        match.input = stringSlice$3(match.input, charsAdded);
+        match[0] = stringSlice$3(match[0], charsAdded);
         match.index = re.lastIndex;
         re.lastIndex += match[0].length;
       } else re.lastIndex = 0;
@@ -2133,7 +1871,7 @@ if (PATCH) {
     if (NPCG_INCLUDED && match && match.length > 1) {
       // Fix browsers whose `exec` methods don't consistently return `undefined`
       // for NPCG, like IE8. NOTE: This doesn't work for /(.?)?/
-      call$2(nativeReplace, match[0], reCopy, function () {
+      call$4(nativeReplace, match[0], reCopy, function () {
         for (i = 1; i < arguments.length - 2; i++) {
           if (arguments[i] === undefined) match[i] = undefined;
         }
@@ -2163,39 +1901,50 @@ $$1({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
   exec: exec
 });
 
+var NATIVE_BIND = functionBindNative;
+
+var FunctionPrototype = Function.prototype;
+var apply$1 = FunctionPrototype.apply;
+var call$3 = FunctionPrototype.call;
+
+// eslint-disable-next-line es/no-reflect -- safe
+var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND ? call$3.bind(apply$1) : function () {
+  return call$3.apply(apply$1, arguments);
+});
+
 var classofRaw = classofRaw$2;
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$5 = functionUncurryThis;
 
 var functionUncurryThisClause = function (fn) {
   // Nashorn bug:
   //   https://github.com/zloirock/core-js/issues/1128
   //   https://github.com/zloirock/core-js/issues/1130
-  if (classofRaw(fn) === 'Function') return uncurryThis$2(fn);
+  if (classofRaw(fn) === 'Function') return uncurryThis$5(fn);
 };
 
 // TODO: Remove from `core-js@4` since it's moved to entry points
 
-var uncurryThis$1 = functionUncurryThisClause;
+var uncurryThis$4 = functionUncurryThisClause;
 var defineBuiltIn = defineBuiltIn$4;
 var regexpExec$1 = regexpExec$2;
-var fails$1 = fails$g;
-var wellKnownSymbol = wellKnownSymbol$9;
+var fails$2 = fails$h;
+var wellKnownSymbol$1 = wellKnownSymbol$a;
 var createNonEnumerableProperty = createNonEnumerableProperty$5;
 
-var SPECIES = wellKnownSymbol('species');
+var SPECIES = wellKnownSymbol$1('species');
 var RegExpPrototype = RegExp.prototype;
 
 var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
-  var SYMBOL = wellKnownSymbol(KEY);
+  var SYMBOL = wellKnownSymbol$1(KEY);
 
-  var DELEGATES_TO_SYMBOL = !fails$1(function () {
+  var DELEGATES_TO_SYMBOL = !fails$2(function () {
     // String methods call symbol-named RegEp methods
     var O = {};
     O[SYMBOL] = function () { return 7; };
     return ''[KEY](O) != 7;
   });
 
-  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$1(function () {
+  var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL && !fails$2(function () {
     // Symbol-named RegExp methods call .exec
     var execCalled = false;
     var re = /a/;
@@ -2224,9 +1973,9 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
     !DELEGATES_TO_EXEC ||
     FORCED
   ) {
-    var uncurriedNativeRegExpMethod = uncurryThis$1(/./[SYMBOL]);
+    var uncurriedNativeRegExpMethod = uncurryThis$4(/./[SYMBOL]);
     var methods = exec(SYMBOL, ''[KEY], function (nativeMethod, regexp, str, arg2, forceStringMethod) {
-      var uncurriedNativeMethod = uncurryThis$1(nativeMethod);
+      var uncurriedNativeMethod = uncurryThis$4(nativeMethod);
       var $exec = regexp.exec;
       if ($exec === regexpExec$1 || $exec === RegExpPrototype.exec) {
         if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
@@ -2247,17 +1996,100 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
   if (SHAM) createNonEnumerableProperty(RegExpPrototype[SYMBOL], 'sham', true);
 };
 
-// `SameValue` abstract operation
-// https://tc39.es/ecma262/#sec-samevalue
-// eslint-disable-next-line es/no-object-is -- safe
-var sameValue$1 = Object.is || function is(x, y) {
-  // eslint-disable-next-line no-self-compare -- NaN check
-  return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
+var uncurryThis$3 = functionUncurryThis;
+var toIntegerOrInfinity$1 = toIntegerOrInfinity$4;
+var toString$3 = toString$5;
+var requireObjectCoercible$3 = requireObjectCoercible$6;
+
+var charAt$2 = uncurryThis$3(''.charAt);
+var charCodeAt = uncurryThis$3(''.charCodeAt);
+var stringSlice$2 = uncurryThis$3(''.slice);
+
+var createMethod$1 = function (CONVERT_TO_STRING) {
+  return function ($this, pos) {
+    var S = toString$3(requireObjectCoercible$3($this));
+    var position = toIntegerOrInfinity$1(pos);
+    var size = S.length;
+    var first, second;
+    if (position < 0 || position >= size) return CONVERT_TO_STRING ? '' : undefined;
+    first = charCodeAt(S, position);
+    return first < 0xD800 || first > 0xDBFF || position + 1 === size
+      || (second = charCodeAt(S, position + 1)) < 0xDC00 || second > 0xDFFF
+        ? CONVERT_TO_STRING
+          ? charAt$2(S, position)
+          : first
+        : CONVERT_TO_STRING
+          ? stringSlice$2(S, position, position + 2)
+          : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000;
+  };
 };
 
-var call$1 = functionCall;
-var anObject$1 = anObject$8;
-var isCallable = isCallable$g;
+var stringMultibyte = {
+  // `String.prototype.codePointAt` method
+  // https://tc39.es/ecma262/#sec-string.prototype.codepointat
+  codeAt: createMethod$1(false),
+  // `String.prototype.at` method
+  // https://github.com/mathiasbynens/String.prototype.at
+  charAt: createMethod$1(true)
+};
+
+var charAt$1 = stringMultibyte.charAt;
+
+// `AdvanceStringIndex` abstract operation
+// https://tc39.es/ecma262/#sec-advancestringindex
+var advanceStringIndex$1 = function (S, index, unicode) {
+  return index + (unicode ? charAt$1(S, index).length : 1);
+};
+
+var uncurryThis$2 = functionUncurryThis;
+var toObject = toObject$4;
+
+var floor = Math.floor;
+var charAt = uncurryThis$2(''.charAt);
+var replace$1 = uncurryThis$2(''.replace);
+var stringSlice$1 = uncurryThis$2(''.slice);
+// eslint-disable-next-line redos/no-vulnerable -- safe
+var SUBSTITUTION_SYMBOLS = /\$([$&'`]|\d{1,2}|<[^>]*>)/g;
+var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&'`]|\d{1,2})/g;
+
+// `GetSubstitution` abstract operation
+// https://tc39.es/ecma262/#sec-getsubstitution
+var getSubstitution$1 = function (matched, str, position, captures, namedCaptures, replacement) {
+  var tailPos = position + matched.length;
+  var m = captures.length;
+  var symbols = SUBSTITUTION_SYMBOLS_NO_NAMED;
+  if (namedCaptures !== undefined) {
+    namedCaptures = toObject(namedCaptures);
+    symbols = SUBSTITUTION_SYMBOLS;
+  }
+  return replace$1(replacement, symbols, function (match, ch) {
+    var capture;
+    switch (charAt(ch, 0)) {
+      case '$': return '$';
+      case '&': return matched;
+      case '`': return stringSlice$1(str, 0, position);
+      case "'": return stringSlice$1(str, tailPos);
+      case '<':
+        capture = namedCaptures[stringSlice$1(ch, 1, -1)];
+        break;
+      default: // \d\d?
+        var n = +ch;
+        if (n === 0) return match;
+        if (n > m) {
+          var f = floor(n / 10);
+          if (f === 0) return match;
+          if (f <= m) return captures[f - 1] === undefined ? charAt(ch, 1) : captures[f - 1] + charAt(ch, 1);
+          return match;
+        }
+        capture = captures[n - 1];
+    }
+    return capture === undefined ? '' : capture;
+  });
+};
+
+var call$2 = functionCall;
+var anObject$2 = anObject$9;
+var isCallable$1 = isCallable$h;
 var classof = classofRaw$2;
 var regexpExec = regexpExec$2;
 
@@ -2267,23 +2099,426 @@ var $TypeError = TypeError;
 // https://tc39.es/ecma262/#sec-regexpexec
 var regexpExecAbstract = function (R, S) {
   var exec = R.exec;
-  if (isCallable(exec)) {
-    var result = call$1(exec, R, S);
-    if (result !== null) anObject$1(result);
+  if (isCallable$1(exec)) {
+    var result = call$2(exec, R, S);
+    if (result !== null) anObject$2(result);
     return result;
   }
-  if (classof(R) === 'RegExp') return call$1(regexpExec, R, S);
+  if (classof(R) === 'RegExp') return call$2(regexpExec, R, S);
   throw $TypeError('RegExp#exec called on incompatible receiver');
 };
 
+var apply = functionApply;
+var call$1 = functionCall;
+var uncurryThis$1 = functionUncurryThis;
+var fixRegExpWellKnownSymbolLogic$1 = fixRegexpWellKnownSymbolLogic;
+var fails$1 = fails$h;
+var anObject$1 = anObject$9;
+var isCallable = isCallable$h;
+var isNullOrUndefined$1 = isNullOrUndefined$4;
+var toIntegerOrInfinity = toIntegerOrInfinity$4;
+var toLength = toLength$2;
+var toString$2 = toString$5;
+var requireObjectCoercible$2 = requireObjectCoercible$6;
+var advanceStringIndex = advanceStringIndex$1;
+var getMethod$1 = getMethod$3;
+var getSubstitution = getSubstitution$1;
+var regExpExec$1 = regexpExecAbstract;
+var wellKnownSymbol = wellKnownSymbol$a;
+
+var REPLACE = wellKnownSymbol('replace');
+var max = Math.max;
+var min = Math.min;
+var concat = uncurryThis$1([].concat);
+var push = uncurryThis$1([].push);
+var stringIndexOf = uncurryThis$1(''.indexOf);
+var stringSlice = uncurryThis$1(''.slice);
+
+var maybeToString = function (it) {
+  return it === undefined ? it : String(it);
+};
+
+// IE <= 11 replaces $0 with the whole match, as if it was $&
+// https://stackoverflow.com/questions/6024666/getting-ie-to-replace-a-regex-with-the-literal-string-0
+var REPLACE_KEEPS_$0 = (function () {
+  // eslint-disable-next-line regexp/prefer-escape-replacement-dollar-char -- required for testing
+  return 'a'.replace(/./, '$0') === '$0';
+})();
+
+// Safari <= 13.0.3(?) substitutes nth capture where n>m with an empty string
+var REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE = (function () {
+  if (/./[REPLACE]) {
+    return /./[REPLACE]('a', '$0') === '';
+  }
+  return false;
+})();
+
+var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$1(function () {
+  var re = /./;
+  re.exec = function () {
+    var result = [];
+    result.groups = { a: '7' };
+    return result;
+  };
+  // eslint-disable-next-line regexp/no-useless-dollar-replacements -- false positive
+  return ''.replace(re, '$<a>') !== '7';
+});
+
+// @@replace logic
+fixRegExpWellKnownSymbolLogic$1('replace', function (_, nativeReplace, maybeCallNative) {
+  var UNSAFE_SUBSTITUTE = REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE ? '$' : '$0';
+
+  return [
+    // `String.prototype.replace` method
+    // https://tc39.es/ecma262/#sec-string.prototype.replace
+    function replace(searchValue, replaceValue) {
+      var O = requireObjectCoercible$2(this);
+      var replacer = isNullOrUndefined$1(searchValue) ? undefined : getMethod$1(searchValue, REPLACE);
+      return replacer
+        ? call$1(replacer, searchValue, O, replaceValue)
+        : call$1(nativeReplace, toString$2(O), searchValue, replaceValue);
+    },
+    // `RegExp.prototype[@@replace]` method
+    // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
+    function (string, replaceValue) {
+      var rx = anObject$1(this);
+      var S = toString$2(string);
+
+      if (
+        typeof replaceValue == 'string' &&
+        stringIndexOf(replaceValue, UNSAFE_SUBSTITUTE) === -1 &&
+        stringIndexOf(replaceValue, '$<') === -1
+      ) {
+        var res = maybeCallNative(nativeReplace, rx, S, replaceValue);
+        if (res.done) return res.value;
+      }
+
+      var functionalReplace = isCallable(replaceValue);
+      if (!functionalReplace) replaceValue = toString$2(replaceValue);
+
+      var global = rx.global;
+      if (global) {
+        var fullUnicode = rx.unicode;
+        rx.lastIndex = 0;
+      }
+      var results = [];
+      while (true) {
+        var result = regExpExec$1(rx, S);
+        if (result === null) break;
+
+        push(results, result);
+        if (!global) break;
+
+        var matchStr = toString$2(result[0]);
+        if (matchStr === '') rx.lastIndex = advanceStringIndex(S, toLength(rx.lastIndex), fullUnicode);
+      }
+
+      var accumulatedResult = '';
+      var nextSourcePosition = 0;
+      for (var i = 0; i < results.length; i++) {
+        result = results[i];
+
+        var matched = toString$2(result[0]);
+        var position = max(min(toIntegerOrInfinity(result.index), S.length), 0);
+        var captures = [];
+        // NOTE: This is equivalent to
+        //   captures = result.slice(1).map(maybeToString)
+        // but for some reason `nativeSlice.call(result, 1, result.length)` (called in
+        // the slice polyfill when slicing native arrays) "doesn't work" in safari 9 and
+        // causes a crash (https://pastebin.com/N21QzeQA) when trying to debug it.
+        for (var j = 1; j < result.length; j++) push(captures, maybeToString(result[j]));
+        var namedCaptures = result.groups;
+        if (functionalReplace) {
+          var replacerArgs = concat([matched], captures, position, S);
+          if (namedCaptures !== undefined) push(replacerArgs, namedCaptures);
+          var replacement = toString$2(apply(replaceValue, undefined, replacerArgs));
+        } else {
+          replacement = getSubstitution(matched, S, position, captures, namedCaptures, replaceValue);
+        }
+        if (position >= nextSourcePosition) {
+          accumulatedResult += stringSlice(S, nextSourcePosition, position) + replacement;
+          nextSourcePosition = position + matched.length;
+        }
+      }
+      return accumulatedResult + stringSlice(S, nextSourcePosition);
+    }
+  ];
+}, !REPLACE_SUPPORTS_NAMED_GROUPS || !REPLACE_KEEPS_$0 || REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE);
+
+const ClickableElement = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "molecules-dropdownstyles__ClickableElement",
+  componentId: "sc-3wugi4-0"
+})(["display:flex;flex-direction:column;justify-content:center;cursor:pointer;"]);
+const ContainerDropdown = /*#__PURE__*/styled__default["default"].section.withConfig({
+  displayName: "molecules-dropdownstyles__ContainerDropdown",
+  componentId: "sc-3wugi4-1"
+})(["display:flex;padding-top:", ";padding-bottom:", ";padding-right:", ";padding-left:", ";gap:", ";background-color:", ";border:", ";border-radius:", ";box-shadow:", ";input{display:inline-block;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow-x:hidden;}.fieldLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}.requiredLabel{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}svg{fill:", ";}&:focus-within{background-color:", ";border:", ";", "}", " ", ""], ({
+  theme
+}) => theme.components.dropdown.paddingVertical, ({
+  theme
+}) => theme.components.dropdown.paddingVertical, ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme
+}) => theme.components.dropdown.gap, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].container.color.default, ({
+  theme,
+  variant
+}) => `1px solid ${theme.components.dropdown[variant].container.border.default}`, ({
+  theme
+}) => theme.components.dropdown.borderRadius, ({
+  theme: {
+    effects: {
+      shadow
+    }
+  }
+}) => `${shadow.lvl0.x} ${shadow.lvl0.y} ${shadow.lvl0.blur} ${shadow.lvl0.spread} ${shadow.lvl0.color}`, ({
+  theme,
+  variant,
+  hasValue
+}) => theme.components.dropdown[variant].text.color.fieldLabel[hasValue ? 'filled' : 'default'], ({
+  theme
+}) => theme.components.dropdown.fieldLabel.fontFamily, ({
+  theme
+}) => theme.components.dropdown.fieldLabel.fontWeight, ({
+  theme
+}) => theme.components.dropdown.fieldLabel.lineHeight, ({
+  theme
+}) => theme.components.dropdown.fieldLabel.fontSize, ({
+  theme
+}) => theme.components.dropdown.fieldLabel.letterSpacing, ({
+  theme,
+  variant,
+  hasValue
+}) => theme.components.dropdown[variant].text.color.required[hasValue ? 'filled' : 'default'], ({
+  theme
+}) => theme.components.dropdown.required.fontFamily, ({
+  theme
+}) => theme.components.dropdown.required.fontWeight, ({
+  theme
+}) => theme.components.dropdown.required.lineHeight, ({
+  theme
+}) => theme.components.dropdown.required.fontSize, ({
+  theme
+}) => theme.components.dropdown.required.letterSpacing, ({
+  theme,
+  variant,
+  hasValue
+}) => theme.components.dropdown[variant].icon.color[hasValue ? 'filled' : 'default'], ({
+  theme,
+  variant,
+  hasError
+}) => theme.components.dropdown[variant].container.color[hasError ? 'error' : 'focus'], ({
+  theme,
+  variant,
+  hasError
+}) => `1px solid ${theme.components.dropdown[variant].container.border[hasError ? 'error' : 'focus']}`, ({
+  hasError
+}) => !hasError && styled.css([".fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.fieldLabel.focus, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.required.focus, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].icon.color.focus), ({
+  hasError,
+  hasValue
+}) => hasError && styled.css(["border:", ";background-color:", ";.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}"], ({
+  theme,
+  variant
+}) => `1px solid ${theme.components.dropdown[variant].container.border[hasValue ? 'errorFilled' : 'error']}`, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].container.color[hasValue ? 'errorFilled' : 'error'], ({
+  theme,
+  variant,
+  hasValue
+}) => theme.components.dropdown[variant].text.color.fieldLabel[hasValue ? 'errorFilled' : 'error'], ({
+  theme,
+  variant,
+  hasValue
+}) => theme.components.dropdown[variant].text.color.required[hasValue ? 'errorFilled' : 'error'], ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].icon.color[hasValue ? 'errorFilled' : 'error']), ({
+  disabled
+}) => disabled && styled.css(["cursor:not-allowed;border:", ";background-color:", ";*{cursor:not-allowed;}.fieldLabel{color:", ";}.requiredLabel{color:", ";}svg{fill:", ";}input{color:", ";::placeholder{color:", ";}}"], ({
+  theme,
+  variant
+}) => `1px solid ${theme.components.dropdown[variant].container.border.disable}`, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].container.color.disable, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.fieldLabel.disable, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.required.disable, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].icon.color.disable, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.fieldLabel.disable, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.fieldLabel.disable));
+const SectionContainer = /*#__PURE__*/styled__default["default"].section.withConfig({
+  displayName: "molecules-dropdownstyles__SectionContainer",
+  componentId: "sc-3wugi4-2"
+})([".errorMessage{padding-right:", ";padding-left:", ";label{color:", ";font-family:", ";font-weight:", ";line-height:", ";font-size:", ";letter-spacing:", ";}}"], ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme
+}) => theme.components.dropdown.paddingHorizontal, ({
+  theme,
+  variant
+}) => theme.components.dropdown[variant].text.color.errorMessage.error, ({
+  theme
+}) => theme.components.dropdown.error.fontFamily, ({
+  theme
+}) => theme.components.dropdown.error.fontWeight, ({
+  theme
+}) => theme.components.dropdown.error.lineHeight, ({
+  theme
+}) => theme.components.dropdown.error.fontSize, ({
+  theme
+}) => theme.components.dropdown.error.letterSpacing);
+const InputAndIconDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "molecules-dropdownstyles__InputAndIconDropdown",
+  componentId: "sc-3wugi4-3"
+})(["display:flex;"]);
+const ContentDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "molecules-dropdownstyles__ContentDropdown",
+  componentId: "sc-3wugi4-4"
+})(["flex:1;display:flex;flex-direction:column;gap:", ";"], ({
+  theme
+}) => theme.components.dropdown.contentGap);
+const FieldLabelAndRequiredLabelDropdown = /*#__PURE__*/styled__default["default"].div.withConfig({
+  displayName: "molecules-dropdownstyles__FieldLabelAndRequiredLabelDropdown",
+  componentId: "sc-3wugi4-5"
+})(["gap:", ";display:flex;"], ({
+  theme
+}) => theme.components.dropdown.requiredGap);
+
+const ReusableDropdownComponent = ({
+  label,
+  variant: _variant = 'grey',
+  required,
+  inputValue,
+  inputLabel,
+  hasError,
+  disabled,
+  errorMessage,
+  onChangeInputValue,
+  onChangeInputLabel,
+  setShowSelectComponent,
+  showSelectComponent,
+  setSelectedOptionOnInputValue,
+  inputRef,
+  dataTestId,
+  placeholder
+}) => {
+  // we have to type cast because of jest. when testing it sets the type of useTheme to DefaultTheme
+  const theme = styled.useTheme();
+  const sizeIcon = Number(theme.components.dropdown.icon.size.replace(/[^\d.-]+/g, ''));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsxs(ContainerDropdown, Object.assign({
+      variant: _variant,
+      hasValue: inputValue,
+      hasError: hasError,
+      disabled: disabled,
+      "data-testid": `${dataTestId}-dropdown-container`
+    }, {
+      children: [jsxRuntime.jsxs(ContentDropdown, {
+        children: [jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, Object.assign({
+          onClick: () => {
+            setShowSelectComponent(disabled ? false : !showSelectComponent);
+          }
+        }, {
+          children: [jsxRuntime.jsx("label", Object.assign({
+            className: "fieldLabel",
+            "data-testid": `${dataTestId}-label`
+          }, {
+            children: label
+          })), required && jsxRuntime.jsx("label", Object.assign({
+            className: "requiredLabel",
+            "data-testid": `${dataTestId}-label-required`
+          }, {
+            children: "*"
+          }))]
+        })), jsxRuntime.jsx(InputAndIconDropdown, {
+          children: jsxRuntime.jsx(atomsInput.InputStyled, {
+            "data-testid": `${dataTestId}-input`,
+            ref: inputRef,
+            disabled: disabled,
+            value: inputLabel,
+            variant: _variant,
+            placeholder: placeholder,
+            onChange: e => {
+              var _a, _b;
+              onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
+              onChangeInputLabel(((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) || '');
+              setShowSelectComponent(true);
+            },
+            onFocus: () => {
+              onChangeInputValue('');
+              onChangeInputLabel('');
+              setShowSelectComponent(true);
+            },
+            onBlur: () => {
+              setSelectedOptionOnInputValue();
+              setShowSelectComponent(false);
+            }
+          })
+        })]
+      }), jsxRuntime.jsx(ClickableElement, Object.assign({
+        onClick: () => {
+          if (!disabled) setShowSelectComponent(!showSelectComponent);
+        }
+      }, {
+        children: jsxRuntime.jsx(atomsIcon.Icon, {
+          dataTestId: `${dataTestId}-icon`,
+          size: sizeIcon,
+          icon: !showSelectComponent ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
+        })
+      }))]
+    })), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", Object.assign({
+      className: "errorMessage"
+    }, {
+      children: jsxRuntime.jsx("label", Object.assign({
+        "data-testid": `${dataTestId}-label-error-message`
+      }, {
+        children: errorMessage
+      }))
+    }))]
+  });
+};
+
+// `SameValue` abstract operation
+// https://tc39.es/ecma262/#sec-samevalue
+// eslint-disable-next-line es/no-object-is -- safe
+var sameValue$1 = Object.is || function is(x, y) {
+  // eslint-disable-next-line no-self-compare -- NaN check
+  return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
+};
+
 var call = functionCall;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var anObject = anObject$8;
-var isNullOrUndefined = isNullOrUndefined$3;
-var requireObjectCoercible$1 = requireObjectCoercible$4;
+var anObject = anObject$9;
+var isNullOrUndefined = isNullOrUndefined$4;
+var requireObjectCoercible$1 = requireObjectCoercible$6;
 var sameValue = sameValue$1;
-var toString$1 = toString$3;
-var getMethod = getMethod$2;
+var toString$1 = toString$5;
+var getMethod = getMethod$3;
 var regExpExec = regexpExecAbstract;
 
 // @@search logic
@@ -2319,8 +2554,8 @@ var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u200
   '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
 
 var uncurryThis = functionUncurryThis;
-var requireObjectCoercible = requireObjectCoercible$4;
-var toString = toString$3;
+var requireObjectCoercible = requireObjectCoercible$6;
+var toString = toString$5;
 var whitespaces$1 = whitespaces$2;
 
 var replace = uncurryThis(''.replace);
@@ -2350,7 +2585,7 @@ var stringTrim = {
 };
 
 var PROPER_FUNCTION_NAME = functionName.PROPER;
-var fails = fails$g;
+var fails = fails$h;
 var whitespaces = whitespaces$2;
 
 var non = '\u200B\u0085\u180E';
@@ -2407,9 +2642,11 @@ const Dropdown = ({
   setSelectedOption,
   placeholder
 }) => {
+  var _a;
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
+  const [inputLabel, setInputLabel] = react.useState('');
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2420,11 +2657,15 @@ const Dropdown = ({
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
       return;
     }
     if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
       const isValidValue = currentOptionList.some(currentOption => currentOption.value === inputValue);
-      if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      if (!isValidValue) {
+        setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+        setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
+      }
     }
   }, [currentOptionList, inputValue, selectedOption]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
@@ -2433,13 +2674,17 @@ const Dropdown = ({
       return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     variant: _variant,
-    "data-testid": `${dataTestId}-container`
+    "data-testid": `${dataTestId}-container`,
+    style: {
+      maxWidth: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.style.width
+    }
   }, {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
       required: required,
       inputValue: inputValue,
+      inputLabel: inputLabel,
       dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
@@ -2449,12 +2694,14 @@ const Dropdown = ({
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
-      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
+      setSelectedOptionOnInputValue: setSelectedOptionOnInputValue,
+      onChangeInputLabel: setInputLabel
     }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
       children: jsxRuntime.jsx(atomsSelect.Select, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           setInputValue(selectedValue.value);
+          setInputLabel(selectedValue.label);
           setSelectedOption(selectedValue);
         },
         active: selectedOption,
@@ -2482,6 +2729,7 @@ const DropdownOptionsWithHeaders = ({
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
+  const [inputLabel, setInputLabel] = react.useState('');
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2492,6 +2740,7 @@ const DropdownOptionsWithHeaders = ({
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && selectedOption) {
       setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
       return;
     }
     if (inputValue !== (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)) {
@@ -2500,7 +2749,10 @@ const DropdownOptionsWithHeaders = ({
         isValidValue = currentOptionsGroup.options.some(currentOption => currentOption.value === inputValue);
         if (isValidValue) return;
       });
-      if (!isValidValue) setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      if (!isValidValue) {
+        setInputLabel((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '');
+        setInputValue((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '');
+      }
     }
   }, [currentOptionList, inputValue, selectedOption]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
@@ -2516,6 +2768,7 @@ const DropdownOptionsWithHeaders = ({
       variant: _variant,
       required: required,
       inputValue: inputValue,
+      inputLabel: inputLabel,
       dataTestId: dataTestId,
       disabled: disabled,
       errorMessage: errorMessage,
@@ -2525,11 +2778,13 @@ const DropdownOptionsWithHeaders = ({
       placeholder: placeholder,
       setShowSelectComponent: setShowSelectComponent,
       onChangeInputValue: setInputValue,
+      onChangeInputLabel: setInputLabel,
       setSelectedOptionOnInputValue: setSelectedOptionOnInputValue
     }), showSelectComponent && !disabled && jsxRuntime.jsx("div", {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, {
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
+          setInputLabel(selectedValue.label);
           setInputValue(selectedValue.value);
           setSelectedOption(selectedValue);
         },