@ovotech/element-native 2.0.0 → 2.0.1

package/dist/esm/providers/icons/Pound.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Pound = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M3.11928 7.41931H4.51093C4.11332 6.46204 3.91451 5.63147 3.91451 4.9276C3.91451 3.80141 4.29225 2.86526 5.04771 2.11916C5.80318 1.37305 6.73757 1 7.85089 1C9.24254 1 10.2565 1.37305 10.8926 2.11916C11.5421 2.86526 11.8933 3.7451 11.9463 4.75867L9.99801 5.11765C9.98476 4.35747 9.78595 3.78733 9.40159 3.40724C9.03048 3.01307 8.52684 2.81599 7.89066 2.81599C7.334 2.81599 6.85686 3.00603 6.45924 3.38612C6.06163 3.75214 5.86282 4.26596 5.86282 4.9276C5.86282 5.51885 6.08151 6.34942 6.51889 7.41931H10.3757V9.2353H7.03579C7.06229 9.48869 7.07555 9.67873 7.07555 9.80543C7.07555 10.5375 6.90987 11.1991 6.57853 11.7903C6.24718 12.3816 5.7833 12.8391 5.18688 13.1629H9.22266C9.85885 13.1629 10.336 12.9517 10.6541 12.5294C10.9722 12.093 11.1312 11.5581 11.1312 10.9246L13 11.2202C13 12.3323 12.7018 13.2403 12.1054 13.9442C11.5222 14.6481 10.7203 15 9.6998 15H3V12.994C3.66269 12.6983 4.19284 12.2831 4.59046 11.7481C4.98807 11.1991 5.18688 10.629 5.18688 10.0377C5.18688 9.728 5.16037 9.46053 5.10736 9.2353H3.11928V7.41931Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/Search.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Search = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M16.02 14.61L11.65 10.05C12.37 9.01 12.8 7.76 12.8 6.4C12.8 2.87 9.93 0 6.4 0C2.87 0 0 2.87 0 6.4C0 9.93 2.87 12.8 6.4 12.8C7.85 12.8 9.19 12.31 10.26 11.49L14.57 15.99L16.01 14.61H16.02ZM6.4 10.8C3.97 10.8 2 8.83 2 6.4C2 3.97 3.97 2 6.4 2C8.83 2 10.8 3.97 10.8 6.4C10.8 8.83 8.83 10.8 6.4 10.8Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/Show.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Show = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/ShowPassword.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var ShowPassword = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M8 3.5C4.89086 3.5 2.07286 5.21886 0 8C2.07286 10.7811 4.89086 12.5 8 12.5C11.1091 12.5 13.9271 10.7811 16 8C13.9271 5.21886 11.1091 3.5 8 3.5ZM8 5C9.65714 5 11 6.34286 11 8C11 9.65714 9.65714 11 8 11C6.34286 11 5 9.65714 5 8C5 6.34286 6.34286 5 8 5ZM8 6.5C7.17171 6.5 6.5 7.17171 6.5 8C6.5 8.82829 7.17171 9.5 8 9.5C8.82829 9.5 9.5 8.82829 9.5 8C9.5 7.17171 8.82829 6.5 8 6.5Z", fill: "currentColor" }))); };

package/dist/esm/providers/icons/Usage.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var Usage = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M2 14V0H0V16H16V14H2ZM5 10H3V13H5V10ZM6.33 3H8.33V13H6.33V3ZM11.67 9H9.67V13H11.67V9ZM13 7H15V13H13V7Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/User.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+export var User = function (props) { return (React.createElement(Svg, __assign({ viewBox: "0 0 16 16" }, props),
+    React.createElement(Path, { d: "M9.33 3.33C9.33 2.6 8.74 2 8 2C7.27 2 6.67 2.6 6.67 3.33C6.67 4.06 7.27 4.66 8 4.66C8.73 4.66 9.33 4.06 9.33 3.33ZM4.67 3.33C4.67 1.49 6.16 0 8 0C9.84 0 11.33 1.49 11.33 3.33C11.33 5.17 9.84 6.66 8 6.66C6.16 6.66 4.67 5.17 4.67 3.33ZM13.66 14C12.83 11.67 10.61 10 8 10C5.39 10 3.17 11.67 2.34 14H13.66ZM0 16C0 11.6 3.6 8 8 8C12.4 8 16 11.6 16 16H0Z", fill: "currentColor", fillRule: "evenodd" }))); };

package/dist/esm/providers/icons/index.js

@@ -0,0 +1,38 @@
+export * from './ArrowDown';
+export * from './ArrowLeft';
+export * from './ArrowRight';
+export * from './ArrowUp';
+export * from './CaretDown';
+export * from './CaretLeft';
+export * from './CaretRight';
+export * from './CaretUp';
+export * from './Check';
+export * from './ChevronDown';
+export * from './ChevronLeft';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeftSmallFirst';
+export * from './ChevronRight';
+export * from './ChevronRightSmall';
+export * from './ChevronRightSmallLast';
+export * from './ChevronUp';
+export * from './Cross';
+export * from './Dollar';
+export * from './Download';
+export * from './Electricity';
+export * from './Euro';
+export * from './Gas';
+export * from './Help';
+export * from './Hide';
+export * from './Home';
+export * from './Info';
+export * from './Link';
+export * from './Logo';
+export * from './Minus';
+export * from './NewWindow';
+export * from './PaymentCard';
+export * from './Plus';
+export * from './Pound';
+export * from './Search';
+export * from './Show';
+export * from './Chart';
+export * from './User';

package/dist/esm/providers/index.js

@@ -0,0 +1,2 @@
+export * from './IconsProvider';
+export * from './types';

package/dist/esm/providers/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/styled.native.js

@@ -0,0 +1,4 @@
+import * as styledComponents from 'styled-components/native';
+var _a = styledComponents, styled = _a.default, css = _a.css, ThemeProvider = _a.ThemeProvider, ThemeContext = _a.ThemeContext, useTheme = _a.useTheme;
+export { css, ThemeProvider, ThemeContext, useTheme };
+export default styled;

package/dist/esm/theme/create-theme.js

@@ -0,0 +1,503 @@
+import deepMerge from 'deepmerge';
+var brand = {
+    focus: { base: '#3F64E6' },
+    primary: {
+        muted: '#E7F3EA',
+        lightest: '#B6D727',
+        lighter: '#9DC431',
+        light: '#6CBD27',
+        base: '#0D8426',
+        dark: '#0D8426',
+        darker: '#006945',
+    },
+    grey: {
+        lightest: '#FFFFFF',
+        lighter: '#F9F9F9',
+        light: '#F3F3F3',
+        base: '#D1D6DE',
+        dark: '#666D78',
+        darker: '#2F3749',
+        darkest: '#111111',
+    },
+    mission: {
+        base: '#DE1D8D',
+        dark: '#C6187D',
+    },
+    complementary: {
+        base: '#197278',
+    },
+    electricity: {
+        base: '#E7A234',
+        dark: '#D1760A',
+    },
+    gas: {
+        base: '#26ADE4',
+        dark: '#3F64E6',
+    },
+    error: {
+        lightest: '#FAE8EC',
+        base: '#C7153E',
+        dark: '#8C0A28',
+    },
+};
+export var defaultTokens = {
+    borderWidths: {
+        standard: '1px',
+        heavy: '2px',
+        heavier: '4px',
+    },
+    radii: {
+        small: '4px',
+        medium: '8px',
+        large: '12px',
+    },
+    shadows: {
+        standard: {
+            color: '#000',
+            offset: '1px',
+            opacity: 0.15,
+            radius: '4px',
+            elevation: 3,
+        },
+    },
+    breakpoints: { small: 576, medium: 768, large: 1200 },
+    space: {
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '20px',
+        6: '24px',
+        7: '28px',
+        8: '32px',
+        9: '36px',
+        10: '40px',
+        11: '44px',
+        12: '48px',
+    },
+    fonts: {
+        body: 'OVOCircularTT-Book',
+        bold: 'OVOCircularTT-Bold',
+        heading: 'OVOCircularTT-Black',
+    },
+    lineHeights: {
+        standard: 1.5,
+    },
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '28px', '32px', '48px'],
+    fontWeights: {
+        normal: 400,
+        bold: 700,
+        semiBold: 600,
+        heading: 900,
+    },
+    colors: {
+        primary: brand.primary.base,
+        primaryAlt: brand.primary.darker,
+        primaryContrast: '#FFFFFF',
+        primaryMuted: brand.primary.muted,
+        error: '#C7153E',
+        errorAlt: '#8C0A28',
+        errorContrast: '#FFFFFF',
+        errorMuted: '#FAE8EC',
+        focus: '#3F64E6',
+        focusMuted: '#C6D1F8',
+        canvas: '#FFFFFF',
+        body: brand.grey.darker,
+        heading: brand.grey.darker,
+        border: brand.grey.dark,
+        canvasMuted: '#F0F2F5',
+        borderMuted: brand.grey.base,
+        info: '#3F64E6',
+        infoAlt: '#004CA0',
+        infoContrast: '#FFFFFF',
+        infoMuted: '#ECF0FD',
+        warning: '#BE5409',
+        warningAlt: '#8A3C05',
+        warningContrast: '#FFFFFF',
+        warningMuted: '#F7F0E7',
+        success: brand.primary.base,
+        successAlt: brand.primary.darker,
+        successContrast: '#FFFFFF',
+        successMuted: brand.primary.muted,
+        mission: '#DE1D8D',
+        missionMuted: '#FDF4F9',
+        missionAlt: '#C6187D',
+        missionContrast: '#FFFFFF',
+        brand: brand,
+    },
+    responsiveFontSizes: {
+        label: ['11px', '14px'],
+        small: ['14px', '14px'],
+        body: ['16px', '16px'],
+        level1: ['28px', '48px'],
+        level2: ['24px', '32px'],
+        level3: ['20px', '28px'],
+        level4: ['16px', '22px'],
+        lead: ['18px', '22px'],
+    },
+    responsiveLineHeights: {
+        label: ['20px', '20px'],
+        small: ['20px', '20px'],
+        body: ['24px', '24px'],
+        level1: ['36px', '52px'],
+        level2: ['32px', '40px'],
+        level3: ['24px', '36px'],
+        level4: ['20px', '28px'],
+        lead: ['24px', '28px'],
+    },
+};
+export function createTheme(customTheme, additional) {
+    var mergeOptions = { arrayMerge: function (_, source) { return source; } };
+    var customThemeWithAdditional = deepMerge(customTheme, additional || {}, mergeOptions);
+    var theme = deepMerge(defaultTokens, customThemeWithAdditional, mergeOptions);
+    var fontSizes = theme.fontSizes, breakpoints = theme.breakpoints, colors = theme.colors, fontWeights = theme.fontWeights, fonts = theme.fonts, lineHeights = theme.lineHeights, space = theme.space, radii = theme.radii, shadows = theme.shadows, borderWidths = theme.borderWidths, responsiveFontSizes = theme.responsiveFontSizes, responsiveLineHeights = theme.responsiveLineHeights;
+    return deepMerge({
+        field: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            lineHeight: lineHeights.standard,
+            dateWidth: '265px',
+            gap: space[2],
+            error: {
+                color: colors.error,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+            },
+            hint: {
+                fontWeight: fontWeights.normal,
+                color: colors.border,
+            },
+            label: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+            },
+            subLabel: {
+                color: colors.border,
+                fontWeight: fontWeights.normal,
+            },
+            legend: {
+                marginBottom: space[1],
+            },
+            errorIndent: {
+                borderWidth: space[1],
+                borderRadius: radii.small,
+            },
+        },
+        focusRing: {
+            color: colors.focus,
+            width: borderWidths.heavy,
+            distance: borderWidths.heavy,
+        },
+        input: {
+            fontFamily: fonts.body,
+            fontSize: responsiveFontSizes.body,
+            color: colors.body,
+            lineHeight: lineHeights.standard,
+            fontWeight: fontWeights.normal,
+            height: space[11],
+            borderColor: colors.border,
+            borderWidth: borderWidths.standard,
+            background: colors.canvas,
+            padding: space[2],
+            borderRadius: radii.small,
+            error: {
+                borderWidth: borderWidths.heavy,
+                color: colors.error,
+            },
+            icon: {
+                size: space[4],
+            },
+        },
+        card: {
+            background: colors.canvas,
+            borderWidth: borderWidths.standard,
+            borderColor: colors.borderMuted,
+            padding: [space[3], space[6], space[9]],
+        },
+        badge: {
+            fontWeight: fontWeights.bold,
+            fontFamily: fonts.bold,
+            lineHeight: lineHeights.standard,
+            paddingHorizontal: space[2],
+            borderRadius: radii.small,
+            fontSize: responsiveFontSizes.body,
+            variants: {
+                default: {
+                    background: colors.primaryMuted,
+                    foreground: colors.primaryAlt,
+                },
+                error: {
+                    background: colors.errorMuted,
+                    foreground: colors.errorAlt,
+                },
+                success: {
+                    background: colors.successMuted,
+                    foreground: colors.successAlt,
+                },
+                info: {
+                    background: colors.infoMuted,
+                    foreground: colors.infoAlt,
+                },
+                warning: {
+                    background: colors.warningMuted,
+                    foreground: colors.warningAlt,
+                },
+            },
+        },
+        cta: {
+            fontSize: responsiveFontSizes.body,
+            fontWeight: fontWeights.bold,
+            fontFamily: fonts.bold,
+            lineHeight: lineHeights.standard,
+            paddingVertical: space[2],
+            paddingHorizontal: space[3],
+            borderRadius: radii.small,
+            borderWidth: borderWidths.standard,
+            iconGap: space[1],
+            minHeight: space[11],
+            variants: {
+                primary: {
+                    background: colors.primary,
+                    foreground: colors.primaryContrast,
+                    border: colors.primary,
+                },
+                secondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
+                destructive: {
+                    background: colors.error,
+                    foreground: colors.errorContrast,
+                    border: colors.error,
+                },
+                missionPrimary: {
+                    background: colors.mission,
+                    foreground: colors.missionContrast,
+                    border: colors.mission,
+                },
+                missionSecondary: {
+                    background: colors.primaryContrast,
+                    foreground: colors.primary,
+                    border: colors.primary,
+                },
+            },
+        },
+        checkbox: {
+            touchSize: space[11],
+            size: space[6],
+            checkSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            borderRadius: radii.small,
+            background: colors.canvas,
+            checkedBackground: colors.infoMuted,
+            checkColor: colors.info,
+            errorColor: colors.error,
+        },
+        notification: {
+            borderRadius: radii.small,
+            borderWidth: borderWidths.heavy,
+            borderColor: colors.error,
+            background: colors.errorMuted,
+            paddingX: [space[2], space[2]],
+            paddingY: [space[3], space[6]],
+            dismiss: {
+                touchSize: space[6],
+                size: space[4],
+                icon: 'cross',
+            },
+            variants: {
+                error: {
+                    borderColor: colors.errorMuted,
+                    background: colors.errorMuted,
+                    textColor: colors.errorAlt,
+                },
+                success: {
+                    borderColor: colors.successMuted,
+                    background: colors.successMuted,
+                    textColor: colors.successAlt,
+                },
+                info: {
+                    borderColor: colors.infoMuted,
+                    background: colors.infoMuted,
+                    textColor: colors.infoAlt,
+                },
+                warning: {
+                    borderColor: colors.warningMuted,
+                    background: colors.warningMuted,
+                    textColor: colors.warningAlt,
+                },
+            },
+        },
+        text: {
+            fontFamily: fonts.body,
+            fontWeight: fontWeights.normal,
+            lineHeight: 1,
+            color: colors.body,
+            p: {
+                fontSize: responsiveFontSizes.body,
+                lineHeight: responsiveLineHeights.body,
+                marginTop: [space[3], space[3]],
+                marginBottom: [space[3], space[3]],
+            },
+            small: {
+                fontSize: responsiveFontSizes.small,
+                lineHeight: responsiveLineHeights.small,
+            },
+            strong: {
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+            },
+        },
+        list: {
+            marginTop: [space[2], space[3]],
+            marginBottom: [space[2], space[3]],
+            marginLeft: space[6],
+            listItem: {
+                fontSize: responsiveFontSizes.body,
+                marginVertical: 2,
+                bulletGap: space[2],
+                bulletWidth: space[2],
+            },
+            descriptionTerm: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[1], space[1]],
+            },
+        },
+        textLink: {
+            color: colors.primary,
+            fontWeight: fontWeights.normal,
+        },
+        heading: {
+            fontFamily: fonts.heading,
+            fontWeight: fontWeights.heading,
+            color: colors.heading,
+            heading1: {
+                fontSize: responsiveFontSizes.level1,
+                lineHeight: responsiveLineHeights.level1,
+                marginTop: [space[8], space[12]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading2: {
+                fontSize: responsiveFontSizes.level2,
+                lineHeight: responsiveLineHeights.level2,
+                marginTop: [space[6], space[8]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading3: {
+                fontSize: responsiveFontSizes.level3,
+                lineHeight: responsiveLineHeights.level3,
+                marginTop: [space[4], space[6]],
+                marginBottom: [space[3], space[4]],
+            },
+            heading4: {
+                fontSize: responsiveFontSizes.level4,
+                lineHeight: responsiveLineHeights.level4,
+                marginTop: [space[3], space[4]],
+                marginBottom: [space[3], space[4]],
+            },
+        },
+        shadows: shadows,
+        radii: radii,
+        radio: {
+            touchSize: space[11],
+            size: space[8],
+            dotSize: space[5],
+            gap: space[2],
+            paddingTop: space[3],
+            borderWidth: borderWidths.standard,
+            borderColor: colors.border,
+            background: colors.canvas,
+            dotColor: colors.info,
+            checkedBackground: colors.infoMuted,
+            errorColor: colors.error,
+        },
+        fontWeights: fontWeights,
+        fontSizes: fontSizes,
+        fonts: fonts,
+        responsiveFontSizes: responsiveFontSizes,
+        responsiveLineHeights: responsiveLineHeights,
+        colors: colors,
+        borderWidths: borderWidths,
+        breakpoints: breakpoints,
+        lineHeights: lineHeights,
+        space: space,
+        grid: {
+            maxWidth: breakpoints.large + 'px',
+            gutter: [space[4], space[8]],
+        },
+        disclosure: {
+            iconGap: [space[1], space[2]],
+            panelGap: [space[2], space[3]],
+        },
+        dataTable: {
+            borderWidth: borderWidths.standard,
+            borderRadius: radii.small,
+            borderColor: colors.canvasMuted,
+            responsivePadding: {
+                vertical: [space[2], space[3]],
+                horizontal: [space[1], space[1]],
+            },
+            tableHeader: {
+                color: colors.heading,
+                backgroundColor: colors.canvas,
+                borderWidth: borderWidths.standard,
+                borderColor: colors.border,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+            },
+            tableCaption: {
+                color: colors.heading,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+            },
+            tableCell: {
+                color: colors.body,
+            },
+            tableRow: {
+                backgroundColor: colors.canvas,
+                stripeColor: colors.canvasMuted,
+            },
+        },
+        accordion: {
+            header: {
+                color: colors.primary,
+                paddingVertical: [space[3], space[5]],
+                iconSize: space[4],
+                iconGap: space[3],
+            },
+        },
+        tabs: {
+            tab: {
+                borderTopWidth: borderWidths.heavy,
+                borderBottomWidth: borderWidths.heavy,
+                borderColor: colors.canvas,
+                fontSize: responsiveFontSizes.body,
+                fontWeight: fontWeights.bold,
+                fontFamily: fonts.bold,
+                lineHeight: lineHeights.standard,
+                paddingHorizontal: [space[4], space[4]],
+                paddingVertical: [space[3], space[3]],
+                active: {
+                    borderColor: colors.primary,
+                    foregroundColor: colors.primary,
+                    backgroundColor: colors.canvas,
+                },
+                inactive: {
+                    foregroundColor: colors.heading,
+                    backgroundColor: colors.canvas,
+                },
+                hover: {
+                    foregroundColor: colors.primaryAlt,
+                },
+            },
+        },
+    }, theme, mergeOptions);
+}

package/dist/esm/theme/index.js

@@ -0,0 +1,8 @@
+import { pxToNumber } from '../utils';
+import { createTheme } from './create-theme';
+export * from './theme';
+export * from './create-theme';
+export var theme = createTheme({});
+export var calculateLineHeight = function (size, lineHeight) {
+    return pxToNumber(size) * (lineHeight || 1) + 'px';
+};

package/dist/esm/theme/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/index.js

@@ -0,0 +1 @@
+export * from './utils';