@bbl-digital/snorre 3.1.56 → 3.1.58

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

@@ -0,0 +1,158 @@
+import { action } from '@storybook/addon-actions';
+import Input from '.';
+const meta = {
+  title: 'Core/Input',
+  component: Input
+};
+export default meta;
+export const Default = {
+  args: {
+    type: 'text',
+    label: 'Label',
+    placeholder: 'Placeholder text'
+  },
+  name: 'Default'
+};
+export const Focused = {
+  args: {
+    type: 'text',
+    label: 'Focused',
+    placeholder: 'Placeholder text',
+    focus: true
+  },
+  name: 'Focused'
+};
+export const Disabled = {
+  args: {
+    type: 'text',
+    label: 'Disabled',
+    placeholder: 'Field disabled',
+    disabled: true
+  },
+  name: 'Disabled'
+};
+export const Passsword = {
+  args: {
+    type: 'password',
+    label: 'Inputfield - password',
+    placeholder: 'Password field',
+    value: 'Secret password'
+  },
+  name: 'Passsword'
+};
+export const Search = {
+  args: {
+    type: 'search',
+    highlight: true,
+    placeholder: 'Placeholder text'
+  },
+  name: 'Search'
+};
+export const Highlighted = {
+  args: {
+    type: 'text',
+    placeholder: 'Placeholder text',
+    highlight: true
+  },
+  name: 'Highlighted'
+};
+export const Reset = {
+  args: {
+    type: 'text',
+    value: 'should be empty',
+    placeholder: 'Placeholder text',
+    highlight: true,
+    reset: true
+  },
+  name: 'Reset'
+};
+export const WithDebounce = {
+  args: {
+    type: 'text',
+    value: '',
+    onDebounceChange: value => {
+      action('debounce callback..');
+      console.log('debounce callback..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    debounceDelay: 500
+  },
+  name: 'WithDebounce'
+};
+export const WithMaxlength = {
+  args: {
+    type: 'text',
+    value: '',
+    onChange: value => {
+      action('value changed..');
+      console.log('value changed..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    maxlength: 50
+  },
+  name: 'With maxlength'
+};
+export const Format = {
+  args: {
+    type: 'text',
+    value: '123123123',
+    placeholder: 'Start typing a price',
+    format: 'price'
+  },
+  name: 'Format'
+};
+export const Height = {
+  args: {
+    type: 'search',
+    height: '50px',
+    highlight: true
+  },
+  name: 'Height'
+};
+export const Info = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error'
+  },
+  name: 'Info'
+};
+export const CardInput = {
+  args: {
+    cardInput: true,
+    placeholder: 'Im styled as a card',
+    highlight: true,
+    type: 'search'
+  },
+  name: 'CardInput'
+};
+export const Controls = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error',
+    value: '',
+    name: '',
+    cardInput: false,
+    className: '',
+    debounceDelay: 500,
+    disabled: false,
+    focus: false,
+    format: undefined,
+    height: '',
+    invalid: false,
+    maxlength: undefined,
+    highlight: false,
+    infoPlacement: undefined,
+    placeholder: 'Hello',
+    reset: false,
+    type: 'text',
+    onChange: action('value changed..'),
+    onBlur: action('on blur..'),
+    onDebounceChange: action('on debounce change..'),
+    onFocus: action('on focus..')
+  },
+  name: 'Controls'
+};

package/lib/core/Input/index.js

@@ -23,44 +23,39 @@ const Input = /*#__PURE__*/React.forwardRef(({
   const [inputDirty, setInputDirty] = useState(false);
   const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
   const type = props.type ? props.type : 'text';
-
   const handleFormatting = val => {
     if (props.format === 'price' && val) {
       const value = val.replace(/\u00a0/g, '').replace(/ /g, '');
       return getFormattedPrice(value);
     }
-
     return val;
   };
-
   const onInputChange = e => {
     setInputDirty(true);
-
     if (props.format) {
       setValueChanged(handleFormatting(e.target.value));
     } else {
       setValueChanged(e.target.value);
     }
-
     if (props.onChange && !props.disabled) {
       props.onChange(e);
     }
   };
-
   useEffect(() => {
     if (props.reset) {
       setValueChanged('');
     }
-  }, [props.reset]); // Handle debounce
+  }, [props.reset]);
 
+  // Handle debounce
   useEffect(() => {
     const handleDebounceChange = value => {
       if (onDebounceChange && inputDirty) {
         onDebounceChange(value);
       }
     };
-
-    handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    handleDebounceChange(debouncedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
   return _jsxs("div", {
     css: styles.relative,
@@ -88,7 +83,6 @@ const Input = /*#__PURE__*/React.forwardRef(({
           if (!child) {
             return null;
           }
-
           return child;
         })
       }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {

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

@@ -1,21 +1,21 @@
 import { IAppTheme } from '../../app-shell/theme';
 declare const styles: {
-    default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
-    highligted: (height?: string | undefined) => import("@emotion/react").SerializedStyles;
-    number: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
-    text: (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: 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;
+    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: 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;
 };
 export default styles;
 export { styles };

package/lib/core/Input/styles.js

@@ -1,5 +1,4 @@
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/react';
 const styles = {
   default: theme => /*#__PURE__*/css("display:grid;grid-template-rows:min-content;&:focus-within span{color:", theme.primary, ";}span{line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px;}input{height:36px;width:calc(100% - 20px - 2px);font-size:16px;line-height:20px;outline:none;border-width:1px;border-radius:5px;border-style:solid;padding:0 10px;&:focus{border-color:", theme.primary, ";}&:disabled{background-color:", theme.disabled, ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0lucHV0L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLTyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9JbnB1dC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiBtaW4tY29udGVudDtcblxuICAgICAgJjpmb2N1cy13aXRoaW4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgfVxuICAgICAgc3BhbiB7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICAgICAgICBmb250LXNpemU6IDFlbTtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogNHB4O1xuICAgICAgfVxuICAgICAgaW5wdXQge1xuICAgICAgICBoZWlnaHQ6IDM2cHg7XG4gICAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMnB4KTtcbiAgICAgICAgZm9udC1zaXplOiAxNnB4O1xuICAgICAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgICAgYm9yZGVyLXdpZHRoOiAxcHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICAgICAgcGFkZGluZzogMCAxMHB4O1xuXG4gICAgICAgICY6Zm9jdXMge1xuICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmRpc2FibGVkfTtcbiAgICAgICAgfVxuICAgICAgICAmOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuICAgICAgICAmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcbiAgICAgICAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICB9XG4gICAgICAgICZbdHlwZT0nbnVtYmVyJ10ge1xuICAgICAgICAgIC1tb3otYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYCxcbiAgaGlnaGxpZ3RlZDogKGhlaWdodD86IHN0cmluZykgPT4gY3NzYFxuICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAmIGlucHV0IHtcbiAgICAgIGhlaWdodDogJHtoZWlnaHQgPyBoZWlnaHQgOiAnNTBweCd9O1xuICAgICAgZm9udC1zaXplOiAxNnB4O1xuICAgIH1cbiAgICAmIGlucHV0W3R5cGU9J3NlYXJjaCddIHtcbiAgICAgIC13ZWJraXQtYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xuICAgICAgaGVpZ2h0OiAke2hlaWdodCA/IGhlaWdodCA6ICc2MHB4J307XG4gICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDksIDI4LCA2OCwgMC4xKTtcbiAgICAgIGJvcmRlci1ib3R0b206IDA7XG4gICAgICBwYWRkaW5nOiAwIDE2cHg7XG4gICAgICBwYWRkaW5nLXJpZ2h0OiAzNXB4O1xuICAgICAgYm9yZGVyLXN0eWxlOiBub25lO1xuICAgICAgYm9yZGVyLXdpZHRoOiAwO1xuICAgIH1cbiAgYCxcbiAgbnVtYmVyOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDJweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG4gICAgYCxcbiAgdGV4dDogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgYm9yZGVyOiAycHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgcGFkZGluZy1sZWZ0OiAxMHB4O1xuICAgIGAsXG4gIHBhc3N3b3JkOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3Moe1xuICAgICAgYm9yZGVyOiAnMnB4IHNvbGlkICcgKyB0aGVtZS5ib3JkZXIsXG4gICAgICBib3JkZXJSYWRpdXM6ICczcHgnLFxuICAgICAgcGFkZGluZ0xlZnQ6ICcxMHB4JyxcbiAgICB9KSxcbiAgc2VhcmNoOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDA7XG4gICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgcGFkZGluZy1sZWZ0OiAwO1xuICAgICAgcGFkZGluZy1yaWdodDogMzVweDtcbiAgICAgICY6Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24sXG4gICAgICAmOjotd2Via2l0LXNlYXJjaC1jYW5jZWwtYnV0dG9uLFxuICAgICAgJjo6LXdlYmtpdC1zZWFyY2gtcmVzdWx0cy1idXR0b24sXG4gICAgICAmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWRlY29yYXRpb24ge1xuICAgICAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICB9XG4gICAgYCxcbiAgc2VhcmNoTGFiZWw6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJiA+IGlucHV0IHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgIH1cblxuICAgICYgPiBzdmcge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgcmlnaHQ6IDE2cHg7XG4gICAgICB0b3A6IGNhbGMoNTAlIC0gMTBweCk7XG4gICAgICBmaWxsOiAke3RoZW1lLnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gICAgfVxuICBgLFxuICBmaWxlOiBjc3NgYCxcbiAgZGlzYWJsZWQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzcyh7XG4gICAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmRpc2FibGVkLFxuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLmRpc2FibGVkLFxuICAgIH0pLFxuICBjYXJkSW5wdXQ6IGNzcyh7XG4gICAgYm9yZGVyUmFkaXVzOiAnMzBweCcsXG4gICAgcGFkZGluZzogJzAgMjBweCcsXG4gICAgYm9yZGVyOiAnbm9uZScsXG5cbiAgICAnJjpmb2N1cyc6IHtcbiAgICAgIGJveFNoYWRvdzogJzAgMTBweCAyMHB4IDAgcmdiYSgxNiwgMTYsIDkwLCAwLjEpJyxcbiAgICB9LFxuICB9KSxcbiAgaW52YWxpZDogKHRoZW1lOiBJQXBwVGhlbWUpID0+IGNzc2BcbiAgICBpbnB1dCB7XG4gICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYWxlcnR9O1xuICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcblxuICAgICAgJjphY3RpdmUsXG4gICAgICAmOmZvY3VzLFxuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5hbGVydH07XG4gICAgICB9XG4gICAgfVxuXG4gICAgc3ZnIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogdW5zZXQ7XG4gICAgICByaWdodDogdW5zZXQ7XG4gICAgICBib3R0b206IDdweDtcbiAgICAgIGxlZnQ6IDNweDtcbiAgICAgIHBhdGgge1xuICAgICAgICBmaWxsOiAke3RoZW1lLmFsZXJ0fTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBzcGFuOm50aC1vZi10eXBlKDIpIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICAgICAgcGFkZGluZy1sZWZ0OiAyNXB4O1xuICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbiBzcGFuOm50aC1vZi10eXBlKDIpIHtcbiAgICAgIGNvbG9yOiAke3RoZW1lLmFsZXJ0fTtcbiAgICB9XG4gIGAsXG4gIGhlaWdodDogKGhlaWdodDogc3RyaW5nKSA9PiBjc3NgXG4gICAgJiA+IGlucHV0IHtcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9O1xuICAgIH1cbiAgYCxcbiAgZXJyb3JNZXNzYWdlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG4gICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICBjb2xvcjogJHt0aGVtZS5hbGVydH07XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICBgLFxuICBwcjQ6IGNzc2BcbiAgICBwYWRkaW5nLXJpZ2h0OiAyNXB4O1xuICBgLFxuICBpbmZvQnV0dG9uOiBjc3NgXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHJpZ2h0OiAwO1xuICAgIHRvcDogMDtcblxuICAgIGJ1dHRvbiB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGhlaWdodDogMjRweDtcbiAgICB9XG4gIGAsXG4gIHJlbGF0aXZlOiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcblxuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */"),

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

@@ -0,0 +1,39 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ButtonLink: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoStyle: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ExternalLink: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TargetBlank: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const DangerLink: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const DisabledLink: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoPadding: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WordBreak: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Link.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAOnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAOxB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAOvB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAOtB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAOxB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAOrB,CAAA"}

package/lib/core/Link/Link.stories.js

@@ -0,0 +1,75 @@
+import Link from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Link',
+  component: Link
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    children: "Option"
+  }),
+  name: 'Default'
+};
+export const ButtonLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    onClick: () => console.log('hi'),
+    children: "Option"
+  }),
+  name: 'Button link'
+};
+export const NoStyle = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    nostyle: true,
+    children: "Unstyled link"
+  }),
+  name: 'No style'
+};
+export const ExternalLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    external: true,
+    children: "External link"
+  }),
+  name: 'External link'
+};
+export const TargetBlank = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    target: "_blank",
+    children: "Opens up new tab"
+  }),
+  name: 'Target blank'
+};
+export const DangerLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    danger: true,
+    children: "Danger link"
+  }),
+  name: 'Danger link'
+};
+export const DisabledLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    disabled: true,
+    children: "Danger link"
+  }),
+  name: 'Disabled link'
+};
+export const NoPadding = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    nopadding: true,
+    children: "No padding"
+  }),
+  name: 'No padding'
+};
+export const WordBreak = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    wordBreak: "break-word",
+    textAlign: "left",
+    children: "LangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtord"
+  }),
+  name: 'Word break'
+};

package/lib/core/Link/index.js

@@ -5,7 +5,6 @@ import IconExternalLink from '../../icons/General/IconExternalLink';
 import { IconLinkWrapper, NoStyle, LinkStyle, dangerStyles, noPadding, setAlign, smallText, underlineNone, setWordBreak, setDisabled } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Link = props => {
   const {
     disabled,
@@ -21,7 +20,8 @@ const Link = props => {
     wordBreak,
     ...restProps
   } = props;
-  return _jsx(ButtonOrLink, { ...restProps,
+  return _jsx(ButtonOrLink, {
+    ...restProps,
     disabled: disabled,
     css: theme => [nostyle ? NoStyle : LinkStyle, danger && dangerStyles(theme), disabled && setDisabled(theme), nopadding && noPadding, setAlign(textAlign), small && smallText, removeUnderline && underlineNone, wordBreak && setWordBreak(wordBreak)],
     ...(target && {
@@ -37,5 +37,4 @@ const Link = props => {
     }) : children
   });
 };
-
 export default Link;

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

@@ -4,13 +4,13 @@ export declare const IconLinkWrapper: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const NoStyle: import("@emotion/react").SerializedStyles;
-export declare const LinkStyle: import("@emotion/react").SerializedStyles;
-export declare const dangerStyles: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
-export declare const noPadding: import("@emotion/react").SerializedStyles;
-export declare const setAlign: (align: string) => import("@emotion/react").SerializedStyles;
-export declare const smallText: import("@emotion/react").SerializedStyles;
-export declare const underlineNone: import("@emotion/react").SerializedStyles;
-export declare const setWordBreak: (value: string) => import("@emotion/react").SerializedStyles;
-export declare const setDisabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+export declare const NoStyle: import("@emotion/utils").SerializedStyles;
+export declare const LinkStyle: import("@emotion/utils").SerializedStyles;
+export declare const dangerStyles: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
+export declare const noPadding: import("@emotion/utils").SerializedStyles;
+export declare const setAlign: (align: string) => import("@emotion/utils").SerializedStyles;
+export declare const smallText: import("@emotion/utils").SerializedStyles;
+export declare const underlineNone: import("@emotion/utils").SerializedStyles;
+export declare const setWordBreak: (value: string) => import("@emotion/utils").SerializedStyles;
+export declare const setDisabled: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
 //# sourceMappingURL=styles.d.ts.map

package/lib/core/Link/styles.js

@@ -1,9 +1,7 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/react';
-export const IconLinkWrapper = _styled("span", process.env.NODE_ENV === "production" ? {
+export const IconLinkWrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
   target: "e1besegt0"
 } : {
   target: "e1besegt0",

package/lib/core/List/Item.js

@@ -1,8 +1,6 @@
 import _styled from "@emotion/styled/base";
-
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-const ListItem = _styled("li", process.env.NODE_ENV === "production" ? {
+const ListItem = /*#__PURE__*/_styled("li", process.env.NODE_ENV === "production" ? {
   target: "e8hjcxt0"
 } : {
   target: "e8hjcxt0",
@@ -16,5 +14,4 @@ const ListItem = _styled("li", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3QvSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT21DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3QvSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuaW50ZXJmYWNlIElQcm9wcyB7XG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IExpc3RJdGVtOiBSZWFjdC5GQzxJUHJvcHM+ID0gc3R5bGVkLmxpKHtcbiAgcGFkZGluZzogMCxcbn0pXG5cbmV4cG9ydCBkZWZhdWx0IExpc3RJdGVtXG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-
 export default ListItem;

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

@@ -0,0 +1,39 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ListWithLinks: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const AlternativeListWithLinks: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Pointlist: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Numberedlist: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NumberedlistHighlighted: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Darktheme: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NostyleList: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const WithPadding: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=List.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/List/List.stories.tsx"],"names":[],"mappings":";AAMA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAiBnB,CAAA;AAED,eAAO,MAAM,aAAa;;;CAwBzB,CAAA;AAED,eAAO,MAAM,wBAAwB;;;CAwBpC,CAAA;AAED,eAAO,MAAM,SAAS;;;CAUrB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAUxB,CAAA;AAED,eAAO,MAAM,uBAAuB;;;CAUnC,CAAA;AAED,eAAO,MAAM,SAAS;;;CAUrB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAUvB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAevB,CAAA"}

package/lib/core/List/List.stories.js

@@ -0,0 +1,157 @@
+import List from '.';
+import ListItem from './Item';
+import Link from '../Link';
+import IconArrowRight from '../../icons/General/IconArrowRight';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/List',
+  component: List
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx("div", {
+    className: "wrapper",
+    style: {
+      maxWidth: '300px'
+    },
+    children: /*#__PURE__*/_jsxs(List, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  }),
+  name: 'Default'
+};
+export const ListWithLinks = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    links: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    })]
+  }),
+  name: 'List with links'
+};
+export const AlternativeListWithLinks = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    linksAlternate: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    })]
+  }),
+  name: 'Alternative list with links'
+};
+export const Pointlist = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    points: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Pointlist'
+};
+export const Numberedlist = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    numbers: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Numberedlist'
+};
+export const NumberedlistHighlighted = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    numbersHighlighted: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Numberedlist - Highlighted'
+};
+export const Darktheme = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    darkTheme: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Darktheme'
+};
+export const NostyleList = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    nostyle: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Nostyle list'
+};
+export const WithPadding = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    padding: "0.5em",
+    rowHeight: "100%",
+    children: [/*#__PURE__*/_jsxs(ListItem, {
+      children: ["Item 1", /*#__PURE__*/_jsx("br", {}), "new line", /*#__PURE__*/_jsx("br", {}), "another new line"]
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'With padding'
+};