@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/HintText/HintText.js

@@ -32,11 +32,13 @@ var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var utils_1 = require("../../utils");
 var StyledHintText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "], ["\n      margin-top: ", ";\n      margin-bottom: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[1]), core.fontFamily.body.native, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[100]), (0, element_core_1.numToPx)(theme.space[100]), theme.native.font.family.book, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm), theme.color.surface.onSurfaceVariant);
 });
 var HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
 exports.HintText = HintText;

package/dist/components/Icon/Icon.d.ts

@@ -1,10 +1,8 @@
-/// <reference types="react" />
 import { SvgProps } from 'react-native-svg';
 import { IconNameExtended } from '../../providers';
-export type IconBase = React.FunctionComponent<SvgProps>;
 export type IconProps = SvgProps & {
     name: IconNameExtended;
     color?: string;
-    size: string | number;
+    size?: string | number;
 };
 export declare const Icon: ({ name, size, color, testID, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Icon/Icon.js

@@ -28,13 +28,11 @@ var react_1 = require("react");
 var providers_1 = require("../../providers");
 var styled_native_1 = require("../../styled.native");
 var Icon = function (_a) {
-    var name = _a.name, size = _a.size, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? '16' : _b, color = _a.color, testID = _a.testID, rest = __rest(_a, ["name", "size", "color", "testID"]);
     var icons = (0, providers_1.useIcons)();
-    var semantic = (0, react_1.useContext)(styled_native_1.ThemeContext).semantic;
+    var theme = (0, react_1.useContext)(styled_native_1.ThemeContext);
     // @ts-ignore to support additional icons.
     var Svg = name && icons[name];
-    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), 
-        // @ts-ignore this is valid.
-        color: color !== null && color !== void 0 ? color : semantic.message.base, width: size, height: size }, rest))) : null;
+    return Svg ? ((0, jsx_runtime_1.jsx)(Svg, __assign({ testID: testID ? testID : "element-icon".concat(name ? "-".concat(name) : ''), color: color !== null && color !== void 0 ? color : theme.color.surface.onSurface, width: size, height: size }, rest))) : null;
 };
 exports.Icon = Icon;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TextInput, TextInputProps } from 'react-native';
-import { IconNameExtended } from '../../providers/types';
+import { IconNameExtended } from '../../providers/icons-types';
 export type InputProps = TextInputProps & {
     invalid?: boolean;
     stretch?: boolean;

package/dist/components/Input/Input.js

@@ -57,8 +57,13 @@ var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon/Icon");
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var core = _a.theme.core, side = _a.side, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), focused ? '16px' : '14px', side === 'left' ? "left: ".concat((0, element_core_1.numToPx)(core.space[2])) : '', side === 'right' ? "right: ".concat((0, element_core_1.numToPx)(core.space[2])) : '');
+    var theme = _a.theme, side = _a.side, focused = _a.focused;
+    var focusCompensation = focused ? theme.space[50] : 0;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "], ["\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    ", ";\n    ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[350] + focusCompensation), side === 'left'
+        ? "left: ".concat((0, element_core_1.numToPx)(theme.space[200] + focusCompensation))
+        : '', side === 'right'
+        ? "right: ".concat((0, element_core_1.numToPx)(theme.space[200] + focusCompensation))
+        : '');
 });
 var Input = (0, react_1.forwardRef)(function (_a, ref) {
     var onFocus = _a.onFocus, onBlur = _a.onBlur, style = _a.style, iconLeft = _a.iconLeft, iconRight = _a.iconRight, rightSlot = _a.rightSlot, rest = __rest(_a, ["onFocus", "onBlur", "style", "iconLeft", "iconRight", "rightSlot"]);
@@ -80,21 +85,21 @@ var Input = (0, react_1.forwardRef)(function (_a, ref) {
 });
 exports.Input = Input;
 var InputWrapper = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, focused = _a.focused;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), (0, element_core_1.numToPx)(core.radius.small), semantic.border.functional, focused
-        ? "\n      border-width: ".concat((0, element_core_1.numToPx)(core.borderWidth.small), ";\n      border-color: ").concat(semantic.focus.outline, ";\n      padding: 2px;\n      margin: -4px;")
+    var theme = _a.theme, focused = _a.focused;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "], ["\n    align-self: stretch;\n    border-radius: ", ";\n    border-width: 0;\n    border-style: solid;\n    border-color: ", ";\n    flex-direction: row;\n\n    ", "\n  "])), (0, element_core_1.numToPx)(theme.border.radius.md), theme.input.color.border, focused
+        ? "\n      border-width: ".concat((0, element_core_1.numToPx)(theme.border.width.md), ";\n      border-color: ").concat(theme.color.outline.outer, ";\n      padding: 2px;\n      margin: -4px;")
         : null);
 });
 var StyledInput = styled_native_1.default.TextInput(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
+    var theme = _a.theme, invalid = _a.invalid, smallAndUp = _a.smallAndUp, iconLeft = _a.iconLeft, iconRight = _a.iconRight, hasRightSlot = _a.hasRightSlot;
     var fontSize = smallAndUp
-        ? core.fontSize.body.large
-        : core.fontSize.body.small;
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
     var errorStyles = invalid
-        ? "\n        border-color: ".concat(semantic.message.error, ";\n      ")
+        ? "\n        border-color: ".concat(theme.color.alert.error, ";\n      ")
         : '';
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "], ["\n      font-family: ", ";\n      color: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: 18px; /* Corrects for responsive line height in fixed height input */\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n      padding: 0 ", ";\n      flex: 1;\n\n      ", "\n      ", "\n\n          ", "\n    "])), core.fontFamily.body.native, semantic.message.base, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(core.space[11]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.functional, (0, element_core_1.numToPx)(core.radius.small), (0, element_core_1.numToPx)(core.space[2]), iconLeft ? "padding-left: ".concat((0, element_core_1.numToPx)(core.space[8]), ";") : '', iconRight || hasRightSlot
-        ? "padding-right: ".concat((0, element_core_1.numToPx)(core.space[8]), ";")
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    height: ", ";\n    line-height: 18px; /* Corrects for responsive line height in fixed height input */\n    border: ", " solid ", ";\n    border-radius: ", ";\n    padding: ", ";\n    flex: 1;\n\n    ", "\n    ", "\n\n          ", "\n  "], ["\n    font-family: ", ";\n    color: ", ";\n    font-size: ", ";\n    height: ", ";\n    line-height: 18px; /* Corrects for responsive line height in fixed height input */\n    border: ", " solid ", ";\n    border-radius: ", ";\n    padding: ", ";\n    flex: 1;\n\n    ", "\n    ", "\n\n          ", "\n  "])), theme.native.font.family.book, theme.color.surface.onSurface, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(theme.space[1100]), (0, element_core_1.numToPx)(theme.border.width.md), theme.input.color.border, (0, element_core_1.numToPx)(theme.border.radius.sm), (0, element_core_1.numToPx)(theme.space[200]), iconLeft ? "padding-left: ".concat((0, element_core_1.numToPx)(theme.space[800]), ";") : '', iconRight || hasRightSlot
+        ? "padding-right: ".concat((0, element_core_1.numToPx)(theme.space[800]), ";")
         : '', errorStyles);
 });
 var templateObject_1, templateObject_2, templateObject_3;