@decisiv/ui-components 2.0.1-alpha.71 → 2.0.1-alpha.75

package/lib/components/Combobox/index.test.js

@@ -429,6 +429,54 @@ describe('Combobox', function () {
         }));
         expect(queryByLabelText('test')).toHaveValue(defaultOptions[0].label);
       });
+      describe('with first element disabled', function () {
+        it('selects the first element that is not disabled', function () {
+          var onChangeValue = jest.fn();
+          var options = [{
+            id: '0',
+            label: 'option 0',
+            value: 'option 0',
+            disabled: true
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1'
+          }, {
+            id: '2',
+            label: 'option 2',
+            value: 'option 2'
+          }];
+
+          var _render14 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render14.baseElement,
+              queryByText = _render14.queryByText,
+              queryByLabelText = _render14.queryByLabelText;
+
+          _react2.fireEvent.click(queryByText('test'));
+
+          _react2.fireEvent.change(queryByLabelText('test'), {
+            target: {
+              value: 'value'
+            }
+          });
+
+          expect((0, _react2.queryByText)(baseElement, options[1].label)).toBeInTheDocument();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'Enter',
+            keyCode: 13
+          });
+
+          expect(onChangeValue).toHaveBeenCalledWith(options[1].id, expect.objectContaining({
+            removed: false
+          }));
+          expect(queryByLabelText('test')).toHaveValue(options[1].label);
+        });
+      });
     });
     describe('when pressing the TAB key', function () {
       it('closes the dropdown, advances focus', function () {
@@ -437,14 +485,14 @@ describe('Combobox', function () {
 
         var chevronDownPathD = chevronDownContainer.querySelector('svg path').getAttribute('d');
 
-        var _render14 = render(_react.default.createElement(_.default, {
+        var _render15 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render14.baseElement,
-            container = _render14.container,
-            queryByText = _render14.queryByText,
-            queryByLabelText = _render14.queryByLabelText;
+            baseElement = _render15.baseElement,
+            container = _render15.container,
+            queryByText = _render15.queryByText,
+            queryByLabelText = _render15.queryByLabelText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -473,12 +521,12 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render15 = render(_react.default.createElement(_.default, {
+        var _render16 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            queryByLabelText = _render15.queryByLabelText;
+            queryByLabelText = _render16.queryByLabelText;
 
         var value = 'value';
 
@@ -506,20 +554,20 @@ describe('Combobox', function () {
         var onChangeInputValue = jest.fn();
         var onChangeValue = jest.fn();
 
-        var _render16 = render(_react.default.createElement(_.default, {
+        var _render17 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue,
           onChangeValue: onChangeValue,
           options: defaultOptions
         })),
-            baseElement = _render16.baseElement,
-            queryByLabelText = _render16.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+            baseElement = _render17.baseElement,
+            queryByLabelText = _render17.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
         // This click focuses on the input.
 
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
 
         expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
 
@@ -545,16 +593,88 @@ describe('Combobox', function () {
         expect(onChangeInputValue).not.toHaveBeenCalled();
         expect(onChangeValue).not.toHaveBeenCalled();
       });
+      describe('with a disabled option', function () {
+        it('expands and navigates through the dropdown list, keeps focus on the input', function () {
+          var onChangeInputValue = jest.fn();
+          var onChangeValue = jest.fn();
+          var enabledElements = ['enabled 1', 'enabled 2'];
+          var options = [{
+            id: enabledElements[0],
+            label: enabledElements[0],
+            value: 'option 0'
+          }, {
+            id: '1',
+            label: 'option 1',
+            value: 'option 1',
+            disabled: true
+          }, {
+            label: 'category 0',
+            items: [{
+              id: 'cat0Opt0',
+              label: 'category 0 option 0',
+              value: 'category 0 option 0',
+              disabled: true
+            }, {
+              id: enabledElements[1],
+              label: enabledElements[1],
+              value: 'category 0 option 1'
+            }]
+          }];
+
+          var _render18 = render(_react.default.createElement(_.default, {
+            label: "test",
+            onChangeInputValue: onChangeInputValue,
+            onChangeValue: onChangeValue,
+            options: options
+          })),
+              baseElement = _render18.baseElement,
+              queryByLabelText = _render18.queryByLabelText; // You can not fire an event on the input in the UI unless you are already focused on it.
+          // This click focuses on the input.
+
+
+          _react2.fireEvent.click(queryByLabelText('test'));
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0])).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowDown',
+            keyCode: 40
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the next element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+
+          _react2.fireEvent.keyDown(queryByLabelText('test'), {
+            key: 'ArrowUp',
+            keyCode: 38
+          });
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the previous element in the list
+          // that is not marked as disabled
+
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect(queryByLabelText('test')).toHaveFocus();
+          expect(onChangeInputValue).not.toHaveBeenCalled();
+          expect(onChangeValue).not.toHaveBeenCalled();
+        });
+      });
     });
     describe('when pressing the ESCAPE key', function () {
       it('closes the dropdown, keeps focus on input', function () {
-        var _render17 = render(_react.default.createElement(_.default, {
+        var _render19 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions
         })),
-            baseElement = _render17.baseElement,
-            queryByLabelText = _render17.queryByLabelText,
-            queryByText = _render17.queryByText;
+            baseElement = _render19.baseElement,
+            queryByLabelText = _render19.queryByLabelText,
+            queryByText = _render19.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -572,13 +692,13 @@ describe('Combobox', function () {
       it('preserves the typed text, does NOT make a selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render18 = render(_react.default.createElement(_.default, {
+        var _render20 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            queryByLabelText = _render18.queryByLabelText,
-            queryByText = _render18.queryByText;
+            queryByLabelText = _render20.queryByLabelText,
+            queryByText = _render20.queryByText;
 
         var value = 'value';
 
@@ -604,18 +724,18 @@ describe('Combobox', function () {
   });
   describe('when the input field has text', function () {
     it('renders the "clear" button', function () {
-      var _render19 = render(_react.default.createElement(_Times.default, null)),
-          timesContainer = _render19.container;
+      var _render21 = render(_react.default.createElement(_Times.default, null)),
+          timesContainer = _render21.container;
 
       var timesPathD = timesContainer.querySelector('svg path').getAttribute('d');
 
-      var _render20 = render(_react.default.createElement(_.default, {
+      var _render22 = render(_react.default.createElement(_.default, {
         defaultInputValue: "value",
         label: "test",
         options: defaultOptions
       })),
-          container = _render20.container,
-          queryByLabelText = _render20.queryByLabelText;
+          container = _render22.container,
+          queryByLabelText = _render22.queryByLabelText;
 
       expect(queryByLabelText('test')).toHaveValue('value');
       expect(container.querySelectorAll('svg path')[0]).toHaveAttribute('d', timesPathD);
@@ -627,12 +747,12 @@ describe('Combobox', function () {
           inputValue = event ? event.target.value : '';
         });
 
-        var _render21 = render(_react.default.createElement(_.default, {
+        var _render23 = render(_react.default.createElement(_.default, {
           label: "test",
           onChangeInputValue: onChangeInputValue
         })),
-            container = _render21.container,
-            queryByLabelText = _render21.queryByLabelText;
+            container = _render23.container,
+            queryByLabelText = _render23.queryByLabelText;
 
         var value = 'value';
 
@@ -658,13 +778,13 @@ describe('Combobox', function () {
     it('updates the input value with the label of the selection', function () {
       var onChangeValue = jest.fn();
 
-      var _render22 = render(_react.default.createElement(_.default, {
+      var _render24 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render22.baseElement,
-          queryByLabelText = _render22.queryByLabelText;
+          baseElement = _render24.baseElement,
+          queryByLabelText = _render24.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -678,13 +798,13 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).not.toBeInTheDocument();
     });
     it('shows the selected tag when multiple select is enabled', function () {
-      var _render23 = render(_react.default.createElement(_.default, {
+      var _render25 = render(_react.default.createElement(_.default, {
         label: "test",
         multiple: true,
         options: defaultOptions
       })),
-          baseElement = _render23.baseElement,
-          queryByLabelText = _render23.queryByLabelText;
+          baseElement = _render25.baseElement,
+          queryByLabelText = _render25.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -693,12 +813,12 @@ describe('Combobox', function () {
       expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label)).toBeInTheDocument();
     });
     it('renders as "selected" in the dropdown list', function () {
-      var _render24 = render(_react.default.createElement(_.default, {
+      var _render26 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions
       })),
-          baseElement = _render24.baseElement,
-          queryByLabelText = _render24.queryByLabelText;
+          baseElement = _render26.baseElement,
+          queryByLabelText = _render26.queryByLabelText;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -716,14 +836,14 @@ describe('Combobox', function () {
       it('does NOT update the selection automatically', function () {
         var onChangeValue = jest.fn();
 
-        var _render25 = render(_react.default.createElement(_.default, {
+        var _render27 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render25.baseElement,
-            queryByLabelText = _render25.queryByLabelText,
-            queryByText = _render25.queryByText;
+            baseElement = _render27.baseElement,
+            queryByLabelText = _render27.queryByLabelText,
+            queryByText = _render27.queryByText;
 
         _react2.fireEvent.click(queryByText('test'));
 
@@ -750,13 +870,13 @@ describe('Combobox', function () {
       it('clears the selection', function () {
         var onChangeValue = jest.fn();
 
-        var _render26 = render(_react.default.createElement(_.default, {
+        var _render28 = render(_react.default.createElement(_.default, {
           label: "test",
           options: defaultOptions,
           onChangeValue: onChangeValue
         })),
-            baseElement = _render26.baseElement,
-            queryByLabelText = _render26.queryByLabelText;
+            baseElement = _render28.baseElement,
+            queryByLabelText = _render28.queryByLabelText;
 
         _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -781,7 +901,7 @@ describe('Combobox', function () {
       var onChangeInputValue = jest.fn();
       var onChangeValue = jest.fn();
 
-      var _render27 = render(_react.default.createElement(_.default, {
+      var _render29 = render(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
         defaultInputValue: "value",
@@ -789,9 +909,9 @@ describe('Combobox', function () {
         onChangeInputValue: onChangeInputValue,
         onChangeValue: onChangeValue
       })),
-          baseElement = _render27.baseElement,
-          queryByLabelText = _render27.queryByLabelText,
-          rerender = _render27.rerender;
+          baseElement = _render29.baseElement,
+          queryByLabelText = _render29.queryByLabelText,
+          rerender = _render29.rerender;
 
       _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -814,7 +934,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render28, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render30, baseElement, queryByLabelText, rerender;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -824,7 +944,7 @@ describe('Combobox', function () {
                 newInputValue = event ? event.target.value : '';
               });
               onChangeValue = jest.fn();
-              _render28 = render(_react.default.createElement(_.default, {
+              _render30 = render(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
                 inputValue: "value",
@@ -833,7 +953,7 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render28.baseElement, queryByLabelText = _render28.queryByLabelText, rerender = _render28.rerender;
+              })), baseElement = _render30.baseElement, queryByLabelText = _render30.queryByLabelText, rerender = _render30.rerender;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
@@ -891,7 +1011,7 @@ describe('Combobox', function () {
           it('calls the onChangeValue prop with removed: true', function () {
             var onChangeValue = jest.fn();
 
-            var _render29 = render(_react.default.createElement(_.default, {
+            var _render31 = render(_react.default.createElement(_.default, {
               label: "test",
               options: defaultOptions,
               inputValue: "",
@@ -899,8 +1019,8 @@ describe('Combobox', function () {
               onChangeValue: onChangeValue,
               multiple: true
             })),
-                queryByText = _render29.queryByText,
-                queryByLabelText = _render29.queryByLabelText;
+                queryByText = _render31.queryByText,
+                queryByLabelText = _render31.queryByLabelText;
 
             expect(queryByText(defaultOptions[1].label)).toBeInTheDocument();
 

package/lib/components/Filter/IconWrapper/index.d.ts

@@ -0,0 +1,197 @@
+/// <reference types="react" />
+import { FilterProps } from '../types';
+declare const IconWrapper: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    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";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & Pick<FilterProps, "badgeColor">, never>;
+export default IconWrapper;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Filter/IconWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/IconWrapper/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAgBvC,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAOhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Filter/IconWrapper/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _Flex = _interopRequireDefault(require("../../Flex"));
+
+var _color = _interopRequireDefault(require("../../../modifiers/color"));
+
+var _utils = require("../../../utils");
+
+var _commonUIColors = require("../../../utils/commonUIColors");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 colorModifiers = (0, _utils.applyDynamicModifiers)('badgeColor', function (_ref) {
+  var badgeColor = _ref.badgeColor;
+  return (0, _styledComponents.css)(["", ";"], badgeColor && badgeColor in _commonUIColors.commonUIColors && (0, _color.default)(_commonUIColors.commonUIColors[badgeColor]));
+});
+var IconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-1e8ws53-0"
+})(["width:", ";height:", ";padding:", ";border-radius:2px;", ";", ";"], (0, _rem.default)(_spacing.default.base * 2), (0, _rem.default)(_spacing.default.base * 2), (0, _rem.default)(_spacing.default.base * 0.4), (0, _color.default)(_commonUIColors.commonUIColors.information), colorModifiers);
+var _default = IconWrapper;
+exports.default = _default;