@ovotech/element-native 3.3.2-canary-71b07de-141 → 3.3.2

package/dist/components/SelectField/Select.js

@@ -48,8 +48,7 @@ var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
-var P_1 = require("../P");
-var Strong_1 = require("../Strong");
+var Text_1 = require("../Text");
 var SelectInput = styled_native_1.default.TouchableOpacity(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, hasError = _a.hasError;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "], ["\n      flex-direction: row;\n      align-items: center;\n      background-color: ", ";\n      border-color: ", ";\n      border-width: ", "\n      border-radius: ", ";\n      padding-vertical: ", "\n      padding-left: ", "\n      padding-right: 14px;\n      height: 44px;\n    "])), core.color.brand.white, hasError ? semantic.error.border : semantic.border.functional, core.borderWidth.small, core.radius.small, core.space[2], core.space[2]);
@@ -76,11 +75,11 @@ var RadioDot = styled_native_1.default.View(function (_a) {
     var semantic = _a.theme.semantic, isChecked = _a.isChecked;
     return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "], ["\n    background-color: ", ";\n    position: absolute;\n    top: 5px;\n    width: 12px;\n    height: 12px;\n    border-radius: 12px;\n    align-self: center;\n    opacity: ", ";\n  "])), semantic.focus.outline, isChecked ? 1 : 0);
 });
-var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
+var StyledP = (0, styled_native_1.default)(Text_1.P)(function (_a) {
     var core = _a.theme.core;
     return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n  "])), core.space[3], core.space[3]);
 });
-var StyledCategory = (0, styled_native_1.default)(P_1.P)(function (_a) {
+var StyledCategory = (0, styled_native_1.default)(Text_1.P)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
     return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "], ["\n    font-size: ", ";\n    color: ", "\n    background-color: ", ";\n    padding-horizontal: ", ";\n    padding-vertical: ", ";\n  "])), core.fontSize.label.large, semantic.message.secondary, semantic.surface.cutout, core.space[4], core.space[1]);
 });
@@ -98,7 +97,7 @@ var Select = function (_a) {
         label: "-- ".concat(noOptionMessage, " --"),
         value: 'default',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(P_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: [(0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(SelectInput, __assign({ testID: testID, hasError: hasError, onPress: function () { return setOpen(!isOpen); } }, { children: [(0, jsx_runtime_1.jsx)(Text_1.P, __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: selected.value === 'default' ? '' : selected.label })), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] })), (0, jsx_runtime_1.jsx)(react_native_1.Modal, __assign({ transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, __assign({ nestedScrollEnabled: true }, { children: [(0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", onPress: function () { return handleOptionPress(requiredOption); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: requiredOption.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === requiredOption.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === requiredOption.value }) }))] })), Object.keys(optionsByCategories).map(function (category) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [category !== 'undefined' ? ((0, jsx_runtime_1.jsx)(StyledCategory, { children: category })) : null, optionsByCategories[category].map(function (option, i) { return ((0, jsx_runtime_1.jsxs)(SelectOption, __assign({ accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: function () { return handleOptionPress(option); } }, { children: [(0, jsx_runtime_1.jsx)(StyledP, { children: (0, jsx_runtime_1.jsx)(Text_1.Strong, { children: option.label }) }), (0, jsx_runtime_1.jsx)(Radio, __assign({ isChecked: selected.value === option.value }, { children: (0, jsx_runtime_1.jsx)(RadioDot, { isChecked: selected.value === option.value }) }))] }), option.label)); })] }, category)); })] })) }) }) }))] }));
 };
 exports.Select = Select;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/components/{Em/Em.d.ts → SkeletonLoading/Skeleton.d.ts}

@@ -1,10 +1,10 @@
-export declare const Em: import("styled-components").StyledComponent<typeof import("react-native").Text, {
+export declare const Skeleton: import("styled-components").StyledComponent<typeof import("react-native").View, {
     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>;
+        space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 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", {

package/dist/components/{LineThrough/LineThrough.js → SkeletonLoading/Skeleton.js}

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LineThrough = void 0;
+exports.Skeleton = void 0;
 var styled_native_1 = __importDefault(require("../../styled.native"));
-exports.LineThrough = styled_native_1.default.Text(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: line-through;\n"], ["\n  text-decoration: line-through;\n"])));
+exports.Skeleton = styled_native_1.default.View(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var templateObject_1;

package/dist/components/{SkeletonCTA → SkeletonLoading}/SkeletonCTA.js

@@ -28,14 +28,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonCTA = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var P_1 = require("../P");
-var SkeletonAnimation_1 = require("../SkeletonAnimation");
-var StyledSkeletonCTA = styled_native_1.default.View(function (_a) {
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
+var StyledSkeletonCTA = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n    height: ").concat(core.space[12], ";\n  ");
 });
 var SkeletonCTA = function (_a) {
     var _b = _a.size, size = _b === void 0 ? '250px' : _b, rest = __rest(_a, ["size"]);
-    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: P_1.P, size: size }, rest)) }));
+    return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonCTA, __assign({ as: Text_1.P, size: size }, rest)) }));
 };
 exports.SkeletonCTA = SkeletonCTA;

package/dist/components/{SkeletonCircle → SkeletonLoading}/SkeletonCircle.js

@@ -29,12 +29,13 @@ exports.SkeletonCircle = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importDefault(require("../../styled.native"));
 var utils_1 = require("../../utils");
-var SkeletonAnimation_1 = require("../SkeletonAnimation");
-var StyledSkeletonCircleWrapper = styled_native_1.default.View(function (_a) {
+var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
+var StyledSkeletonCircleWrapper = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var size = _a.size;
     return "width: ".concat(size, "; max-width: 100%;");
 });
-var StyledSkeletonCircle = styled_native_1.default.View(function (_a) {
+var StyledSkeletonCircle = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    height: 0;\n    padding-bottom: 100%;\n    border-radius: ").concat((0, utils_1.pxToNumber)(size) / 2, "px;\n  ");
 });

package/dist/components/{SkeletonHeading → SkeletonLoading}/SkeletonHeading.js

@@ -28,14 +28,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SkeletonHeading = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var SkeletonAnimation_1 = require("../SkeletonAnimation");
-var Heading3_1 = require("../Heading3");
-var StyledSkeletonHeading = styled_native_1.default.View(function (_a) {
+var Heading_1 = require("../Heading");
+var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
+var StyledSkeletonHeading = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var core = _a.theme.core, size = _a.size;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    width: ").concat(size, ";\n  ");
 });
 var SkeletonHeading = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading3_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
+    var _b = _a.size, size = _b === void 0 ? '70%' : _b, _c = _a.headingComponent, Heading = _c === void 0 ? Heading_1.Heading3 : _c, rest = __rest(_a, ["size", "headingComponent"]);
     return ((0, jsx_runtime_1.jsx)(SkeletonAnimation_1.SkeletonAnimation, { children: (0, jsx_runtime_1.jsx)(StyledSkeletonHeading, __assign({ "aria-hidden": "true", size: size, as: Heading }, rest, { children: "\u00A0" })) }));
 };
 exports.SkeletonHeading = SkeletonHeading;

package/dist/components/{SkeletonText → SkeletonLoading}/SkeletonText.js

@@ -29,9 +29,10 @@ exports.SkeletonText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importDefault(require("../../styled.native"));
-var P_1 = require("../P");
-var SkeletonAnimation_1 = require("../SkeletonAnimation");
-var StyledSkeletonText = styled_native_1.default.View(function (_a) {
+var Text_1 = require("../Text");
+var Skeleton_1 = require("./Skeleton");
+var SkeletonAnimation_1 = require("./SkeletonAnimation");
+var StyledSkeletonText = (0, styled_native_1.default)(Skeleton_1.Skeleton)(function (_a) {
     var core = _a.theme.core, aboveSmallBreakpoint = _a.aboveSmallBreakpoint, short = _a.short;
     return "\n    background-color: ".concat(core.color.neutral.light, ";\n    margin-bottom: ").concat(core.space[2], ";\n    height: ").concat(aboveSmallBreakpoint ? core.fontSize.body.large : core.fontSize.body.small, ";\n\n    ").concat(short ? 'width: 50%' : '', ";\n  ");
 });
@@ -42,6 +43,6 @@ var SkeletonText = function (_a) {
     for (var i = 1; i <= lines; i++) {
         generatedLines.push((0, jsx_runtime_1.jsx)(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, "line-".concat(i)));
     }
-    return ((0, jsx_runtime_1.jsx)(P_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
+    return ((0, jsx_runtime_1.jsx)(Text_1.P, __assign({ as: SkeletonAnimation_1.SkeletonAnimation }, rest, { children: generatedLines })));
 };
 exports.SkeletonText = SkeletonText;

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

@@ -0,0 +1,5 @@
+export * from './Skeleton';
+export * from './SkeletonCircle';
+export * from './SkeletonCTA';
+export * from './SkeletonHeading';
+export * from './SkeletonText';

package/dist/components/SkeletonLoading/index.js

@@ -0,0 +1,21 @@
+"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("./Skeleton"), exports);
+__exportStar(require("./SkeletonCircle"), exports);
+__exportStar(require("./SkeletonCTA"), exports);
+__exportStar(require("./SkeletonHeading"), exports);
+__exportStar(require("./SkeletonText"), exports);

package/dist/components/SubLabelText/SubLabelText.d.ts

@@ -11,7 +11,7 @@ declare const SubLabelText: import("react").ForwardRefExoticComponent<Pick<Omit<
             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>;
+            space: Record<0 | 2 | 1 | 3 | 4 | 10 | 5 | 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", {