@bbl-digital/snorre 4.1.0-beta.1 → 4.1.0

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

@@ -1,59 +1,58 @@
-/// <reference types="react" />
 export declare const StyledButton: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<import("../private/ButtonOrLink").ButtonOrLinkTypes> & {
     afterIcon?: import("react").ReactNode;
     beforeIcon?: import("react").ReactNode;
-    children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
-    disabled?: boolean | undefined;
-    href?: string | undefined;
-    loading?: boolean | undefined;
-    onClick?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
-    onMouseUp?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
+    children: NonNullable<import("react").ReactNode>;
+    disabled?: boolean;
+    href?: string;
+    loading?: boolean;
+    onClick?: (event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes>) => void;
+    onMouseUp?: (event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes>) => void;
     onCustomKeyPress?: {
         key: string;
         action: (event: KeyboardEvent) => void;
-    } | undefined;
-    onKeyPress?: ((event: KeyboardEvent) => void) | undefined;
-    onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
-    onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
-    openInNewWindow?: boolean | undefined;
-    rel?: string | undefined;
-    trackingEvent?: string | undefined;
-    trackingName?: string | undefined;
-    type?: "button" | "submit" | "reset" | undefined;
-    target?: string | undefined;
+    };
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onEnterKeyPress?: (event: KeyboardEvent) => void;
+    onEscapeKeyPress?: (event: KeyboardEvent) => void;
+    openInNewWindow?: boolean;
+    rel?: string;
+    trackingEvent?: string;
+    trackingName?: string;
+    type?: "button" | "submit" | "reset";
+    target?: string;
     download?: any;
-    tabIndex?: number | undefined;
+    tabIndex?: number;
 } & {
-    success?: boolean | undefined;
-    danger?: boolean | undefined;
-    highlight?: boolean | undefined;
-    outline?: boolean | undefined;
-    nostyle?: boolean | undefined;
-    focusable?: boolean | undefined;
-    border?: string | undefined;
-    css?: import("@emotion/utils").SerializedStyles | undefined;
-    loading?: boolean | undefined;
-    back?: boolean | undefined;
-    small?: boolean | undefined;
-    transparentBg?: boolean | undefined;
-    tabIndex?: number | undefined;
+    success?: boolean;
+    danger?: boolean;
+    highlight?: boolean;
+    outline?: boolean;
+    nostyle?: boolean;
+    focusable?: boolean;
+    border?: string;
+    css?: import("@emotion/react").SerializedStyles;
+    loading?: boolean;
+    back?: boolean;
+    small?: boolean;
+    transparentBg?: boolean;
+    tabIndex?: number;
 } & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const styles: {
-    default: import("@emotion/utils").SerializedStyles;
-    top: import("@emotion/utils").SerializedStyles;
-    right: import("@emotion/utils").SerializedStyles;
-    bottom: import("@emotion/utils").SerializedStyles;
-    left: import("@emotion/utils").SerializedStyles;
-    width: (width: string, place: string) => import("@emotion/utils").SerializedStyles;
+    default: import("@emotion/react").SerializedStyles;
+    top: import("@emotion/react").SerializedStyles;
+    right: import("@emotion/react").SerializedStyles;
+    bottom: import("@emotion/react").SerializedStyles;
+    left: import("@emotion/react").SerializedStyles;
+    width: (width: string, place: string) => import("@emotion/react").SerializedStyles;
 };
 export declare const Tooltip: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOxB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;mBAmFF,MAAM,SAAS,MAAM;CAQrC,CAAA;AAED,eAAO,MAAM,OAAO;;;yGAiCnB,CAAA;AAED,eAAO,MAAM,OAAO;;;2GAInB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOxB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;mBAmFF,MAAM,SAAS,MAAM;CAQrC,CAAA;AAED,eAAO,MAAM,OAAO;;eAjFP,WAAW;yGAkHvB,CAAA;AAED,eAAO,MAAM,OAAO;;eApHP,WAAW;2GAwHvB,CAAA"}

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

@@ -2,9 +2,10 @@ import Input from '.';
 import { Meta, StoryObj } from '@storybook/react';
 declare const meta: Meta<typeof Input>;
 export default meta;
-declare type Story = StoryObj<typeof Input>;
+type Story = StoryObj<typeof Input>;
 export declare const Default: Story;
 export declare const Focused: Story;
+export declare const Stealth: Story;
 export declare const Disabled: Story;
 export declare const Passsword: Story;
 export declare const Search: Story;
@@ -19,4 +20,5 @@ export declare const CardInput: Story;
 export declare const Invalid: Story;
 export declare const InvalidNoLabel: Story;
 export declare const Controls: Story;
+export declare const FormattedNumberOnly: Story;
 //# sourceMappingURL=Input.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,GAAG,CAAA;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAGpB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KASnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA2BtB,CAAA"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/Input.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,GAAG,CAAA;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAGpB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KASnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KA2BtB,CAAA;AACD,eAAO,MAAM,mBAAmB,EAAE,KASjC,CAAA"}

package/lib/core/Input/Input.stories.js

@@ -22,6 +22,14 @@ export const Focused = {
   },
   name: 'Focused'
 };
+export const Stealth = {
+  args: {
+    type: 'stealth',
+    label: 'Stealth',
+    placeholder: 'Placeholder text'
+  },
+  name: 'Stealth'
+};
 export const Disabled = {
   args: {
     type: 'text',
@@ -44,7 +52,8 @@ export const Search = {
   args: {
     type: 'search',
     highlight: true,
-    placeholder: 'Placeholder text'
+    placeholder: 'Placeholder text',
+    label: 'Label'
   },
   name: 'Search'
 };
@@ -170,4 +179,14 @@ export const Controls = {
     onFocus: action('on focus..')
   },
   name: 'Controls'
+};
+export const FormattedNumberOnly = {
+  args: {
+    type: 'text',
+    label: 'Label',
+    placeholder: 'Placeholder text',
+    variant: 'formattedNumber',
+    getFormattedNumber: value => console.log('FormattedNumberOnly', value)
+  },
+  name: 'FormattedNumberOnly'
 };

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

@@ -2,7 +2,7 @@
 import React from 'react';
 export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
     /** Input type */
-    type?: 'text' | 'search' | 'number' | 'password' | 'file';
+    type?: 'text' | 'search' | 'number' | 'password' | 'file' | 'stealth';
     /** Input label */
     label?: string;
     /** Id for input */
@@ -51,10 +51,16 @@ export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
     infoPlacement?: 'top' | 'left' | 'right' | 'bottom';
     /** Styles as card */
     cardInput?: boolean;
+    /**
+     * Update internal value if true
+     */
+    updateValueOnChange?: boolean;
     /** Add classnames */
     className?: string;
+    variant?: 'default' | 'formattedNumber';
+    getFormattedNumber?: (value: string) => void;
 }
-export declare type Ref = HTMLInputElement;
+export type Ref = HTMLInputElement;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFAiIV,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAgC,MAAM,OAAO,CAAA;AAUpD,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;IACrE,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAA;IACvC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,MAAM,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFA0JV,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Input/index.js

@@ -8,8 +8,7 @@ import { getFormattedPrice } from '../../utils/format';
 import IconErrorOutline from '../../icons/General/IconErrorOutline';
 import InfoButton from '../InfoButton';
 import IconHelp from '../../icons/General/IconHelp';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const Input = /*#__PURE__*/React.forwardRef(({
   onDebounceChange,
   debounceDelay,
@@ -19,6 +18,9 @@ const Input = /*#__PURE__*/React.forwardRef(({
   infoPlacement = 'left',
   className,
   cardInput,
+  variant,
+  getFormattedNumber,
+  updateValueOnChange = false,
   ...props
 }, ref) => {
   const [value, setValueChanged] = useState(props.value ? props.value : '');
@@ -32,9 +34,17 @@ const Input = /*#__PURE__*/React.forwardRef(({
     }
     return val;
   };
+  const handleNumberOnlyFormatting = val => {
+    const onlyNumbers = val.replace(/[^\d]/g, '');
+    const formatedNumbersWithSpace = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    getFormattedNumber && getFormattedNumber(onlyNumbers);
+    return formatedNumbersWithSpace;
+  };
   const onInputChange = e => {
     setInputDirty(true);
-    if (props.format) {
+    if (variant === 'formattedNumber') {
+      setValueChanged(handleNumberOnlyFormatting(e.target.value));
+    } else if (props.format) {
       setValueChanged(handleFormatting(e.target.value));
     } else {
       setValueChanged(e.target.value);
@@ -48,6 +58,11 @@ const Input = /*#__PURE__*/React.forwardRef(({
       setValueChanged('');
     }
   }, [props.reset]);
+  useEffect(() => {
+    if (props.value && updateValueOnChange) {
+      setValueChanged(props.value);
+    }
+  }, [props.value]);
 
   // Handle debounce
   useEffect(() => {
@@ -68,30 +83,33 @@ const Input = /*#__PURE__*/React.forwardRef(({
       children: [props.label && _jsx("span", {
         css: info && styles.pr4,
         children: props.label
-      }), _jsx("input", {
-        id: props.id,
-        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,
-        "aria-describedby": props.invalidMessage ? 'input-error-message' : undefined,
-        css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), props.disabled && styles.disabled(theme), cardInput && styles.cardInput(theme)],
-        children: React.Children.map(props.children, child => {
-          if (!child) {
-            return null;
-          }
-          return child;
-        })
-      }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {
+      }), _jsxs("div", {
+        css: theme => [styles.inputWrapper(theme)],
+        children: [_jsx("input", {
+          id: props.id,
+          type: type === 'stealth' ? 'number' : 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,
+          "aria-describedby": props.invalidMessage ? 'input-error-message' : undefined,
+          css: theme => [type === 'text' && styles.text(theme), type === 'search' && styles.search(theme), type === 'password' && styles.password(theme), type === 'number' && styles.number(theme), type === 'stealth' && styles.stealth(theme), props.disabled && styles.disabled(theme), cardInput && styles.cardInput(theme)],
+          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", {
         id: "input-error-message",

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

@@ -1,22 +1,24 @@
 import { IAppTheme } from '../../app-shell/theme';
 declare const styles: {
-    default: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    highligted: (height?: string | undefined) => import("@emotion/utils").SerializedStyles;
-    number: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    text: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    password: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    search: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    searchLabel: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    file: import("@emotion/utils").SerializedStyles;
-    disabled: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    cardInput: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    invalid: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    height: (height: string) => import("@emotion/utils").SerializedStyles;
-    errorMessage: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    pr4: import("@emotion/utils").SerializedStyles;
-    infoButton: import("@emotion/utils").SerializedStyles;
-    relative: import("@emotion/utils").SerializedStyles;
-    errorMessageNoLabel: () => import("@emotion/utils").SerializedStyles;
+    default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    highligted: (height?: string) => import("@emotion/react").SerializedStyles;
+    number: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    text: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    stealth: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    password: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    search: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    searchLabel: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    file: import("@emotion/react").SerializedStyles;
+    disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    cardInput: (theme: IAppTheme) => 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;
+    errorMessageNoLabel: () => import("@emotion/react").SerializedStyles;
+    inputWrapper: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
 export default styles;
 export { styles };

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;;oBA4DV,SAAS;kBAKX,SAAS;sBAKL,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAgBZ,SAAS;uBAMR,SAAS;qBAIX,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;;CA8BhC,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;0BAyCJ,MAAM;oBAmBZ,SAAS;kBAKX,SAAS;qBAKN,SAAS;sBAQR,SAAS;oBAMX,SAAS;yBAaJ,SAAS;;sBAiBZ,SAAS;uBAMR,SAAS;qBAIX,SAAS;qBAkCT,MAAM;0BAKD,SAAS;;;;;0BA8BT,SAAS;CAUhC,CAAA;AAED,eAAe,MAAM,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,CAAA"}