@bbl-digital/snorre 3.1.21 → 3.1.22

package/lib/core/Input/index.js

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import React, { useState } from 'react';
-import { styles, ErrorMessage } from './styles';
+import { styles } from './styles';
 import IconSearch from '../../icons/General/IconSearch';
 import { useEffect } from 'react';
 import { useDebounce } from '../utils/debounce';
@@ -62,38 +62,41 @@ const Input = /*#__PURE__*/React.forwardRef(({
 
     handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
-  return _jsxs("label", {
-    css: theme => [styles.default(theme), props.highlight && styles.highligted(height), type === 'search' && styles.searchLabel(theme), props.validation && styles.validation, (props.invalid || props.invalidMessage) && styles.invalid(theme), height && styles.height(height)],
-    children: [props.label && _jsx("span", {
-      css: info && styles.pr4,
-      children: props.label
-    }), _jsx("input", {
-      type: type,
-      ...(type !== 'password' && {
-        value
-      }),
-      placeholder: props.placeholder,
-      disabled: props.disabled,
-      autoFocus: props.focus,
-      onBlur: props.onBlur,
-      onFocus: props.onFocus,
-      onChange: onInputChange,
-      maxLength: maxlength,
-      ref: ref,
-      name: props.name,
-      css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), type === 'file' && styles.file, props.disabled && styles.disabled(theme), props.cardInput && styles.cardInput],
-      children: React.Children.map(props.children, child => {
-        if (!child) {
-          return null;
-        }
+  return _jsxs("div", {
+    css: styles.relative,
+    children: [_jsxs("label", {
+      css: theme => [styles.default(theme), props.highlight && styles.highligted(height), type === 'search' && styles.searchLabel(theme), (props.invalid || props.invalidMessage) && styles.invalid(theme), height && styles.height(height)],
+      children: [props.label && _jsx("span", {
+        css: info && styles.pr4,
+        children: props.label
+      }), _jsx("input", {
+        type: type,
+        ...(type !== 'password' && {
+          value
+        }),
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        autoFocus: props.focus,
+        onBlur: props.onBlur,
+        onFocus: props.onFocus,
+        onChange: onInputChange,
+        maxLength: maxlength,
+        ref: ref,
+        name: props.name,
+        css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), type === 'file' && styles.file, props.disabled && styles.disabled(theme), props.cardInput && styles.cardInput],
+        children: React.Children.map(props.children, child => {
+          if (!child) {
+            return null;
+          }
 
-        return child;
-      })
-    }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {
-      size: "16px"
-    }), props.invalidMessage && _jsx("span", {
-      css: theme => [ErrorMessage(theme)],
-      children: props.invalidMessage
+          return child;
+        })
+      }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {
+        size: "16px"
+      }), props.invalidMessage && _jsx("span", {
+        css: styles.errorMessage,
+        children: props.invalidMessage
+      })]
     }), info && _jsx("span", {
       css: styles.infoButton,
       children: _jsx(InfoButton, {

package/lib/core/Input/styles.d.ts

@@ -10,13 +10,13 @@ declare const styles: {
     file: import("@emotion/react").SerializedStyles;
     disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     cardInput: import("@emotion/react").SerializedStyles;
-    validation: import("@emotion/react").SerializedStyles;
     invalid: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     height: (height: string) => import("@emotion/react").SerializedStyles;
+    errorMessage: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
     pr4: import("@emotion/react").SerializedStyles;
     infoButton: import("@emotion/react").SerializedStyles;
+    relative: import("@emotion/react").SerializedStyles;
 };
-export declare const ErrorMessage: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 export default styles;
 export { styles };
 //# sourceMappingURL=styles.d.ts.map

package/lib/core/Input/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,QAAA,MAAM,MAAM;qBACO,SAAS;;oBA6DV,SAAS;kBAKX,SAAS;sBAKL,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAgBZ,SAAS;;;qBAiCV,SAAS;qBA+BT,MAAM;;;CAiBxB,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,SAAS,8CAK5C,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,QAAA,MAAM,MAAM;qBACO,SAAS;;oBA4DV,SAAS;kBAKX,SAAS;sBAKL,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAgBZ,SAAS;;qBAeV,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;CAwBhC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}