@storybook/addon-ondevice-notes 7.6.10-alpha.1 → 7.6.10-alpha.4

package/dist/components/Markdown/Markdown.d.ts

@@ -0,0 +1,19 @@
+/**
+ * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
+ */
+import React from 'react';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+export type Props = {
+    children?: string;
+    errorHandler?: (errors: any[], children: string) => void;
+    styles?: {
+        view?: ViewStyle;
+        text?: TextStyle;
+        image?: ImageStyle;
+    };
+};
+export type DefaultProps = Props & {
+    styles: Object;
+};
+declare const _default: React.MemoExoticComponent<({ children, errorHandler }: Props) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Markdown/Markdown.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
+ */
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const simple_markdown_1 = __importDefault(require("simple-markdown"));
+// @ts-ignore
+const rules_1 = __importDefault(require("./rules"));
+const styles_1 = require("./styles");
+const Markdown = ({ children = '', errorHandler }) => {
+    const styles = (0, styles_1.useThemedStyles)();
+    const _renderContent = () => {
+        try {
+            const rules = (0, rules_1.default)(styles);
+            // @TODO: Add another \n?
+            const blockSource = `${children}\n\n`;
+            const tree = simple_markdown_1.default.parserFor(rules)(blockSource, {
+                inline: false,
+            });
+            return simple_markdown_1.default.outputFor(rules, 'react')(tree);
+        }
+        catch (errors) {
+            errorHandler ? errorHandler(errors, children) : console.error(errors);
+        }
+        return null;
+    };
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: _renderContent() });
+};
+exports.default = react_1.default.memo(Markdown);

package/dist/components/Markdown/rules.d.ts

@@ -0,0 +1,177 @@
+/// <reference types="react" />
+import { Image, Text, View, TextStyle, ViewStyle, ImageStyle, StyleProp } from 'react-native';
+import SimpleMarkdown, { Output, ReactElements, State, SingleASTNode } from 'simple-markdown';
+interface Styles {
+    [key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+}
+declare const _default: (styles: Styles) => {
+    autolink: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    blockQuote: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    br: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    codeBlock: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    del: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    em: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    heading: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    hr: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    image: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ImageProps, Image>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    inlineCode: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    link: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    list: {
+        react: (node: {
+            items: Array<SingleASTNode>;
+            ordered: boolean;
+        }, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    newline: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    paragraph: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    strong: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    table: {
+        react: (node: {
+            header: Array<SingleASTNode>;
+            cells: Array<Array<SingleASTNode>>;
+        }, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").ViewProps, View>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    text: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, parentState: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    u: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    url: {
+        react: (node: SingleASTNode, output: Output<ReactElements>, state: State) => import("react").CElement<import("react-native").TextProps, Text>;
+        order: number;
+        match: SimpleMarkdown.MatchFunction;
+        quality?: (capture: SimpleMarkdown.Capture, state: SimpleMarkdown.State, prevCapture: string) => number;
+        parse: SimpleMarkdown.SingleNodeParseFunction;
+        html: SimpleMarkdown.HtmlNodeOutput;
+    };
+    Array: SimpleMarkdown.DefaultArrayRule;
+    nptable: SimpleMarkdown.DefaultInRule;
+    lheading: SimpleMarkdown.DefaultInRule;
+    fence: SimpleMarkdown.DefaultInRule;
+    def: SimpleMarkdown.LenientInOutRule;
+    tableSeparator: SimpleMarkdown.DefaultInRule;
+    escape: SimpleMarkdown.DefaultInRule;
+    mailto: SimpleMarkdown.DefaultInRule;
+    reflink: SimpleMarkdown.DefaultInRule;
+    refimage: SimpleMarkdown.DefaultInRule;
+};
+export default _default;

package/dist/components/Markdown/rules.js

@@ -0,0 +1,238 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const simple_markdown_1 = __importDefault(require("simple-markdown"));
+exports.default = (styles) => ({
+    ...simple_markdown_1.default.defaultRules,
+    autolink: {
+        ...simple_markdown_1.default.defaultRules.autolink,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.link,
+                onPress: () => null,
+            }, output(node.content, state));
+        },
+    },
+    blockQuote: {
+        ...simple_markdown_1.default.defaultRules.blockQuote,
+        react: (node, output, state) => {
+            state.withinText = true;
+            const blockBar = (0, react_1.createElement)(react_native_1.View, {
+                key: state.key,
+                style: [styles.blockQuoteSectionBar, styles.blockQuoteBar],
+            });
+            const blockText = (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.blockQuoteText,
+            }, output(node.content, state));
+            return (0, react_1.createElement)(react_native_1.View, {
+                key: state.key,
+                style: [styles.blockQuoteSection, styles.blockQuote],
+            }, [blockBar, blockText]);
+        },
+    },
+    br: {
+        ...simple_markdown_1.default.defaultRules.br,
+        react: (node, output, state) => {
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.br,
+            }, '\n\n');
+        },
+    },
+    codeBlock: {
+        ...simple_markdown_1.default.defaultRules.codeBlock,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.codeBlock,
+            }, null);
+        },
+    },
+    del: {
+        ...simple_markdown_1.default.defaultRules.del,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.del,
+            }, output(node.content, state));
+        },
+    },
+    em: {
+        ...simple_markdown_1.default.defaultRules.em,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.em,
+            }, output(node.content, state));
+        },
+    },
+    heading: {
+        ...simple_markdown_1.default.defaultRules.heading,
+        react: (node, output, parentState) => {
+            const state = { ...parentState };
+            state.withinText = true;
+            const stylesToApply = [styles.heading, styles[`heading${node.level}`]];
+            state.stylesToApply = stylesToApply;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: stylesToApply,
+            }, output(node.content, state));
+        },
+    },
+    hr: {
+        ...simple_markdown_1.default.defaultRules.hr,
+        react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.hr }),
+    },
+    image: {
+        ...simple_markdown_1.default.defaultRules.image,
+        react: (node, output, state) => (0, react_1.createElement)(react_native_1.Image, {
+            key: state.key,
+            resizeMode: 'contain',
+            source: { uri: node.target },
+            style: (node.target.match(/youtu|vimeo/) ? styles.video : styles.image),
+            //styles.resizeMode ? styles.resizeMode :
+        }),
+    },
+    inlineCode: {
+        ...simple_markdown_1.default.defaultRules.inlineCode,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.inlineCode,
+            }, node.content);
+        },
+    },
+    link: {
+        ...simple_markdown_1.default.defaultRules.link,
+        react: (node, output, state) => {
+            state.withinText = true;
+            const openUrl = (url) => {
+                react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
+            };
+            return (0, react_1.createElement)(react_native_1.Text, {
+                style: node.target.match(/@/) ? styles.mailTo : styles.link,
+                key: state.key,
+                onPress: () => openUrl(node.target),
+            }, output(node.content, state));
+        },
+    },
+    list: {
+        ...simple_markdown_1.default.defaultRules.list,
+        react: (node, output, state) => {
+            const items = node.items.map((item, i) => {
+                let bullet;
+                if (node.ordered) {
+                    bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemNumber }, `${i + 1} . `);
+                }
+                else {
+                    bullet = (0, react_1.createElement)(react_native_1.Text, { key: state.key, style: styles.listItemBullet }, '\u2022 ');
+                }
+                const listItemText = (0, react_1.createElement)(react_native_1.Text, { key: state.key + 1, style: styles.listItemText }, output(item, state));
+                return (0, react_1.createElement)(react_native_1.View, {
+                    key: i,
+                    style: styles.listItem,
+                }, [bullet, listItemText]);
+            });
+            return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.list }, items);
+        },
+    },
+    newline: {
+        ...simple_markdown_1.default.defaultRules.newline,
+        react: (node, output, state) => (0, react_1.createElement)(react_native_1.Text, {
+            key: state.key,
+            style: styles.newline,
+        }, '\n'),
+    },
+    paragraph: {
+        ...simple_markdown_1.default.defaultRules.paragraph,
+        react: (node, output, state) => (0, react_1.createElement)(react_native_1.View, {
+            key: state.key,
+            style: styles.paragraph,
+        }, output(node.content, state)),
+    },
+    strong: {
+        ...simple_markdown_1.default.defaultRules.strong,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.strong,
+            }, output(node.content, state));
+        },
+    },
+    table: {
+        ...simple_markdown_1.default.defaultRules.table,
+        react: (node, output, state) => {
+            const headers = node.header.map((content, i) => (0, react_1.createElement)(react_native_1.Text, {
+                style: styles.tableHeaderCell,
+                key: i,
+            }, output(content, state)));
+            const header = (0, react_1.createElement)(react_native_1.View, { style: styles.tableHeader }, headers);
+            const rows = node.cells.map((row, r) => {
+                const cells = row.map((content, c) => (0, react_1.createElement)(react_native_1.View, {
+                    key: c,
+                    style: styles.tableRowCell,
+                }, output(content, state)));
+                const rowStyles = [styles.tableRow];
+                node.cells.length - 1 === r ? rowStyles.push(styles.tableRowLast) : null;
+                return (0, react_1.createElement)(react_native_1.View, { key: r, style: rowStyles }, cells);
+            });
+            return (0, react_1.createElement)(react_native_1.View, { key: state.key, style: styles.table }, [header, rows]);
+        },
+    },
+    text: {
+        ...simple_markdown_1.default.defaultRules.text,
+        react: (node, output, parentState) => {
+            const state = { ...parentState };
+            // Breaking words up in order to allow for text reflowing in flexbox
+            // let words = node.content.split(' ');
+            // words = words.map((word: string, i: number) => {
+            //   i !== words.length - 1 ? (word = `${word} `) : null;
+            const textStyles = [styles.text];
+            //   !state.withinText ? textStyles.push(styles.plainText) : null;
+            //   state.stylesToApply ? textStyles.push(state.stylesToApply) : null;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: textStyles,
+            }, node.content);
+        },
+    },
+    u: {
+        ...simple_markdown_1.default.defaultRules.u,
+        react: (node, output, state) => {
+            state.withinText = true;
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.u,
+            }, output(node.content, state));
+        },
+    },
+    url: {
+        ...simple_markdown_1.default.defaultRules.url,
+        react: (node, output, state) => {
+            state.withinText = true;
+            const openURL = (url) => {
+                react_native_1.Linking.openURL(url).catch((error) => console.warn('An error occurred: ', error));
+            };
+            return (0, react_1.createElement)(react_native_1.Text, {
+                key: state.key,
+                style: styles.url,
+                onPress: () => openURL(node.target),
+            }, output(node.content, state));
+        },
+    },
+});

package/dist/components/Markdown/styles.d.ts

@@ -0,0 +1,6 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native/types';
+interface Styles {
+    [key: string]: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+}
+export declare const useThemedStyles: () => Styles;
+export {};

package/dist/components/Markdown/styles.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemedStyles = void 0;
+/**
+ * mostly based on code from https://github.com/CharlesMangwa/react-native-simple-markdown
+ */
+const react_native_theming_1 = require("@storybook/react-native-theming");
+const react_1 = require("react");
+const useThemedStyles = () => {
+    const theme = (0, react_native_theming_1.useTheme)();
+    const styles = (0, react_1.useMemo)(() => ({
+        blockQuoteSection: {
+            flexDirection: 'row',
+        },
+        blockQuoteSectionBar: {
+            width: 3,
+            backgroundColor: '#DDDDDD',
+            marginRight: 15,
+        },
+        codeBlock: {
+            fontWeight: '500',
+        },
+        del: {
+            textDecorationLine: 'line-through',
+        },
+        em: {
+            fontStyle: 'italic',
+        },
+        heading: {
+            fontWeight: '200',
+        },
+        heading1: {
+            fontSize: 32,
+        },
+        heading2: {
+            fontSize: 24,
+        },
+        heading3: {
+            fontSize: 18,
+        },
+        heading4: {
+            fontSize: 16,
+        },
+        heading5: {
+            fontSize: 13,
+        },
+        heading6: {
+            fontSize: 11,
+        },
+        hr: {
+            backgroundColor: '#cccccc',
+        },
+        image: {
+            width: 320,
+            height: 320,
+        },
+        inlineCode: {
+            backgroundColor: '#eeeeee',
+            borderColor: '#dddddd',
+            borderRadius: 3,
+            borderWidth: 1,
+            fontWeight: 'bold',
+        },
+        link: {
+            textDecorationLine: 'underline',
+        },
+        list: { width: '100%' },
+        listItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+        },
+        listItemNumber: {
+            fontWeight: 'bold',
+            color: theme.text.primaryColor,
+        },
+        listItemBullet: {
+            fontWeight: 'bold',
+            color: theme.text.primaryColor,
+        },
+        mailTo: {
+            textDecorationLine: 'underline',
+        },
+        paragraph: {
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+        },
+        listItemText: {
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            color: theme.text.primaryColor,
+        },
+        strong: {
+            fontWeight: 'bold',
+        },
+        table: {
+            borderWidth: 1,
+            borderColor: theme.text.primaryColor,
+            borderRadius: 3,
+        },
+        tableHeader: {
+            backgroundColor: theme.text.primaryColor,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+        },
+        tableHeaderCell: {
+            color: theme.backgroundColor,
+            fontWeight: 'bold',
+            padding: 5,
+        },
+        tableRow: {
+            borderBottomWidth: 1,
+            borderColor: theme.text.primaryColor,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+        },
+        tableRowLast: {
+            borderColor: 'transparent',
+        },
+        tableRowCell: {
+            padding: 5,
+        },
+        text: {
+            color: theme.text.primaryColor,
+        },
+        u: {
+            textDecorationLine: 'underline',
+        },
+        video: {
+            width: 300,
+            height: 300,
+        },
+    }), [theme.backgroundColor, theme.text.primaryColor]);
+    return styles;
+};
+exports.useThemedStyles = useThemedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "7.6.10-alpha.1",
+  "version": "7.6.10-alpha.4",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,11 +29,10 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/api": "^7.6.10",
     "@storybook/client-logger": "^7.6.10",
     "@storybook/core-events": "^7.6.10",
     "@storybook/manager-api": "^7.6.10",
-    "@storybook/react-native-theming": "^7.6.10-alpha.1",
+    "@storybook/react-native-theming": "^7.6.10-alpha.4",
     "react-native-markdown-display": "6.1.6"
   },
   "devDependencies": {
@@ -46,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8b2e96767cc361ae5382c5ba0ba9d6ea6112634f"
+  "gitHead": "43c2b5b932a0361178b010f90533069f14007677"
 }