@ovotech/element-native 3.7.0 → 3.8.0-canary-9bfdab2-202

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

@@ -6,6 +6,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -37,12 +38,20 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -241,6 +250,7 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -272,12 +282,20 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -475,6 +493,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -506,12 +525,20 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;
@@ -709,6 +736,7 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
         borderWidth: Record<"small" | "medium" | "large", string>;
         breakpoint: Record<"small" | "medium" | "large", string | number>;
         mediaQuery: Record<"small" | "medium" | "large", string>;
+        customMediaQuery: Record<"small-and-up" | "medium-and-up" | "large-and-up", string>;
         space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
         transition: Record<"medium" | "slow" | "fast", string>;
         opacity: Record<"solid" | "transparent" | "translucent", string | number>;
@@ -740,12 +768,20 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
     };
     semantic: {
         surface: Record<"base" | "cutout" | "elevated", string>;
-        message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
+        message: Record<"base" | "link" | "secondary" | "branded" | "error", string>;
+        branded: Record<"message" | "heading" | "surface", string>;
         border: Record<"graphic" | "differentiated" | "functional", string>;
         focus: Record<"surface" | "outline" | "hover", string>;
-        inverted: Record<"surface" | "border", string> & {
+        inverted: Record<"surface" | "surfaceAlt" | "border" | "borderAlt", string> & {
             message: Record<"base" | "link" | "secondary" | "branded", string>;
         };
+        neutral: {
+            border: string;
+            surface: string;
+            surfaceEmphasis: string;
+            message: string;
+            messageOnEmphasis: string;
+        };
         success: {
             border: string;
             surface: string;

package/dist/esm/components/ActionCard/ActionCard.js

@@ -46,7 +46,7 @@ export var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, testID: "".concat(testID, "-heading") }, { children: title })), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, __assign({ style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
+                                        } }, { children: _jsx(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, __assign({ top: 2 }, { children: _jsx(Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small" }, { children: buttonTitle })) }))) : (_jsx(Margin, __assign({ top: 4 }, { children: _jsx(CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? (_jsx(MaskedView, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

package/dist/esm/components/ActionList/ActionList.js

@@ -29,13 +29,14 @@ var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
     return (_jsx(StyledActionList, __assign({}, rest, { children: Children.map(children, function (child, index) {
-            var _a;
+            var _a, _b;
             return cloneElement(child, {
                 fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted,
                 inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
             });
         }) })));
 };

package/dist/esm/components/Card/Card.js

@@ -1,7 +1,5 @@
 import styled from '../../styled.native';
 export var Card = styled.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c;
-    return "\n      background: ".concat(semantic.surface.elevated, ";\n      border: ").concat(inline
-        ? "".concat(core.borderWidth.small, " solid ").concat(semantic.border.differentiated)
-        : 'none', ";\n      padding: ").concat(core.space[4], ";\n      border-radius: ").concat(core.radius.small, ";\n    ");
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, smallAndUp = _a.smallAndUp;
+    return "\n      background: ".concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(inline ? core.space[smallAndUp ? 6 : 4] : core.space[smallAndUp ? 9 : 6], ";\n      border-radius: ").concat(inline ? core.radius.max : 0, ";\n    ");
 });

package/dist/esm/components/Heading1/Heading1.js

@@ -32,9 +32,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading1 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading1[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading1[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading1 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading2/Heading2.js

@@ -32,9 +32,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading2 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading2[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.heading.native, fontSize, core.lineHeight.heading2[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.extraCompressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading2 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading3/Heading3.js

@@ -32,9 +32,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading3 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading3[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading3[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/Heading4/Heading4.js

@@ -32,9 +32,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return numToPx(pxToNumber(fontSize) * letterSpacing);
 };
 var StyledHeading4 = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
     var fontSize = core.fontSize.heading4[smallAndUp ? 'large' : 'small'];
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), semantic.message.branded);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "], ["\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n    "])), core.fontFamily.bodyBold.native, fontSize, core.lineHeight.heading4[smallAndUp ? 'large' : 'small'], calculateLetterSpacing(fontSize, core.letterSpacing.compressed), inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
 export var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/esm/components/HorizontalCarousel/HorizontalCarousel.js

@@ -0,0 +1,62 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import styled, { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { NavigationDots } from './NavigationDots';
+export function HorizontalCarousel(_a) {
+    var data = _a.data, children = _a.children, width = _a.width, height = _a.height, fullWidth = _a.fullWidth, _b = _a.showArrows, showArrows = _b === void 0 ? true : _b, _c = _a.showDots, showDots = _c === void 0 ? true : _c, _d = _a.loop, loop = _d === void 0 ? true : _d, arrowsDistanceFromTop = _a.arrowsDistanceFromTop;
+    var theme = useTheme();
+    var carouselRef = useRef(null);
+    var progressValue = useSharedValue(0);
+    var windowWidth = useWindowDimensions().width;
+    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return (_jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: function (_a) {
+                    var item = _a.item;
+                    return (_jsx(SItemContainer, __assign({ "$itemWidth": carouselWidth }, { children: children(item) })));
+                }, vertical: false, width: carouselWidth, height: height, onProgressChange: function (_, absoluteProgress) {
+                    return (progressValue.value = absoluteProgress);
+                }, panGestureHandlerProps: {
+                    activeOffsetX: [-20, 20],
+                }, loop: loop, testID: "carousel" }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, __assign({ onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.prev(); }, "$top": arrowsDistanceFromTop, hitSlop: {
+                            top: 32,
+                            bottom: 32,
+                            left: 16,
+                            right: 16,
+                        } }, { children: _jsx(Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), _jsx(SActionPressable, __assign({ "$next": true, onPress: function () { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.next(); }, "$top": arrowsDistanceFromTop, hitSlop: {
+                            top: 32,
+                            bottom: 32,
+                            left: 16,
+                            right: 16,
+                        } }, { children: _jsx(Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] }));
+}
+var SCarouselContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
+var SItemContainer = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", "px;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+    var $itemWidth = _a.$itemWidth;
+    return $itemWidth;
+});
+var SActionPressable = styled.Pressable(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  ", ";\n"], ["\n  position: absolute;\n  top: ", ";\n  ", ";\n"])), function (_a) {
+    var $top = _a.$top;
+    return ($top ? "".concat($top, "px") : '50%');
+}, function (_a) {
+    var theme = _a.theme, $next = _a.$next;
+    return $next ? "right: ".concat(theme.core.space[6]) : "left: ".concat(theme.core.space[6]);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/HorizontalCarousel/NavigationDots.js

@@ -0,0 +1,61 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+export function NavigationDots(_a) {
+    var data = _a.data, animatedValue = _a.animatedValue;
+    return (_jsx(SDotsContainer, { children: data.map(function (_, index) { return (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index)); }) }));
+}
+var Dot = function (_a) {
+    var animatedValue = _a.animatedValue, index = _a.index, length = _a.length, _b = _a.width, width = _b === void 0 ? 10 : _b;
+    var theme = useTheme();
+    var animatedStyle = useAnimatedStyle(function () {
+        var inputRange = [index - 1, index, index + 1];
+        var outputRange = [-width, 0, width];
+        if (index === 0 && (animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value) > length - 1) {
+            inputRange = [length - 1, length, length + 1];
+            outputRange = [-width, 0, width];
+        }
+        var backgroundColor = interpolateColor(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, [
+            theme.core.color.brand.forest,
+            theme.core.color.brand.energised,
+            theme.core.color.brand.forest,
+        ]);
+        return {
+            transform: [
+                {
+                    translateX: interpolate(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, Extrapolate.CLAMP),
+                },
+            ],
+            backgroundColor: backgroundColor,
+        };
+    }, [animatedValue, index, length]);
+    return (_jsx(SDot, __assign({ "$width": width }, { children: _jsx(SAnimatedDot, { style: animatedStyle }) })));
+};
+var SDotsContainer = styled.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"], ["\n  position: absolute;\n  bottom: 20px;\n  flex-direction: row;\n  gap: 10px;\n"])));
+var SDot = styled.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50px;\n  overflow: hidden;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.core.color.brand.forest;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $width = _a.$width;
+    return $width;
+});
+var SAnimatedDot = styled(Animated.View)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 20px;\n  flex: 1;\n"], ["\n  border-radius: 20px;\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/esm/components/HorizontalCarousel/index.js

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

package/dist/esm/components/Label/Label.js

@@ -2,11 +2,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLabel = styled.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.label[smallAndUp ? 'large' : 'small'], core.lineHeight.label[smallAndUp ? 'large' : 'small']);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.label[smallAndUp ? 'large' : 'small'], core.lineHeight.label[smallAndUp ? 'large' : 'small'], inverted ? semantic.inverted.message.base : semantic.message.base);
 });
-export var Label = styledComponentWithBreakpoints(StyledLabel);
+export var Label = forwardRef(function (props, ref) { return (_jsx(StyledLabel, __assign({}, props, { ref: ref }))); });
 var templateObject_1;

package/dist/esm/components/Lead/Lead.js

@@ -2,11 +2,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import styled, { css } from '../../styled.native';
-import { styledComponentWithBreakpoints } from '../../utils';
 var StyledLead = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.lead[smallAndUp ? 'large' : 'small'], core.lineHeight.lead[smallAndUp ? 'large' : 'small'], semantic.message.branded);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.lead[smallAndUp ? 'large' : 'small'], core.lineHeight.lead[smallAndUp ? 'large' : 'small'], inverted
+        ? semantic.inverted.message.link
+        : semantic.message.branded);
 });
-export var Lead = styledComponentWithBreakpoints(StyledLead);
+export var Lead = forwardRef(function (props, ref) { return (_jsx(StyledLead, __assign({}, props, { ref: ref }))); });
 var templateObject_1;

package/dist/esm/components/Notification/Notification.js

@@ -30,46 +30,46 @@ import { View } from 'react-native';
 import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 var NotificationBox = styled.View(function (_a) {
-    var core = _a.theme.core, noMargin = _a.noMargin;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "])), core.borderWidth.medium, core.color.brand.white, core.radius.small, noMargin ? 0 : core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : core.space[4], core.borderWidth.small, semantic.surface.elevated, core.radius.max);
 });
 export var NotificationContentBox = styled.View(function (_a) {
-    var core = _a.theme.core;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, core.space[2], core.space[3], core.space[4], core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), semantic.surface.elevated, core.space[2], core.space[3], core.space[4], core.space[4]);
 });
 export var NotificationTitleBox = styled.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
     var currentVariant = semantic[variant];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
 });
 var NotificationTitleText = styled.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
     var currentVariant = semantic[variant];
     return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, currentVariant.message);
 });
-var DismissButton = styled.TouchableOpacity(function () {
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "], ["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "])));
+var DismissButton = styled.TouchableOpacity(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid ", ";\n      border-radius: ", ";\n    "], ["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, core.borderWidth.small, core.color.brand.forest, core.radius.max);
 });
 var StyledIcon = styled(Icon)(function (_a) {
-    var semantic = _a.theme.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), currentVariant.message);
+    var semantic = _a.theme.semantic;
+    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
 });
 export var Notification = forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
     var _c = useState(false), dismissed = _c[0], setDismissed = _c[1];
     if (dismissed || (!title && !children)) {
         return null;
     }
-    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+    return (_jsx(View, __assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [_jsxs(NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [_jsx(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? (_jsx(DismissButton, __assign({ accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();
                                 }
-                            } }, { children: _jsx(StyledIcon, { variant: variant, name: "cross", size: "16" }) }))) : null] })), children ? (_jsx(NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
+                            } }, { children: _jsx(StyledIcon, { name: "cross", size: "16" }) }))) : null] })), children ? (_jsx(NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
 });
 export var ErrorNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "error" }, props)); });
 export var SuccessNotification = forwardRef(function (props, ref) { return (_jsx(Notification, __assign({ ref: ref, variant: "success" }, props))); });
 export var InfoNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "info" }, props)); });
 export var WarningNotification = forwardRef(function (props, ref) { return _jsx(Notification, __assign({ ref: ref, variant: "warning" }, props)); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/esm/components/P/P.js

@@ -18,8 +18,8 @@ import { forwardRef } from 'react';
 import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var StyledP = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], inverted ? semantic.inverted.message.base : semantic.message.base);
 });
 export var P = forwardRef(function (props, ref) {
     var breakpoints = useBreakpoint();

package/dist/esm/components/Tabs/Tab.js

@@ -26,21 +26,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { useBreakpoint, useFullWidth, } from '../../hooks';
+import { useBreakpoint, useFullWidth } from '../../hooks';
 import styled, { css } from '../../styled.native';
 var TabText = styled.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, semantic.message.base, core.space[3], core.space[smallAndUp ? 3 : 2]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, _c = _a.active, active = _c === void 0 ? false : _c;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: center;\n    padding: ", " ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, core.lineHeight.body.small, active ? semantic.focus.outline : semantic.message.base, core.space[3], core.space[2]);
 });
 var TabTouchable = styled.TouchableOpacity(function (_a) {
     var _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.first, first = _c === void 0 ? false : _c, _d = _a.last, last = _d === void 0 ? false : _d, _e = _a.stretch, stretch = _e === void 0 ? false : _e, _f = _a.theme, core = _f.core, semantic = _f.semantic, inline = _a.inline;
     return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    flex-grow: ", ";\n    border: ", " solid ", ";\n    ", "\n    ", "\n    ", "\n    ", "\n  "])), stretch ? 1 : 0, core.borderWidth.small, semantic.border.differentiated, active
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "], ["\n            border-bottom-color: ", ";\n            border-bottom-width: ", ";\n          "])), semantic.message.branded, core.borderWidth.medium) : '', !inline
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "], ["\n            border-top-color: transparent;\n            border-top-width: 0;\n          "]))) : '', last && inline
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "], ["\n          border-bottom-color: ", ";\n          border-bottom-width: ", ";\n        "])), semantic.focus.outline, core.borderWidth.medium) : '', !inline
+        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "], ["\n          border-top-color: transparent;\n          border-top-width: 0;\n        "]))) : '', last && inline
         ? ''
-        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "], ["\n            border-right-color: transparent;\n            border-right-width: 0;\n          "]))), first && inline
+        : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "], ["\n          border-right-color: transparent;\n          border-right-width: 0;\n        "]))), first && inline
         ? ''
-        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "], ["\n            border-left-color: transparent;\n            border-left-width: 0;\n          "]))));
+        : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "], ["\n          border-left-color: transparent;\n          border-left-width: 0;\n        "]))));
 });
 export var Tab = forwardRef(function (_a, ref) {
     var active = _a.active, fullWidth = _a.fullWidth, children = _a.children, rest = __rest(_a, ["active", "fullWidth", "children"]);

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './theme';

package/dist/esm/theme/index.js

@@ -0,0 +1 @@
+export * from '@ovotech/element-core';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './theme';

package/dist/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
 __exportStar(require("./utils"), exports);
+__exportStar(require("./theme"), exports);