@dhis2-ui/select 9.10.3 → 9.11.1-beta.1

package/build/cjs/multi-select-field/multi-select-field.e2e.stories.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../index.js");
+var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'MultiSelectField'
+};
+const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  label: "The label"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithLabel = WithLabel;
+const WithHelpText = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  helpText: "The help text"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithHelpText = WithHelpText;
+const WithValidationText = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  validationText: "The validation text"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithValidationText = WithValidationText;
+const WithLabelAndRequiredStatus = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  label: "The label",
+  required: true
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithLabelAndRequiredStatus = WithLabelAndRequiredStatus;
+const WithClearableAndSelectedOption = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  selected: ['1'],
+  clearable: true
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  key: "1",
+  value: "1",
+  label: "One"
+}));
+exports.WithClearableAndSelectedOption = WithClearableAndSelectedOption;
+const WithFilterable = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  filterable: true
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  key: "1",
+  value: "1",
+  label: "One"
+}));
+exports.WithFilterable = WithFilterable;
+const WithLoading = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, {
+  loading: true
+});
+exports.WithLoading = WithLoading;
+const WithoutOptions = () => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, null);
+exports.WithoutOptions = WithoutOptions;

package/build/cjs/multi-select-field/multi-select-field.js

@@ -4,32 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiSelectField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
-
 var _field = require("@dhis2-ui/field");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-var _index2 = _interopRequireDefault(require("../locales/index.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = _interopRequireDefault(require("../locales/index.js"));
+var _index2 = require("../multi-select/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 class MultiSelectField extends _react.default.Component {
   render() {
     const {
@@ -80,7 +69,7 @@ class MultiSelectField extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_box.Box, {
       width: inputWidth,
       minWidth: "100px"
-    }, /*#__PURE__*/_react.default.createElement(_index.MultiSelect, {
+    }, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, {
       selected: selected,
       tabIndex: tabIndex,
       maxHeight: maxHeight,
@@ -107,107 +96,77 @@ class MultiSelectField extends _react.default.Component {
       dense: dense
     }, children)));
   }
-
 }
-
 exports.MultiSelectField = MultiSelectField;
 MultiSelectField.defaultProps = {
   selected: [],
   dataTest: 'dhis2-uiwidgets-multiselectfield',
-  clearText: () => _index2.default.t('Clear'),
-  empty: () => _index2.default.t('No data found'),
-  filterPlaceholder: () => _index2.default.t('Type to filter options'),
-  loadingText: () => _index2.default.t('Loading options'),
-  noMatchText: () => _index2.default.t('No options found')
+  clearText: () => _index.default.t('Clear'),
+  empty: () => _index.default.t('No data found'),
+  filterPlaceholder: () => _index.default.t('Type to filter options'),
+  loadingText: () => _index.default.t('Loading options'),
+  noMatchText: () => _index.default.t('No options found')
 };
 MultiSelectField.propTypes = {
   /** Should be `MultiSelectOption` components */
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-
   /** Label for the button that clears selections */
   clearText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Adds a button to the MultiSelect that clears selections when pressed */
   clearable: _propTypes.default.bool,
   dataTest: _propTypes.default.string,
-
   /** Makes the MultiSelect smaller */
   dense: _propTypes.default.bool,
-
   /** Disables the MultiSelect */
   disabled: _propTypes.default.bool,
-
   /** Text to display when there are no options */
   empty: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
   /** Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Placeholder text to show in the filter field when it is empty */
   filterPlaceholder: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
   /** Adds a field to filter options */
   filterable: _propTypes.default.bool,
-
   /** Useful guiding text to display below the MultiSelect */
   helpText: _propTypes.default.string,
-
   /** Grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Constrains the height of the input */
   inputMaxHeight: _propTypes.default.string,
-
   /** Sets the width of the input. Can be any valid CSS measurement */
   inputWidth: _propTypes.default.string,
-
   /** Text for the label above the MultiSelect */
   label: _propTypes.default.string,
-
   /** Applies a loading appearance to the dropdown options */
   loading: _propTypes.default.bool,
-
   /** Text to display when `loading` is true */
   loadingText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Constrains height of the MultiSelect */
   maxHeight: _propTypes.default.string,
-
   /** Text to display when there are no filter results */
   noMatchText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Placeholder text when the MultiSelect is empty */
   placeholder: _propTypes.default.string,
-
   /** Leading text to prefix selections */
   prefix: _propTypes.default.string,
-
   /** Indicates that a selection is required */
   required: _propTypes.default.bool,
-
   /** Selected items in the MultiSelect (each string should refer to the item's `value` attribute) */
   selected: _propTypes.default.arrayOf(_propTypes.default.string),
   tabIndex: _propTypes.default.string,
-
   /** Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Text to provide form validation feedback. Receives styles according to validation status */
   validationText: _propTypes.default.string,
-
   /** Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onBlur: _propTypes.default.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with signature `({ selected: [String] }, event)` */
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/multi-select-field/{multi-select-field.stories.js → multi-select-field.prod.stories.js}

@@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+\`MultiSelectField\` is a wrapper around a \`MultiSelect\` component that adds a label, help text, validation text, and other features.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+See the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
 
-const description = "\n`MultiSelectField` is a wrapper around a `MultiSelect` component that adds a label, help text, validation text, and other features.\n\nSee the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).\n\n```js\nimport { MultiSelectField, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._\n";
-
-const onChange = selected => alert("Selected changed to: ".concat(JSON.stringify(selected, null, 2)));
+\`\`\`js
+import { MultiSelectField, MultiSelectOption } from '@dhis2/ui'
+\`\`\`
 
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`;
+const onChange = selected => alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`);
 const options = [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   key: "1",
   value: "1",
@@ -60,7 +62,7 @@ const options = [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOpt
   value: "10",
   label: "ten"
 })];
-var _default = {
+var _default = exports.default = {
   title: 'Multi Select Field',
   component: _index2.MultiSelectField,
   subcomponents: {
@@ -74,7 +76,8 @@ var _default = {
     }
   },
   // default args for stories
-  args: { // Fix default prop issues - causes 'i18n is not defined' error
+  args: {
+    // Fix default prop issues - causes 'i18n is not defined' error
     ..._index2.MultiSelectField.defaultProps,
     label: 'Default label',
     selected: ['1'],
@@ -82,70 +85,62 @@ var _default = {
     onChange: onChange
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelectField, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const WithHelpText = Template.bind({});
-exports.WithHelpText = WithHelpText;
+const Default = exports.Default = Template.bind({});
+const WithHelpText = exports.WithHelpText = Template.bind({});
 WithHelpText.args = {
   helpText: 'Helpful text.'
 };
 WithHelpText.parameters = {
   docs: {
     description: {
-      story: "_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._"
+      story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`
     }
   }
 };
-const StatusValid = Template.bind({});
-exports.StatusValid = StatusValid;
+const StatusValid = exports.StatusValid = Template.bind({});
 StatusValid.args = {
   valid: true,
   validationText: 'Totally valid!',
   ...WithHelpText.args
 };
 StatusValid.storyName = 'Status: Valid';
-const StatusWarning = Template.bind({});
-exports.StatusWarning = StatusWarning;
+const StatusWarning = exports.StatusWarning = Template.bind({});
 StatusWarning.args = {
   warning: true,
   validationText: 'Hm, not quite, I warn thee!',
   ...WithHelpText.args
 };
 StatusWarning.storyName = 'Status: Warning';
-const StatusError = Template.bind({});
-exports.StatusError = StatusError;
+const StatusError = exports.StatusError = Template.bind({});
 StatusError.args = {
   error: true,
   validationText: 'That value is wrong. Sorry!',
   ...WithHelpText.args
 };
 StatusError.storyName = 'Status: Error';
-const Required = Template.bind({});
-exports.Required = Required;
+const Required = exports.Required = Template.bind({});
 Required.args = {
   required: true
 };
-const InputWidth = Template.bind({});
-exports.InputWidth = InputWidth;
+const InputWidth = exports.InputWidth = Template.bind({});
 InputWidth.args = {
   inputWidth: '200px',
   label: 'A very long label indeed, well at least longer than the input field to show how it looks and works and stuff',
   required: true
 };
-const DefaultClearText = Template.bind({});
-exports.DefaultClearText = DefaultClearText;
+const DefaultClearText = exports.DefaultClearText = Template.bind({});
 DefaultClearText.args = {
   clearable: true,
   children: /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
@@ -156,23 +151,20 @@ DefaultClearText.args = {
   label: null
 };
 DefaultClearText.storyName = 'Default: clearText';
-const DefaultEmpty = Template.bind({});
-exports.DefaultEmpty = DefaultEmpty;
+const DefaultEmpty = exports.DefaultEmpty = Template.bind({});
 DefaultEmpty.args = {
   children: null,
   selected: [],
   label: null
 };
 DefaultEmpty.storyName = 'Default: empty';
-const DefaultFilterPlaceholderAndNoMatchText = Template.bind({});
-exports.DefaultFilterPlaceholderAndNoMatchText = DefaultFilterPlaceholderAndNoMatchText;
+const DefaultFilterPlaceholderAndNoMatchText = exports.DefaultFilterPlaceholderAndNoMatchText = Template.bind({});
 DefaultFilterPlaceholderAndNoMatchText.args = {
   filterable: true,
   ...DefaultEmpty.args
 };
 DefaultFilterPlaceholderAndNoMatchText.storyName = 'Default: filterPlaceholder and noMatchText';
-const DefaultLoadingText = Template.bind({});
-exports.DefaultLoadingText = DefaultLoadingText;
+const DefaultLoadingText = exports.DefaultLoadingText = Template.bind({});
 DefaultLoadingText.args = {
   loading: true,
   ...DefaultEmpty.args

package/build/cjs/multi-select-option/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "MultiSelectOption", {
     return _multiSelectOption.MultiSelectOption;
   }
 });
-
 var _multiSelectOption = require("./multi-select-option.js");

package/build/cjs/multi-select-option/multi-select-option.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiSelectOption = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _checkbox = require("@dhis2-ui/checkbox");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _checkbox = require("@dhis2-ui/checkbox");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Padding has to be set on the label, so that the entire area is clickable
 const {
   styles,
@@ -26,10 +18,9 @@ const {
 } = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2013783366"
-  }, [".jsx-2013783366{padding:".concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp12, ";}")]),
+  }, [`.jsx-2013783366{padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp12};}`]),
   className: "jsx-2013783366"
 };
-
 const MultiSelectOption = _ref => {
   let {
     label,
@@ -58,9 +49,8 @@ const MultiSelectOption = _ref => {
   }), styles, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3813980210",
     dynamic: [_uiConstants.colors.grey200]
-  }, ["div.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+  }, [`div.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
 };
-
 exports.MultiSelectOption = MultiSelectOption;
 MultiSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-multiselectoption'

package/build/cjs/select/__tests__/select.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _select = require("../select.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<Select />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -19,13 +15,11 @@ describe('<Select />', () => {
       selected: "",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {
       key: 'Enter',
       code: 'Enter',
       charCode: 13
     });
-
     expect(onKeyDown).toHaveBeenCalledWith({
       selected: ''
     }, expect.objectContaining({}));

package/build/cjs/select/debounce/debounce.js

@@ -4,39 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.debounce = void 0;
-
 var _this = void 0;
-
 /**
  * Returns a function, that, as long as it continues to be invoked, will not be triggered. The
  * function will be called after it stops being called for N milliseconds. If `immediate` is
  * passed, trigger the function on the leading edge, instead of the trailing.
  */
+
 const debounce = (func, wait, immediate) => {
   let timeout;
   return function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     const context = _this;
-
     const later = () => {
       timeout = null;
-
       if (!immediate) {
         func.apply(context, args);
       }
     };
-
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
-
     if (callNow) {
       func.apply(context, args);
     }
   };
 };
-
 exports.debounce = debounce;

package/build/cjs/select/debounce/debounce.spec.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _debounce = require("./debounce.js");
-
 beforeEach(() => {
   jest.useFakeTimers();
 });

package/build/cjs/select/empty.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Empty = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Empty = _ref => {
   let {
     message,
@@ -27,9 +21,8 @@ const Empty = _ref => {
   }, message, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3788156646",
     dynamic: [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
-  }, ["div.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-family:").concat(_uiConstants.theme.fonts, ";font-size:13px;line-height:16px;padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp24, ";text-align:center;}")]));
+  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey700};font-family:${_uiConstants.theme.fonts};font-size:13px;line-height:16px;padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp24};text-align:center;}`]));
 };
-
 exports.Empty = Empty;
 Empty.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/select/filter-input.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FilterInput = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _input = require("@dhis2-ui/input");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _input = require("@dhis2-ui/input");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FilterInput = _ref => {
   let {
     value,
@@ -39,9 +32,8 @@ const FilterInput = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "730881408",
     dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]
-  }, ["div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:".concat(_uiConstants.colors.white, ";padding-block-start:").concat(_uiConstants.spacers.dp8, ";padding-inline-end:").concat(_uiConstants.spacers.dp8, ";padding-block-end:").concat(_uiConstants.spacers.dp4, ";padding-inline-start:").concat(_uiConstants.spacers.dp8, ";z-index:1;}")]));
+  }, [`div.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${_uiConstants.colors.white};padding-block-start:${_uiConstants.spacers.dp8};padding-inline-end:${_uiConstants.spacers.dp8};padding-block-end:${_uiConstants.spacers.dp4};padding-inline-start:${_uiConstants.spacers.dp8};z-index:1;}`]));
 };
-
 exports.FilterInput = FilterInput;
 FilterInput.propTypes = {
   dataTest: _propTypes.default.string.isRequired,