@blateral/b.kit 2.8.4 → 3.0.1

package/esm/{Textarea-60503eb7.js → Textarea-af789d6e.js}

@@ -1,19 +1,23 @@
-import { a as __makeTemplateObject, j as CalendarToday, D as DateRange, k as __awaiter, l as __generator, e as __spreadArray, m as DeleteForever, n as UploadFile, L as LocationPin, T as ToggleOn, o as ToggleOff, p as LocationSearch, i as AngleUp, g as AngleDown } from './Filter-19220970.js';
+import { a as __makeTemplateObject, l as CalendarToday, D as DateRange, m as __awaiter, n as __generator, e as __spreadArray, o as DeleteForever, p as UploadFile, L as LocationPin, T as ToggleOn, q as ToggleOff, r as LocationSearch, k as AngleUp, i as AngleDown } from './ButtonLeft-a9a132f5.js';
+import './Button-1f634865.js';
+import './ButtonGhost-476c3826.js';
+import { P as Pointer } from './Pointer-41c10bba.js';
+import { P as PickerAction } from './PickerAction-704f2992.js';
+import './Control-84268468.js';
+import { c as copyStyle, C as Copy } from './Copy-5a18e01f.js';
 import * as React from 'react';
-import React__default, { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { s as spacings, m as mq, g as getColors, c as getGlobals, a as getFonts, w as withRange, f as getSVGDataImg } from './styles-1f1841ef.js';
-import { B as ButtonGhost } from './ButtonGhost-fc9e7a75.js';
-import { B as Button } from './Button-9a0dd9aa.js';
-import { c as copyStyle, C as Copy } from './Copy-fd9e25c0.js';
+import React__default, { forwardRef, useRef, useState, useEffect, useId, useCallback, useMemo } from 'react';
 import ReactDatePicker from 'react-datepicker';
+import styled, { css } from 'styled-components';
+import { g as getFormFieldTextSize, F as FieldWrapper } from './formFieldText-af2106f9.js';
 import { h as hexToRgba } from './hexRgbConverter-edb91624.js';
-import { g as getFormFieldTextSize, F as FieldWrapper } from './formFieldText-c6fcd370.js';
-import { u as useLibTheme } from './LibThemeProvider-fb1d35ac.js';
-import { u as useLeafletMap } from './useLeafletMap-fa0ab7d4.js';
-import { u as useLazyInput } from './useLazyInput-0b6932aa.js';
+import { u as useLibTheme } from './LibThemeProvider-48cad3e8.js';
+import { s as spacings, m as mq, g as getColors, c as getGlobals, a as getFonts, w as withRange, f as getSVGDataImg } from './styles-f3ba5bae.js';
+import { u as useLeafletMap } from './useLeafletMap-f9050715.js';
+import { u as useLazyInput } from './useLazyInput-08ee63f4.js';
 import { u as useUpdateEffect } from './useUpdateEffect-824c0c84.js';
 import { u as useGeolocation } from './useGeolocation-f9f073cc.js';
+import { c as concat } from './concat-b6d6d978.js';
 import { u as useMounted } from './useMounted-1e4cc87b.js';
 import { i as isValidArray } from './arrays-65b644ef.js';
 
@@ -2430,36 +2434,6 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
-/**
- * @name isBefore
- * @category Common Helpers
- * @summary Is the first date before the second one?
- *
- * @description
- * Is the first date before the second one?
- *
- * ### v2.0.0 breaking changes:
- *
- * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
- *
- * @param {Date|Number} date - the date that should be before the other one to return true
- * @param {Date|Number} dateToCompare - the date to compare with
- * @returns {Boolean} the first date is before the second date
- * @throws {TypeError} 2 arguments required
- *
- * @example
- * // Is 10 July 1989 before 11 February 1987?
- * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
- * //=> false
- */
-
-function isBefore(dirtyDate, dirtyDateToCompare) {
-  requiredArgs(2, arguments);
-  var date = toDate(dirtyDate);
-  var dateToCompare = toDate(dirtyDateToCompare);
-  return date.getTime() < dateToCompare.getTime();
-}
-
 /**
  * @name isEqual
  * @category Common Helpers
@@ -2984,18 +2958,15 @@ var locale = {
 var PickerView = styled.div.withConfig({
   displayName: "Datepicker__PickerView",
   componentId: "sc-1h58zop-0"
-})(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) {
+})(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: min-content;\n        }\n    }\n\n    .react-datepicker {\n        display: grid;\n        grid-template-columns: max-content;\n        grid-template-rows: auto auto;\n        grid-template-areas:\n            'month month'\n            'footer footer';\n\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n        @media ", " {\n            grid-template-columns: max-content max-content;\n            grid-template-areas:\n                'leftMonth rightMonth'\n                'footer footer';\n        }\n    }\n\n    .react-datepicker__month-container {\n        grid-area: month;\n\n        @media ", " {\n            grid-area: rightMonth;\n        }\n    }\n\n    .react-datepicker__month-container:first-child {\n        grid-area: month;\n\n        @media ", " {\n            grid-area: leftMonth;\n        }\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    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\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        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\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:focus-visible {\n        outline: solid 2px ", ";\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n        outline: none !important;\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    .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    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n        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        color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        position: relative;\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-visible {\n        outline: 2px dotted ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n        color: ", ";\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: min-content;\n        }\n    }\n\n    .react-datepicker {\n        display: grid;\n        grid-template-columns: max-content;\n        grid-template-rows: auto auto;\n        grid-template-areas:\n            'month month'\n            'footer footer';\n\n        font-family: 'Roboto', sans-serif;\n        border: 1px solid\n            ", " !important;\n        border-radius: ", " !important;\n        padding: ", "px;\n        width: 100%;\n        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n\n        @media ", " {\n            grid-template-columns: max-content max-content;\n            grid-template-areas:\n                'leftMonth rightMonth'\n                'footer footer';\n        }\n    }\n\n    .react-datepicker__month-container {\n        grid-area: month;\n\n        @media ", " {\n            grid-area: rightMonth;\n        }\n    }\n\n    .react-datepicker__month-container:first-child {\n        grid-area: month;\n\n        @media ", " {\n            grid-area: leftMonth;\n        }\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    }\n\n    /* Month */\n    .react-datepicker__month-container {\n        width: 100%;\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        color: ", " !important;\n        width: max-content;\n        margin: 0 auto;\n    }\n\n    /* Day styles */\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:focus-visible {\n        outline: solid 2px ", ";\n    }\n\n    .react-datepicker__day--outside-month {\n        color: ", " !important;\n        cursor: default;\n        outline: none !important;\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    .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    .react-datepicker__day--in-range {\n        background-color: ", " !important;\n        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        color: ", " !important;\n    }\n\n    /* Next-/Prev-Arrow */\n    .react-datepicker__close-icon {\n        display: none !important;\n    }\n\n    .react-datepicker__navigation {\n        position: relative;\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-visible {\n        outline: 2px dotted ", ";\n    }\n\n    /* Keyboard selection */\n    .react-datepicker__day--keyboard-selected {\n        outline: none;\n        background: ", ";\n        color: ", ";\n    }\n"])), spacings.spacer * 2, mq.medium, function (_a) {
   var theme = _a.theme;
   return hexToRgba(getColors(theme).elementBg.dark, 0.2);
 }, function (_a) {
   var theme = _a.theme;
   return getGlobals(theme).sections.edgeRadius || '0px';
-}, spacings.nudge * 2, spacings.nudge * 3, spacings.nudge * 3, mq.medium, spacings.nudge * 2, spacings.nudge * 2, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
-}, function (_a) {
+}, spacings.nudge * 2, mq.medium, mq.medium, mq.medium, spacings.nudge * 2, spacings.nudge * 2, function (_a) {
   var theme = _a.theme;
-  return getColors(theme).text.inverted;
+  return getColors(theme).text.default;
 }, mq.medium, mq.medium, function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.light;
@@ -3005,6 +2976,9 @@ var PickerView = styled.div.withConfig({
 }, function (_a) {
   var theme = _a.theme;
   return getColors(theme).text.inverted;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).elementBg.dark;
 }, function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.medium;
@@ -3026,6 +3000,9 @@ var PickerView = styled.div.withConfig({
 }, function (_a) {
   var theme = _a.theme;
   return hexToRgba(getColors(theme).primary.default, 0.7);
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
 }, mq.medium, function (_a) {
   var theme = _a.theme;
   return hexToRgba(getColors(theme).primary.default, 0.25);
@@ -3044,12 +3021,18 @@ var PickerView = styled.div.withConfig({
 }, function (_a) {
   var theme = _a.theme;
   return hexToRgba(getColors(theme).primary.default, 0.7);
-}, spacings.nudge, function (_a) {
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.inverted;
+}, function (_a) {
   var theme = _a.theme;
   return getColors(theme).primary.default;
 }, function (_a) {
   var theme = _a.theme;
-  return getColors(theme).elementBg.dark;
+  return getColors(theme).elementBg.medium;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).text.default;
 });
 var Icon$1 = styled.div.withConfig({
   displayName: "Datepicker__Icon",
@@ -3062,7 +3045,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$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    &:not(:disabled):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    &:not(:disabled):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;
@@ -3110,22 +3093,14 @@ 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);
-var DatepickerFoot = styled.div.withConfig({
-  displayName: "Datepicker__DatepickerFoot",
+var Footer = styled.div.withConfig({
+  displayName: "Datepicker__Footer",
   componentId: "sc-1h58zop-4"
-})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    display: block;\n    width: 100%;\n\n    /* margin-top: ", "px; */\n"], ["\n    display: block;\n    width: 100%;\n\n    /* margin-top: ", "px; */\n"])), spacings.spacer * 14);
-var FootFlex = styled.div.withConfig({
-  displayName: "Datepicker__FootFlex",
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    grid-area: footer;\n"], ["\n    grid-area: footer;\n"])));
+var OriginalInput = styled.input.withConfig({
+  displayName: "Datepicker__OriginalInput",
   componentId: "sc-1h58zop-5"
-})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    clear: both;\n    display: flex;\n    flex-direction: column;\n\n    & > * {\n        width: 100%;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        align-items: center;\n        flex-direction: row;\n\n        & > * {\n            width: auto;\n        }\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"], ["\n    clear: both;\n    display: flex;\n    flex-direction: column;\n\n    & > * {\n        width: 100%;\n    }\n\n    & > * + * {\n        margin-top: ", "px;\n    }\n\n    @media ", " {\n        align-items: center;\n        flex-direction: row;\n\n        & > * {\n            width: auto;\n        }\n\n        & > * + * {\n            margin-top: 0;\n            margin-left: ", "px;\n        }\n    }\n"])), spacings.spacer * 0.5, mq.medium, spacings.spacer * 0.5);
-var ButtonLabel = styled(Button.Label).withConfig({
-  displayName: "Datepicker__ButtonLabel",
-  componentId: "sc-1h58zop-6"
-})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    font-size: 12px;\n"], ["\n    font-size: 12px;\n"])));
-var ButtonGhostLabel = styled(ButtonGhost.Label).withConfig({
-  displayName: "Datepicker__ButtonGhostLabel",
-  componentId: "sc-1h58zop-7"
-})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    font-size: 12px;\n"], ["\n    font-size: 12px;\n"])));
+})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"], ["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"])));
 var PickerButton = forwardRef(function (_a, ref) {
   var label = _a.label,
       errorMessage = _a.errorMessage,
@@ -3133,50 +3108,55 @@ var PickerButton = forwardRef(function (_a, ref) {
       isRequired = _a.isRequired,
       isInverted = _a.isInverted,
       isDisabled = _a.isDisabled,
-      isFocused = _a.isFocused,
       name = _a.name,
       altText = _a.altText,
       startDate = _a.startDate,
       endDate = _a.endDate,
-      setFocused = _a.setFocused,
       onClick = _a.onClick,
       _b = _a.dateFormat,
       dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b,
       customIcon = _a.customIcon,
       singleSelect = _a.singleSelect;
+  var id = React__default.useId();
+  var fieldId = "datepicker-".concat(id);
+  var msgId = "datepicker-message-".concat(id);
+  var errorMsgId = "datepicker-error-".concat(id);
   return React__default.createElement(FieldWrapper.View, {
     isDisabled: isDisabled
   }, React__default.createElement(FieldWrapper.Head, {
     label: label,
+    htmlFor: fieldId,
     isRequired: isRequired,
     isInverted: isInverted
   }), React__default.createElement(FieldWrapper.Content, null, React__default.createElement(DatepickerButton, {
     ref: ref,
+    id: fieldId,
     type: "button",
-    onClick: function (e) {
-      setFocused && setFocused(true);
-      onClick && onClick(e);
-    },
-    isActive: isFocused,
+    disabled: isDisabled,
+    onClick: onClick,
     hasDateValue: !!startDate,
     isInverted: isInverted,
     hasError: !!errorMessage,
-    className: "myPickerButton"
+    "aria-invalid": !!errorMessage,
+    "aria-errormessage": errorMessage && errorMsgId,
+    "aria-describedby": infoMessage && msgId
   }, React__default.createElement(DatepickerButtonMain, null, startDate ? "".concat(format(startDate, dateFormat)).concat(endDate ? " \u2013 ".concat(format(endDate, dateFormat)) : '') : altText), React__default.createElement(Icon$1, {
     isInverted: isInverted
   }, customIcon ? customIcon({
     isInverted: isInverted,
     singleSelect: singleSelect
-  }) : singleSelect ? React__default.createElement(CalendarToday, null) : React__default.createElement(DateRange, null))), name && React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
-    type: "hidden",
+  }) : singleSelect ? React__default.createElement(CalendarToday, null) : React__default.createElement(DateRange, null))), name && React__default.createElement(React__default.Fragment, null, React__default.createElement(OriginalInput, {
+    "aria-hidden": "true",
     name: "".concat(name, "[\"start\"]"),
     value: startDate === null || startDate === void 0 ? void 0 : startDate.toString()
-  }), React__default.createElement("input", {
-    type: "hidden",
+  }), React__default.createElement(OriginalInput, {
+    "aria-hidden": "true",
     name: "".concat(name, "[\"end\"]"),
     value: endDate === null || endDate === void 0 ? void 0 : endDate.toString()
   }))), React__default.createElement(FieldWrapper.Messages, {
+    infoMsgId: msgId,
     infoMessage: infoMessage,
+    errorMsgId: errorMsgId,
     errorMessage: errorMessage,
     isInverted: isInverted
   }));
@@ -3184,52 +3164,67 @@ var PickerButton = forwardRef(function (_a, ref) {
 PickerButton.displayName = 'PickerButton';
 var PickerHeader = styled.div.withConfig({
   displayName: "Datepicker__PickerHeader",
-  componentId: "sc-1h58zop-8"
-})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n    margin-bottom: ", "px;\n"], ["\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
+  componentId: "sc-1h58zop-6"
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-bottom: ", "px;\n"], ["\n    display: flex;\n    align-items: center;\n    margin-bottom: ", "px;\n"])), spacings.nudge * 3);
+
+var headerRenderer = function (_a) {
+  var monthsShown = _a.monthsShown; // eslint-disable-next-line react/display-name
 
-var getPickerHeader = function (locale$1, prevMonthAction, nextMonthAction) {
-  // eslint-disable-next-line react/display-name
   return function (_a) {
     var monthDate = _a.monthDate,
         customHeaderCount = _a.customHeaderCount,
         decreaseMonth = _a.decreaseMonth,
         increaseMonth = _a.increaseMonth;
-    return React__default.createElement(PickerHeader, null, React__default.createElement("button", {
+    return React__default.createElement(PickerHeader, null, customHeaderCount === 0 ? React__default.createElement("button", {
+      type: "button",
       "aria-label": "Previous Month",
       className: 'react-datepicker__navigation react-datepicker__navigation--previous',
-      style: customHeaderCount === 1 ? {
-        visibility: 'hidden'
-      } : undefined,
       onClick: function (ev) {
         ev.preventDefault();
         decreaseMonth();
       }
-    }, prevMonthAction ? typeof prevMonthAction === 'string' ? React__default.createElement("img", {
-      src: prevMonthAction
-    }) : prevMonthAction : React__default.createElement("span", {
+    }, React__default.createElement("span", {
       className: 'react-datepicker__navigation-icon react-datepicker__navigation-icon--previous'
-    }, '<')), React__default.createElement("span", {
+    }, '<')) : null, React__default.createElement("span", {
       className: "react-datepicker__current-month"
     }, format(monthDate, 'LLLL', {
       locale: locale
-    })), React__default.createElement("button", {
+    })), customHeaderCount === monthsShown - 1 ? React__default.createElement("button", {
+      type: "button",
       "aria-label": "Next Month",
       className: 'react-datepicker__navigation react-datepicker__navigation--next',
-      style: customHeaderCount === 0 ? {
-        visibility: 'hidden'
-      } : undefined,
       onClick: function (ev) {
         ev.preventDefault();
         increaseMonth();
       }
-    }, nextMonthAction ? typeof nextMonthAction === 'string' ? React__default.createElement("img", {
-      src: nextMonthAction
-    }) : nextMonthAction : React__default.createElement("span", {
+    }, React__default.createElement("span", {
       className: 'react-datepicker__navigation-icon react-datepicker__navigation-icon--next'
-    }, '>')));
+    }, '>')) : null);
   };
 };
 
+var FooterActions = styled.div.withConfig({
+  displayName: "Datepicker__FooterActions",
+  componentId: "sc-1h58zop-7"
+})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: flex-end;\n    gap: ", "px;\n    margin-right: ", "px;\n    margin-top: ", "px;\n"], ["\n    display: flex;\n    justify-content: flex-end;\n    gap: ", "px;\n    margin-right: ", "px;\n    margin-top: ", "px;\n"])), spacings.nudge, spacings.nudge, spacings.nudge * 2);
+
+var footerRenderer = function (_a) {
+  var startDate = _a.startDate,
+      endDate = _a.endDate,
+      submitLabel = _a.submitLabel,
+      clearLabel = _a.clearLabel,
+      resetHandler = _a.resetHandler,
+      closeHandler = _a.closeHandler;
+  return React__default.createElement(FooterActions, null, (startDate || endDate) && React__default.createElement(PickerAction, {
+    variant: "ghost",
+    ariaLabel: "Reset date",
+    onClick: resetHandler
+  }, clearLabel), React__default.createElement(PickerAction, {
+    ariaLabel: "Reset date",
+    onClick: closeHandler
+  }, React__default.createElement(Pointer.Label, null, submitLabel)));
+};
+
 var Datepicker = function (_a) {
   var label = _a.label,
       errorMessage = _a.errorMessage,
@@ -3238,44 +3233,47 @@ var Datepicker = function (_a) {
       isDisabled = _a.isDisabled,
       isInverted = _a.isInverted,
       name = _a.name,
-      dateSubmitLabel = _a.dateSubmitLabel,
-      dateDeleteLabel = _a.dateDeleteLabel,
       placeholder = _a.placeholder,
       _b = _a.singleSelect,
       singleSelect = _b === void 0 ? false : _b,
+      _c = _a.visibleMonths,
+      visibleMonths = _c === void 0 ? '1' : _c,
+      _d = _a.shouldCloseOnSelect,
+      shouldCloseOnSelect = _d === void 0 ? false : _d,
+      _e = _a.submitLabel,
+      submitLabel = _e === void 0 ? 'submit' : _e,
+      _f = _a.clearLabel,
+      clearLabel = _f === void 0 ? 'reset' : _f,
       values = _a.values,
-      _c = _a.minDate,
-      minDate = _c === void 0 ? new Date() : _c,
+      _g = _a.minDate,
+      minDate = _g === void 0 ? new Date() : _g,
       maxDate = _a.maxDate,
-      onDataChange = _a.onDataChange,
-      onSubmit = _a.onSubmit,
-      deleteAction = _a.deleteAction,
-      submitAction = _a.submitAction,
-      customIcon = _a.customIcon,
-      nextCtrlUrl = _a.nextCtrlUrl,
-      prevCtrlUrl = _a.prevCtrlUrl;
+      onChange = _a.onChange,
+      customHeader = _a.customHeader,
+      customFooter = _a.customFooter,
+      customIcon = _a.customIcon;
   var globals = useLibTheme().globals;
   var locale$1 = globals.sections.datepickerLocaleKey;
   var dateFormat = globals.sections.datepickerDateFormat;
   var pickerRef = useRef(null);
-  var pickerBtnRef = useRef(null);
 
-  var _d = useState(false),
-      isSmall = _d[0],
-      setIsSmall = _d[1];
+  var _h = useState(false),
+      isSmall = _h[0],
+      setIsSmall = _h[1];
 
-  var _e = useState(),
-      startDate = _e[0],
-      setStartDate = _e[1];
+  var initialStart = (values === null || values === void 0 ? void 0 : values[0]) && isValid(values[0]) ? values[0] : null;
+  var initialEnd = (values === null || values === void 0 ? void 0 : values[1]) && isValid(values[1]) ? values[1] : null;
 
-  var _f = useState(),
-      endDate = _f[0],
-      setEndDate = _f[1];
+  var _j = useState(initialStart),
+      startDate = _j[0],
+      setStartDate = _j[1];
 
-  var _g = useState(),
-      focused = _g[0],
-      setFocused = _g[1];
+  var _k = useState(initialEnd),
+      endDate = _k[0],
+      setEndDate = _k[1];
 
+  var prevStartDate = useRef(initialStart);
+  var prevEndDate = useRef(initialEnd);
   useEffect(function () {
     var x = function () {
       return __awaiter(void 0, void 0, void 0, function () {
@@ -3299,7 +3297,8 @@ var Datepicker = function (_a) {
 
     if (!singleSelect) setIsSmall(!window.matchMedia(mq.medium).matches);
     x();
-  }, [locale$1, singleSelect]);
+  }, [locale$1, singleSelect]); // update if date state from outside has been changed
+
   useEffect(function () {
     if (values) {
       if (values[0] && isValid(values[0])) {
@@ -3310,7 +3309,21 @@ var Datepicker = function (_a) {
         setEndDate(values[1]);
       }
     }
-  }, [values]);
+  }, [values]); // react to internal date state changes
+
+  useEffect(function () {
+    var _a, _b;
+
+    if ((startDate === null || startDate === void 0 ? void 0 : startDate.toDateString()) !== ((_a = prevStartDate.current) === null || _a === void 0 ? void 0 : _a.toDateString())) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(startDate, endDate);
+      prevStartDate.current = startDate;
+    }
+
+    if ((endDate === null || endDate === void 0 ? void 0 : endDate.toDateString()) !== ((_b = prevEndDate.current) === null || _b === void 0 ? void 0 : _b.toDateString())) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(startDate, endDate);
+      prevEndDate.current = endDate;
+    }
+  }, [startDate, endDate, onChange]);
   useEffect(function () {
     var handleResize = function () {
       var shouldBeSmall = !window.matchMedia(mq.medium).matches;
@@ -3325,61 +3338,62 @@ var Datepicker = function (_a) {
       window.removeEventListener('resize', handleResize);
     };
   }, [isSmall]);
-  useEffect(function () {
-    var _a;
 
-    if (pickerRef.current && focused !== undefined) {
-      (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(focused);
-    }
-  }, [focused]);
-  var handleSubmit = useCallback(function (ev) {
-    ev.preventDefault();
-    setFocused(false);
-    onSubmit && onSubmit(startDate, endDate);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [endDate, startDate]);
-  var handleReset = useCallback(function (ev) {
-    ev.preventDefault();
-    setStartDate(undefined);
-    setEndDate(undefined);
-  }, []);
+  var closePicker = function () {
+    if (!pickerRef.current) return;
+    pickerRef.current.setOpen(false);
+  };
+
+  var handleReset = function () {
+    setStartDate(null);
+    setEndDate(null);
+  };
+
+  var monthsShown = isSmall ? 1 : visibleMonths === '2' ? 2 : 1;
+  var customFooterProps = {
+    closeHandler: closePicker,
+    resetHandler: handleReset,
+    startDate: startDate,
+    endDate: endDate,
+    singleSelect: singleSelect,
+    monthsShown: monthsShown,
+    submitLabel: submitLabel,
+    clearLabel: clearLabel
+  };
   return React__default.createElement(PickerView, null, React__default.createElement(ReactDatePicker, {
-    locale: locale$1 === 'de' ? locale : undefined,
     ref: pickerRef,
+    locale: locale$1 === 'de' ? locale : undefined,
     dateFormat: dateFormat,
-    onChange: function (date) {
-      if (date) {
-        if (singleSelect) {
-          setStartDate(date);
-          setFocused(false);
-          onDataChange && onDataChange(date, null);
-        } else if (startDate) {
-          if (endDate) {
-            setStartDate(date);
-            setEndDate(null);
-            onDataChange && onDataChange(date, null);
-          } else if (isBefore(date, startDate)) {
-            setEndDate(startDate);
-            setStartDate(date);
-            onDataChange && onDataChange(date, startDate);
-          } else {
-            setEndDate(date);
-            onDataChange && onDataChange(startDate, date);
-          }
-        } else {
-          setStartDate(date);
-          onDataChange && onDataChange(date, endDate || null);
-        }
+    selectsRange: !singleSelect,
+    onSelect: function (date) {
+      if (!singleSelect) return;
+
+      if (date.toDateString() === (startDate === null || startDate === void 0 ? void 0 : startDate.toDateString())) {
+        setStartDate(null);
+        setEndDate(null);
+      }
+    },
+    onChange: function (dates) {
+      if (Array.isArray(dates)) {
+        var start = dates[0],
+            end = dates[1];
+        setStartDate(start);
+        setEndDate(end);
       } else {
-        setStartDate(undefined);
-        onDataChange && onDataChange(null, null);
+        setStartDate(dates);
+        setEndDate(null);
       }
     },
     selected: startDate,
     startDate: startDate,
     endDate: endDate,
-    monthsShown: isSmall ? 1 : 2,
-    shouldCloseOnSelect: singleSelect,
+    minDate: minDate,
+    maxDate: maxDate,
+    monthsShown: monthsShown,
+    shouldCloseOnSelect: shouldCloseOnSelect,
+    showPopperArrow: false,
+    disabledKeyboardNavigation: false,
+    isClearable: true,
     customInput: React__default.createElement(PickerButton, {
       label: label,
       isInverted: isInverted,
@@ -3387,35 +3401,22 @@ var Datepicker = function (_a) {
       infoMessage: infoMessage,
       errorMessage: errorMessage,
       isRequired: isRequired,
-      ref: pickerBtnRef,
       name: name,
       altText: placeholder,
       startDate: startDate,
       endDate: endDate,
-      isFocused: focused,
-      setFocused: setFocused,
       dateFormat: dateFormat,
       customIcon: customIcon,
       singleSelect: singleSelect
     }),
-    showPopperArrow: true,
-    minDate: minDate,
-    maxDate: maxDate,
-    disabledKeyboardNavigation: false,
-    isClearable: true,
-    onClickOutside: function (ev) {
-      ev.stopPropagation();
-      setFocused(false);
-      onSubmit && onSubmit(startDate, endDate);
-    },
-    renderCustomHeader: getPickerHeader(locale$1, prevCtrlUrl, nextCtrlUrl)
-  }, React__default.createElement(DatepickerFoot, null, React__default.createElement(FootFlex, null, deleteAction ? deleteAction(handleReset) : React__default.createElement(ButtonGhost.View, {
-    as: "button",
-    onClick: handleReset
-  }, React__default.createElement(ButtonGhostLabel, null, dateDeleteLabel || 'Delete')), submitAction ? submitAction(handleSubmit) : React__default.createElement(Button.View, {
-    as: "button",
-    onClick: handleSubmit
-  }, React__default.createElement(ButtonLabel, null, dateSubmitLabel || 'Submit'))))));
+    renderCustomHeader: customHeader ? customHeader({
+      locale: locale$1,
+      monthsShown: monthsShown
+    }) : headerRenderer({
+      locale: locale$1,
+      monthsShown: monthsShown
+    })
+  }, React__default.createElement(Footer, null, customFooter ? customFooter(customFooterProps) : footerRenderer(customFooterProps))));
 };
 /**
  * Function to compare both field prop states
@@ -3432,8 +3433,6 @@ var areEqual$5 = function (prev, next) {
   if (!prev.enableMemo) return false;
   if (prev.infoMessage !== next.infoMessage) return false;
   if (prev.errorMessage !== next.errorMessage) return false;
-  if (prev.dateDeleteLabel !== next.dateDeleteLabel) return false;
-  if (prev.dateSubmitLabel !== next.dateSubmitLabel) return false;
   if (prev.label !== next.label) return false;
   if (prev.placeholder !== next.placeholder) return false; // compare date values
 
@@ -3450,24 +3449,25 @@ var areEqual$5 = function (prev, next) {
 };
 
 var DatepickerCmp = React__default.memo(Datepicker, areEqual$5);
-var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2;
+var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2;
 
-var View = styled.label.withConfig({
+var View = styled.div.withConfig({
   displayName: "Radio__View",
   componentId: "sc-1h5e0q8-0"
 })(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$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            ", ";\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            ", ";\n        outline-offset: 0;\n    }\n"])), function (_a) {
   var isDisabled = _a.isDisabled;
   return isDisabled ? 'default' : 'pointer';
 }, function (_a) {
   var isDisabled = _a.isDisabled;
   return isDisabled ? 'none' : 'all';
 }, function (_a) {
-  var theme = _a.theme;
-  return getColors(theme).primary.default;
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default;
 });
 var Original$1 = styled.input.withConfig({
   displayName: "Radio__Original",
@@ -3480,11 +3480,12 @@ var StyledRadioButton = styled.span.withConfig({
   var isInverted = _a.isInverted,
       theme = _a.theme,
       isSelected = _a.isSelected;
-  return isSelected ? getColors(theme).primary.default : isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
+  return isSelected ? isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default : isInverted ? getColors(theme).elementBg.light : getColors(theme).elementBg.medium;
 }, function (_a) {
   var isSelected = _a.isSelected,
+      isInverted = _a.isInverted,
       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$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              "])), isInverted ? getColors(theme).primary.inverted : getColors(theme).primary.default, getColors(theme).elementBg.light) : 'none';
 });
 var Label = styled(Copy).withConfig({
   displayName: "Radio__Label",
@@ -3497,24 +3498,34 @@ var RadioButton = function (_a) {
       isInverted = _a.isInverted,
       onChange = _a.onChange,
       label = _a.label,
-      id = _a.id,
       name = _a.name,
       value = _a.value;
+  var inputRef = React.useRef(null);
+  var id = React.useId();
+  var fieldId = "radio-".concat(id);
   var colors = useLibTheme().colors;
   return React.createElement(View, null, React.createElement(RadioContainer, {
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isInverted: isInverted
   }, React.createElement(StyledRadioButton, {
     isSelected: isSelected,
-    isInverted: isInverted
+    isInverted: isInverted,
+    onClick: function () {
+      if (!inputRef.current) return;
+      inputRef.current.click();
+    }
   }), React.createElement(Original$1, {
+    ref: inputRef,
     type: "radio",
     name: name,
-    id: id,
+    id: fieldId,
     value: value,
+    disabled: isDisabled,
     checked: isSelected,
     onChange: onChange
   })), label && React.createElement(Label, {
-    renderAs: "span",
+    htmlFor: fieldId,
+    renderAs: "label",
     size: "small",
     type: "copy-b",
     textColor: isDisabled ? colors.elementBg.medium : isInverted ? colors.text.inverted : colors.text.default,
@@ -3545,7 +3556,7 @@ var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4
 var FieldView$1 = styled(FieldWrapper.View).withConfig({
   displayName: "FileUpload__FieldView",
   componentId: "sc-8g38v4-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    pointer-events: none;\n"], ["\n    pointer-events: none;\n"])));
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n    /* pointer-events: none; */\n"], ["\n    /* pointer-events: none; */\n"])));
 var FieldMain = styled.div.withConfig({
   displayName: "FileUpload__FieldMain",
   componentId: "sc-8g38v4-1"
@@ -3623,7 +3634,7 @@ var DeleteIcon = styled.button.withConfig({
 var Original = styled.input.withConfig({
   displayName: "FileUpload__Original",
   componentId: "sc-8g38v4-6"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"], ["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"])));
 
 var readFileAsync = function (file, uid) {
   return new Promise(function (resolve) {
@@ -3660,6 +3671,10 @@ var FileUpload = function (_a) {
       uploadLabel = _a.uploadLabel,
       customDeleteIcon = _a.customDeleteIcon,
       customUploadIcon = _a.customUploadIcon;
+  var id = useId();
+  var fieldId = "file-upload-".concat(id);
+  var msgId = "file-upload-message-".concat(id);
+  var errorMsgId = "file-upload-error-".concat(id);
 
   var _b = useState([]),
       selectedFiles = _b[0],
@@ -3749,6 +3764,7 @@ var FileUpload = function (_a) {
     isDisabled: isDisabled
   }, React__default.createElement(FieldWrapper.Head, {
     label: label,
+    htmlFor: fieldId,
     isRequired: isRequired,
     isInverted: isInverted
   }), React__default.createElement(FieldWrapper.Content, null, React__default.createElement(FieldMain, {
@@ -3768,20 +3784,28 @@ var FileUpload = function (_a) {
     }, customDeleteIcon ? customDeleteIcon(isInverted) : React__default.createElement(DeleteForever, null)));
   }), React__default.createElement(UploadItem, {
     type: "button",
+    id: fieldId,
     isInverted: isInverted,
-    onClick: handleClick
+    onClick: handleClick,
+    "aria-invalid": !!errorMessage,
+    "aria-errormessage": errorMessage && errorMsgId,
+    "aria-describedby": infoMessage && msgId
   }, uploadLabel && React__default.createElement("span", null, uploadLabel), React__default.createElement(Icon, {
     isInverted: isInverted
   }, customUploadIcon ? customUploadIcon(isInverted) : React__default.createElement(UploadFile, null)))), React__default.createElement(Original, {
     type: "file",
     onChange: handleChange,
     ref: fileInputRef,
+    "aria-hidden": "true",
+    tabIndex: -1,
     multiple: true,
     required: isRequired,
     disabled: isDisabled,
     accept: acceptedFormats
   })), React__default.createElement(FieldWrapper.Messages, {
+    infoMsgId: msgId,
     infoMessage: infoMessage,
+    errorMsgId: errorMsgId,
     errorMessage: errorMessage,
     isInverted: isInverted
   }));
@@ -3817,10 +3841,14 @@ var MapContainer = styled.div.withConfig({
   displayName: "LocationField__MapContainer",
   componentId: "sc-ipn926-1"
 })(templateObject_2$1 || (templateObject_2$1 = __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",
+var ToggleView = styled.button.withConfig({
+  displayName: "LocationField__ToggleView",
   componentId: "sc-ipn926-2"
-})(templateObject_3$1 || (templateObject_3$1 = __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$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: none;\n    border: none;\n    padding: ", "px 0;\n    margin-bottom: ", "px;\n\n    cursor: pointer;\n\n    &:focus-visible {\n        outline: 2px dotted\n            ", ";\n        outline-offset: 4px;\n    }\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    margin-bottom: ", "px;\n\n    cursor: pointer;\n\n    &:focus-visible {\n        outline: 2px dotted\n            ", ";\n        outline-offset: 4px;\n    }\n\n    & > * + * {\n        margin-left: ", "px;\n    }\n"])), spacings.nudge, spacings.nudge * 2, function (_a) {
+  var theme = _a.theme,
+      isInverted = _a.isInverted;
+  return isInverted ? getFonts(theme).link.colorInverted : getFonts(theme).link.color;
+}, spacings.nudge * 2);
 var ToggleText = styled(Copy).withConfig({
   displayName: "LocationField__ToggleText",
   componentId: "sc-ipn926-3"
@@ -3832,7 +3860,7 @@ var ResetMap = styled.div.withConfig({
 var ResetMapControl = styled.button.withConfig({
   displayName: "LocationField__ResetMapControl",
   componentId: "sc-ipn926-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 0;\n    }\n\n    &:focus:not(:focus-visible) {\n        outline: none;\n    }\n"])), spacings.nudge, spacings.nudge, spacings.nudge, function (_a) {
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px dotted ", ";\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: 0;\n    padding: ", "px;\n    margin-top: -", "px;\n    margin-right: -", "px;\n\n    cursor: pointer;\n    transition: color 0.2s ease-in-out;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            color: ", ";\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px dotted ", ";\n    }\n"])), spacings.nudge, spacings.nudge, spacings.nudge, function (_a) {
   var theme = _a.theme;
   return getColors(theme).primary.default;
 }, function (_a) {
@@ -3846,12 +3874,15 @@ var TrackLocation = styled.div.withConfig({
 var TrackLocationControl = styled.button.withConfig({
   displayName: "LocationField__TrackLocationControl",
   componentId: "sc-ipn926-7"
-})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus {\n        text-decoration: underline;\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus {\n        text-decoration: underline;\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n    }\n\n    &:focus:not(:focus-visible) {\n        text-decoration: none;\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"])), function (_a) {
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    background: ", ";\n    border: none;\n    padding: 0.7em;\n    min-height: 40px;\n\n    ", "\n    color: ", ";\n    cursor: pointer;\n\n    @media (hover: hover) and (pointer: fine) {\n        &:hover {\n            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);\n        }\n    }\n\n    &:focus-visible {\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n    }\n\n    &:active {\n        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);\n    }\n"])), function (_a) {
   var theme = _a.theme;
   return getColors(theme).elementBg.dark;
 }, copyStyle('copy', 'small'), function (_a) {
   var theme = _a.theme;
   return getFonts(theme).copy.small.colorInverted;
+}, function (_a) {
+  var theme = _a.theme;
+  return getColors(theme).primary.default;
 });
 var FieldView = styled.div.withConfig({
   displayName: "LocationField__FieldView",
@@ -3860,7 +3891,7 @@ var FieldView = styled.div.withConfig({
 var Area$1 = styled.textarea.withConfig({
   displayName: "LocationField__Area",
   componentId: "sc-ipn926-9"
-})(templateObject_10 || (templateObject_10 = __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_10$1 || (templateObject_10$1 = __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;
@@ -3924,41 +3955,47 @@ var LocationField = function (_a) {
       _e = _a.toggleLabel,
       toggleLabel = _e === void 0 ? 'Select location on map' : _e,
       _f = _a.trackLocationLabel,
-      trackLocationLabel = _f === void 0 ? 'My location' : _f;
+      trackLocationLabel = _f === void 0 ? 'My location' : _f,
+      _g = _a.resetMapLabel,
+      resetMapLabel = _g === void 0 ? 'Reset map' : _g;
+  var id = React__default.useId();
+  var fieldId = "locationfield-".concat(id);
+  var msgId = "locationfield-message-".concat(id);
+  var errorMsgId = "locationfield-error-".concat(id);
 
   if (isDisabled) {
     errorMessage = '';
   }
 
-  var _g = useLibTheme(),
-      colors = _g.colors,
-      fonts = _g.fonts;
+  var _h = useLibTheme(),
+      colors = _h.colors,
+      fonts = _h.fonts;
 
-  var _h = useState(false),
-      useMapView = _h[0],
-      setUseMapView = _h[1];
+  var _j = useState(false),
+      useMapView = _j[0],
+      setUseMapView = _j[1];
 
-  var _j = useState(value || {
+  var _k = useState(value || {
     description: ''
   }),
-      getValue = _j[0],
-      setValue = _j[1];
+      getValue = _k[0],
+      setValue = _k[1];
 
   var prevValue = useRef(null);
 
-  var _k = useState([]),
-      markers = _k[0],
-      setMarkers = _k[1];
+  var _l = useState([]),
+      markers = _l[0],
+      setMarkers = _l[1];
 
-  var _l = useLazyInput(function (value) {
+  var _m = useLazyInput(function (value) {
     setValue({
       description: value,
       position: undefined
     });
   }, (value === null || value === void 0 ? void 0 : value.description) || ''),
-      descValue = _l.value,
-      setDescValue = _l.update,
-      forceUpdate = _l.forceUpdate;
+      descValue = _m.value,
+      setDescValue = _m.update,
+      forceUpdate = _m.forceUpdate;
 
   var getMarkersFromPositions = useCallback(function (positions) {
     /** Markers */
@@ -3983,7 +4020,7 @@ var LocationField = function (_a) {
     return markerList;
   }, [marker]);
 
-  var _m = useLeafletMap({
+  var _o = useLeafletMap({
     activeMarkerId: 'location',
     markers: markers,
     center: initialMapCenter,
@@ -3992,20 +4029,20 @@ var LocationField = function (_a) {
       mapClickHandler(ev);
     }
   }),
-      setMapContainer = _m.setContainer,
-      flyToPosition = _m.flyToPosition,
-      recalculateMapSize = _m.recalculateMapSize; // double click fix
+      setMapContainer = _o.setContainer,
+      flyToPosition = _o.flyToPosition,
+      recalculateMapSize = _o.recalculateMapSize; // double click fix
 
 
   var doubleClickTimerRef = useRef(null);
 
-  var _o = useGeolocation(true, false),
-      isGeolocationSupported = _o.isSupported,
-      isEnabled = _o.isEnabled,
-      location = _o.location,
-      error = _o.error,
-      resetLocationTracking = _o.reset,
-      cancelGeolocation = _o.cancel;
+  var _p = useGeolocation(true, false),
+      isGeolocationSupported = _p.isSupported,
+      isEnabled = _p.isEnabled,
+      location = _p.location,
+      error = _p.error,
+      resetLocationTracking = _p.reset,
+      cancelGeolocation = _p.cancel;
 
   var setMapToInitial = useCallback(function () {
     flyToPosition(initialMapCenter, zoom);
@@ -4094,13 +4131,14 @@ var LocationField = function (_a) {
   return React__default.createElement(React__default.Fragment, null, name && React__default.createElement("input", {
     type: "hidden",
     name: "".concat(name, "[\"location\"]"),
-    value: "".concat((_b = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _b === void 0 ? void 0 : _b[0], ",").concat((_c = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _c === void 0 ? void 0 : _c[1])
+    value: concat([(_b = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _b === void 0 ? void 0 : _b[0], (_c = getValue === null || getValue === void 0 ? void 0 : getValue.position) === null || _c === void 0 ? void 0 : _c[1]], ',')
   }), React__default.createElement(FieldWrapper.View, {
     isDisabled: isDisabled,
     onClick: function (ev) {
       return ev.preventDefault();
     }
   }, React__default.createElement(FieldWrapper.Head, {
+    htmlFor: fieldId,
     label: label,
     isRequired: isRequired,
     isInverted: isInverted
@@ -4108,8 +4146,11 @@ var LocationField = function (_a) {
     isInverted: isInverted,
     viewState: useMapView ? 'map' : 'desc',
     handleClick: toggleViewState
-  }) : React__default.createElement(ViewToggle, {
+  }) : React__default.createElement(ToggleView, {
     type: "button",
+    isInverted: isInverted,
+    "aria-label": toggleLabel,
+    "aria-pressed": useMapView,
     onClick: toggleViewState
   }, useMapView ? React__default.createElement(ToggleOn, {
     iconColor: isInverted ? colors.primary.inverted : colors.primary.default
@@ -4132,19 +4173,23 @@ var LocationField = function (_a) {
     isInverted: isInverted,
     handleClick: setMapToInitial
   }) : React__default.createElement(ResetMapControl, {
+    "aria-label": resetMapLabel,
     onClick: setMapToInitial
   }, React__default.createElement(LocationSearch, null))), isGeolocationSupported && React__default.createElement(TrackLocation, null, customLocationControl ? customLocationControl({
     isInverted: isInverted,
     handleClick: handleTrackClick
   }) : React__default.createElement(TrackLocationControl, {
+    "aria-label": !trackLocationLabel ? 'Track my location' : undefined,
     onClick: handleTrackClick
   }, trackLocationLabel))), !useMapView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FieldView, null, React__default.createElement(FieldWrapper.Content, null, React__default.createElement(Area$1, {
+    id: fieldId,
     placeholder: placeholder,
     hasError: !!errorMessage,
     isInverted: isInverted,
     name: "".concat(name, "[\"description\"]"),
     value: descValue,
     required: isRequired,
+    disabled: isDisabled,
     onChange: function (ev) {
       var value = ev.currentTarget.value;
       setDescValue(value);
@@ -4152,9 +4197,14 @@ var LocationField = function (_a) {
     onBlur: function () {
       forceUpdate();
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(getValue);
-    }
+    },
+    "aria-invalid": !!errorMessage,
+    "aria-errormessage": errorMessage && errorMsgId,
+    "aria-describedby": infoMessage && msgId
   })))), React__default.createElement(FieldWrapper.Messages, {
+    infoMsgId: msgId,
     infoMessage: infoMessage,
+    errorMsgId: errorMsgId,
     errorMessage: errorMessage,
     isInverted: isInverted
   })));
@@ -4187,7 +4237,7 @@ var areEqual$2 = function (prev, next) {
 };
 
 var LocationField$1 = React__default.memo(LocationField, areEqual$2);
-var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10;
+var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1;
 
 var Select = styled.button.withConfig({
   displayName: "SelectDropdown__Select",
@@ -4293,6 +4343,10 @@ var Container = styled.div.withConfig({
   displayName: "SelectDropdown__Container",
   componentId: "sc-hnkdye-7"
 })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: relative;\n    outline: none;\n"], ["\n    position: relative;\n    outline: none;\n"])));
+var OriginalSelect = styled.select.withConfig({
+  displayName: "SelectDropdown__OriginalSelect",
+  componentId: "sc-hnkdye-8"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"], ["\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n"])));
 
 var SelectDropdown = function (_a) {
   var label = _a.label,
@@ -4308,6 +4362,7 @@ var SelectDropdown = function (_a) {
       onChange = _a.onChange,
       onBlur = _a.onBlur,
       indicator = _a.indicator;
+  var id = useId();
   var colors = useLibTheme().colors;
 
   var _b = useState(false),
@@ -4327,6 +4382,9 @@ var SelectDropdown = function (_a) {
   var selectBtnRef = useRef(null);
   var isMounted = useMounted();
   var itemHasBeenClicked = useRef(false);
+  var fieldId = "select-".concat(id);
+  var msgId = "select-message-".concat(id);
+  var errorMsgId = "select-error-".concat(id);
   useEffect(function () {
     var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
       return item.label === selectedItem;
@@ -4354,16 +4412,21 @@ var SelectDropdown = function (_a) {
     isDisabled: isDisabled
   }, React__default.createElement(FieldWrapper.Head, {
     label: label,
+    htmlFor: fieldId,
     isRequired: isRequired,
     isInverted: isInverted
   }), React__default.createElement(FieldWrapper.Content, null, React__default.createElement(Container, null, React__default.createElement(Select, {
+    id: fieldId,
     ref: selectBtnRef,
     type: "button",
-    "aria-label": (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || placeholder || 'Select item',
     isOpen: isOpen,
     isInverted: isInverted,
     isSelected: !!activeItem,
     hasError: !!errorMessage,
+    "aria-invalid": !!errorMessage,
+    "aria-errormessage": errorMessage && errorMsgId,
+    "aria-describedby": infoMessage && msgId,
+    "aria-expanded": isOpen,
     onClick: function () {
       setIsOpen(function (prev) {
         return !prev;
@@ -4404,9 +4467,12 @@ var SelectDropdown = function (_a) {
   }) : React__default.createElement(AngleDown, {
     iconColor: isDisabled ? colors.elementBg.medium : colors.elementBg.dark
   })))), React__default.createElement(Flyout, {
+    role: "presentation",
     isVisible: isOpen
   }, isValidArray(items, false) && React__default.createElement(ItemStyle, {
     key: "key_0",
+    role: "option",
+    "aria-selected": activeItemIndex === -1,
     onMouseDown: function () {
       itemHasBeenClicked.current = true;
     },
@@ -4428,6 +4494,8 @@ var SelectDropdown = function (_a) {
   }, "Clear")), items.map(function (item, i) {
     return React__default.createElement(ItemStyle, {
       key: "key_".concat(i + 1),
+      role: "option",
+      "aria-selected": i === activeItemIndex,
       onMouseDown: function () {
         itemHasBeenClicked.current = true;
       },
@@ -4449,12 +4517,22 @@ var SelectDropdown = function (_a) {
       size: "small",
       textColor: i === activeItemIndex ? colors.elementBg.light : colors.elementBg.dark
     }, item.label));
-  }))), activeItem && React__default.createElement("input", {
-    type: "hidden",
+  }))), React__default.createElement(OriginalSelect, {
+    "aria-hidden": "true",
+    tabIndex: -1,
     name: name,
-    value: JSON.stringify(activeItem.value)
-  })), React__default.createElement(FieldWrapper.Messages, {
+    defaultValue: activeItem ? JSON.stringify(activeItem.value) : ''
+  }, React__default.createElement("option", {
+    value: ""
+  }), items.map(function (item, i) {
+    return React__default.createElement("option", {
+      key: i,
+      value: JSON.stringify(item.value)
+    }, item.label);
+  }))), React__default.createElement(FieldWrapper.Messages, {
+    infoMsgId: msgId,
     infoMessage: infoMessage,
+    errorMsgId: errorMsgId,
     errorMessage: errorMessage,
     isInverted: isInverted
   }));
@@ -4488,7 +4566,7 @@ var areEqual$1 = function (prev, next) {
 };
 
 var SelectDropdown$1 = React__default.memo(SelectDropdown, areEqual$1);
-var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 var Area = styled.textarea.withConfig({
   displayName: "Textarea__Area",
@@ -4545,6 +4623,10 @@ var Textarea = function (_a) {
       name = _a.name,
       onChange = _a.onChange,
       onBlur = _a.onBlur;
+  var id = React__default.useId();
+  var fieldId = "textarea-".concat(id);
+  var msgId = "textarea-message-".concat(id);
+  var errorMsgId = "textarea-error-".concat(id);
 
   if (isDisabled) {
     errorMessage = '';
@@ -4553,21 +4635,28 @@ var Textarea = function (_a) {
   return React__default.createElement(FieldWrapper.View, {
     isDisabled: isDisabled
   }, React__default.createElement(FieldWrapper.Head, {
+    htmlFor: fieldId,
     label: label,
     isRequired: isRequired,
     isInverted: isInverted
   }), React__default.createElement(FieldWrapper.Content, null, React__default.createElement(Area, {
+    id: fieldId,
     value: value,
     name: name,
     placeholder: placeholder,
     hasError: !!errorMessage,
-    isDisabled: isDisabled,
+    disabled: isDisabled,
     isInverted: isInverted,
     required: isRequired,
     onChange: onChange,
-    onBlur: onBlur
+    onBlur: onBlur,
+    "aria-invalid": !!errorMessage,
+    "aria-describedby": infoMessage && msgId,
+    "aria-errormessage": errorMessage && errorMsgId
   })), React__default.createElement(FieldWrapper.Messages, {
+    infoMsgId: msgId,
     infoMessage: infoMessage,
+    errorMsgId: errorMsgId,
     errorMessage: errorMessage,
     isInverted: isInverted
   }));
@@ -4595,4 +4684,4 @@ var Textarea$1 = React__default.memo(Textarea, areEqual);
 var templateObject_1;
 
 export { DatepickerCmp as D, FileUploadCmp as F, LocationField$1 as L, RadioButton$1 as R, SelectDropdown$1 as S, Textarea$1 as T };
-//# sourceMappingURL=Textarea-60503eb7.js.map
+//# sourceMappingURL=Textarea-af789d6e.js.map