@ovotech/element-native 3.8.1 → 4.0.0-canary-a872093-246

package/dist/components/Toast/index.js

@@ -1,105 +1,6 @@
-import { ToastsContainer as Xo, showToast as Yo } from "./Toast.js";
-import "react/jsx-runtime";
-import "react";
-import "react-native";
-import "react-native-reanimated";
-import "react-native-safe-area-context";
-import "react-native-gesture-handler";
-import "../../utils-HsZygzDh.js";
-import "../../styled.native-KEscfVp7.js";
-import "../ActionList/ActionList.js";
-import "../../hooks/use-breakpoint.js";
-import "../ActionList/styled.js";
-import "../../utils/utils.js";
-import "../Icon/Icon.js";
-import "../../providers/IconsProvider.js";
-import "../../providers/icons/Address.js";
-import "react-native-svg";
-import "../../providers/icons/Advice.js";
-import "../../providers/icons/Archive.js";
-import "../../providers/icons/ArrowDown.js";
-import "../../providers/icons/ArrowLeft.js";
-import "../../providers/icons/ArrowRight.js";
-import "../../providers/icons/ArrowUp.js";
-import "../../providers/icons/Award.js";
-import "../../providers/icons/Battery.js";
-import "../../providers/icons/Cal.js";
-import "../../providers/icons/CalBook.js";
-import "../../providers/icons/CaretDown.js";
-import "../../providers/icons/CaretLeft.js";
-import "../../providers/icons/CaretRight.js";
-import "../../providers/icons/CaretUp.js";
-import "../../providers/icons/Chart.js";
-import "../../providers/icons/ChartFilled.js";
-import "../../providers/icons/Check.js";
-import "../../providers/icons/CheckCircle.js";
-import "../../providers/icons/ChevronDown.js";
-import "../../providers/icons/ChevronLeft.js";
-import "../../providers/icons/ChevronLeftSmall.js";
-import "../../providers/icons/ChevronLeftSmallFirst.js";
-import "../../providers/icons/ChevronRight.js";
-import "../../providers/icons/ChevronRightSmall.js";
-import "../../providers/icons/ChevronRightSmallLast.js";
-import "../../providers/icons/ChevronUp.js";
-import "../../providers/icons/Circle.js";
-import "../../providers/icons/CloseCircle.js";
-import "../../providers/icons/Cross.js";
-import "../../providers/icons/Doc.js";
-import "../../providers/icons/Dollar.js";
-import "../../providers/icons/Download.js";
-import "../../providers/icons/Eco.js";
-import "../../providers/icons/EcoHome.js";
-import "../../providers/icons/Edit.js";
-import "../../providers/icons/ElectricCar.js";
-import "../../providers/icons/ElectricHome.js";
-import "../../providers/icons/Electricity.js";
-import "../../providers/icons/EnergyAdvice.js";
-import "../../providers/icons/Equals.js";
-import "../../providers/icons/Euro.js";
-import "../../providers/icons/Gas.js";
-import "../../providers/icons/GlobeAddress.js";
-import "../../providers/icons/Help.js";
-import "../../providers/icons/Hide.js";
-import "../../providers/icons/Home.js";
-import "../../providers/icons/HomeFilled.js";
-import "../../providers/icons/HydroPower.js";
-import "../../providers/icons/Info.js";
-import "../../providers/icons/Link.js";
-import "../../providers/icons/Logo.js";
-import "../../providers/icons/Mail.js";
-import "../../providers/icons/MailOpen.js";
-import "../../providers/icons/Menu.js";
-import "../../providers/icons/Message.js";
-import "../../providers/icons/MessageFilled.js";
-import "../../providers/icons/Minus.js";
-import "../../providers/icons/Mobile.js";
-import "../../providers/icons/NewWindow.js";
-import "../../providers/icons/PaymentCard.js";
-import "../../providers/icons/Phone.js";
-import "../../providers/icons/Plus.js";
-import "../../providers/icons/Pound.js";
-import "../../providers/icons/Pricing.js";
-import "../../providers/icons/Search.js";
-import "../../providers/icons/Security.js";
-import "../../providers/icons/Show.js";
-import "../../providers/icons/SmartHome.js";
-import "../../providers/icons/SmartMeter.js";
-import "../../providers/icons/Solar.js";
-import "../../providers/icons/Star.js";
-import "../../providers/icons/Sun.js";
-import "../../providers/icons/Torch.js";
-import "../../providers/icons/Trees.js";
-import "../../providers/icons/Tune.js";
-import "../../providers/icons/User.js";
-import "../../providers/icons/UserFilled.js";
-import "../../providers/icons/Wallet.js";
-import "../../providers/icons/WalletFilled.js";
-import "../../providers/icons/WarmHome.js";
-import "../../providers/icons/Warning.js";
-import "../../providers/icons/WebAddress.js";
-import "../../providers/icons/WindPower.js";
-import "../P/P.js";
-export {
-  Xo as ToastsContainer,
-  Yo as showToast
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastsContainer = exports.showToast = void 0;
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "showToast", { enumerable: true, get: function () { return Toast_1.showToast; } });
+Object.defineProperty(exports, "ToastsContainer", { enumerable: true, get: function () { return Toast_1.ToastsContainer; } });

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-export declare type HorizontalPosition = 'left' | 'right';
+export type HorizontalPosition = 'left' | 'right';
 export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<TouchableOpacityProps, "children"> & {
     label?: string | ReactNode;
     checked?: boolean | undefined;

package/dist/components/Toggle/Toggle.js

@@ -1,74 +1,56 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { forwardRef as u, useContext as c, useRef as d, useEffect as g } from "react";
-import { View as x, Animated as p } from "react-native";
-import { d as y } from "../../styled.native-KEscfVp7.js";
-import { HintText as S } from "../HintText/HintText.js";
-import { LabelText as T } from "../LabelText/LabelText.js";
-import { StyledWrapper as h, StyledToggleInputWrapper as b, StyledToggleInput as v, StyledToggleDot as V } from "./styles.js";
-import "../../utils-HsZygzDh.js";
-import "../../utils/utils.js";
-import "../../hooks/use-breakpoint.js";
-const w = ({ checked: t, labelPosition: i, testID: l, ...n }) => {
-  const { core: e } = c(y), o = d(
-    new p.Value(t ? e.space[6] : e.space[1])
-  ).current;
-  return g(() => {
-    p.timing(o, {
-      toValue: t ? e.space[6] : e.space[1],
-      duration: 150,
-      // i.e. theme.core.transition.fast
-      useNativeDriver: !0
-    }).start();
-  }, [t]), /* @__PURE__ */ r(b, { labelPosition: i, ...n, children: /* @__PURE__ */ r(v, { checked: t, testID: l, children: /* @__PURE__ */ r(
-    V,
-    {
-      style: {
-        transform: [{ translateX: o }]
-      },
-      checked: t
-    }
-  ) }) });
-}, N = u(
-  ({
-    label: t,
-    hint: i,
-    checked: l = !1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    activeOpacity: n = 0.8,
-    testID: e,
-    labelPosition: o = "left",
-    ...m
-  }, f) => {
-    const s = t !== void 0;
-    return /* @__PURE__ */ a(
-      h,
-      {
-        ref: f,
-        accessibilityRole: "checkbox",
-        activeOpacity: n,
-        accessibilityState: { checked: l },
-        hitSlop: 10,
-        hasLabel: s,
-        labelPosition: o,
-        ...m,
-        children: [
-          s ? /* @__PURE__ */ a(x, { style: { flexShrink: 1 }, children: [
-            /* @__PURE__ */ r(T, { children: t }),
-            i ? /* @__PURE__ */ r(S, { children: i }) : null
-          ] }) : null,
-          /* @__PURE__ */ r(
-            w,
-            {
-              checked: l,
-              testID: e,
-              labelPosition: s ? o : void 0
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  N as Toggle
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var native_1 = require("styled-components/native");
+var HintText_1 = require("../HintText/HintText");
+var LabelText_1 = require("../LabelText");
+var styles_1 = require("./styles");
+var Input = function (_a) {
+    var checked = _a.checked, labelPosition = _a.labelPosition, testID = _a.testID, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var core = (0, react_1.useContext)(native_1.ThemeContext).core;
+    var leftVal = (0, react_1.useRef)(new react_native_1.Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    (0, react_1.useEffect)(function () {
+        react_native_1.Animated.timing(leftVal, {
+            toValue: checked ? core.space[6] : core.space[1],
+            duration: 150, // i.e. theme.core.transition.fast
+            useNativeDriver: true,
+        }).start();
+    }, [checked]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledToggleInputWrapper, __assign({ labelPosition: labelPosition }, rest, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleInput, { checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleDot, { style: {
+                    transform: [{ translateX: leftVal }],
+                }, checked: checked }) }) })));
 };
+exports.Toggle = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, hint = _a.hint, _b = _a.checked, checked = _b === void 0 ? false : _b, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _c = _a.activeOpacity, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    activeOpacity = _c === void 0 ? 0.8 : _c, testID = _a.testID, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'left' : _d, rest = __rest(_a, ["label", "hint", "checked", "activeOpacity", "testID", "labelPosition"]);
+    var hasLabel = label !== undefined;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, __assign({ ref: ref, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked: checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition }, rest, { children: [hasLabel ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })) : null, (0, jsx_runtime_1.jsx)(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+});

package/dist/components/Toggle/index.js

@@ -1,14 +1,5 @@
-import { Toggle as a } from "./Toggle.js";
-import "react/jsx-runtime";
-import "react";
-import "react-native";
-import "../../styled.native-KEscfVp7.js";
-import "../HintText/HintText.js";
-import "../../utils-HsZygzDh.js";
-import "../../utils/utils.js";
-import "../../hooks/use-breakpoint.js";
-import "../LabelText/LabelText.js";
-import "./styles.js";
-export {
-  a as Toggle
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var Toggle_1 = require("./Toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });

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

@@ -359,6 +359,8 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -369,6 +371,8 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -379,6 +383,8 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -841,6 +847,8 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -851,6 +859,8 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -861,6 +871,8 @@ export declare const StyledToggleInputWrapper: import("styled-components").Style
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -1322,6 +1334,8 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -1332,6 +1346,8 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -1342,6 +1358,8 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {
@@ -1444,7 +1462,7 @@ export declare const StyledToggleInput: import("styled-components").StyledCompon
 }, {
     checked?: boolean | undefined;
 }, never>;
-export declare const StyledToggleDot: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof import("react-native/types").View>, {
+export declare const StyledToggleDot: import("styled-components").StyledComponent<Animated.AnimatedComponent<typeof import("react-native").View>, {
     core: {
         color: {
             brand: {
@@ -1803,6 +1821,8 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             secondary: {
                 message: string;
@@ -1813,6 +1833,8 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
             destructive: {
                 message: string;
@@ -1823,6 +1845,8 @@ export declare const StyledToggleDot: import("styled-components").StyledComponen
                 surfaceFocused: string;
                 outlineFocused: string;
                 backgroundFocused: string;
+                messageInverted: string;
+                surfaceInverted: string;
             };
         };
         heading1: {

package/dist/components/Toggle/styles.js

@@ -1,39 +1,29 @@
-import { n as t } from "../../utils-HsZygzDh.js";
-import { Animated as a } from "react-native";
-import { s as i } from "../../styled.native-KEscfVp7.js";
-import "react";
-const d = i.TouchableOpacity(
-  ({ theme: { core: e }, hasLabel: r, labelPosition: o }) => `
-    width: ${r ? "100%" : t(e.space[11])};
-    display: flex;
-    flex-direction: row${o === "left" ? "" : "-reverse"};
-    justify-content: space-between;
-    position: relative;
-  `
-), h = i.View(({ theme: { core: e }, labelPosition: r }) => `
-    width: ${t(e.space[11])};
-    height: ${t(e.space[6])};
-    ${r ? r === "left" ? "margin-left: 10px;" : "margin-right: 10px;" : null}
-    `), c = i.View(
-  ({ theme: { core: e }, checked: r }) => `
-      width: ${t(e.space[11])};
-      height: ${t(e.space[6])};
-      justify-content: center;
-      border-radius: ${t(e.radius.large)};
-      background: ${r ? e.color.brand.ovo : e.color.neutral.lighter};
-    `
-), u = i(a.View)(
-  ({ theme: { core: e }, checked: r }) => `
-  position: absolute;
-  width: ${t(e.space[4])};
-  height: ${t(e.space[4])};
-  border-radius: ${t(e.space[4])};
-  background-color: ${r ? e.color.brand.white : e.color.neutral.dark};
-`
-);
-export {
-  u as StyledToggleDot,
-  c as StyledToggleInput,
-  h as StyledToggleInputWrapper,
-  d as StyledWrapper
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledToggleDot = exports.StyledToggleInput = exports.StyledToggleInputWrapper = exports.StyledWrapper = void 0;
+var element_core_1 = require("@ovotech/element-core");
+var react_native_1 = require("react-native");
+var styled_native_1 = __importDefault(require("../../styled.native"));
+exports.StyledWrapper = styled_native_1.default.TouchableOpacity(function (_a) {
+    var core = _a.theme.core, hasLabel = _a.hasLabel, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat(hasLabel ? '100%' : (0, element_core_1.numToPx)(core.space[11]), ";\n    display: flex;\n    flex-direction: row").concat(labelPosition === 'left' ? '' : '-reverse', ";\n    justify-content: space-between;\n    position: relative;\n  ");
+});
+exports.StyledToggleInputWrapper = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, labelPosition = _a.labelPosition;
+    return "\n    width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n    height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n    ").concat(labelPosition
+        ? labelPosition === 'left'
+            ? 'margin-left: 10px;'
+            : 'margin-right: 10px;'
+        : null, "\n    ");
+});
+exports.StyledToggleInput = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n      width: ".concat((0, element_core_1.numToPx)(core.space[11]), ";\n      height: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n      justify-content: center;\n      border-radius: ").concat((0, element_core_1.numToPx)(core.radius.large), ";\n      background: ").concat(checked ? core.color.brand.ovo : core.color.neutral.lighter, ";\n    ");
+});
+exports.StyledToggleDot = (0, styled_native_1.default)(react_native_1.Animated.View)(function (_a) {
+    var core = _a.theme.core, checked = _a.checked;
+    return "\n  position: absolute;\n  width: ".concat((0, element_core_1.numToPx)(core.space[4]), ";\n  height: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  border-radius: ").concat((0, element_core_1.numToPx)(core.space[4]), ";\n  background-color: ").concat(checked ? core.color.brand.white : core.color.neutral.dark, ";\n");
+});

package/dist/components/index.d.ts

@@ -60,6 +60,3 @@ export * from './Toggle';
 export * from './Toast';
 export * from './ProductCarousel';
 export * from './RadioCard';
-export * from './FormGroup';
-export * from './ErrorText';
-export * from './LabelText';