@ovotech/element-native 5.3.0 → 5.4.1

package/dist/esm/src/components/NavHeader/NavHeaderComponents/ActionButtons.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonNavButton } from '../NavHeader.styles';
+import { checkHasAccount } from '../utils';
+import { NavButton } from './NavButton';
+export const ActionButtons = (props) => {
+    const variant = props.layer > 1 ? 'dim' : 'bright';
+    const inverted = props.layer < 2;
+    return (_jsxs(_Fragment, { children: [checkHasAccount(props) &&
+                props.actionButtons.account?.onPress &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.account.onPress, iconLeft: props.actionButtons.account.icon || 'user' }))), !!props.actionButtons.help?.onPress &&
+                (props.loading ? (_jsx(SkeletonNavButton, {})) : (_jsx(NavButton, { variant: variant, inverted: inverted, layer: props.layer, onPress: props.actionButtons.help.onPress, iconLeft: props.actionButtons.help.icon || 'message' })))] }));
+};

package/dist/esm/src/components/NavHeader/NavHeaderComponents/NavButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from '../../../styled.native';
+import { DEFAULT_BUTTON_VARIANT } from '../../Button/Button';
+import { StyledButtonIcon, StyledButtonWrapper, StyledInner, } from '../../Button/Button.styles';
+const ButtonWrapper = ({ children, accessibilityRole = 'button', activeOpacity = 0.8, ...rest }) => (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, children: children }));
+const NavStyledButtonInner = styled(StyledInner)(({ theme, navVariant }) => {
+    const backgroundAndBorderColor = navVariant === 'bright'
+        ? theme.color.surface.bright
+        : theme.color.surface.dim;
+    return css `
+    background-color: ${backgroundAndBorderColor};
+    border-color: ${backgroundAndBorderColor};
+    color: ${theme.button.surface.color.fgInverted};
+  `;
+});
+const NavStyledButtonIcon = styled(StyledButtonIcon)(({ theme, navVariant }) => css `
+    color: ${navVariant === 'bright' || navVariant === 'dim'
+    ? theme.button.surface.color.fgInverted
+    : 'transparent'};
+  `);
+export const NavButton = ({ layer, iconLeft, iconRight, fullWidth = false, variant = 'bright', inverted = true, size = 'default', ...rest }) => {
+    return (_jsx(ButtonWrapper, { ...rest, children: _jsxs(NavStyledButtonInner, { fullWidth: fullWidth, variant: DEFAULT_BUTTON_VARIANT, navVariant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: true, layer: layer, children: [iconLeft && (_jsx(NavStyledButtonIcon, { iconLeft: true, iconOnly: true, name: iconLeft, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 })), iconRight && (_jsx(NavStyledButtonIcon, { iconRight: true, iconOnly: true, name: iconRight, inverted: inverted, navVariant: variant, variant: DEFAULT_BUTTON_VARIANT, size: 20 }))] }) }));
+};

package/dist/esm/src/components/NavHeader/NavHeaderComponents/StepCounterBars.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SkeletonStepCounterBar, StepCounterBar, StepCounterContainer, } from '../NavHeader.styles';
+export const StepCounterBars = ({ totalSteps, currentStep, loading = false, }) => {
+    return (_jsx(StepCounterContainer, { children: loading ? (_jsx(SkeletonStepCounterBar, {})) : (Array.from({ length: totalSteps }).map((_, index) => (_jsx(StepCounterBar, { count: index + 1, currentStep: currentStep }, index + 1)))) }));
+};

package/dist/esm/src/components/NavHeader/utils.js

@@ -0,0 +1,23 @@
+export const checkHasAccount = (props) => {
+    return props.layer === 0 || props.layer === 1;
+};
+export const getTitleLength = ({ layer, title }) => {
+    const TITLE_HOME_MAX_LENGTH = 14;
+    const TITLE_LAYER_1_MAX_LENGTH = 21;
+    const TITLE_LAYER_2_PLUS_MAX_LENGTH = 28;
+    if (layer === 0) {
+        return title.length > TITLE_HOME_MAX_LENGTH
+            ? title.slice(0, TITLE_HOME_MAX_LENGTH) + '...'
+            : title;
+    }
+    if (layer === 1) {
+        return title.length > TITLE_LAYER_1_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_1_MAX_LENGTH)
+            : title;
+    }
+    if (layer > 1) {
+        return title.length > TITLE_LAYER_2_PLUS_MAX_LENGTH
+            ? title.slice(0, TITLE_LAYER_2_PLUS_MAX_LENGTH) + '...'
+            : title;
+    }
+};

package/dist/esm/src/components/{NavigationIcon/NavigationIcon.js → NavIcon/NavIcon.js}

@@ -23,7 +23,7 @@ const RedDotContainer = styled.View `
   height: 0;
   z-index: 1;
 `;
-export const NavigationIcon = ({ label, iconName, focused, isStatusDotEnabled = false, onPress, size = 24, tintColor, style, accessibilityState, }) => {
+export const NavIcon = ({ label, iconName, focused, isStatusDotEnabled = false, onPress, size = 24, tintColor, style, accessibilityState, }) => {
     const isFocused = focused ?? accessibilityState?.selected ?? false;
     const testID = `${label.toLowerCase()}-tab`;
     const theme = useTheme();

package/dist/esm/src/components/NavIcon/index.js

@@ -0,0 +1 @@
+export { NavIcon } from './NavIcon';

package/dist/esm/src/components/PasswordField/PasswordField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PasswordInput } from '../PasswordInput';
-export const PasswordField = ({ hasVisibilityToggle, ...rest }) => {
-    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) }));
+export const PasswordField = ({ hasVisibilityToggle, ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { ref: ref, hasVisibilityToggle: hasVisibilityToggle }) }));
 };

package/dist/esm/src/components/PasswordInput/PasswordInput.js

@@ -3,6 +3,6 @@ import { Input } from '../Input/Input';
 import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
 const PasswordInput = (props) => {
     const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
-    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ...props }));
+    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, submitBehavior: "submit", secureTextEntry: !isPasswordVisible, ...props }));
 };
 export { PasswordInput };

package/dist/esm/src/components/PhoneField/PhoneField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { PhoneInput } from '../PhoneInput';
-export const PhoneField = ({ ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, {}) }));
+export const PhoneField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, { ref: ref }) }));
 };

package/dist/esm/src/components/ScreenView/ScreenView.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useWindowDimensions, View } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+const BackgroundWrapper = styled(View)({
+    width: '100%',
+    alignItems: 'center',
+});
+const ContentContainer = styled(View)(({ paddingHorizontal, minWidth, maxWidth }) => ({
+    width: '100%',
+    paddingHorizontal,
+    minWidth,
+    maxWidth,
+}));
+export const ScreenView = ({ children }) => {
+    const { xsmallAndUp, smallAndUp, mediumAndUp } = useBreakpoint();
+    const { width } = useWindowDimensions();
+    const theme = useTheme();
+    let maxWidth = width;
+    let paddingHorizontal = theme.space[400];
+    if (mediumAndUp) {
+        maxWidth = 1024;
+        paddingHorizontal = theme.space[800];
+    }
+    else if (smallAndUp || xsmallAndUp) {
+        maxWidth = 484;
+        paddingHorizontal = theme.space[500];
+    }
+    else if (width < 359) {
+        paddingHorizontal = theme.space[400];
+    }
+    return (_jsx(BackgroundWrapper, { children: _jsx(ContentContainer, { paddingHorizontal: paddingHorizontal, maxWidth: maxWidth, children: children }) }));
+};

package/dist/esm/src/components/ScreenView/index.js

@@ -0,0 +1 @@
+export * from './ScreenView';

package/dist/esm/src/components/SegmentedControls/components/SegmentButton.js

@@ -47,7 +47,7 @@ export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, i
         // choices go on the second row. The only way I could get it to work
         // was to hardcode the denominator to 3 for the single row ones
         // and 1.1 for the multiple row ones.
-        yRef.current = y - height / (multipleRows ? 1.1 : 3 * fontScale);
+        yRef.current = y - height / (multipleRows ? 2.5 : 3 * fontScale);
         heightRef.current = height;
         widthRef.current = width;
         onLayout(width, height, x, yRef.current);

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

@@ -2,7 +2,8 @@ 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 { 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';
@@ -30,7 +31,7 @@ const DropdownWrapper = styled.TouchableOpacity(({ theme }) => css `
     /* 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 `
+const DropdownContainer = styled(SafeAreaView)(({ theme }) => css `
     width: 95%;
     max-height: 70%;
     border-radius: ${numToPx(theme.border.radius.sm)};
@@ -74,7 +75,7 @@ const StyledCategory = styled(P)(({ theme }) => css `
     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', }) => {
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', ref, }) => {
     const [isOpen, setOpen] = useState(false);
     const [selected, setSelected] = useState(defaultSelected);
     const height = Dimensions.get('window').height;
@@ -89,5 +90,5 @@ export const Select = ({ options = [], defaultSelected = { label: '', value: 'de
         label: `-- ${noOptionMessage} --`,
         value: 'default',
     };
-    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), 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, 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)))] }) }) }) })] }));
 };

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { Select } from './Select';
-export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }) }) }));
+export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ref, ...rest }) => (_jsx(Field, { 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 }) }) }));

package/dist/esm/src/components/TextField/TextField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { TextInput } from '../TextInput';
-export const TextField = (props) => {
-    return (_jsx(Field, { ...props, children: _jsx(TextInput, {}) }));
+export const TextField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(TextInput, { ref: ref }) }));
 };

package/dist/esm/src/components/TextInput/TextInput.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from '../Input/Input';
-const TextInput = (props) => _jsx(Input, { ...props, keyboardType: "default", ref: props.ref });
+const TextInput = ({ ref, ...props }) => (_jsx(Input, { ...props, keyboardType: "default", ref: ref }));
 export { TextInput };

package/dist/esm/src/components/TextareaField/TextareaField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Field } from '../Field';
 import { TextareaInput } from '../TextareaInput';
-export const TextareaField = ({ ...props }) => {
-    return (_jsx(Field, { ...props, children: _jsx(TextareaInput, {}) }));
+export const TextareaField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(TextareaInput, { ref: ref }) }));
 };

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

@@ -16,7 +16,7 @@ export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) =
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
             : 'margin-right: 10px;'
-        : null}
+        : ''}
     `;
 });
 export const StyledToggleInput = styled.View(({ theme, checked }) => {

package/dist/esm/src/components/index.js

@@ -25,6 +25,7 @@ export * from './Link';
 export * from './List';
 export * from './Margin';
 export * from './NavHeader';
+export * from './NavIcon';
 export * from './Notification';
 export * from './NumberField';
 export * from './NumberInput';
@@ -36,6 +37,7 @@ export * from './PhoneInput';
 export * from './Pictogram';
 export * from './Radio';
 export * from './RadioCard';
+export * from './ScreenView';
 export * from './RemoteImage';
 export * from './SegmentedControls';
 export * from './SelectField';

package/dist/esm/src/hooks/index.js

@@ -1,2 +1,2 @@
-export * from './use-breakpoint';
+export * from './use-breakpoint.native';
 export * from './use-full-width';

package/dist/esm/src/hooks/use-full-width.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useBreakpoint } from './use-breakpoint';
+import { useBreakpoint } from './use-breakpoint.native';
 export const useFullWidth = (fullWidth = 'small') => {
     const [isFullWidth, setIsfullWidth] = useState(true);
     const { smallAndUp } = useBreakpoint();

package/dist/esm/styled.native.js

@@ -0,0 +1,4 @@
+import * as styledComponents from 'styled-components/native';
+const { default: styled, css, ThemeProvider, ThemeContext, useTheme, } = styledComponents;
+export { css, ThemeProvider, ThemeContext, useTheme };
+export default styled;

package/dist/esm/theme/index.js

@@ -0,0 +1 @@
+export * from '@ovotech/element-core';

package/dist/esm/utils/index.js

@@ -0,0 +1 @@
+export * from './utils';

package/dist/esm/utils/utils.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, } from 'react';
+import { useBreakpoint } from '../hooks';
+function mergeRefs(...refs) {
+    return value => {
+        refs.forEach(ref => {
+            assignRef(ref, value);
+        });
+    };
+}
+function assignRef(ref, element) {
+    if (typeof ref === 'function') {
+        ref(element);
+    }
+    else if (ref) {
+        ref.current = element;
+    }
+}
+function getText(children) {
+    if (!Boolean(children) && typeof children !== 'number') {
+        return '';
+    }
+    if (typeof children === 'object' &&
+        children.props) {
+        return Children.map(children.props.children, child => getText(child)).join('');
+    }
+    return String(children);
+}
+function styledComponentWithBreakpoints(Component) {
+    return (props) => {
+        const breakpoints = useBreakpoint();
+        // @ts-ignore.
+        return _jsx(Component, { ...props, ...breakpoints, ref: props.ref });
+    };
+}
+function responsiveStyle(property, value, breakpoints, formatter) {
+    let values;
+    if (Array.isArray(value)) {
+        values = value;
+    }
+    else {
+        values = [value];
+    }
+    const ascMediaQueries = [
+        breakpoints.smallAndUp,
+        breakpoints.mediumAndUp,
+        breakpoints.largeAndUp,
+    ];
+    const [base, ...rest] = values;
+    return rest.reduce((acc, val, i) => ascMediaQueries[i]
+        ? `${property}: ${formatter ? formatter(val) : val};`
+        : acc, `${property}: ${formatter ? formatter(base) : base};`);
+}
+function getErrorMessage(id, errors) {
+    return (errors.find(({ id: errorId }) => id === errorId) || { message: null })
+        .message;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+function callAll(...fns) {
+    return (...args) => fns.forEach(fn => fn && fn(...args));
+}
+function filterChildrenByType(children, type) {
+    return Children.toArray(children).filter(child => child?.type === type);
+}
+function getValidChildren(children) {
+    return Children.toArray(children).filter(Boolean);
+}
+export { callAll, filterChildrenByType, getErrorMessage, getValidChildren, getText, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-full-width';
+export * from './use-breakpoint';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './use-full-width';
+export * from './use-breakpoint';

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,7 @@
+export type BreakpointNames = 'smallAndUp' | 'mediumAndUp' | 'largeAndUp';
+export type Breakpoints = Record<BreakpointNames, boolean>;
+export declare const useBreakpoint: () => {
+    smallAndUp: boolean;
+    mediumAndUp: boolean;
+    largeAndUp: boolean;
+};

package/dist/hooks/use-breakpoint.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { ThemeContext } from '../styled.native';
+export const useBreakpoint = () => {
+    const { core: { breakpoint }, } = useContext(ThemeContext);
+    const { width } = useWindowDimensions();
+    return {
+        smallAndUp: width > Number(breakpoint.small),
+        mediumAndUp: width > Number(breakpoint.medium),
+        largeAndUp: width > Number(breakpoint.large),
+    };
+};

package/dist/hooks/use-full-width.d.ts

@@ -0,0 +1,2 @@
+export type FullWidthOptions = 'always' | 'never' | 'small';
+export declare const useFullWidth: (fullWidth?: FullWidthOptions) => boolean;

package/dist/hooks/use-full-width.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+import { useBreakpoint } from './use-breakpoint';
+export const useFullWidth = (fullWidth = 'small') => {
+    const [isFullWidth, setIsfullWidth] = useState(true);
+    const { smallAndUp } = useBreakpoint();
+    useEffect(() => {
+        const values = {
+            small: !smallAndUp,
+            always: true,
+            never: false,
+        };
+        setIsfullWidth(values[fullWidth]);
+    }, [isFullWidth, smallAndUp, setIsfullWidth]);
+    return isFullWidth;
+};

package/dist/hooks/use-layout.d.ts

@@ -0,0 +1,6 @@
+import { LayoutChangeEvent } from 'react-native';
+export declare const useLayout: (defaultHeight?: number) => readonly [{
+    height: number;
+    width: number;
+    measured: boolean;
+}, (e: LayoutChangeEvent) => void];

package/dist/hooks/use-layout.js

@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+export const useLayout = (defaultHeight) => {
+    const [layout, setLayout] = useState({ height: defaultHeight || 0, width: 0, measured: false });
+    const onLayout = useCallback((e) => {
+        const { height, width } = e.nativeEvent.layout;
+        if (height === layout.height && width === layout.width) {
+            return;
+        }
+        setLayout({
+            height,
+            width,
+            measured: true,
+        });
+    }, [layout.height, layout.width]);
+    return [layout, onLayout];
+};

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/providers/IconsProvider.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { IconsType } from './types';
+declare const defaultIcons: IconsType;
+declare function useIcons<T extends IconsType = string & object>(): IconsType & T;
+declare function IconsProvider({ children, icons, }: PropsWithChildren<{
+    icons?: IconsType;
+}>): import("react/jsx-runtime").JSX.Element;
+export { useIcons, IconsProvider, defaultIcons };

package/dist/providers/IconsProvider.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { Address, Advice, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, CalBook, Cal, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, CaretDown, CaretLeft, CaretRight, CaretUp, ChartFilled, Chart, CheckCircle, Check, ChevronDown, ChevronLeftSmallFirst, ChevronLeftSmall, ChevronLeft, ChevronRightSmallLast, ChevronRightSmall, ChevronRight, ChevronUp, Circle, CloseCircle, Cross, Doc, Dollar, Download, EcoHome, Eco, Edit, ElectricCar, ElectricHome, Electricity, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, HelpFilled, Help, Hide, HomeFilled, Home, HydroPower, Info, Link, Logo, MailOpen, Mail, Menu, MessageFilled, Message, Minus, Mobile, NewWindow, PaymentCardFilled, PaymentCard, Phone, Plus, Pound, PricingFilled, Pricing, Search, Security, ShopFilled, Shop, Show, SmartHome, SmartMeter, Solar, StarFilled, Star, Sun, Torch, Trees, Tune, UserFilled, User, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+const defaultIcons = {
+    address: Address,
+    advice: Advice,
+    archive: Archive,
+    'arrow-down': ArrowDown,
+    'arrow-left': ArrowLeft,
+    'arrow-right': ArrowRight,
+    'arrow-up': ArrowUp,
+    award: Award,
+    battery: Battery,
+    'cal-book': CalBook,
+    cal: Cal,
+    'caret-arrow-down': CaretArrowDown,
+    'caret-arrow-left': CaretArrowLeft,
+    'caret-arrow-right': CaretArrowRight,
+    'caret-arrow-up': CaretArrowUp,
+    'caret-down': CaretDown,
+    'caret-left': CaretLeft,
+    'caret-right': CaretRight,
+    'caret-up': CaretUp,
+    'chart-filled': ChartFilled,
+    chart: Chart,
+    'check-circle': CheckCircle,
+    check: Check,
+    'chevron-down': ChevronDown,
+    'chevron-left-small-first': ChevronLeftSmallFirst,
+    'chevron-left-small': ChevronLeftSmall,
+    'chevron-left': ChevronLeft,
+    'chevron-right-small-last': ChevronRightSmallLast,
+    'chevron-right-small': ChevronRightSmall,
+    'chevron-right': ChevronRight,
+    'chevron-up': ChevronUp,
+    circle: Circle,
+    'close-circle': CloseCircle,
+    cross: Cross,
+    doc: Doc,
+    dollar: Dollar,
+    download: Download,
+    'eco-home': EcoHome,
+    eco: Eco,
+    edit: Edit,
+    'electric-car': ElectricCar,
+    'electric-home': ElectricHome,
+    electricity: Electricity,
+    'energy-advice': EnergyAdvice,
+    equals: Equals,
+    euro: Euro,
+    gas: Gas,
+    'globe-address': GlobeAddress,
+    'help-filled': HelpFilled,
+    help: Help,
+    hide: Hide,
+    'home-filled': HomeFilled,
+    home: Home,
+    'hydro-power': HydroPower,
+    info: Info,
+    link: Link,
+    logo: Logo,
+    'mail-open': MailOpen,
+    mail: Mail,
+    menu: Menu,
+    'message-filled': MessageFilled,
+    message: Message,
+    minus: Minus,
+    mobile: Mobile,
+    'new-window': NewWindow,
+    'payment-card-filled': PaymentCardFilled,
+    'payment-card': PaymentCard,
+    phone: Phone,
+    plus: Plus,
+    pound: Pound,
+    'pricing-filled': PricingFilled,
+    pricing: Pricing,
+    search: Search,
+    security: Security,
+    'shop-filled': ShopFilled,
+    shop: Shop,
+    show: Show,
+    'smart-home': SmartHome,
+    'smart-meter': SmartMeter,
+    solar: Solar,
+    'star-filled': StarFilled,
+    star: Star,
+    sun: Sun,
+    torch: Torch,
+    trees: Trees,
+    tune: Tune,
+    'user-filled': UserFilled,
+    user: User,
+    wallet: Wallet,
+    'warm-home': WarmHome,
+    warning: Warning,
+    'web-address': WebAddress,
+    'wind-power': WindPower,
+};
+const IconsContext = createContext(null);
+function useIcons() {
+    const icons = useContext(IconsContext) || defaultIcons;
+    return icons;
+}
+function IconsProvider({ children, icons = {}, }) {
+    const baseIcons = useContext(IconsContext) || defaultIcons;
+    const mergedIcons = {
+        ...baseIcons,
+        ...icons,
+    };
+    return (_jsx(IconsContext.Provider, { value: mergedIcons, children: children }));
+}
+export { useIcons, IconsProvider, defaultIcons };

package/dist/providers/icons/Address.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const Address: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/Address.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Address = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M2.5 6.45C2.5 2.853 5.76 1.5 8 1.5s5.5 1.478 5.5 4.95C13.5 9.922 8 14.5 8 14.5s-5.5-4.454-5.5-8.05Zm7.145 4.313c.723-.835 1.295-1.623 1.697-2.34.43-.77.658-1.452.658-1.973 0-1.072-.437-1.936-1.297-2.568-.886-.65-1.958-.881-2.703-.881-.745 0-1.85.222-2.714.844C4.421 4.466 4 5.319 4 6.45c0 .624.305 2.02 2.349 4.353a24.081 24.081 0 0 0 1.64 1.686 25.59 25.59 0 0 0 1.656-1.726ZM7.09 5.385l1.437-.381.381 1.437-1.437.381-.381-1.437Z", clipRule: "evenodd" }) }));

package/dist/providers/icons/Advice.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const Advice: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/Advice.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Advice = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "M14.5 5.5h-1.59c-.441-2.275-2.475-4-4.91-4s-4.469 1.725-4.91 4H1.5v5H5v-5h-.369C5.046 4.06 6.4 3 8 3c1.601 0 2.954 1.06 3.368 2.5H11v4.983h.502a2.757 2.757 0 0 1-1.99 2.42V12.2h-1.5v2.307h.75a4.256 4.256 0 0 0 4.244-4.024h1.495V5.498L14.5 5.5ZM3.5 9H3V7h.5v2Zm9-2h.5v1.983h-.5V7Z" }) }));

package/dist/providers/icons/Archive.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const Archive: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/Archive.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const Archive = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", fillRule: "evenodd", d: "M1.5 7V3h13v4h-.75v4.1l-1.5.402.402 1.498H2.25V7H1.5Zm2.25 4.5h8.5V7h-8.5v4.5ZM3 5.5h10v-1H3v1Zm4.09 3.222 1.438-.382.381 1.437-1.437.382-.381-1.438Z", clipRule: "evenodd" }) }));

package/dist/providers/icons/ArrowDown.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const ArrowDown: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/ArrowDown.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const ArrowDown = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "m9.051 13.402 3.62-3.62-.449-1.672-3.481 3.481V1.53l-1.5.402v9.659L3.766 8.117 3.318 9.79l3.612 3.612 1.06 1.06 1.061-1.06Z" }) }));

package/dist/providers/icons/ArrowLeft.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const ArrowLeft: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/ArrowLeft.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const ArrowLeft = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "m2.589 6.94 3.619-3.62 1.673.449L4.399 7.25H14.46l-.402 1.5H4.4l3.474 3.474-1.673.448L2.59 9.061 1.528 8l1.061-1.06Z" }) }));

package/dist/providers/icons/ArrowRight.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from 'react-native-svg';
+export declare const ArrowRight: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/icons/ArrowRight.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+export const ArrowRight = (props) => (_jsx(Svg, { viewBox: "0 0 16 16", ...props, children: _jsx(Path, { fill: "currentColor", d: "M13.4 6.94 9.78 3.32l-1.672.449 3.481 3.481H1.528l.402 1.5h9.66l-3.474 3.474 1.673.448L13.4 9.061 14.46 8 13.4 6.94Z" }) }));