@bbl-digital/snorre 4.1.36 → 4.1.37

package/dist/bundle.js

@@ -1342,9 +1342,8 @@
     };
     const handleNumberOnlyFormatting = val => {
       const onlyNumbers = val.replace(/[^\d]/g, '');
-      const formatedNumbersWithSpace = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
       getFormattedNumber && getFormattedNumber(onlyNumbers);
-      return formatedNumbersWithSpace;
+      return onlyNumbers;
     };
     const onInputChange = e => {
       setInputDirty(true);
@@ -1359,6 +1358,20 @@
         props.onChange(e);
       }
     };
+    const handleBlur = e => {
+      if (variant === 'formattedNumber') {
+        const onlyNumbers = value.toString().replace(/[^\d]/g, '');
+        const formatedNumbersWithSpace = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+        setValueChanged(formatedNumbersWithSpace);
+      }
+      props.onBlur && props.onBlur(e);
+    };
+    const handleFocus = e => {
+      if (variant === 'formattedNumber') {
+        setValueChanged(value.toString().replaceAll(' ', ''));
+      }
+      props.onFocus && props.onFocus(e);
+    };
     React.useEffect(() => {
       if (props.reset) {
         setValueChanged('');
@@ -1400,8 +1413,8 @@
             placeholder: props.placeholder,
             disabled: props.disabled,
             autoFocus: props.focus,
-            onBlur: props.onBlur,
-            onFocus: props.onFocus,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
             onChange: onInputChange,
             maxLength: maxlength,
             ref: ref,

package/esm/core/Input/index.js

@@ -37,9 +37,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
   };
   const handleNumberOnlyFormatting = val => {
     const onlyNumbers = val.replace(/[^\d]/g, '');
-    const formatedNumbersWithSpace = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
     getFormattedNumber && getFormattedNumber(onlyNumbers);
-    return formatedNumbersWithSpace;
+    return onlyNumbers;
   };
   const onInputChange = e => {
     setInputDirty(true);
@@ -54,6 +53,20 @@ const Input = /*#__PURE__*/React.forwardRef(({
       props.onChange(e);
     }
   };
+  const handleBlur = e => {
+    if (variant === 'formattedNumber') {
+      const onlyNumbers = value.toString().replace(/[^\d]/g, '');
+      const formatedNumbersWithSpace = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+      setValueChanged(formatedNumbersWithSpace);
+    }
+    props.onBlur && props.onBlur(e);
+  };
+  const handleFocus = e => {
+    if (variant === 'formattedNumber') {
+      setValueChanged(value.toString().replaceAll(' ', ''));
+    }
+    props.onFocus && props.onFocus(e);
+  };
   useEffect(() => {
     if (props.reset) {
       setValueChanged('');
@@ -95,8 +108,8 @@ const Input = /*#__PURE__*/React.forwardRef(({
           placeholder: props.placeholder,
           disabled: props.disabled,
           autoFocus: props.focus,
-          onBlur: props.onBlur,
-          onFocus: props.onFocus,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
           onChange: onInputChange,
           maxLength: maxlength,
           ref: ref,

package/esm/v2/core/Button/Button.stories.js

@@ -1,5 +1,7 @@
 import Button from '.';
 import IconCaretDown from '../../../icons/General/IconCaretDown';
+import IconBookmarkFilled from '../../../icons/General/IconBookmarkFilled';
+import IconBookmarkOutline from '../../../icons/General/IconBookmarkOutline';
 import { jsx as _jsx } from "react/jsx-runtime";
 const meta = {
   title: 'v2/Core/Button',
@@ -12,9 +14,64 @@ export const Default = {
   },
   name: 'Default'
 };
+export const DefaultSmall = {
+  args: {
+    small: true,
+    children: 'Small button'
+  },
+  name: 'Default small'
+};
+export const Secondary = {
+  args: {
+    secondary: true,
+    children: 'Secondary button'
+  },
+  name: 'Secondary'
+};
+export const SecondaryWithIcon = {
+  args: {
+    secondary: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkOutline, {}),
+    children: 'Secondary button'
+  },
+  name: 'Secondary with icon'
+};
+export const SecondarySmall = {
+  args: {
+    secondary: true,
+    small: true,
+    children: 'Secondary'
+  },
+  name: 'Secondary small'
+};
+export const Ghost = {
+  args: {
+    ghost: true,
+    children: 'Ghost button',
+    disabled: true
+  },
+  name: 'Ghost'
+};
+export const GhostSmall = {
+  args: {
+    ghost: true,
+    small: true,
+    children: 'Ghost small button'
+  },
+  name: 'Ghost small'
+};
+export const GhostSmallIcon = {
+  args: {
+    ghost: true,
+    small: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkOutline, {}),
+    children: 'Ghost small button'
+  },
+  name: 'Ghost small icon'
+};
 export const IconBefore = {
   args: {
-    beforeIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkFilled, {}),
     children: 'Standard button'
   },
   name: 'Icon before'
@@ -29,6 +86,14 @@ export const IconAfter = {
   },
   name: 'Icon after'
 };
+export const SmallWithIcon = {
+  args: {
+    small: true,
+    beforeIcon: /*#__PURE__*/_jsx(IconBookmarkFilled, {}),
+    children: 'Small button'
+  },
+  name: 'Small with icon'
+};
 export const Success = {
   args: {
     success: true,

package/esm/v2/core/Button/index.js

@@ -8,6 +8,8 @@ import AppLoader from '../../../core/AppLoader';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
+    secondary,
+    ghost,
     danger,
     success,
     highlight,
@@ -50,7 +52,7 @@ const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled: disabled,
     loading: loading,
     ref: ref,
-    css: theme => [styles.default(theme), outline && styles.outline(theme), danger && styles.danger(theme), success && styles.success(theme), highlight && styles.highlighted, disabled && styles.disabled(theme), (beforeIcon || afterIcon) && styles.icon(theme), beforeIcon && styles.beforeIcon, afterIcon && styles.afterIcon, border && styles.border(border), nostyle && styles.nostyle, loading && styles.loading(theme), back && styles.back(theme), css && css, small && styles.small, danger && outline && styles.dangerOutline(theme), success && outline && styles.successOutline(theme), transparentBg && styles.transparentBg, focusable && styles.focusable],
+    css: theme => [styles.default(theme), secondary && styles.secondary(theme), outline && styles.outline(theme), danger && styles.danger(theme), success && styles.success(theme), highlight && styles.highlighted, ghost && styles.ghost(theme), disabled && styles.disabled(theme), (beforeIcon || afterIcon) && styles.icon(theme), border && styles.border(border), nostyle && styles.nostyle, loading && styles.loading(theme), back && styles.back(theme), css && css, small && styles.small, danger && outline && styles.dangerOutline(theme), success && outline && styles.successOutline(theme), transparentBg && styles.transparentBg, focusable && styles.focusable],
     afterIcon: afterIcon,
     beforeIcon: back ? _jsx(IconChevronLeft, {
       size: '12px'