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

package/dist/components/Heading3/Heading3.js

@@ -58,9 +58,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
 };
 var StyledHeading3 = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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);
 });
 var Heading3 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/components/Heading4/Heading4.d.ts

@@ -1,3 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { TextProps } from 'react-native';
-export declare const Heading4: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps>) => JSX.Element;
+export declare const Heading4: ({ accessibilityRole, ...rest }: PropsWithChildren<TextProps & {
+    inverted?: boolean;
+}>) => JSX.Element;

package/dist/components/Heading4/Heading4.js

@@ -58,9 +58,11 @@ var calculateLetterSpacing = function (fontSize, letterSpacing) {
     return (0, utils_1.numToPx)((0, utils_1.pxToNumber)(fontSize) * letterSpacing);
 };
 var StyledHeading4 = styled_native_1.default.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 (0, styled_native_1.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 (0, styled_native_1.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);
 });
 var Heading4 = function (_a) {
     var _b = _a.accessibilityRole, accessibilityRole = _b === void 0 ? 'header' : _b, rest = __rest(_a, ["accessibilityRole"]);

package/dist/components/HintText/HintText.d.ts

@@ -11,6 +11,7 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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>;
@@ -42,12 +43,20 @@ declare const HintText: import("react").ForwardRefExoticComponent<Pick<Omit<{
         };
         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/components/HorizontalCarousel/HorizontalCarousel.d.ts

@@ -0,0 +1,13 @@
+interface HorizontalCarouselProps<T> {
+    data: T[];
+    children: (item: T) => JSX.Element;
+    width?: number;
+    height: number;
+    fullWidth?: boolean;
+    showArrows?: boolean;
+    showDots?: boolean;
+    loop?: boolean;
+    arrowsDistanceFromTop?: number;
+}
+export declare function HorizontalCarousel<T>({ data, children, width, height, fullWidth, showArrows, showDots, loop, arrowsDistanceFromTop, }: HorizontalCarouselProps<T>): JSX.Element;
+export {};

package/dist/components/HorizontalCarousel/HorizontalCarousel.js

@@ -0,0 +1,92 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalCarousel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_reanimated_1 = require("react-native-reanimated");
+var react_native_reanimated_carousel_1 = __importDefault(require("react-native-reanimated-carousel"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+var Icon_1 = require("../Icon");
+var NavigationDots_1 = require("./NavigationDots");
+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 = (0, styled_native_1.useTheme)();
+    var carouselRef = (0, react_1.useRef)(null);
+    var progressValue = (0, react_native_reanimated_1.useSharedValue)(0);
+    var windowWidth = (0, react_native_1.useWindowDimensions)().width;
+    var carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return ((0, jsx_runtime_1.jsxs)(SCarouselContainer, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_carousel_1.default, { ref: carouselRef, data: data, renderItem: function (_a) {
+                    var item = _a.item;
+                    return ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-left", size: 16, color: theme.core.color.brand.white }) })), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: 16, color: theme.core.color.brand.white }) }))] })), showDots && data.length > 1 && ((0, jsx_runtime_1.jsx)(NavigationDots_1.NavigationDots, { data: data, animatedValue: progressValue }))] }));
+}
+exports.HorizontalCarousel = HorizontalCarousel;
+var SCarouselContainer = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n"], ["\n  align-items: center;\n"])));
+var SItemContainer = styled_native_1.default.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_native_1.default.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/components/HorizontalCarousel/NavigationDots.d.ts

@@ -0,0 +1,5 @@
+import { SharedValue } from 'react-native-reanimated';
+export declare function NavigationDots<T>({ data, animatedValue, }: {
+    data: T[];
+    animatedValue: SharedValue<number>;
+}): JSX.Element;

package/dist/components/HorizontalCarousel/NavigationDots.js

@@ -0,0 +1,88 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationDots = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var styled_native_1 = __importStar(require("../../styled.native"));
+function NavigationDots(_a) {
+    var data = _a.data, animatedValue = _a.animatedValue;
+    return ((0, jsx_runtime_1.jsx)(SDotsContainer, { children: data.map(function (_, index) { return ((0, jsx_runtime_1.jsx)(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index)); }) }));
+}
+exports.NavigationDots = NavigationDots;
+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 = (0, styled_native_1.useTheme)();
+    var animatedStyle = (0, react_native_reanimated_1.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 = (0, react_native_reanimated_1.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: (0, react_native_reanimated_1.interpolate)(animatedValue === null || animatedValue === void 0 ? void 0 : animatedValue.value, inputRange, outputRange, react_native_reanimated_1.Extrapolate.CLAMP),
+                },
+            ],
+            backgroundColor: backgroundColor,
+        };
+    }, [animatedValue, index, length]);
+    return ((0, jsx_runtime_1.jsx)(SDot, __assign({ "$width": width }, { children: (0, jsx_runtime_1.jsx)(SAnimatedDot, { style: animatedStyle }) })));
+};
+var SDotsContainer = styled_native_1.default.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_native_1.default.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 = (0, styled_native_1.default)(react_native_reanimated_1.default.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/components/HorizontalCarousel/index.d.ts

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

package/dist/components/HorizontalCarousel/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HorizontalCarousel"), exports);

package/dist/components/Label/Label.d.ts

@@ -1,243 +1,7 @@
 /// <reference types="react" />
-import { Text } from 'react-native';
-export declare const Label: import("react").ForwardRefExoticComponent<Pick<Omit<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
+import { TextProps } from 'react-native';
+export declare const Label: import("react").ForwardRefExoticComponent<TextProps & {
+    inverted?: boolean | undefined;
 } & {
-    theme?: {
-        core: {
-            radius: Record<"small" | "medium" | "large" | "max", string>;
-            borderWidth: Record<"small" | "medium" | "large", string>;
-            breakpoint: Record<"small" | "medium" | "large", string | number>;
-            mediaQuery: Record<"small" | "medium" | "large", 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>;
-            color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
-                lightest: string;
-                lighter: string;
-                light: string;
-                base: string;
-                dark: string;
-                darker: string;
-                darkest: string;
-            }> & {
-                brand: Record<string, string>;
-            };
-            fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
-                native: string;
-                web: string;
-            }>;
-            fontWeight: Record<"bold" | "book" | "black", string | number>;
-            fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
-                small: string | number;
-                large: string | number;
-            }>;
-            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
-        };
-        semantic: {
-            surface: Record<"base" | "cutout" | "elevated", string>;
-            message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
-            border: Record<"graphic" | "differentiated" | "functional", string>;
-            focus: Record<"surface" | "outline" | "hover", string>;
-            inverted: Record<"surface" | "border", string> & {
-                message: Record<"base" | "link" | "secondary" | "branded", string>;
-            };
-            success: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            warning: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            error: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            info: {
-                border: string;
-                surface: string;
-                surfaceEmphasis: string;
-                message: string;
-                messageOnEmphasis: string;
-            };
-            data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
-        };
-        component: {
-            heading1: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading2: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading3: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            heading4: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            lead: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            body: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            small: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            label: {
-                fontFamily: string;
-                fontWeight: string | number;
-                fontSize: {
-                    small: string | number;
-                    large: string | number;
-                };
-                lineHeight: {
-                    small: string | number;
-                    large: string | number;
-                };
-            };
-            cta: {
-                primary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                secondary: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-                destructive: {
-                    message: string;
-                    surface: string;
-                    messageHover: string;
-                    surfaceHover: string;
-                    messageFocused: string;
-                    surfaceFocused: string;
-                    outlineFocused: string;
-                    backgroundFocused: string;
-                };
-            };
-            badge: {
-                variants: {
-                    neutral: {
-                        foreground: string;
-                        background: string;
-                    };
-                    red: {
-                        foreground: string;
-                        background: string;
-                    };
-                    orange: {
-                        foreground: string;
-                        background: string;
-                    };
-                    yellow: {
-                        foreground: string;
-                        background: string;
-                    };
-                    green: {
-                        foreground: string;
-                        background: string;
-                    };
-                    blue: {
-                        foreground: string;
-                        background: string;
-                    };
-                };
-            };
-        };
-    } | undefined;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<Text>>;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>;

package/dist/components/Label/Label.js

@@ -3,6 +3,17 @@ 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);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -28,11 +39,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 var StyledLabel = styled_native_1.default.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.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 (0, styled_native_1.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);
 });
-exports.Label = (0, utils_1.styledComponentWithBreakpoints)(StyledLabel);
+exports.Label = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(StyledLabel, __assign({}, props, { ref: ref }))); });
 var templateObject_1;

package/dist/components/LabelText/LabelText.d.ts

@@ -11,6 +11,7 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
             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>;
@@ -42,12 +43,20 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
         };
         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;