@blateral/b.kit 2.3.0-beta.1.3 → 2.3.0-beta.1.4

package/esm/{FilterField-f423b4d1.js → FileUpload-4ba0a672.js}

@@ -1,24 +1,26 @@
-import { a as __makeTemplateObject, L as LocationPin, T as ToggleOn, u as ToggleOff, v as LocationSearch, w as CalendarToday, D as DateRange, f as __awaiter, g as __generator, x as AngleUp, y as AngleDown, e as __spreadArray, z as DeleteForever, U as UploadFile, s as Cross } from './ClockFilled-8784ddac.js';
+import { a as __makeTemplateObject, L as LocationPin, T as ToggleOn, w as ToggleOff, x as LocationSearch, y as CalendarToday, D as DateRange, f as __awaiter, g as __generator, z as AngleUp, F as AngleDown, e as __spreadArray, G as DeleteForever, U as UploadFile } from './ClockFilled-6bae80dc.js';
 import * as React from 'react';
 import React__default, { useState, useRef, useCallback, useEffect, forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { C as Copy, c as copyStyle } from './Copy-3444d005.js';
-import { s as spacings, a as getFonts, g as getColors, c as getGlobals, w as withRange, e as getSVGDataImg, m as mq } from './styles-5f78e59d.js';
-import { b as useLazyInput, c as useLeafletMap, d as useGeolocation } from './useGeolocation-c81e3efc.js';
-import { u as useLibTheme } from './LibThemeProvider-90a5375f.js';
+import { C as Copy, c as copyStyle } from './Copy-fb124972.js';
+import { s as spacings, a as getFonts, g as getColors, c as getGlobals, w as withRange, e as getSVGDataImg, m as mq } from './styles-f6c54818.js';
+import { u as useLeafletMap } from './useLeafletMap-6dea7a8e.js';
+import { u as useLibTheme } from './LibThemeProvider-a38c5bf1.js';
+import { b as useLazyInput } from './useLazyInput-e66fc5be.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
-import { B as ButtonGhost } from './ButtonGhost-6673a07e.js';
-import { B as Button } from './Button-678be396.js';
+import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
+import { B as ButtonGhost } from './ButtonGhost-5b498dba.js';
+import { B as Button } from './Button-ab1a4e79.js';
 import ReactDatePicker from 'react-datepicker';
 import { h as hexToRgba } from './hexRgbConverter-edb91624.js';
 import { u as useMounted } from './useMounted-1e4cc87b.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 import { c as clampValue } from './clamp-12d37b65.js';
 
-var View$2 = styled.label.withConfig({
+var View$1 = styled.label.withConfig({
   displayName: "FormField__View",
   componentId: "sc-1rjz0eq-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"], ["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"])), function (_a) {
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"], ["\n    display: block;\n    text-align: left;\n\n    pointer-events: ", ";\n    user-select: ", ";\n    opacity: ", ";\n"])), function (_a) {
   var isDisabled = _a.isDisabled;
   return isDisabled && 'none';
 }, function (_a) {
@@ -31,18 +33,18 @@ var View$2 = styled.label.withConfig({
 var FieldHead = styled(Copy).withConfig({
   displayName: "FormField__FieldHead",
   componentId: "sc-1rjz0eq-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"])), spacings.nudge);
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    justify-content: space-between;\n    padding-bottom: ", "px;\n"])), spacings.nudge);
 var FieldMessage = styled(Copy).withConfig({
   displayName: "FormField__FieldMessage",
   componentId: "sc-1rjz0eq-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.nudge);
+})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    margin-top: ", "px;\n"], ["\n    margin-top: ", "px;\n"])), spacings.nudge);
 
 var FieldWrapper = function (_a) {
   var isDisabled = _a.isDisabled,
       onClick = _a.onClick,
       className = _a.className,
       children = _a.children;
-  return React__default.createElement(View$2, {
+  return React__default.createElement(View$1, {
     onClick: onClick,
     isDisabled: isDisabled,
     className: className
@@ -93,7 +95,7 @@ var FieldWrapper$1 = {
   Messages: Messages,
   Content: Content
 };
-var templateObject_1$9, templateObject_2$6, templateObject_3$6;
+var templateObject_1$7, templateObject_2$5, templateObject_3$5;
 
 var getFormFieldTextSize = function (theme) {
   var min = clampValue(getFonts(theme).copy.small.size[0], 16);
@@ -104,22 +106,22 @@ var getFormFieldTextSize = function (theme) {
 var MapWrapper = styled.div.withConfig({
   displayName: "LocationField__MapWrapper",
   componentId: "sc-ipn926-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n    display: ", ";\n    position: relative;\n"], ["\n    display: ", ";\n    position: relative;\n"])), function (_a) {
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: ", ";\n    position: relative;\n"], ["\n    display: ", ";\n    position: relative;\n"])), function (_a) {
   var isVisible = _a.isVisible;
   return isVisible ? 'block' : 'none';
 });
 var MapContainer = styled.div.withConfig({
   displayName: "LocationField__MapContainer",
   componentId: "sc-ipn926-1"
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"])));
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"], ["\n    position: relative;\n    width: 100%;\n    height: 290px;\n    z-index: 0;\n    outline: none;\n"])));
 var ViewToggle = styled.button.withConfig({
   displayName: "LocationField__ViewToggle",
   componentId: "sc-ipn926-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge * 2, spacings.nudge * 2);
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    padding-bottom: ", "px;\n\n    cursor: pointer;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge * 2, spacings.nudge * 2);
 var ToggleText = styled(Copy).withConfig({
   displayName: "LocationField__ToggleText",
   componentId: "sc-ipn926-3"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n    line-height: 1;\n"], ["\n    line-height: 1;\n"])));
+})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    line-height: 1;\n"], ["\n    line-height: 1;\n"])));
 var ResetMap = styled.div.withConfig({
   displayName: "LocationField__ResetMap",
   componentId: "sc-ipn926-4"
@@ -482,7 +484,7 @@ var areEqual$6 = function (prev, next) {
 };
 
 var LocationField$1 = React__default.memo(LocationField, areEqual$6);
-var templateObject_1$8, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10;
+var templateObject_1$6, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2, templateObject_10;
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -3451,7 +3453,7 @@ var locale = {
 var PickerView = styled.div.withConfig({
   displayName: "Datepicker__PickerView",
   componentId: "sc-1h58zop-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"])), spacings.spacer * 2, mq.medium, function (_a) {
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"], ["\n    position: relative;\n    width: 100%;\n    text-align: left;\n\n    .react-datepicker-popper {\n        right: ", "px;\n        z-index: 9 !important;\n        width: 100%;\n    }\n\n    @media ", " {\n        .react-datepicker-popper {\n            right: auto;\n            width: auto;\n        }\n    }\n\n    .react-datepicker {\n        display: flex;\n        flex-wrap: wrap;\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n\n        box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);\n    }\n\n    .react-datepicker-wrapper {\n        width: 100% !important;\n    }\n\n    .react-datepicker__header {\n        border: none !important;\n        background-color: transparent !important;\n        margin: 0 ", "px;\n    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\n        margin-bottom: ", "px;\n    }\n\n    @media ", " {\n        .react-datepicker__month-container {\n            max-width: 50%;\n        }\n    }\n\n    .react-datepicker__month {\n        margin-left: ", "px;\n        margin-right: ", "px;\n    }\n\n    .react-datepicker__current-month {\n        font-family: 'Roboto', sans-serif;\n        font-weight: 600;\n        font-size: 17px;\n        line-height: 1.3;\n        text-transform: uppercase;\n        background-color: ", ";\n        padding: 10px 15px;\n        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\n\n    .react-datepicker__day-names {\n        display: flex;\n        font-size: 11px;\n        line-height: 1.25;\n        background: transparent;\n    }\n\n    @media ", " {\n        .react-datepicker__day-names {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day-name {\n        flex: 1 0 auto;\n    }\n\n    .react-datepicker__week {\n        display: flex;\n        margin: -2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__week {\n            display: block;\n        }\n    }\n\n    .react-datepicker__day {\n        flex: 1 0 auto;\n        background-color: ", ";\n        border-radius: 0 !important;\n        font-weight: 600;\n\n        margin: 2px !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day:hover {\n            background-color: ", " !important;\n            border-radius: 0 !important;\n            color: ", ";\n        }\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n    }\n\n    .react-datepicker__day--selected {\n        background-color: ", " !important;\n        border-radius: 0 !important;\n        color: ", ";\n    }\n\n    .react-datepicker__day--today {\n        border: 1px solid\n            ", " !important;\n        border-radius: 0 !important;\n    }\n\n    /* Triangle Styles */\n\n    .react-datepicker__triangle:before {\n        border-bottom-color: ", " !important;\n    }\n\n    .react-datepicker__triangle:after {\n        border-bottom-color: ", " !important;\n    }\n\n    /* Day Ranges */\n\n    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--in-range:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-start {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-start:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--range-end {\n        background-color: ", " !important;\n    }\n\n    @media ", " {\n        .react-datepicker__day--range-end:hover {\n            background-color: ", " !important;\n        }\n    }\n\n    .react-datepicker__day--in-selecting-range {\n        background-color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        top: ", "px !important;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n        left: 0 !important;\n    }\n\n    .react-datepicker__navigation:focus {\n        outline: 1px solid ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n    }\n"])), spacings.spacer * 2, mq.medium, function (_a) {
   var theme = _a.theme;
   return hexToRgba(getColors(theme).elementBg.dark, 0.2);
 }, function (_a) {
@@ -3521,7 +3523,7 @@ var PickerView = styled.div.withConfig({
 var Icon$1 = styled.div.withConfig({
   displayName: "Datepicker__Icon",
   componentId: "sc-1h58zop-1"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"], ["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"])), function (_a) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"], ["\n    height: 100%;\n    min-width: 24px;\n    color: ", ";\n\n    & > * {\n        height: 20px;\n    }\n"])), function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted;
   return isInverted ? getFonts(theme).copy.small.colorInverted : getFonts(theme).copy.small.color;
@@ -3529,7 +3531,7 @@ var Icon$1 = styled.div.withConfig({
 var DatepickerButton = styled.button.withConfig({
   displayName: "Datepicker__DatepickerButton",
   componentId: "sc-1h58zop-2"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: none;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    outline: none;\n    pointer-events: ", ";\n\n    position: relative;\n\n    border: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       hasError = _a.hasError;
@@ -3576,7 +3578,7 @@ var DatepickerButton = styled.button.withConfig({
 var DatepickerButtonMain = styled.div.withConfig({
   displayName: "Datepicker__DatepickerButtonMain",
   componentId: "sc-1h58zop-3"
-})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.spacer);
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.spacer);
 var DatepickerFoot = styled.div.withConfig({
   displayName: "Datepicker__DatepickerFoot",
   componentId: "sc-1h58zop-4"
@@ -3917,16 +3919,16 @@ var areEqual$5 = function (prev, next) {
 };
 
 var DatepickerCmp = React__default.memo(Datepicker, areEqual$5);
-var templateObject_1$7, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1;
+var templateObject_1$5, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9$1;
 
-var View$1 = styled.label.withConfig({
+var View = styled.label.withConfig({
   displayName: "Radio__View",
   componentId: "sc-1h5e0q8-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge * 2);
 var RadioContainer = styled.div.withConfig({
   displayName: "Radio__RadioContainer",
   componentId: "sc-1h5e0q8-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"], ["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"])), function (_a) {
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"], ["\n    cursor: ", ";\n    pointer-events: ", ";\n\n    border: 2px solid transparent;\n    border-radius: 50%;\n\n    &:focus-within {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n"])), function (_a) {
   var isDisabled = _a.isDisabled;
   return isDisabled ? 'default' : 'pointer';
 }, function (_a) {
@@ -3939,7 +3941,7 @@ var RadioContainer = styled.div.withConfig({
 var Original$1 = styled.input.withConfig({
   displayName: "Radio__Original",
   componentId: "sc-1h5e0q8-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"], ["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"])));
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"], ["\n    position: absolute;\n    left: -9999px;\n    opacity: 0;\n"])));
 var StyledRadioButton = styled.span.withConfig({
   displayName: "Radio__StyledRadioButton",
   componentId: "sc-1h5e0q8-3"
@@ -3951,7 +3953,7 @@ var StyledRadioButton = styled.span.withConfig({
 }, function (_a) {
   var isSelected = _a.isSelected,
       theme = _a.theme;
-  return isSelected ? css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "], ["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "])), getColors(theme).primary.default, getColors(theme).elementBg.light) : 'none';
+  return isSelected ? css(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "], ["\n                  background-color: ", ";\n\n                  &:before {\n                      content: '';\n                      position: absolute;\n                      display: block;\n                      height: 8px;\n                      width: 8px;\n                      background-color: ", ";\n                      border-radius: 50%;\n                      top: 50%;\n                      left: 50%;\n\n                      transform: translate(-50%, -50%);\n                  }\n              "])), getColors(theme).primary.default, getColors(theme).elementBg.light) : 'none';
 });
 var Label = styled(Copy).withConfig({
   displayName: "Radio__Label",
@@ -3968,7 +3970,7 @@ var RadioButton = function (_a) {
       name = _a.name,
       value = _a.value;
   var colors = useLibTheme().colors;
-  return React.createElement(View$1, null, React.createElement(RadioContainer, {
+  return React.createElement(View, null, React.createElement(RadioContainer, {
     isDisabled: isDisabled
   }, React.createElement(StyledRadioButton, {
     isSelected: isSelected,
@@ -4007,12 +4009,12 @@ var areEqual$4 = function (prev, next) {
 };
 
 var RadioButton$1 = React.memo(RadioButton, areEqual$4);
-var templateObject_1$6, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
+var templateObject_1$4, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2;
 
 var Area = styled.textarea.withConfig({
   displayName: "Textarea__Area",
   componentId: "sc-1hq47t-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 100px;\n    box-shadow: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    resize: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       hasError = _a.hasError;
@@ -4111,12 +4113,12 @@ var areEqual$3 = function (prev, next) {
 };
 
 var Textarea$1 = React__default.memo(Textarea, areEqual$3);
-var templateObject_1$5;
+var templateObject_1$3;
 
 var InputField = styled.input.withConfig({
   displayName: "Textfield__InputField",
   componentId: "sc-11gw2iv-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    display: block;\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       hasError = _a.hasError;
@@ -4217,12 +4219,12 @@ var areEqual$2 = function (prev, next) {
 };
 
 var Textfield$1 = React__default.memo(Textfield, areEqual$2);
-var templateObject_1$4;
+var templateObject_1$2;
 
 var Select = styled.button.withConfig({
   displayName: "SelectDropdown__Select",
   componentId: "sc-hnkdye-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n    position: relative;\n\n    -webkit-appearance: none;\n    outline: none;\n    cursor: pointer;\n\n    padding: ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    background: transparent;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    &:active {\n        border: ", ";\n    }\n\n    &:focus {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       hasError = _a.hasError,
@@ -4269,15 +4271,15 @@ var Select = styled.button.withConfig({
 var SelectMain = styled.span.withConfig({
   displayName: "SelectDropdown__SelectMain",
   componentId: "sc-hnkdye-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
+})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"], ["\n    display: block;\n    user-select: none;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge);
 var Indicator = styled.span.withConfig({
   displayName: "SelectDropdown__Indicator",
   componentId: "sc-hnkdye-2"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n    display: block;\n    pointer-events: none;\n"], ["\n    display: block;\n    pointer-events: none;\n"])));
+})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: block;\n    pointer-events: none;\n"], ["\n    display: block;\n    pointer-events: none;\n"])));
 var Flyout = styled.ul.withConfig({
   displayName: "SelectDropdown__Flyout",
   componentId: "sc-hnkdye-3"
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"], ["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"])), function (_a) {
+})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"], ["\n    list-style: none;\n    padding: 0 !important;\n    margin: 0 !important;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 2;\n\n    display: ", ";\n    background: ", ";\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    max-height: 300px;\n    overflow-y: auto;\n    scrollbar-width: none;\n\n    outline: ", ";\n    outline-offset: 0;\n\n    ::-webkit-scrollbar {\n        -webkit-appearance: none;\n        width: 14px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        border-radius: 8px;\n        background-color: ", ";\n        border: 4px solid rgba(0, 0, 0, 0);\n        background-clip: padding-box;\n    }\n"])), function (_a) {
   var isVisible = _a.isVisible;
   return isVisible ? 'block' : 'none';
 }, function (_a) {
@@ -4518,16 +4520,16 @@ var areEqual$1 = function (prev, next) {
 };
 
 var SelectDropdown$1 = React__default.memo(SelectDropdown, areEqual$1);
-var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8, templateObject_9;
 
 var FieldView = styled(FieldWrapper$1.View).withConfig({
   displayName: "FileUpload__FieldView",
   componentId: "sc-8g38v4-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n    pointer-events: none;\n"], ["\n    pointer-events: none;\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n"], ["\n    pointer-events: none;\n"])));
 var FieldMain = styled.div.withConfig({
   displayName: "FileUpload__FieldMain",
   componentId: "sc-8g38v4-1"
-})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"])), spacings.nudge, function (_a) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    outline: none;\n    width: 100%;\n    min-height: 40px;\n    box-shadow: none;\n\n    border-radius: 0px;\n    -webkit-appearance: none;\n    background: none;\n\n    padding: 0 ", "px;\n\n    border: 1px solid\n        ", ";\n    border-radius: ", ";\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n"])), spacings.nudge, function (_a) {
   var theme = _a.theme,
       isInverted = _a.isInverted,
       hasError = _a.hasError;
@@ -4555,7 +4557,7 @@ var FieldMain = styled.div.withConfig({
 var FileItem = styled.div.withConfig({
   displayName: "FileUpload__FileItem",
   componentId: "sc-8g38v4-2"
-})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"])), copyStyle('copy', 'small'), function (_a) {
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n\n    padding: ", "px 0;\n    width: 100%;\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n"])), copyStyle('copy', 'small'), function (_a) {
   var theme = _a.theme;
   return withRange(getFormFieldTextSize(theme), 'font-size');
 }, spacings.nudge, function (_a) {
@@ -4566,7 +4568,7 @@ var FileItem = styled.div.withConfig({
 var UploadItem = styled.button.withConfig({
   displayName: "FileUpload__UploadItem",
   componentId: "sc-8g38v4-3"
-})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"])), spacings.nudge, copyStyle('copy', 'small'), function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    padding: ", "px 0;\n    background: none;\n    outline: none;\n    border: none;\n\n    width: 100%;\n    cursor: pointer;\n    pointer-events: all;\n\n    ", "\n    /** Clamping min font size to 16px to prevent browser zooming */\n    ", "\n    \n    color: ", ";\n\n    * + & {\n        border-top: 1px dashed\n            ", ";\n    }\n\n    & > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    &:focus {\n        text-decoration: underline;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n"])), spacings.nudge, copyStyle('copy', 'small'), function (_a) {
   var theme = _a.theme;
   return withRange(getFormFieldTextSize(theme), 'font-size');
 }, function (_a) {
@@ -4782,126 +4784,7 @@ var areEqual = function (prev, next) {
 };
 
 var FileUploadCmp = React__default.memo(FileUpload, areEqual);
-var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7;
-
-var SVG = styled.svg.withConfig({
-  displayName: "Magnifier__SVG",
-  componentId: "sc-1i44xjf-0"
-})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
-
-var Magnifier = function (_a) {
-  var _b = _a.iconColor,
-      iconColor = _b === void 0 ? 'currentColor' : _b,
-      className = _a.className,
-      _c = _a.ariaHidden,
-      ariaHidden = _c === void 0 ? true : _c;
-  return React.createElement(SVG, {
-    viewBox: "0 0 18 18",
-    width: "18",
-    height: "18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": ariaHidden,
-    className: className
-  }, React.createElement("path", {
-    d: "M12.5 11h-.79l-.28-.27A6.471 6.471 0 0 0 13 6.5 6.5 6.5 0 1 0 6.5 13c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L17.49 16l-4.99-5Zm-6 0C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11Z",
-    fill: iconColor
-  }));
-};
-var templateObject_1$1;
-
-var View = styled.div.withConfig({
-  displayName: "FilterField__View",
-  componentId: "sc-1reb7yx-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    min-height: 50px;\n    border: solid 1px\n        ", ";\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus-within & > input:not(:focus-visible) {\n        outline: none;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"], ["\n    display: flex;\n    min-height: 50px;\n    border: solid 1px\n        ", ";\n\n    color: ", ";\n\n    &:focus-within {\n        outline: ", ";\n        outline-offset: 0;\n    }\n\n    &:focus-within & > input:not(:focus-visible) {\n        outline: none;\n    }\n\n    @media ", " {\n        max-width: 400px;\n    }\n"])), function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.dark;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getFonts(theme).copy.medium.colorInverted : getFonts(theme).copy.medium.color;
-}, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return "1px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
-}, mq.medium);
-var Field = styled.input.withConfig({
-  displayName: "FilterField__Field",
-  componentId: "sc-1reb7yx-1"
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    flex: 1 1 auto;\n    background-color: transparent;\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n    color: inherit;\n    ", "\n    line-height: 1;\n\n    padding: ", "px;\n    padding-right: ", "px;\n\n    &::placeholder {\n        color: ", ";\n    }\n"], ["\n    flex: 1 1 auto;\n    background-color: transparent;\n    box-shadow: none;\n    border: none;\n    border-right: none;\n    border-radius: 0px;\n    outline: none;\n    -webkit-appearance: none;\n    color: inherit;\n    ", "\n    line-height: 1;\n\n    padding: ", "px;\n    padding-right: ", "px;\n\n    &::placeholder {\n        color: ", ";\n    }\n"])), copyStyle('copy', 'medium'), spacings.nudge * 2, spacings.nudge, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return isInverted ? getColors(theme).text.subtileInverted : getColors(theme).text.subtile;
-});
-var SearchIcon = styled.div.withConfig({
-  displayName: "FilterField__SearchIcon",
-  componentId: "sc-1reb7yx-2"
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2);
-var ClearBtn = styled.button.withConfig({
-  displayName: "FilterField__ClearBtn",
-  componentId: "sc-1reb7yx-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n\n    padding-right: ", "px;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n\n        outline: ", ";\n        outline-offset: -4px;\n        outline-style: dashed;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        height: 20px;\n        width: 20px;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n\n    padding-right: ", "px;\n    padding-left: ", "px;\n    color: inherit;\n\n    transition: transform 0.2s ease-in-out;\n\n    &:focus {\n        text-decoration: underline;\n        transform: scale(1.012);\n\n        outline: ", ";\n        outline-offset: -4px;\n        outline-style: dashed;\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n    }\n\n    &:active {\n        transform: scale(0.95);\n    }\n\n    & > * {\n        height: 20px;\n        width: 20px;\n    }\n"])), spacings.nudge * 2, spacings.nudge * 2, function (_a) {
-  var theme = _a.theme,
-      isInverted = _a.isInverted;
-  return "2px solid ".concat(isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default);
-});
-
-var FilterField = function (_a) {
-  var isInverted = _a.isInverted,
-      value = _a.value,
-      initialValue = _a.initialValue,
-      placeholder = _a.placeholder,
-      onSubmit = _a.onSubmit,
-      onBlur = _a.onBlur,
-      submitIcon = _a.submitIcon,
-      clearIcon = _a.clearIcon,
-      className = _a.className;
-
-  var _b = useLazyInput(function (value) {
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(value);
-  }, initialValue || ''),
-      update = _b.update,
-      getValue = _b.value,
-      forceUpdate = _b.forceUpdate;
-
-  useEffect(function () {
-    if (value !== undefined) {
-      update(value);
-    }
-  }, [update, value]);
-  return React__default.createElement(View, {
-    isInverted: isInverted,
-    className: className
-  }, React__default.createElement(Field, {
-    type: "text",
-    isInverted: isInverted,
-    value: getValue,
-    placeholder: placeholder,
-    onChange: function (ev) {
-      var _a;
-
-      var newValue = (_a = ev === null || ev === void 0 ? void 0 : ev.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
-
-      if (newValue !== undefined) {
-        update(newValue, newValue === '');
-      }
-    },
-    onBlur: onBlur,
-    onKeyDown: function (ev) {
-      if (ev.key === 'Enter') {
-        forceUpdate();
-      }
-    }
-  }), getValue === '' && React__default.createElement(SearchIcon, null, submitIcon ? submitIcon(isInverted) : React__default.createElement(Magnifier, null)), getValue !== '' && React__default.createElement(ClearBtn, {
-    isInverted: isInverted,
-    "aria-label": "clear filter",
-    onClick: function () {
-      update('', true);
-    }
-  }, clearIcon ? clearIcon(isInverted) : React__default.createElement(Cross, null)));
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
-export { DatepickerCmp as D, FieldWrapper$1 as F, LocationField$1 as L, RadioButton$1 as R, SelectDropdown$1 as S, Textarea$1 as T, Textfield$1 as a, FileUploadCmp as b, FilterField as c };
-//# sourceMappingURL=FilterField-f423b4d1.js.map
+export { DatepickerCmp as D, FieldWrapper$1 as F, LocationField$1 as L, RadioButton$1 as R, SelectDropdown$1 as S, Textarea$1 as T, Textfield$1 as a, FileUploadCmp as b };
+//# sourceMappingURL=FileUpload-4ba0a672.js.map