@bbl-digital/snorre 3.1.58 → 3.1.60

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

@@ -1,59 +1,60 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const Default: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Neutral: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Success: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Info: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Danger: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Dark: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Light: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Outline: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TagWithClose: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TagWithLoading: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TagWithCloseAndStrictClick: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TagWithCloseLoadingAndStrictClick: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TagWithCloseAndStrictClickWithColor: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const WithIcon: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=Tag.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tag/Tag.stories.tsx"],"names":[],"mappings":";AAIA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAGlB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAGjB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAOxB,CAAA;AAED,eAAO,MAAM,cAAc;;;CAG1B,CAAA;AAED,eAAO,MAAM,0BAA0B;;;CAOtC,CAAA;AAED,eAAO,MAAM,iCAAiC;;;CAO7C,CAAA;AAED,eAAO,MAAM,mCAAmC;;;CAO/C,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tag/Tag.stories.tsx"],"names":[],"mappings":";;AAIA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAGlB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAGhB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAGjB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAOxB,CAAA;AAED,eAAO,MAAM,cAAc;;;CAG1B,CAAA;AAED,eAAO,MAAM,0BAA0B;;;CAOtC,CAAA;AAED,eAAO,MAAM,iCAAiC;;;CAO7C,CAAA;AAED,eAAO,MAAM,mCAAmC;;;CAO/C,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAGpB,CAAA"}

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

@@ -1,17 +1,17 @@
 import { IAppTheme } from '../../app-shell/theme';
 declare const styles: {
-    default: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    neutral: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    success: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    info: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    danger: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    dark: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    light: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    outline: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    withclose: import("@emotion/utils").SerializedStyles;
-    strictClose: import("@emotion/utils").SerializedStyles;
-    loading: import("@emotion/utils").SerializedStyles;
-    withicon: import("@emotion/utils").SerializedStyles;
+    default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    neutral: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    success: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    info: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    danger: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    dark: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    light: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    outline: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    withclose: import("@emotion/react").SerializedStyles;
+    strictClose: import("@emotion/react").SerializedStyles;
+    loading: import("@emotion/react").SerializedStyles;
+    withicon: import("@emotion/react").SerializedStyles;
 };
 export default styles;
 export { styles };

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

@@ -1,19 +1,19 @@
 import { IAppTheme } from '../../app-shell/theme';
 declare const styles: {
-    default: (theme: IAppTheme, color: string | undefined) => import("@emotion/utils").SerializedStyles;
-    paragraph: import("@emotion/utils").SerializedStyles;
-    intro: import("@emotion/utils").SerializedStyles;
-    small: import("@emotion/utils").SerializedStyles;
-    extrasmall: import("@emotion/utils").SerializedStyles;
-    bold: import("@emotion/utils").SerializedStyles;
-    semiBold: import("@emotion/utils").SerializedStyles;
-    size: (size: string) => import("@emotion/utils").SerializedStyles;
-    subtle: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    setColor: (color: string) => import("@emotion/utils").SerializedStyles;
-    italic: import("@emotion/utils").SerializedStyles;
-    align: (align: string) => import("@emotion/utils").SerializedStyles;
-    setWordBreak: (value: string) => import("@emotion/utils").SerializedStyles;
-    setWhiteSpace: (value: string) => import("@emotion/utils").SerializedStyles;
+    default: (theme: IAppTheme, color: string | undefined) => import("@emotion/react").SerializedStyles;
+    paragraph: import("@emotion/react").SerializedStyles;
+    intro: import("@emotion/react").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    extrasmall: import("@emotion/react").SerializedStyles;
+    bold: import("@emotion/react").SerializedStyles;
+    semiBold: import("@emotion/react").SerializedStyles;
+    size: (size: string) => import("@emotion/react").SerializedStyles;
+    subtle: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    setColor: (color: string) => import("@emotion/react").SerializedStyles;
+    italic: import("@emotion/react").SerializedStyles;
+    align: (align: string) => import("@emotion/react").SerializedStyles;
+    setWordBreak: (value: string) => import("@emotion/react").SerializedStyles;
+    setWhiteSpace: (value: string) => import("@emotion/react").SerializedStyles;
 };
 export default styles;
 export { styles };

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

@@ -1,19 +1,20 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const Default: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Value: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Validation: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const MaxHeight: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=Textarea.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Textarea/Textarea.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAWnB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAGjB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAA"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Textarea/Textarea.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAWnB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAGjB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAGtB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAGrB,CAAA"}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { IAppTheme } from '../../app-shell/theme';
 export declare const styles: {
-    default: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    resize: (resize: string) => import("@emotion/utils").SerializedStyles;
-    maxHeight: (value: string) => import("@emotion/utils").SerializedStyles;
+    default: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    resize: (resize: string) => import("@emotion/react").SerializedStyles;
+    maxHeight: (value: string) => import("@emotion/react").SerializedStyles;
 };
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

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

@@ -1,7 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const TimelineDefault: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=Timeline.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timeline/Timeline.stories.tsx"],"names":[],"mappings":";AAIA,wBAGS;AAET,eAAO,MAAM,eAAe;;;CAU3B,CAAA"}
+{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timeline/Timeline.stories.tsx"],"names":[],"mappings":";;AAIA,wBAGS;AAET,eAAO,MAAM,eAAe;;;CAU3B,CAAA"}

package/lib/core/Timeline/TimelineStep/styles.d.ts

@@ -10,8 +10,8 @@ export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const styles: {
-    defaultCircle: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    active: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    complete: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
+    defaultCircle: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    active: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    complete: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,31 +1,32 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const TimepickerDefault: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const WithSeconds: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Disabled: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Nullable: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const WithDateAsValue: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const WithError: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Focus: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=Timepicker.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Timepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timepicker/Timepicker.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,iBAAiB;;;CAY7B,CAAA;AAED,eAAO,MAAM,WAAW;;;CAYvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAYpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAYpB,CAAA;AAED,eAAO,MAAM,eAAe;;;CAW3B,CAAA;AAED,eAAO,MAAM,SAAS;;;CAcrB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAYjB,CAAA"}
+{"version":3,"file":"Timepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Timepicker/Timepicker.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,iBAAiB;;;CAY7B,CAAA;AAED,eAAO,MAAM,WAAW;;;CAYvB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAYpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAYpB,CAAA;AAED,eAAO,MAAM,eAAe;;;CAW3B,CAAA;AAED,eAAO,MAAM,SAAS;;;CAcrB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAYjB,CAAA"}

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

@@ -9,11 +9,11 @@ export declare const ErrorMessage: import("@emotion/styled").StyledComponent<{
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 declare const styles: {
-    default: (theme: IAppTheme, height: string, width: string) => import("@emotion/utils").SerializedStyles;
-    disabled: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
-    nullable: import("@emotion/utils").SerializedStyles;
-    validation: import("@emotion/utils").SerializedStyles;
-    invalid: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
+    default: (theme: IAppTheme, height: string, width: string) => import("@emotion/react").SerializedStyles;
+    disabled: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
+    nullable: import("@emotion/react").SerializedStyles;
+    validation: import("@emotion/react").SerializedStyles;
+    invalid: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
 export default styles;
 export { styles };

package/lib/core/Tooltip/Tooptip.stories.d.ts

@@ -1,7 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const TooltipDefault: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=Tooptip.stories.d.ts.map

package/lib/core/Tooltip/Tooptip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooptip.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tooltip/Tooptip.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,cAAc;;;CAO1B,CAAA"}
+{"version":3,"file":"Tooptip.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Tooltip/Tooptip.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,cAAc;;;CAO1B,CAAA"}

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

@@ -1,6 +1,6 @@
 import { IAppTheme } from '../../app-shell/theme';
 export declare const styles: {
-    default: import("@emotion/utils").SerializedStyles;
-    tooltip: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
+    default: import("@emotion/react").SerializedStyles;
+    tooltip: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 };
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,19 +1,20 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+/// <reference types="react" />
+declare const _default;
 export default _default;
 export declare const Default: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const TypeMysite: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const Avatar: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 export declare const WithoutText: {
-    render: () => JSX.Element;
+    render: () => import("react").JSX.Element;
     name: string;
 };
 //# sourceMappingURL=UserMenu.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/UserMenu/UserMenu.stories.tsx"],"names":[],"mappings":";AAKA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAkBnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAmBtB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAoBlB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAqBvB,CAAA"}
+{"version":3,"file":"UserMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/UserMenu/UserMenu.stories.tsx"],"names":[],"mappings":";;AAKA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAkBnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAmBtB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAoBlB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAqBvB,CAAA"}

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

@@ -30,6 +30,6 @@ export declare const LogoutWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const userMenuOption: (theme: IAppTheme) => import("@emotion/utils").SerializedStyles;
+export declare const userMenuOption: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 export {};
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,15 +1,14 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+import React from 'react';
+declare const _default;
 export default _default;
-export declare const NoVideo: {
-    render: () => JSX.Element;
-    name: string;
+export declare const Default: {
+    render: () => React.JSX.Element;
 };
 export declare const VideoWithSrc: {
-    render: () => JSX.Element;
-    name: string;
+    render: () => React.JSX.Element;
 };
-export declare const VideoWithHeightAndWidth: {
-    render: () => JSX.Element;
-    name: string;
+export declare const VideoWithPoster: {
+    render: () => React.JSX.Element;
 };
+export declare const VideoWithWidthAndHeight: () => React.JSX.Element;
 //# sourceMappingURL=Video.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Video.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/Video.stories.tsx"],"names":[],"mappings":";AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAKxB,CAAA;AAED,eAAO,MAAM,uBAAuB;;;CAQnC,CAAA"}
+{"version":3,"file":"Video.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/Video.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAGzB,wBAGS;AAET,eAAO,MAAM,OAAO;;CAOnB,CAAA;AAED,eAAO,MAAM,YAAY;;CAOxB,CAAA;AAED,eAAO,MAAM,eAAe;;CAQ3B,CAAA;AAED,eAAO,MAAM,uBAAuB,yBAQnC,CAAA"}

package/lib/core/Video/Video.stories.js

@@ -1,23 +1,33 @@
+import React from 'react';
 import Video from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: 'Core/Video',
   component: Video
 };
-export const NoVideo = {
-  render: () => /*#__PURE__*/_jsx(Video, {}),
-  name: 'No video'
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Video, {
+    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    height: "100%"
+  })
 };
 export const VideoWithSrc = {
   render: () => /*#__PURE__*/_jsx(Video, {
-    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
-  }),
-  name: 'Image with src'
+    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    height: "500px"
+  })
 };
-export const VideoWithHeightAndWidth = {
+export const VideoWithPoster = {
   render: () => /*#__PURE__*/_jsx(Video, {
     src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-    height: "300px"
-  }),
-  name: 'Video with height set. Width is auto and adjusted to the video ratio'
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
+  })
+};
+export const VideoWithWidthAndHeight = () => {
+  return /*#__PURE__*/_jsx(Video, {
+    src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    poster: "https://flxt.tmsimg.com/assets/p10163210_v_h9_aa.jpg",
+    height: "500px"
+  });
 };

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

@@ -1,23 +1,31 @@
-/** @jsxImportSource @emotion/react */
-import React from 'react';
+/// <reference types="react" />
 import { SerializedStyles } from '@emotion/react';
-interface IProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+import { Config } from 'react-player';
+interface IProps {
     /** The source */
     src?: string;
     /** Controls defaults to true */
     controls?: boolean;
-    /** Indicating that the video is to be played inline, within the videos playback area */
-    playsInline?: boolean;
-    /** Intends to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. */
-    preload?: 'auto' | 'metadata' | 'none';
+    /** Specify to let an Intersection Observer to auto stop or auto start the player when in the viewport */
+    intersectionObserver?: boolean;
+    /** Override config of the player */
+    config?: Config;
+    /** Set play state */
+    playing?: boolean;
+    /** Plays automatically when loaded */
+    autoPlay?: boolean;
     /** An URL for an image to be shown while the video is downloading */
     poster?: string;
     /** Video height, e.g. 100px */
     height?: string;
-    /** Video with, e.g. 100% */
+    /** Video width, e.g. 100% */
     width?: string;
     /** CSS override */
     css?: SerializedStyles;
+    /** Pause callback */
+    onPause?: () => void;
+    /** Play callback */
+    onPlay?: () => void;
 }
 declare const Video: React.FC<IProps>;
 export default Video;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAGjD,UAAU,MAAO,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAClE,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+KAA+K;IAC/K,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6B3B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAoB,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAGlD,UAAU,MAAM;IACd,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yGAAyG;IACzG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6F3B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Video/index.js

@@ -1,28 +1,87 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
-import styles from './styles';
+import { useEffect, useRef, useState } from 'react';
+import ReactPlayer from 'react-player';
+import { PlayerContainer } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const Video = ({
   src,
+  intersectionObserver = false,
   controls = true,
-  playsInline = true,
-  preload = 'auto',
   poster,
-  height = '100%',
+  config = {
+    file: {
+      attributes: {
+        controlsList: 'nodownload noplaybackrate'
+      }
+    }
+  },
+  playing = false,
+  autoPlay = false,
+  height = 'auto',
   width = '100%',
   css,
+  onPause,
+  onPlay,
   ...restProps
 }) => {
+  const containerRef = useRef(null);
+
+  /** Determines if the video controls have been physically interacted with  */
+  const [playPressed, setPlayPressed] = useState(false);
+  /** The play state of the player */
+  const [isPlaying, setIsPlaying] = useState(playing);
   const videoSrc = src || undefined;
   const posterSrc = poster || undefined;
-  return _jsx("video", {
-    src: videoSrc,
-    controls: controls,
-    playsInline: playsInline,
-    preload: preload,
-    poster: posterSrc,
-    css: () => [height && styles.height(height), width && styles.width(width), css && css],
-    ...restProps
+  const intersectionObsOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5
+  };
+  const intersectionCallback = entries => {
+    const [entry] = entries;
+    // If the video is in the viewport and autoPlay is true or the user has physically pressed play, start playing
+    if (entry.isIntersecting && (autoPlay || playPressed)) {
+      setIsPlaying(true);
+    } else {
+      setIsPlaying(false);
+    }
+  };
+  useEffect(() => {
+    if (!intersectionObserver || !window.IntersectionObserver) return;
+    const observer = new IntersectionObserver(intersectionCallback, intersectionObsOptions);
+    const currentRef = containerRef.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+    return () => {
+      if (currentRef) observer.unobserve(currentRef);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef.current, intersectionObsOptions, intersectionObserver]);
+  const handlePlay = () => {
+    setPlayPressed(true);
+    onPlay && onPlay();
+  };
+  const handlePause = () => {
+    setPlayPressed(false);
+    onPause && onPause();
+  };
+  return _jsx(PlayerContainer, {
+    ref: containerRef,
+    children: _jsx(ReactPlayer, {
+      url: videoSrc,
+      controls: controls,
+      playing: isPlaying,
+      light: posterSrc ?? false,
+      width: width,
+      height: height,
+      config: config,
+      onPlay: handlePlay,
+      onPause: handlePause,
+      css: () => [css && css],
+      ...restProps
+    })
   });
 };
 export default Video;

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

@@ -1,7 +1,6 @@
-declare const styles: {
-    height: (height: string) => import("@emotion/utils").SerializedStyles;
-    width: (width: string) => import("@emotion/utils").SerializedStyles;
-};
-export default styles;
-export { styles };
+/// <reference types="react" />
+export declare const PlayerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;qBACO,MAAM;mBAGR,MAAM;CAGtB,CAAA;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Video/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,eAAe;;;yGAM3B,CAAA"}