@ovotech/element-native 2.1.0 → 2.2.0-canary-ea79e4d-74

package/dist/components/Input/PasswordInput.styled.d.ts

@@ -1,4 +1,231 @@
 /// <reference types="react" />
-export declare const StyledPressable: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native/types").PressableProps & import("react").RefAttributes<import("react-native/types").View>>, import("../../theme/theme").Theme, {
+export declare const StyledPressable: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native/types").PressableProps & import("react").RefAttributes<import("react-native/types").View>>, import("../../theme/theme").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 | 6 | 7 | 8 | 9 | 10 | 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<"heading" | "body" | "mono" | "bodyBold", {
+            native: string;
+            web: string;
+        }>;
+        fontWeight: Record<"bold" | "book" | "black", string | number>;
+        fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+            small: string | number;
+            large: string | number;
+        }>;
+        letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+    };
+    semantic: {
+        surface: Record<"base" | "cutout" | "elevated", string>;
+        message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+        border: Record<"graphic" | "differentiated" | "functional", string>;
+        focus: Record<"surface" | "outline" | "hover", string>;
+        inverted: Record<"border" | "surface", 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<"gas" | "branded" | "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: {
+                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;
+                };
+            };
+        };
+    };
+}, {
     focused: boolean;
 }, never>;

package/dist/components/Input/PasswordInput.styled.js

@@ -30,11 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledPressable = void 0;
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
-var utils_1 = require("../../utils");
 exports.StyledPressable = (0, styled_native_1.default)(react_native_1.Pressable)(function (_a) {
-    var _b = _a.theme, input = _b.input, focusRing = _b.focusRing, focused = _a.focused;
-    var distance = ((0, utils_1.pxToNumber)(input.height) - (0, utils_1.pxToNumber)(input.icon.size)) / 2 +
-        (focused ? (0, utils_1.pxToNumber)(focusRing.distance) : 0);
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", "px;\n      right: ", "px;\n    "])), input.icon.size, distance, distance);
+    var core = _a.theme.core, focused = _a.focused;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      position: absolute;\n      width: ", ";\n      z-index: 1;\n      top: ", ";\n      right: ", ";\n    "])), core.space[4], focused ? '16px' : '14px', core.space[3]);
 });
 var templateObject_1;

package/dist/components/Input/PasswordVisibilityToggle.js

@@ -25,8 +25,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordVisibilityToggle = exports.useTogglePasswordVisibility = void 0;
 var react_1 = __importStar(require("react"));
-var styled_native_1 = require("../../styled.native");
-var utils_1 = require("../../utils");
 var Icon_1 = require("../Icon");
 var PasswordInput_styled_1 = require("./PasswordInput.styled");
 var useTogglePasswordVisibility = function () {
@@ -42,13 +40,12 @@ var useTogglePasswordVisibility = function () {
 exports.useTogglePasswordVisibility = useTogglePasswordVisibility;
 var PasswordVisibilityToggle = function (_a) {
     var iconName = _a.iconName, visibilityToggleLabel = _a.visibilityToggleLabel, handlePasswordVisibility = _a.handlePasswordVisibility;
-    var input = (0, react_1.useContext)(styled_native_1.ThemeContext).input;
     var _b = (0, react_1.useState)(false), focused = _b[0], setFocused = _b[1];
-    return (react_1.default.createElement(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: (0, utils_1.pxToNumber)(input.icon.size), onFocus: function () {
+    return (react_1.default.createElement(PasswordInput_styled_1.StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: function () {
             setFocused(true);
         }, onBlur: function () {
             setFocused(false);
         } },
-        react_1.default.createElement(Icon_1.Icon, { name: iconName, size: (0, utils_1.pxToNumber)(input.icon.size), pointerEvents: "none" })));
+        react_1.default.createElement(Icon_1.Icon, { name: iconName, size: 16, pointerEvents: "none" })));
 };
 exports.PasswordVisibilityToggle = PasswordVisibilityToggle;

package/dist/components/Input/{TelInput.d.ts → PhoneInput.d.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-declare const TelInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
+declare const PhoneInput: React.ForwardRefExoticComponent<import("react-native/types").TextInputProps & {
     invalid?: boolean | undefined;
     stretch?: boolean | undefined;
     iconLeft?: (string & {}) | import("../../providers").IconName | undefined;
     iconRight?: (string & {}) | import("../../providers").IconName | undefined;
     rightSlot?: React.ReactNode;
 } & React.RefAttributes<TextInput>>;
-export { TelInput };
+export { PhoneInput };

package/dist/components/Input/{TelInput.js → PhoneInput.js}

@@ -34,8 +34,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelInput = void 0;
+exports.PhoneInput = void 0;
 var react_1 = __importStar(require("react"));
 var Input_1 = require("./Input");
-var TelInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
-exports.TelInput = TelInput;
+var PhoneInput = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(Input_1.Input, __assign({}, props, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ref: ref }))); });
+exports.PhoneInput = PhoneInput;

package/dist/components/Input/TextareaInput.js

@@ -1,4 +1,8 @@
 "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++) {
@@ -47,18 +51,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextareaInput = void 0;
 var react_1 = __importStar(require("react"));
-var hooks_1 = require("../../hooks");
-var styled_native_1 = require("../../styled.native");
-var theme_1 = require("../../theme");
+var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var Input_1 = require("./Input");
+var StyledInput = (0, styled_native_1.default)(Input_1.Input)(function (_a) {
+    var core = _a.theme.core, rows = _a.rows;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "], ["\n    padding: ", " ", " ", " ", ";\n    height: ", "px;\n  "])), core.space[3], core.space[2], core.space[2], core.space[2], (0, utils_1.pxToNumber)(core.space[8]) * rows);
+});
 var TextareaInput = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.rows, rows = _b === void 0 ? 3 : _b, rest = __rest(_a, ["rows"]);
-    var input = (0, styled_native_1.useTheme)().input;
-    var smallAndUp = (0, hooks_1.useBreakpoint)().smallAndUp;
-    var height = (0, utils_1.pxToNumber)(input.padding) * 2 +
-        (0, utils_1.pxToNumber)((0, theme_1.calculateLineHeight)(smallAndUp ? input.fontSize[1] : input.fontSize[0], input.lineHeight)) *
-            rows;
-    return (react_1.default.createElement(Input_1.Input, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", style: { height: height }, ref: ref })));
+    return (react_1.default.createElement(StyledInput, __assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 });
 exports.TextareaInput = TextareaInput;
+var templateObject_1;

package/dist/components/Input/index.d.ts

@@ -1,7 +1,7 @@
 export { CurrencyInput } from './CurrencyInput';
 export { EmailInput } from './EmailInput';
 export { NumberInput } from './NumberInput';
-export { TelInput } from './TelInput';
+export { PhoneInput } from './PhoneInput';
 export { TextInput } from './TextInput';
 export { PasswordInput } from './PasswordInput';
 export { TextareaInput } from './TextareaInput';

package/dist/components/Input/index.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextareaInput = exports.PasswordInput = exports.TextInput = exports.TelInput = exports.NumberInput = exports.EmailInput = exports.CurrencyInput = void 0;
+exports.TextareaInput = exports.PasswordInput = exports.TextInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.CurrencyInput = void 0;
 var CurrencyInput_1 = require("./CurrencyInput");
 Object.defineProperty(exports, "CurrencyInput", { enumerable: true, get: function () { return CurrencyInput_1.CurrencyInput; } });
 var EmailInput_1 = require("./EmailInput");
 Object.defineProperty(exports, "EmailInput", { enumerable: true, get: function () { return EmailInput_1.EmailInput; } });
 var NumberInput_1 = require("./NumberInput");
 Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
-var TelInput_1 = require("./TelInput");
-Object.defineProperty(exports, "TelInput", { enumerable: true, get: function () { return TelInput_1.TelInput; } });
+var PhoneInput_1 = require("./PhoneInput");
+Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
 var TextInput_1 = require("./TextInput");
 Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return TextInput_1.TextInput; } });
 var PasswordInput_1 = require("./PasswordInput");

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

@@ -5,7 +5,234 @@ declare const LabelText: import("react").ForwardRefExoticComponent<Pick<Omit<{
     [x: number]: any;
     [x: symbol]: any;
 } & {
-    theme?: import("../../theme/theme").Theme | undefined;
+    theme?: (import("../../theme/theme").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 | 6 | 7 | 8 | 9 | 10 | 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<"heading" | "body" | "mono" | "bodyBold", {
+                native: string;
+                web: string;
+            }>;
+            fontWeight: Record<"bold" | "book" | "black", string | number>;
+            fontSize: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+                small: string | number;
+                large: string | number;
+            }>;
+            lineHeight: Record<"small" | "body" | "label" | "lead" | "heading1" | "heading2" | "heading3" | "heading4", {
+                small: string | number;
+                large: string | number;
+            }>;
+            letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
+        };
+        semantic: {
+            surface: Record<"base" | "cutout" | "elevated", string>;
+            message: Record<"base" | "link" | "error" | "secondary" | "branded", string>;
+            border: Record<"graphic" | "differentiated" | "functional", string>;
+            focus: Record<"surface" | "outline" | "hover", string>;
+            inverted: Record<"border" | "surface", 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<"gas" | "branded" | "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: {
+                    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;

package/dist/components/LabelText/LabelText.js

@@ -34,7 +34,7 @@ var utils_1 = require("../../utils");
 var StyledLabelText = styled_native_1.default.Text(function (_a) {
     var field = _a.theme.field, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp ? field.fontSize[1] : field.fontSize[0];
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.label.fontWeight, field.label.color, fontSize);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "], ["\n      font-family: ", ";\n      line-height: ", ";\n      color: ", ";\n      font-size: ", ";\n    "])), field.label.fontFamily, (0, theme_1.calculateLineHeight)(fontSize, field.lineHeight), field.label.color, fontSize);
 });
 var LabelText = (0, utils_1.styledComponentWithBreakpoints)(StyledLabelText);
 exports.LabelText = LabelText;