@bbl-digital/snorre 4.2.29 → 4.2.31

package/esm/core/Autocomplete/Autocomplete.stories.js

@@ -1,23 +1,30 @@
-import { action } from '@storybook/addon-actions';
-import Autocomplete from '.';
-import Tag from '../Tag';
-import Card from '../Card';
-import Text from '../Text';
-import Button from '../Button';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithValuesAndTags = exports.WithValues = exports.WithTags = exports.WithSecondaryLabel = exports.WithNormalValuesAndFuzzy = exports.WithLoading = exports.WithError = exports.WithCustomValueInputAndTagsWithCustomValueHeight = exports.WithCustomValueInputAndTags = exports.WithCustomValueInput = exports.WithCustomOpen = exports.WithCustomObjectsValues = exports.WithButtonForLabelText = exports.WithAlmostAllProps = exports.WithActions = exports.Default = void 0;
+var _addonActions = require("@storybook/addon-actions");
+var _ = _interopRequireDefault(require("."));
+var _Tag = _interopRequireDefault(require("../Tag"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _Text = _interopRequireDefault(require("../Text"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
   title: 'Core/Autocomplete',
-  component: Autocomplete
+  component: _.default
 };
-export const Default = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text"
   }),
   name: 'Default'
 };
-export const WithError = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithError = exports.WithError = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     validation: true,
@@ -26,19 +33,19 @@ export const WithError = {
   }),
   name: 'With error'
 };
-export const WithLoading = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithLoading = exports.WithLoading = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     loading: true
   }),
   name: 'With loading'
 };
-export const WithSecondaryLabel = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithSecondaryLabel = exports.WithSecondaryLabel = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
-    labelSecondary: /*#__PURE__*/_jsx(Text, {
+    labelSecondary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       small: true,
       italic: true,
       children: "Secondary label"
@@ -46,12 +53,12 @@ export const WithSecondaryLabel = {
   }),
   name: 'With secondary label'
 };
-export const WithActions = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithActions = exports.WithActions = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     loading: true,
-    actions: /*#__PURE__*/_jsx(Text, {
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       small: true,
       primary: true,
       children: "Hello"
@@ -59,23 +66,23 @@ export const WithActions = {
   }),
   name: 'With actions'
 };
-export const WithTags = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithTags = exports.WithTags = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
-    renderOptions: /*#__PURE__*/_jsxs("div", {
+    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         margin: '5px 0',
         display: 'flex',
         gap: '0.25em'
       },
-      children: [/*#__PURE__*/_jsx(Tag, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         strictClose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
       })]
@@ -83,35 +90,35 @@ export const WithTags = {
   }),
   name: 'With tags'
 };
-export const WithButtonForLabelText = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithButtonForLabelText = exports.WithButtonForLabelText = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     onLabelClick: () => console.log('clicked'),
     label: "Label",
     placeholder: "Placeholder text"
   }),
   name: 'With button for label text'
 };
-export const WithValuesAndTags = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithValuesAndTags = exports.WithValuesAndTags = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     validation: true,
     invalid: true,
-    onSelectItem: action('onChange'),
+    onSelectItem: (0, _addonActions.action)('onChange'),
     invalidMessage: "Something went wrong",
-    renderOptions: /*#__PURE__*/_jsxs("div", {
+    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         margin: '5px 0',
         display: 'flex',
         gap: '0.25em'
       },
-      children: [/*#__PURE__*/_jsx(Tag, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         strictClose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
       })]
@@ -129,8 +136,8 @@ export const WithValuesAndTags = {
   }),
   name: 'With values and tags'
 };
-export const WithValues = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithValues = exports.WithValues = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     values: [{
@@ -146,13 +153,13 @@ export const WithValues = {
   }),
   name: 'With values'
 };
-export const WithCustomObjectsValues = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithCustomObjectsValues = exports.WithCustomObjectsValues = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     labelFromValues: "option",
     keyFromValues: "id",
-    onSelectItem: action('onChange'),
+    onSelectItem: (0, _addonActions.action)('onChange'),
     values: [{
       id: '1',
       option: 'One'
@@ -166,12 +173,12 @@ export const WithCustomObjectsValues = {
   }),
   name: 'With custom objects values'
 };
-export const WithNormalValuesAndFuzzy = {
-  render: () => /*#__PURE__*/_jsx("div", {
+const WithNormalValuesAndFuzzy = exports.WithNormalValuesAndFuzzy = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
       height: '12em'
     },
-    children: /*#__PURE__*/_jsx(Autocomplete, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       fuzzy: true,
       chevron: true,
       value: "Hello",
@@ -203,38 +210,38 @@ export const WithNormalValuesAndFuzzy = {
   }),
   name: 'With normal values and fuzzy'
 };
-export const WithCustomValueInput = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithCustomValueInput = exports.WithCustomValueInput = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       withhover: true,
       children: "Hover me!"
     })
   }),
   name: 'With custom value input'
 };
-export const WithCustomValueInputAndTags = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithCustomValueInputAndTags = exports.WithCustomValueInputAndTags = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       withhover: true,
       children: "Hover me!"
     }),
-    renderOptions: /*#__PURE__*/_jsxs("div", {
+    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         margin: '5px 0',
         display: 'flex',
         gap: '0.25em'
       },
-      children: [/*#__PURE__*/_jsx(Tag, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         strictClose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
       })]
@@ -242,28 +249,28 @@ export const WithCustomValueInputAndTags = {
   }),
   name: 'With custom value input and tags'
 };
-export const WithCustomValueInputAndTagsWithCustomValueHeight = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithCustomValueInputAndTagsWithCustomValueHeight = exports.WithCustomValueInputAndTagsWithCustomValueHeight = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     dynamicallyPlaceInput: true,
     label: "Label",
     placeholder: "Placeholder text",
-    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       withhover: true,
       children: "Hover me!"
     }),
-    renderOptions: /*#__PURE__*/_jsxs("div", {
+    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         margin: '5px 0',
         display: 'flex',
         gap: '0.25em'
       },
-      children: [/*#__PURE__*/_jsx(Tag, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         strictClose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
       })]
@@ -271,44 +278,44 @@ export const WithCustomValueInputAndTagsWithCustomValueHeight = {
   }),
   name: 'With custom value input and tags with custom value height'
 };
-export const WithCustomOpen = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithCustomOpen = exports.WithCustomOpen = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     label: "Label",
     placeholder: "Placeholder text",
     isOpen: true,
-    renderCustomValueInput: /*#__PURE__*/_jsx(Card, {
+    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
       withhover: true,
       children: "Hover me!"
     })
   }),
   name: 'With custom open'
 };
-export const WithAlmostAllProps = {
-  render: () => /*#__PURE__*/_jsx(Autocomplete, {
+const WithAlmostAllProps = exports.WithAlmostAllProps = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
     dynamicallyPlaceInput: true,
     label: "Label",
     placeholder: "Placeholder text",
     onSelectItem: v => console.log('action', v),
     onKeyDown: e => console.log('keydown', e),
     openCustomValueInputOnKeyPress: true,
-    renderCustomValueInput: /*#__PURE__*/_jsxs(Card, {
-      children: ["Hover me!", /*#__PURE__*/_jsx(Button, {
+    renderCustomValueInput: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+      children: ["Hover me!", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         children: "This is here to click on"
       })]
     }),
-    renderOptions: /*#__PURE__*/_jsxs("div", {
+    renderOptions: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       style: {
         margin: '5px 0',
         display: 'flex',
         gap: '0.25em'
       },
-      children: [/*#__PURE__*/_jsx(Tag, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         strictClose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
-      }), /*#__PURE__*/_jsx(Tag, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, {
         withclose: true,
         children: "Here"
       })]
@@ -316,7 +323,7 @@ export const WithAlmostAllProps = {
     validation: true,
     invalid: true,
     invalidMessage: "Something went wrong",
-    actions: /*#__PURE__*/_jsx(Text, {
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       small: true,
       primary: true,
       children: "Hello"

package/esm/core/Autocomplete/hooks/useAutocomplete.js

@@ -1,14 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _matchSorter = require("match-sorter");
+var _react = require("react");
+var _debounce = require("../../utils/debounce");
 /* eslint-disable react-hooks/exhaustive-deps */
-import { matchSorter } from 'match-sorter';
-import { useEffect, useMemo, useState } from 'react';
-import { useDebounce } from '../../utils/debounce';
+
 const useAutocomplete = props => {
-  const [showValues, setShowValues] = useState(!!props.isOpen);
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  const [value, setValueChanged] = useState(props.value || '');
-  const [inputDirty, setInputDirty] = useState(false);
-  const debouncedValue = useDebounce(value, props.debounceDelay || 0);
-  const [inputValues, setInputValues] = useState(props.values);
+  const [showValues, setShowValues] = (0, _react.useState)(!!props.isOpen);
+  const [highlightedIndex, setHighlightedIndex] = (0, _react.useState)(null);
+  const [value, setValueChanged] = (0, _react.useState)(props.value || '');
+  const [inputDirty, setInputDirty] = (0, _react.useState)(false);
+  const debouncedValue = (0, _debounce.useDebounce)(value, props.debounceDelay || 0);
+  const [inputValues, setInputValues] = (0, _react.useState)(props.values);
   const labelKey = props.labelFromValues || 'label';
   const handleValueClick = value => {
     props.onSelectItem?.(value);
@@ -52,13 +59,13 @@ const useAutocomplete = props => {
     setValueChanged('');
     if (props.values?.length) setShowValues(true);
   };
-  const renderedValues = useMemo(() => {
+  const renderedValues = (0, _react.useMemo)(() => {
     if (!props.values?.length) return [];
     if (props.fuzzy) {
       const fuzzyOptions = {
         keys: [labelKey]
       };
-      return matchSorter(props.values, value || '', fuzzyOptions);
+      return (0, _matchSorter.matchSorter)(props.values, value || '', fuzzyOptions);
     }
     return props.values;
   }, [value]);
@@ -158,7 +165,7 @@ const useAutocomplete = props => {
   };
 
   // Handle debounce
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     const handleDebounceChange = value => {
       if (props.onDebounceChange && inputDirty) {
         props.onDebounceChange(value);
@@ -168,21 +175,21 @@ const useAutocomplete = props => {
   }, [debouncedValue]);
 
   // Change local open state if props.isOpen changes
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     setShowValues(!!props.isOpen);
   }, [props.isOpen]);
 
   // Update local values state if props.values changes
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     setInputValues(props.values);
   }, [props.values]);
 
   // Update local value if props.value changes
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     const value = props.value || '';
     setValueChanged(value);
   }, [props.value]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (!props.openCustomValueInputOnKeyPress) return;
     if (value.length) setShowValues(true);
   }, [value]);
@@ -202,4 +209,4 @@ const useAutocomplete = props => {
     renderedValues
   };
 };
-export default useAutocomplete;
+var _default = exports.default = useAutocomplete;

package/esm/core/Autocomplete/hooks/useHandleDimentions.js

@@ -1,9 +1,15 @@
-import { createRef, useEffect, useState } from 'react';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
 const useHandleDimentions = () => {
-  const [height, setHeight] = useState(0);
-  const [width, setWidth] = useState(0);
-  const dimentionsRef = /*#__PURE__*/createRef();
-  useEffect(() => {
+  const [height, setHeight] = (0, _react.useState)(0);
+  const [width, setWidth] = (0, _react.useState)(0);
+  const dimentionsRef = /*#__PURE__*/(0, _react.createRef)();
+  (0, _react.useEffect)(() => {
     const rect = dimentionsRef.current?.getBoundingClientRect();
     setHeight(rect?.height || 0);
     setWidth(rect?.width || 0);
@@ -15,4 +21,4 @@ const useHandleDimentions = () => {
     dimentionsRef
   };
 };
-export default useHandleDimentions;
+var _default = exports.default = useHandleDimentions;

package/esm/core/Autocomplete/index.interfaces.js

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

package/esm/core/Autocomplete/index.js

@@ -1,29 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+var _IconErrorOutline = _interopRequireDefault(require("../../icons/General/IconErrorOutline"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _useHandleDimentions = _interopRequireDefault(require("./hooks/useHandleDimentions"));
+var _Link = _interopRequireDefault(require("../Link"));
+var _IconClose = _interopRequireDefault(require("../../icons/General/IconClose"));
+var _useAutocomplete = _interopRequireDefault(require("./hooks/useAutocomplete"));
+var _IconChevronDown = _interopRequireDefault(require("../../icons/General/IconChevronDown"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsxImportSource @emotion/react */
-import React, { createRef } from 'react';
-import { styles, ErrorMessage, Clear } from './styles';
-import { useEffect } from 'react';
-import IconErrorOutline from '../../icons/General/IconErrorOutline';
-import Spinner from '../Spinner';
-import useHandleDimentions from './hooks/useHandleDimentions';
-import Link from '../Link';
-import IconClose from '../../icons/General/IconClose';
-import useAutocomplete from './hooks/useAutocomplete';
-import IconChevronDown from '../../icons/General/IconChevronDown';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-const Autocomplete = /*#__PURE__*/React.forwardRef(({
+
+const Autocomplete = /*#__PURE__*/_react.default.forwardRef(({
   height,
   css,
   ...props
 }, ref) => {
-  const valuesRef = /*#__PURE__*/createRef();
+  const valuesRef = /*#__PURE__*/(0, _react.createRef)();
   const {
     height: optionsHeight,
     dimentionsRef: optionsRef
-  } = useHandleDimentions();
+  } = (0, _useHandleDimentions.default)();
   const {
     width: inputWrapperWidth,
     dimentionsRef: inputWrapperRef
-  } = useHandleDimentions();
+  } = (0, _useHandleDimentions.default)();
   const {
     value,
     highlightedIndex,
@@ -38,8 +47,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     onInputChange,
     onFuzzyBlur,
     onFuzzyFocus
-  } = useAutocomplete(props);
-  useEffect(() => {
+  } = (0, _useAutocomplete.default)(props);
+  (0, _react.useEffect)(() => {
     const handleClickOutside = e => {
       const node = valuesRef.current;
       if (node && node.contains(e.target)) return;
@@ -55,26 +64,26 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showValues, valuesRef]);
-  return _jsxs(_Fragment, {
-    children: [_jsxs("label", {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("label", {
       ref: inputWrapperRef,
       onClick: props.onLabelClick ? e => e.preventDefault() : undefined,
-      css: theme => [styles.default(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), props.validation && styles.validation, props.onLabelClick && styles.clickableLabel, height && styles.height(height), css && css],
-      children: [_jsxs("span", {
-        css: styles.label,
-        children: [props.label && (props.onLabelClick ? _jsx(Link, {
+      css: theme => [_styles.styles.default(theme), (props.invalid || props.invalidMessage) && _styles.styles.invalid(theme), props.validation && _styles.styles.validation, props.onLabelClick && _styles.styles.clickableLabel, height && _styles.styles.height(height), css && css],
+      children: [(0, _jsxRuntime.jsxs)("span", {
+        css: _styles.styles.label,
+        children: [props.label && (props.onLabelClick ? (0, _jsxRuntime.jsx)(_Link.default, {
           textAlign: "left",
           removeUnderline: true,
           onClick: props.onLabelClick,
           children: props.label
-        }) : _jsx("span", {
+        }) : (0, _jsxRuntime.jsx)("span", {
           children: props.label
         })), props.labelSecondary && props.labelSecondary]
-      }), _jsxs("div", {
-        css: theme => [styles.inputWrapper(theme)],
-        children: [_jsxs("div", {
-          css: styles.inputBox,
-          children: [_jsx("input", {
+      }), (0, _jsxRuntime.jsxs)("div", {
+        css: theme => [_styles.styles.inputWrapper(theme)],
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          css: _styles.styles.inputBox,
+          children: [(0, _jsxRuntime.jsx)("input", {
             type: "text",
             placeholder: props.placeholder,
             value: value,
@@ -88,53 +97,53 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
             ref: ref,
             name: props.name,
             autoComplete: "off",
-            css: theme => [props.disabled && styles.disabled(theme)],
-            children: React.Children.map(props.children, child => child || null)
-          }), props.clear && _jsx(Clear, {
+            css: theme => [props.disabled && _styles.styles.disabled(theme)],
+            children: _react.default.Children.map(props.children, child => child || null)
+          }), props.clear && (0, _jsxRuntime.jsx)(_styles.Clear, {
             nostyle: true,
             onClick: handleClear,
-            children: _jsx(IconClose, {
+            children: (0, _jsxRuntime.jsx)(_IconClose.default, {
               size: 14
             })
-          }), props.loading && _jsx(Spinner, {
+          }), props.loading && (0, _jsxRuntime.jsx)(_Spinner.default, {
             size: 14
-          }), props.actions && _jsx("div", {
+          }), props.actions && (0, _jsxRuntime.jsx)("div", {
             children: props.actions
-          }), props.chevron && _jsx(IconChevronDown, {
+          }), props.chevron && (0, _jsxRuntime.jsx)(_IconChevronDown.default, {
             flipVertical: !!showValues,
             size: 12
           })]
-        }), props.renderOptions && React.Children.count(props.renderOptions) > 0 && _jsx("div", {
+        }), props.renderOptions && _react.default.Children.count(props.renderOptions) > 0 && (0, _jsxRuntime.jsx)("div", {
           ref: optionsRef,
-          css: styles.inputValues,
+          css: _styles.styles.inputValues,
           children: props.renderOptions
         })]
-      }), props.invalidMessage && _jsxs("div", {
-        css: styles.invalidMessage,
-        children: [_jsx(IconErrorOutline, {
+      }), props.invalidMessage && (0, _jsxRuntime.jsxs)("div", {
+        css: _styles.styles.invalidMessage,
+        children: [(0, _jsxRuntime.jsx)(_IconErrorOutline.default, {
           size: "16px"
-        }), _jsx("span", {
-          css: theme => [ErrorMessage(theme)],
+        }), (0, _jsxRuntime.jsx)("span", {
+          css: theme => [(0, _styles.ErrorMessage)(theme)],
           children: props.invalidMessage
         })]
       })]
-    }), (Boolean(props.values?.length) || props.renderCustomValueInput) && !props.loading && showValues && _jsxs("div", {
+    }), (Boolean(props.values?.length) || props.renderCustomValueInput) && !props.loading && showValues && (0, _jsxRuntime.jsxs)("div", {
       ref: valuesRef,
-      css: () => [!props.renderCustomValueInput && styles.listWrapper(inputWrapperWidth), props.dynamicallyPlaceInput && Boolean(optionsHeight) && styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
-      children: [Boolean(renderedValues?.length) && _jsx("ul", {
-        css: theme => [styles.list(theme)],
+      css: () => [!props.renderCustomValueInput && _styles.styles.listWrapper(inputWrapperWidth), props.dynamicallyPlaceInput && Boolean(optionsHeight) && _styles.styles.listWrapperTopPosition(optionsHeight), props.dynamicallyPlaceInput && Boolean(optionsHeight) && props.invalidMessage && _styles.styles.listWrapperTopPosition(optionsHeight + 30), props.inputValuesMaxWidth && _styles.styles.listWrapperMaxWidth(props.inputValuesMaxWidth)],
+      children: [Boolean(renderedValues?.length) && (0, _jsxRuntime.jsx)("ul", {
+        css: theme => [_styles.styles.list(theme)],
         children: renderedValues.map((item, index) => {
-          return _jsx("li", {
+          return (0, _jsxRuntime.jsx)("li", {
             tabIndex: 0,
-            css: index === highlightedIndex ? styles.highlightedItem : null,
+            css: index === highlightedIndex ? _styles.styles.highlightedItem : null,
             onClick: () => handleValueClick(item),
             children: props.labelFromValues ? item[props.labelFromValues] : item.label
           }, props.keyFromValues ? item[props.keyFromValues] : item.key);
         })
-      }), props.renderCustomValueInput && _jsx("div", {
+      }), props.renderCustomValueInput && (0, _jsxRuntime.jsx)("div", {
         children: props.renderCustomValueInput
       })]
     })]
   });
 });
-export default Autocomplete;
+var _default = exports.default = Autocomplete;