@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

package/lib/atoms/Calendar/index.test.js

@@ -79,20 +79,50 @@ describe('Calendar', function () {
     var today = new Date();
     expect(queryByText("".concat(months[today.getMonth()], " ").concat(today.getFullYear()))).toBeInTheDocument();
   });
+  it('renders the "go to today" button as disabled if its in the current month', function () {
+    var _render3 = render(_react.default.createElement(_.default, null)),
+        queryByText = _render3.queryByText;
+
+    expect(queryByText('Today').closest('button')).toHaveAttribute('disabled');
+  });
+  it('renders the "go to today" button as enabled if its not in the current month', function () {
+    var _render4 = render(_react.default.createElement(_.default, {
+      viewMonth: {
+        year: 2020,
+        month: 1
+      }
+    })),
+        queryByText = _render4.queryByText;
+
+    expect(queryByText('Today').closest('button')).not.toHaveAttribute('disabled');
+  });
+  it('renders the "go to today" button as enabled if its in the current month of a different year', function () {
+    var today = new Date();
+
+    var _render5 = render(_react.default.createElement(_.default, {
+      viewMonth: {
+        year: today.getFullYear() - 1,
+        month: today.getMonth()
+      }
+    })),
+        queryByText = _render5.queryByText;
+
+    expect(queryByText('Today').closest('button')).not.toHaveAttribute('disabled');
+  });
   it('renders a button to view the previous month', function () {
     var _rtlRender = (0, _react2.render)(_react.default.createElement(_ArrowLeft.default, null)),
         svgContainer = _rtlRender.container;
 
     var arrowLeftPathD = svgContainer.querySelector('svg path').getAttribute('d');
 
-    var _render3 = render(_react.default.createElement(_.default, {
+    var _render6 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByLabelText = _render3.queryByLabelText,
-        queryByText = _render3.queryByText;
+        queryByLabelText = _render6.queryByLabelText,
+        queryByText = _render6.queryByText;
 
     var viewPrevMonthButton = queryByLabelText(/view previous month/i);
     expect(viewPrevMonthButton).toBeInTheDocument();
@@ -108,14 +138,14 @@ describe('Calendar', function () {
 
     var arrowRightPathD = svgContainer.querySelector('svg path').getAttribute('d');
 
-    var _render4 = render(_react.default.createElement(_.default, {
+    var _render7 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByLabelText = _render4.queryByLabelText,
-        queryByText = _render4.queryByText;
+        queryByLabelText = _render7.queryByLabelText,
+        queryByText = _render7.queryByText;
 
     var viewNextMonthButton = queryByLabelText(/view next month/i);
     expect(viewNextMonthButton).toBeInTheDocument();
@@ -126,13 +156,13 @@ describe('Calendar', function () {
     expect(queryByText('February 2020')).toBeInTheDocument();
   });
   it('renders a header for each day of the week', function () {
-    var _render5 = render(_react.default.createElement(_.default, {
+    var _render8 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 1
       }
     })),
-        queryByText = _render5.queryByText;
+        queryByText = _render8.queryByText;
 
     var _iteratorNormalCompletion = true;
     var _didIteratorError = false;
@@ -159,13 +189,13 @@ describe('Calendar', function () {
     }
   });
   it('renders a date button for every day of the month', function () {
-    var _render6 = render(_react.default.createElement(_.default, {
+    var _render9 = render(_react.default.createElement(_.default, {
       viewMonth: {
         year: 2020,
         month: 2
       }
     })),
-        queryByText = _render6.queryByText; // 2020 is a leap year.
+        queryByText = _render9.queryByText; // 2020 is a leap year.
 
 
     var datesInFebruary2020 = (0, _range.default)(1, 30);
@@ -204,10 +234,10 @@ describe('Calendar', function () {
       var today = new Date();
       var selected = new Date(today.getFullYear(), today.getMonth() - 1, 1);
 
-      var _render7 = render(_react.default.createElement(_.default, {
+      var _render10 = render(_react.default.createElement(_.default, {
         selected: selected
       })),
-          queryByText = _render7.queryByText;
+          queryByText = _render10.queryByText;
 
       expect(queryByText("".concat(months[selected.getMonth()], " ").concat(selected.getFullYear()))).toBeInTheDocument();
     });
@@ -215,10 +245,10 @@ describe('Calendar', function () {
       var today = new Date();
       var selected = new Date(today.getFullYear() + 1, today.getMonth() + 2, 1);
 
-      var _render8 = render(_react.default.createElement(_.default, {
+      var _render11 = render(_react.default.createElement(_.default, {
         selected: selected
       })),
-          queryByText = _render8.queryByText;
+          queryByText = _render11.queryByText;
 
       _react2.fireEvent.click(queryByText(/today/i));
 
@@ -229,14 +259,14 @@ describe('Calendar', function () {
     it('selects the clicked date', function () {
       var onChange = jest.fn();
 
-      var _render9 = render(_react.default.createElement(_.default, {
+      var _render12 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render9.queryByText;
+          queryByText = _render12.queryByText;
 
       var date = 7;
       var selectedDate = (0, _utils.buildJSDate)({
@@ -257,14 +287,14 @@ describe('Calendar', function () {
     it('clears the selected date if already selected', function () {
       var onChange = jest.fn();
 
-      var _render10 = render(_react.default.createElement(_.default, {
+      var _render13 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render10.queryByText;
+          queryByText = _render13.queryByText;
 
       var date = 7;
       var selectedDate = (0, _utils.buildJSDate)({
@@ -294,7 +324,7 @@ describe('Calendar', function () {
         date: date
       });
 
-      var _render11 = render(_react.default.createElement(_.default, {
+      var _render14 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         viewMonth: {
           year: 2020,
@@ -302,7 +332,7 @@ describe('Calendar', function () {
         },
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, selectedDate]]
       })),
-          queryByText = _render11.queryByText;
+          queryByText = _render14.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === String(date);
@@ -318,14 +348,14 @@ describe('Calendar', function () {
     it('initializes the calendar with the default selected value', function () {
       var defaultSelected = new Date(2020, 1, 7);
 
-      var _render12 = render(_react.default.createElement(_.default, {
+      var _render15 = render(_react.default.createElement(_.default, {
         defaultSelected: defaultSelected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render12.queryByText;
+          queryByText = _render15.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -335,15 +365,15 @@ describe('Calendar', function () {
     it('does NOT update selected value when default selected prop changes', function () {
       var defaultSelected = new Date(2020, 1, 7);
 
-      var _render13 = render(_react.default.createElement(_.default, {
+      var _render16 = render(_react.default.createElement(_.default, {
         defaultSelected: defaultSelected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render13.queryByText,
-          rerender = _render13.rerender;
+          queryByText = _render16.queryByText,
+          rerender = _render16.rerender;
 
       var newDefaultSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -367,14 +397,14 @@ describe('Calendar', function () {
     it('initializes the calendar with the selected value', function () {
       var selected = new Date(2020, 1, 7);
 
-      var _render14 = render(_react.default.createElement(_.default, {
+      var _render17 = render(_react.default.createElement(_.default, {
         selected: selected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render14.queryByText;
+          queryByText = _render17.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -384,15 +414,15 @@ describe('Calendar', function () {
     it('updates selected value when selected prop changes', function () {
       var selected = new Date(2020, 1, 7);
 
-      var _render15 = render(_react.default.createElement(_.default, {
+      var _render18 = render(_react.default.createElement(_.default, {
         selected: selected,
         viewMonth: {
           year: 2020,
           month: 2
         }
       })),
-          queryByText = _render15.queryByText,
-          rerender = _render15.rerender;
+          queryByText = _render18.queryByText,
+          rerender = _render18.rerender;
 
       var newSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -415,7 +445,7 @@ describe('Calendar', function () {
       var onChange = jest.fn();
       var selected = new Date(2020, 1, 7);
 
-      var _render16 = render(_react.default.createElement(_.default, {
+      var _render19 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         selected: selected,
         viewMonth: {
@@ -423,7 +453,7 @@ describe('Calendar', function () {
           month: 2
         }
       })),
-          rerender = _render16.rerender;
+          rerender = _render19.rerender;
 
       var newSelected = new Date(2020, 1, 15);
       rerender(_react.default.createElement(_.default, {
@@ -440,7 +470,7 @@ describe('Calendar', function () {
       var onChange = jest.fn();
       var selected = new Date(2020, 1, 7);
 
-      var _render17 = render(_react.default.createElement(_.default, {
+      var _render20 = render(_react.default.createElement(_.default, {
         onChange: onChange,
         selected: selected,
         viewMonth: {
@@ -448,7 +478,7 @@ describe('Calendar', function () {
           month: 2
         }
       })),
-          queryByText = _render17.queryByText;
+          queryByText = _render20.queryByText;
 
       var selectedDateButton = queryByText(function (content, element) {
         return element.nodeName === 'BUTTON' && element.textContent === '7';
@@ -468,7 +498,7 @@ describe('Calendar', function () {
   describe('date range', function () {
     it('highlights the active date range', function () {
       // disabled date is added to ensure range styles overrides disabled styles
-      var _render18 = render(_react.default.createElement(_.default, {
+      var _render21 = render(_react.default.createElement(_.default, {
         variant: "range",
         viewMonth: {
           year: 2020,
@@ -477,7 +507,7 @@ describe('Calendar', function () {
         selected: [new Date(2020, 1, 15)],
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, new Date(2020, 1, 16)]]
       })),
-          queryByText = _render18.queryByText;
+          queryByText = _render21.queryByText;
 
       _react2.fireEvent.mouseOver(queryByText('20')); // TODO test for start and end date styles, currently linear gradient is not supported
       // https://github.com/testing-library/jest-dom/issues/170
@@ -517,7 +547,7 @@ describe('Calendar', function () {
     });
     it('highlights the selected date range', function () {
       // disabled date is added to ensure range styles overrides disabled styles
-      var _render19 = render(_react.default.createElement(_.default, {
+      var _render22 = render(_react.default.createElement(_.default, {
         variant: "range",
         viewMonth: {
           year: 2020,
@@ -526,7 +556,7 @@ describe('Calendar', function () {
         selected: [new Date(2020, 1, 15), new Date(2020, 1, 20)],
         disabledDateRules: [[_constants.DisabledDateRuleName.IS, new Date(2020, 1, 16)]]
       })),
-          queryByText = _render19.queryByText; // TODO test for start and end date styles, currently linear gradient is not supported
+          queryByText = _render22.queryByText; // TODO test for start and end date styles, currently linear gradient is not supported
       // https://github.com/testing-library/jest-dom/issues/170
 
 

package/lib/atoms/Calendar/types.d.ts

@@ -90,7 +90,7 @@ interface TBaseCalendarProps {
     focusOnRender?: boolean;
     onChange?: (date?: Date | TSelectedDates) => void;
     onClick?: MouseEventHandler;
-    minWidth?: string;
+    width?: string;
     viewMonth?: Date | TDisplayMonth;
     disabledDateRules?: TDisabledDateRule[];
 }

package/lib/atoms/Calendar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/Calendar/types.ts"],"names":[],"mappings":"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"}

package/lib/atoms/Calendar/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/atoms/InputField/Containers.d.ts

@@ -40,7 +40,7 @@ export declare const InputFieldContainer: import("styled-components").StyledComp
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -205,6 +205,9 @@ interface InputContainerProps extends FlexComponentProps {
     hasWarning?: boolean;
     isFocused?: boolean;
     readOnly?: boolean;
+    hiddenLabel: boolean;
+    isTextArea: boolean;
+    multiple: boolean;
 }
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -242,7 +245,7 @@ export declare const InputContainer: import("styled-components").StyledComponent
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -435,7 +438,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -594,6 +597,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
 }> & {
     alignItems: string;
     justifyContent: string;
+} & {
+    hiddenLabel?: boolean | undefined;
+    rightPlacement?: boolean | undefined;
 }, "alignItems" | "justifyContent">;
 export declare const InputInnerContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -631,7 +637,7 @@ export declare const InputInnerContainer: import("styled-components").StyledComp
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -790,9 +796,9 @@ export declare const InputInnerContainer: import("styled-components").StyledComp
 }> & {
     flex: number;
     flexWrap: string;
-    paddingLeft: number;
 } & {
     hasIcon?: boolean | undefined;
-}, "flexWrap" | "paddingLeft" | "flex">;
+    hiddenLabel: boolean;
+}, "flexWrap" | "flex">;
 export {};
 //# sourceMappingURL=Containers.d.ts.map

package/lib/atoms/InputField/Containers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0C1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAOzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAa/B,CAAC"}
+{"version":3,"file":"Containers.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/Containers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,OAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,UAAU,wBAAyB,SAAQ,kBAAkB;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yCAa/B,CAAC;AAEF,UAAU,mBAAoB,SAAQ,kBAAkB;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiCD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwD1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAuBzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B/B,CAAC"}

package/lib/atoms/InputField/Containers.js

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
 var _dynamicModifiers = require("../../utils/dynamicModifiers");
@@ -32,6 +34,7 @@ var InputFieldContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   componentId: "me30fz-0"
 })(["flex:1;max-width:100%;", ";"], (0, _styleModifiers.when)('overflow', 'auto', (0, _styledComponents.css)(["overflow:auto;"])));
 exports.InputFieldContainer = InputFieldContainer;
+var hiddenLabelStyles = (0, _styledComponents.css)(["min-height:32px;"]);
 var inactiveStyles = (0, _styledComponents.css)(["background:", ";border-color:", ";cursor:not-allowed;position:relative;&:active,&:hover{background:", ";border-color:", ";", ";}*{cursor:not-allowed;}"], (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _toColorString.default)(_color.default.opacity.fullMoon50), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _focusRingWithColor.default)({
   red: 0,
   green: 0,
@@ -42,22 +45,21 @@ var onFocusStyles = (0, _styledComponents.css)(["border-color:", ";", ";&:hover{
 var InputContainer = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "Containers__InputContainer",
   componentId: "me30fz-1"
-})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
+})(["background:", ";border:1px solid ", ";box-sizing:border-box;min-height:50px;position:relative;width:100%;", ";& ~ *{cursor:default;margin-top:", "px;width:100%;}&:hover{border-color:", ";}&:active{border-color:", ";", ";}", ";", ";", ";", ";", ";", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.base.quarterMoon), (0, _dynamicModifiers.applyDynamicModifiers)('cursor'), _spacing.default.base * 0.5, (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), (0, _styleModifiers.when)('isFocused', onFocusStyles), (0, _styleModifiers.when)('hasWarning', (0, _styledComponents.css)(["border-color:", ";&:active,&:hover{border-color:", ";}"], (0, _toColorString.default)(_color.default.status.warning.medium), (0, _toColorString.default)(_color.default.status.warning.medium))), (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hiddenLabel', hiddenLabelStyles), (0, _styleModifiers.whenNot)('isTextArea', (0, _styledComponents.css)(["height:32px;"])), (0, _styleModifiers.when)('multiple', (0, _styledComponents.css)(["height:auto;"])));
 exports.InputContainer = InputContainer;
 var IconContainer = (0, _styledComponents.default)(_Flex.default).attrs({
-  alignItems: 'center',
+  alignItems: 'flex-start',
   justifyContent: 'center'
 }).withConfig({
   displayName: "Containers__IconContainer",
   componentId: "me30fz-2"
-})(["color:", ";margin:6px 0 6px 10px;width:30px;"], (0, _toColorString.default)(_color.default.base.alaskanHusky));
+})(["color:", ";margin:16px 0 6px 15px;", " ", ""], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _styleModifiers.when)('rightPlacement', (0, _styledComponents.css)(["margin:0;align-items:center;margin-right:", ";margin-left:", ";"], (0, _rem.default)(_spacing.default.base * 0.8), (0, _rem.default)(_spacing.default.base * 0.8))), (0, _styleModifiers.when)('hiddenLabel', (0, _styledComponents.css)(["margin:8px 0 8px 10px;"])));
 exports.IconContainer = IconContainer;
 var InputInnerContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   flex: 1,
-  flexWrap: 'wrap',
-  paddingLeft: 1
+  flexWrap: 'wrap'
 }).withConfig({
   displayName: "Containers__InputInnerContainer",
   componentId: "me30fz-3"
-})(["max-width:100%;", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% - 40px);"])));
+})(["max-width:100%;padding-top:6px;padding-left:15px;", ";", ";", ";"], (0, _styleModifiers.when)('hasIcon', (0, _styledComponents.css)(["max-width:calc(100% - 10px);"])), (0, _styleModifiers.whenNot)('hasIcon', (0, _styledComponents.css)(["padding-left:10px;"])), (0, _styleModifiers.whenAll)([['hasIcon', true], ['hiddenLabel', true]], (0, _styledComponents.css)(["padding-left:10px;"])));
 exports.InputInnerContainer = InputInnerContainer;

package/lib/atoms/InputField/HelpMessage.d.ts

@@ -4,7 +4,7 @@ export interface HelpMessageProps {
     helpMessage?: string;
     maxLength?: number;
     showCharacterCount?: boolean;
-    contentLength: number;
+    contentLength?: number;
 }
 declare function HelpMessage(props: HelpMessageProps): JSX.Element | null;
 declare namespace HelpMessage {

package/lib/atoms/InputField/HelpMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;CACvB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAwBhE;kBAxBQ,WAAW;;;;;;;;;;;;;;AAyCpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"HelpMessage.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/HelpMessage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6ChE;kBA7CQ,WAAW;;;;;;;;;;;;;;AA8DpB,eAAe,WAAW,CAAC"}

package/lib/atoms/InputField/HelpMessage.js

@@ -28,16 +28,32 @@ function HelpMessage(props) {
   var helpMessage = props.helpMessage,
       maxLength = props.maxLength,
       showCharacterCount = props.showCharacterCount,
-      contentLength = props.contentLength;
+      _props$contentLength = props.contentLength,
+      contentLength = _props$contentLength === void 0 ? 0 : _props$contentLength;
   var translate = (0, _useTranslations.default)();
-  var showCount = Boolean(maxLength && showCharacterCount); // You have {remaining} characters left ({max} max).
+  var showCount = Boolean(maxLength && showCharacterCount);
+  var countSurpassed = maxLength && contentLength > maxLength;
+
+  var countMessage = _react.default.useMemo(function () {
+    if (!showCount) {
+      return null;
+    }
+
+    if (countSurpassed) {
+      return translate(undefined, 'textArea.countMessageOver', {
+        surplus: _react.default.createElement(RemainingCount, null, contentLength - maxLength),
+        max: "".concat(maxLength)
+      });
+    }
+
+    return translate(undefined, 'textArea.countMessage', {
+      remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
+      max: "".concat(maxLength)
+    });
+  }, [contentLength, countSurpassed, maxLength, showCount, translate]);
 
-  var countMessage = showCount && translate(undefined, 'textArea.countMessage', {
-    remaining: _react.default.createElement(RemainingCount, null, maxLength - contentLength),
-    max: "".concat(maxLength)
-  });
   return helpMessage || showCount ? _react.default.createElement(_Message.default, {
-    intent: "help"
+    intent: countSurpassed ? 'warning' : 'help'
   }, helpMessage, helpMessage && showCount && _react.default.createElement("br", null), countMessage) : null;
 }
 

package/lib/atoms/InputField/InputLabel.d.ts

@@ -4,6 +4,7 @@ interface InputLabelProps extends PProps, React.LabelHTMLAttributes<HTMLLabelEle
     color?: PProps['color'];
     disabled?: boolean;
     readOnly?: boolean;
+    hidden?: boolean;
 }
 declare const InputLabel: import("styled-components").StyledComponent<"p", any, PProps & {
     as: string;

package/lib/atoms/InputField/InputLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAUD,QAAA,MAAM,UAAU;;;;6CAmBf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/InputLabel.ts"],"names":[],"mappings":";AAIA,OAAO,EAAK,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,eACR,SAAQ,MAAM,EACZ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqBD,QAAA,MAAM,UAAU;;;;6CAoBf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/atoms/InputField/InputLabel.js

@@ -14,6 +14,7 @@ var _Typography = require("../../components/Typography");
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 var inactiveStyles = (0, _styledComponents.css)(["cursor:not-allowed;*{cursor:not-allowed;}"]);
+var visuallyHiddenStyles = (0, _styledComponents.css)(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;"]);
 var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
   as: 'label',
   color: 'alaskanHusky',
@@ -21,6 +22,6 @@ var InputLabel = (0, _styledComponents.default)(_Typography.P).attrs({
 }).withConfig({
   displayName: "InputLabel",
   componentId: "ldhs58-0"
-})(["display:block;padding-top:6px;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles));
+})(["display:block;padding-right:10px;text-align:left;width:100%;cursor:inherit;*{cursor:inherit;}", ";", ";", ";"], (0, _styleModifiers.when)('disabled', inactiveStyles), (0, _styleModifiers.when)('readOnly', inactiveStyles), (0, _styleModifiers.when)('hidden', visuallyHiddenStyles));
 var _default = InputLabel;
 exports.default = _default;

package/lib/atoms/InputField/index.d.ts

@@ -14,6 +14,8 @@ export interface InputComponentProps {
     ref: Ref<any>;
     required?: boolean;
     value?: string | number | string[];
+    autoComplete?: string;
+    type?: string;
 }
 export interface BaseInputFieldProps {
     children: (props: InputComponentProps) => JSX.Element;
@@ -21,6 +23,7 @@ export interface BaseInputFieldProps {
     disabled?: boolean;
     helpMessage?: string;
     icon?: (props: IconProps) => JSX.Element;
+    secondaryElement?: JSX.Element;
     id?: string;
     inputContainerRef?: Ref<HTMLDivElement>;
     label: string;
@@ -37,9 +40,13 @@ export interface BaseInputFieldProps {
     required?: boolean;
     requiredMessage?: string;
     showCharacterCount?: boolean;
+    hideLabel?: boolean;
     style?: React.CSSProperties;
-    value: string;
+    value?: string;
     warningMessage?: string;
+    withWarningIntent?: boolean;
+    isTextArea?: boolean;
+    multiple?: boolean;
 }
 declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
 export default InputFieldWithRef;

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA+JD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}