@ovotech/element-native 5.5.0 → 5.7.0

package/dist/esm/components/Rail/useRailPaging.js

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+//Epsilon allowable margin for nearly equal comparisons
+const EPS = 0.5;
+function nearlyEqual(a, b, eps = EPS) {
+    return Math.abs(a - b) <= eps;
+}
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(n, hi));
+}
+function uniqueNearlyEqual(values, eps = EPS) {
+    const out = [];
+    for (const v of values) {
+        if (out.length === 0 || !nearlyEqual(out[out.length - 1], v, eps))
+            out.push(v);
+    }
+    return out;
+}
+export function useRailPaging({ itemCount }) {
+    const safeItemCount = Math.max(0, itemCount);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [itemWidth, setItemWidth] = useState(0);
+    const [activeStartIndex, setActiveStartIndex] = useState(0);
+    const stride = itemWidth;
+    const isScrollable = containerWidth > 0 && contentWidth > containerWidth + 1;
+    const visibleCount = useMemo(() => {
+        const maxVisible = Math.max(1, safeItemCount);
+        if (safeItemCount === 0)
+            return 1;
+        if (containerWidth <= 0 || stride <= 0)
+            return 1;
+        return clamp(Math.ceil(containerWidth / stride), 1, maxVisible);
+    }, [containerWidth, stride, safeItemCount]);
+    const maxStartIndex = useMemo(() => {
+        if (safeItemCount <= 0)
+            return 0;
+        return clamp(safeItemCount - visibleCount, 0, safeItemCount - 1);
+    }, [safeItemCount, visibleCount]);
+    useEffect(() => {
+        setActiveStartIndex(prev => clamp(prev, 0, maxStartIndex));
+    }, [maxStartIndex]);
+    useEffect(() => {
+        setActiveStartIndex(0);
+    }, [safeItemCount]);
+    const snapOffsets = useMemo(() => {
+        var _a;
+        if (safeItemCount === 0)
+            return [0];
+        if (containerWidth <= 0 || contentWidth <= 0 || stride <= 0)
+            return [0];
+        const maxScrollX = Math.max(0, contentWidth - containerWidth);
+        const offsets = [];
+        for (let index = 0; index <= maxStartIndex; index++) {
+            offsets.push(index * stride);
+        }
+        const last = (_a = offsets[offsets.length - 1]) !== null && _a !== void 0 ? _a : 0;
+        if (!nearlyEqual(last, maxScrollX))
+            offsets.push(maxScrollX);
+        return uniqueNearlyEqual(offsets);
+    }, [safeItemCount, containerWidth, contentWidth, stride, maxStartIndex]);
+    const onContainerLayout = useCallback((width) => {
+        setContainerWidth(width > 0 ? width : 0);
+    }, []);
+    const onContentSizeChange = useCallback((width) => {
+        setContentWidth(width > 0 ? width : 0);
+    }, []);
+    /**
+     * NOTE: This measures ONE item width (e.g. the first child) and assumes all
+     * items are the same width.
+     */
+    const onItemLayout = useCallback((width) => {
+        if (width > 0)
+            setItemWidth(width);
+    }, []);
+    const onMomentumEnd = useCallback((offsetX) => {
+        if (stride <= 0)
+            return;
+        const raw = Math.round(offsetX / stride);
+        const nextStart = clamp(raw, 0, maxStartIndex);
+        setActiveStartIndex(prev => (prev === nextStart ? prev : nextStart));
+    }, [stride, maxStartIndex]);
+    return {
+        snapOffsets,
+        isScrollable,
+        activeStartIndex,
+        visibleCount,
+        onContainerLayout,
+        onContentSizeChange,
+        onItemLayout,
+        onMomentumEnd,
+    };
+}

package/dist/esm/components/SelectField/Select.js

@@ -1,94 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numToPx } from '@ovotech/element-core';
 import groupBy from 'lodash.groupby';
 import { Fragment, useState } from 'react';
 import { Dimensions, Modal, ScrollView, View, } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import styled, { css } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
 import { Strong } from '../Strong';
-const SelectInput = styled.TouchableOpacity(({ theme, hasError }) => {
-    return css `
-      flex-direction: row;
-      align-items: center;
-      background-color: transparent;
-      border-color: ${hasError
-        ? theme.input.color.borderError
-        : theme.input.color.border};
-      border-width: ${numToPx(theme.border.width.md)};
-      border-radius: ${numToPx(theme.border.radius.sm)};
-      padding: ${numToPx(theme.space[200])};
-      padding-right: ${numToPx(theme.space[350])};
-      height: ${numToPx(theme.space[1100])};
-    `;
-});
-const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
-    background-color: ${theme.color.brand.dark}80;
-  `);
-const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
-    width: 95%;
-    max-height: 70%;
-    border-radius: ${numToPx(theme.border.radius.sm)};
-    background-color: ${theme.color.surface.bright};
-  `);
-const SelectOption = styled.TouchableOpacity(({ theme, isLastOption }) => css `
-    flex-direction: row;
-    align-items: center;
-    border-bottom-color: ${theme.color.input.borderDim};
-    border-bottom-width: ${isLastOption ? 0 : 1}px;
-    padding: 0 ${numToPx(theme.space[400])};
-  `);
-const Radio = styled.View(({ theme, isChecked }) => css `
-    background-color: ${isChecked
-    ? theme.input.color.selectedTint
-    : 'transparent'};
-    width: ${numToPx(theme.space[600])};
-    height: ${numToPx(theme.space[600])};
-    margin-left: auto;
-    border-radius: ${numToPx(theme.space[600])};
-    border-width: ${numToPx(theme.border.width.md)};
-    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
-  `);
-const RadioDot = styled.View(({ theme, isChecked }) => css `
-    background-color: ${theme.input.color.selected};
-    position: absolute;
-    top: ${numToPx(theme.space[100])};
-    width: ${numToPx(theme.space[300])};
-    height: ${numToPx(theme.space[300])};
-    border-radius: ${numToPx(theme.space[300])};
-    align-self: center;
-    opacity: ${isChecked ? 1 : 0};
-  `);
-const StyledP = styled(P)(({ theme }) => css `
-    margin-top: ${numToPx(theme.space[300])};
-    margin-bottom: ${numToPx(theme.space[300])};
-  `);
-const StyledCategory = styled(P)(({ theme }) => css `
-    font-size: ${numToPx(theme.font.size.xs.mediaQuery.lg)};
-    color: ${theme.color.surface.onSurface};
-    background-color: ${theme.color.surface.surface};
-    padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
-  `);
-export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
+import { DropdownContainer, DropdownWrapper, Radio, RadioDot, SelectInput, SelectOption, StyledCategory, StyledP, } from './styled';
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, selected, size = 'medium', testID = 'select', ref, }) => {
     const [isOpen, setOpen] = useState(false);
-    const [selected, setSelected] = useState(defaultSelected);
+    const [selectedVal, setSelectedVal] = useState(defaultSelected);
+    const isSmall = size === 'small';
+    const iconName = `chevron-down${isSmall ? '-small' : ''}`;
     const height = Dimensions.get('window').height;
     const dropdownContainerMaxHeight = height * 0.7;
     const handleOptionPress = (val) => {
         onSelected(val);
         setOpen(false);
-        setSelected(val);
+        setSelectedVal(val);
     };
     const optionsByCategories = groupBy(options, 'category');
     const requiredOption = {
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, isSelected: selected, size: size, onPress: () => setOpen(!isOpen), ref: ref, children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selectedVal.value === 'default' ? '' : selectedVal.label }), _jsx(Icon, { name: iconName, size: isSmall ? 16 : 20, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { onPress: () => setOpen(false), children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selectedVal.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selectedVal.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selectedVal.value === option.value, children: _jsx(RadioDot, { isChecked: selectedVal.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
 };

package/dist/esm/components/SelectField/SelectField.js

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
 export const SelectField = (_a) => {
-    var { error, options, onSelected, noOptionMessage, defaultSelected, testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "testID", "ref"]);
-    return (_jsx(Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID, ref: ref }) }) })));
+    var { error, options, onSelected, noOptionMessage, defaultSelected, size = 'medium', testID, ref } = _a, rest = __rest(_a, ["error", "options", "onSelected", "noOptionMessage", "defaultSelected", "size", "testID", "ref"]);
+    return (_jsx(Field, Object.assign({ affixWidth: 20, error: error }, rest, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), size: size, testID: testID, ref: ref }) })));
 };

package/dist/esm/components/SelectField/styled.js

@@ -0,0 +1,82 @@
+import { SafeAreaView } from 'react-native-safe-area-context';
+import styled, { css } from '../../styled.native';
+import { numToPx } from '../../theme';
+import { getShadowCSS } from '../../utils';
+import { P } from '../P';
+export const SelectInput = styled.TouchableOpacity(({ theme, hasError, isSelected, size }) => {
+    const isSmall = size === 'small';
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    return css `
+    flex-direction: row;
+    align-items: center;
+    background-color: ${theme.color.surface.bright};
+    border-color: ${borderColor};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    padding-top: ${numToPx(theme.space[isSmall ? 200 : 400])};
+    padding-bottom: ${numToPx(theme.space[isSmall ? 200 : 400])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${numToPx(theme.space[400])};
+    min-height: ${numToPx(theme.space[isSmall ? 1100 : 1600])};
+    ${getShadowCSS({ theme })}
+  `;
+});
+export const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    /* 80 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${theme.color.brand.dark}80;
+  `);
+export const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
+    width: 95%;
+    max-height: 70%;
+    border-radius: ${numToPx(theme.border.radius.md)};
+    background-color: ${theme.color.surface.bright};
+  `);
+export const SelectOption = styled.TouchableOpacity(({ theme, isLastOption }) => css `
+    flex-direction: row;
+    align-items: center;
+    border-bottom-color: ${theme.color.input.borderDim};
+    border-bottom-width: ${isLastOption ? 0 : 1}px;
+    padding: 0 ${numToPx(theme.space[400])};
+  `);
+export const Radio = styled.View(({ theme, isChecked }) => css `
+    background-color: ${isChecked
+    ? theme.input.color.selectedTint
+    : 'transparent'};
+    width: ${numToPx(theme.space[600])};
+    height: ${numToPx(theme.space[600])};
+    margin-left: auto;
+    border-radius: ${numToPx(theme.space[600])};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-color: ${theme.input.color[isChecked ? 'selected' : 'border']};
+  `);
+export const RadioDot = styled.View(({ theme, isChecked }) => css `
+    background-color: ${theme.input.color.selected};
+    position: absolute;
+    top: ${numToPx(theme.space[100])};
+    width: ${numToPx(theme.space[300])};
+    height: ${numToPx(theme.space[300])};
+    border-radius: ${numToPx(theme.space[300])};
+    align-self: center;
+    opacity: ${isChecked ? 1 : 0};
+  `);
+export const StyledP = styled(P)(({ theme }) => css `
+    margin-top: ${numToPx(theme.space[300])};
+    margin-bottom: ${numToPx(theme.space[300])};
+  `);
+export const StyledCategory = styled(P)(({ theme }) => css `
+    font-size: ${numToPx(theme.font.size.xs.mediaQuery.lg)};
+    color: ${theme.color.surface.onSurface};
+    background-color: ${theme.color.surface.surface};
+    padding: ${numToPx(theme.space[100])} ${numToPx(theme.space[400])};
+  `);

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -15,10 +15,10 @@ import { useBreakpoint } from '../../hooks';
 import styled from '../../styled.native';
 import { P } from '../P';
 import { SkeletonAnimation } from '../SkeletonAnimation';
-const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short, size, lines = 1 }) => {
+const StyledSkeletonText = styled.View(({ theme, aboveSmallBreakpoint, short, size, isLast }) => {
     return `
     background-color: ${theme.color.surface.dim};
-    margin-bottom: ${lines > 1 ? numToPx(theme.space[200]) : 0};
+    margin-bottom: ${isLast ? 0 : numToPx(theme.space[200])};
     border-radius: ${numToPx(theme.border.radius.sm)};
     height: ${aboveSmallBreakpoint
         ? numToPx(theme.font.size.md.mediaQuery.lg)
@@ -31,9 +31,9 @@ export const SkeletonText = (_a) => {
     var { lines = 1, size } = _a, rest = __rest(_a, ["lines", "size"]);
     const generatedLines = [];
     const { smallAndUp } = useBreakpoint();
-    const hasMultipleLines = lines > 1;
     for (let i = 1; i <= lines; i++) {
-        generatedLines.push(_jsx(StyledSkeletonText, { short: hasMultipleLines && i === lines, aboveSmallBreakpoint: smallAndUp, size: size }, `line-${i}`));
+        const isLast = i === lines;
+        generatedLines.push(_jsx(StyledSkeletonText, { short: lines > 1 && isLast, aboveSmallBreakpoint: smallAndUp, size: size, isLast: isLast }, `line-${i}`));
     }
     return (
     // @ts-ignore styled components stuff

package/dist/esm/components/TextareaInput/TextareaInput.js

@@ -11,15 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
 import styled, { css } from '../../styled.native';
 import { Input } from '../Input/Input';
-const StyledInput = styled(Input)(({ theme, rows }) => css `
-    padding: ${numToPx(theme.space[200])};
-    padding-top: ${numToPx(theme.space[300])};
-    height: ${theme.space[800] * rows}px;
-  `);
+const StyledInput = styled(Input)(({ theme, rows, smallAndUp, }) => {
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css `
+    min-height: ${theme.space[800] * rows}px;
+    line-height: ${rows > 1 ? numToPx(lineHeight) : 'normal'};
+  `;
+});
 const TextareaInput = (_a) => {
     var { rows = 3, ref } = _a, rest = __rest(_a, ["rows", "ref"]);
-    return (_jsx(StyledInput, Object.assign({}, rest, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledInput, Object.assign({}, rest, breakpoints, { keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref })));
 };
 export { TextareaInput };

package/dist/esm/components/Toast/Toast.js

@@ -1,3 +1,14 @@
+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;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toast, ToastPosition, Toasts, } from '@backpackapp-io/react-native-toast';
 import { numToPx } from '@ovotech/element-core';
@@ -8,7 +19,13 @@ import styled, { css } from '../../styled.native';
 import { Action } from '../ActionList';
 import { Icon } from '../Icon';
 import { P } from '../P';
-export const ToastsContainer = ({ top = -80 }) => (_jsx(Toasts, { extraInsets: { top } }));
+const TOAST_PADDING = 20;
+export const ToastsContainer = (_a) => {
+    var { top = -80, left, inModal = false } = _a, rest = __rest(_a, ["top", "left", "inModal"]);
+    // Extra right inset if in modal, unless it's been explicitly passed
+    const leftInset = inModal ? -20 : left !== null && left !== void 0 ? left : 0;
+    return _jsx(Toasts, Object.assign({ extraInsets: { top, left: leftInset } }, rest));
+};
 const StyledView = styled.View(({ theme, variant }) => css `
     background-color: ${variant === 'default'
     ? theme.color.alert.success
@@ -39,29 +56,24 @@ const StyledCloseIcon = styled(TouchableOpacity)(({ theme }) => css `
     align-items: center;
     justify-content: center;
   `);
-export const showToast = ({ message, dismissible = false, action, actionTitle, variant = 'default', duration = 5000, }) => {
-    return action || dismissible
-        ? toast.loading(message, {
-            id: 'clipboard',
-            position: ToastPosition.BOTTOM,
-            disableShadow: true,
-            customToast: t => (_jsx(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }), message)),
-        })
-        : toast(message, {
-            id: 'clipboard',
-            position: ToastPosition.BOTTOM,
-            duration,
-            disableShadow: true,
-            customToast: t => (_jsx(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant }), message)),
-        });
+export const showToast = ({ message, dismissible = false, action, actionTitle, inlineContent, variant = 'default', duration = 5000, providerKey = 'DEFAULT', }) => {
+    const baseToastProps = {
+        id: 'clipboard',
+        position: ToastPosition.BOTTOM,
+        disableShadow: true,
+        providerKey,
+    };
+    // Uses toast.loading for manual dismissal with action or dismiss
+    // Otherwise, use regular toast for auto-hiding with time indicator.
+    action || dismissible
+        ? toast.loading(message, Object.assign(Object.assign({}, baseToastProps), { duration: 0, customToast: t => (_jsx(CustomToast, Object.assign({}, t, { dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant, inline: inlineContent }), message)) }))
+        : toast(message, Object.assign(Object.assign({}, baseToastProps), { duration, customToast: t => (_jsx(CustomToastWithTimeIndicator, Object.assign({}, t, { variant: variant, inline: inlineContent }), message)) }));
 };
-const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
-    const toastPadding = 20;
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, inline = false, }) => {
     const textRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const windowWidth = Dimensions.get('window').width;
-    const screenPadding = 32;
-    const toastWidth = windowWidth - screenPadding;
+    const toastWidth = windowWidth - TOAST_PADDING * 2;
     const sharedWidth = useSharedValue(toastWidth);
     const style = useAnimatedStyle(() => {
         return {
@@ -76,8 +88,9 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
     }, []);
     return (_jsxs(StyledView, { variant: variant, style: {
             width: toastWidth,
-            height: textHeight + toastPadding,
+            height: textHeight + TOAST_PADDING,
             flexWrap: 'wrap',
+            flexDirection: inline ? 'row' : 'column',
         }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
                     var _a;
                     (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
@@ -85,13 +98,13 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
                     });
                 }, children: message }), _jsx(View, { style: { position: 'absolute', bottom: 0 }, children: _jsx(StyledBorder, { variant: variant, style: style }) })] }));
 };
-const CustomToast = ({ id, message, dismissible, action, actionTitle, width, variant, }) => {
-    const toastPadding = 20;
+const CustomToast = ({ id, message, dismissible, action, actionTitle, inline = false, width, variant, }) => {
     const textRef = useRef(null);
     const actionRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const [actionHeight, setActionHeight] = useState(0);
     const toastHeight = textHeight + actionHeight;
+    const hasAction = action && actionTitle;
     const handleAction = () => {
         if (action && actionTitle) {
             action();
@@ -100,10 +113,10 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
     };
     return (_jsxs(StyledView, { variant: variant, style: {
             width,
-            height: toastHeight + toastPadding,
-            alignItems: action ? 'flex-start' : 'center',
+            height: toastHeight + TOAST_PADDING,
+            alignItems: dismissible ? 'flex-start' : 'center',
         }, children: [_jsxs(View, { style: {
-                    flexDirection: 'row',
+                    flexDirection: inline ? 'row' : 'column',
                     flexWrap: 'wrap',
                     justifyContent: 'space-between',
                     flex: 1,
@@ -112,7 +125,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                             (_a = textRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                        }, children: message }), hasAction ? (_jsx(Action, { ref: actionRef, style: Object.assign({ width: 'auto', paddingBottom: 0 }, (inline ? { paddingTop: 0 } : {})), inverted: true, standalone: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
                             var _a;
                             (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((_x, _y, _width, height) => {
                                 setActionHeight(height);

package/dist/esm/components/Toggle/Toggle.js

@@ -17,7 +17,7 @@ import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
 import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
 const Input = (_a) => {
-    var { checked, labelPosition, testID } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID"]);
+    var { checked, labelPosition, testID, toggleBackgroundColor } = _a, rest = __rest(_a, ["checked", "labelPosition", "testID", "toggleBackgroundColor"]);
     const theme = useTheme();
     const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     useEffect(() => {
@@ -27,12 +27,10 @@ const Input = (_a) => {
             useNativeDriver: true,
         }).start();
     }, [checked]);
-    return (_jsx(StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
-                    transform: [{ translateX: leftVal }],
-                }, checked: checked }) }) })));
+    return (_jsx(StyledToggleInputWrapper, Object.assign({ labelPosition: labelPosition }, rest, { children: _jsx(StyledToggleInput, { checked: checked, testID: testID, toggleBackgroundColor: toggleBackgroundColor, children: _jsx(StyledToggleDot, { style: { transform: [{ translateX: leftVal }] }, checked: checked }) }) })));
 };
 export const Toggle = (_a) => {
-    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref"]);
+    var { activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, toggleBackgroundColor } = _a, rest = __rest(_a, ["activeOpacity", "checked", "label", "hint", "inline", "labelPosition", "testID", "ref", "toggleBackgroundColor"]);
     const hasLabel = label !== undefined;
-    return (_jsxs(StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined })] })));
+    return (_jsxs(StyledWrapper, Object.assign({ ref: ref, accessible: true, accessibilityRole: "checkbox", activeOpacity: activeOpacity, accessibilityState: { checked }, hitSlop: 10, hasLabel: hasLabel, labelPosition: labelPosition, inline: inline }, rest, { children: [hasLabel ? (_jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })) : null, _jsx(Input, { checked: checked, testID: testID, labelPosition: hasLabel ? labelPosition : undefined, toggleBackgroundColor: toggleBackgroundColor })] })));
 };

package/dist/esm/components/Toggle/styles.js

@@ -19,14 +19,14 @@ export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) =
         : ''}
     `;
 });
-export const StyledToggleInput = styled.View(({ theme, checked }) => {
+export const StyledToggleInput = styled.View(({ theme, checked, toggleBackgroundColor }) => {
     return `
       width: ${numToPx(theme.space[1100])};
       height: ${numToPx(theme.space[600])};
       justify-content: center;
       border-radius: ${numToPx(theme.border.radius.lg)};
-      background: ${checked
-        ? theme.color.outline.outer
+      background-color: ${checked
+        ? toggleBackgroundColor || theme.color.outline.outer
         : theme.color.surface.onSurfaceVariant};
     `;
 });

package/dist/esm/components/index.js

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './ActionCard';
 export * from './ActionList';
 export * from './Badge';
+export * from './BottomActionBar';
 export * from './Button';
 export * from './Card';
 export * from './Cards';
@@ -16,10 +17,13 @@ export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
+export * from './EmptyState';
+export * from './ErrorWrapper';
 export * from './Field';
 export * from './Grid';
 export * from './Heading';
 export * from './Icon';
+export * from './LargeValueReference';
 export * from './LineThrough';
 export * from './Link';
 export * from './List';
@@ -37,6 +41,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './Rail';
 export * from './RemoteImage';
 export * from './ScreenView';
 export * from './SegmentedControls';

package/dist/esm/hooks/use-font-scaling.js

@@ -0,0 +1,32 @@
+import { useWindowDimensions } from 'react-native';
+import { useBreakpoint } from './use-breakpoint.native';
+/**
+ * A hook to get information about the current font scaling.
+ * It uses `useWindowDimensions` to get the `fontScale` and will update when it changes.
+ * It also uses `useBreakpoint` to only figure out scaling information below the small breakpoint, and otherwise returns defaults
+ *
+ * @returns An object with font scaling information.
+ */
+export function useFontScaling() {
+    const { smallAndUp } = useBreakpoint();
+    const { fontScale } = useWindowDimensions();
+    // For larger than "small" screens, we're not as concerned about font-scaling
+    // so we maintain defaults
+    if (smallAndUp) {
+        return {
+            fontScale: 1,
+            isFontScalingSmall: false,
+            isFontScalingLarge: false,
+            isFontScalingDefault: true,
+        };
+    }
+    const isFontScalingSmall = fontScale < 1;
+    const isFontScalingLarge = fontScale > 1;
+    const isFontScalingDefault = fontScale === 1;
+    return {
+        fontScale,
+        isFontScalingSmall,
+        isFontScalingLarge,
+        isFontScalingDefault,
+    };
+}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './hooks';
 export * from './theme';
 export * from './utils';

package/dist/esm/test/utils.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeNative } from '@ovotech/element-core';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider } from '../styled.native';
+function Wrapper({ children }) {
+    return _jsx(ThemeProvider, { theme: themeNative, children: children });
+}
+const customRender = (ui, options) => render(ui, Object.assign({ wrapper: Wrapper }, options));
+// re-export everything
+export * from '@testing-library/react-native';
+// override render method
+export { customRender as render };

package/dist/esm/utils/utils.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, } from 'react';
 import { useBreakpoint } from '../hooks';
+import { css } from '../styled.native';
+import { numToPx } from '../theme';
 function mergeRefs(...refs) {
     return value => {
         refs.forEach(ref => {
@@ -66,4 +68,13 @@ function filterChildrenByType(children, type) {
 function getValidChildren(children) {
     return Children.toArray(children).filter(Boolean);
 }
-export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };
+function getShadowCSS({ theme, shadowColor, shadowOffsetX, shadowOffsetY, shadowOpacity = 0.1, shadowRadius, elevation = 5, }) {
+    return css `
+    shadow-color: ${shadowColor || theme.color.neutral.black};
+    shadow-offset: ${`${shadowOffsetX > 0 ? numToPx(shadowOffsetX) : 0} ${numToPx(shadowOffsetY || theme.space[100])}`};
+    shadow-opacity: ${shadowOpacity || '0.1'};
+    shadow-radius: ${numToPx(shadowRadius || theme.space[200])};
+    elevation: ${elevation || 5};
+  `;
+}
+export { callAll, filterChildrenByType, getErrorMessage, getShadowCSS, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };