@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

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

@@ -0,0 +1,16 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledSubLabelText = styled.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    font-family: ${theme.native.font.family.book};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${theme.color.surface.onSurfaceVariant};
+    font-size: ${numToPx(fontSize)};
+  `;
+});
+const SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
+export { SubLabelText };

package/dist/esm/src/components/Tabs/Tab.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const TabText = styled.Text(({ theme, active = false }) => css `
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-family: ${theme.native.font.family.bold};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${active
+    ? theme.color.outline.outer
+    : theme.color.surface.onSurface};
+    text-align: center;
+    padding: ${numToPx(theme.space[300])} ${numToPx(theme.space[200])};
+  `);
+const TabTouchable = styled.TouchableOpacity(({ active = false, stretch = false, theme }) => {
+    return css `
+    flex-grow: ${stretch ? 1 : 0};
+
+    border-bottom-width: ${numToPx(theme.border.width.sm)};
+    border-bottom-style: solid;
+    border-bottom-color: ${theme.color.surface.border};
+
+    ${active
+        ? css `
+          border-bottom-color: ${theme.color.outline.outer};
+          border-bottom-width: ${numToPx(theme.border.width.md)};
+        `
+        : ''}
+  `;
+});
+export const Tab = ({ active, fullWidth = false, children, ref, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(TabTouchable, { accessible: true, accessibilityRole: "tab", accessibilityState: { selected: active }, active: active, stretch: fullWidth, ref: ref, ...rest, children: _jsx(TabText, { active: active, ...breakpoints, children: children }) }));
+};

package/dist/esm/src/components/Tabs/TabList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children, cloneElement } from 'react';
+import styled, { css } from '../../styled.native';
+import { callAll, getValidChildren } from '../../utils';
+const StyledTabList = styled.View(({ theme }) => css `
+    flex-direction: row;
+    margin: -${numToPx(theme.border.width.sm)};
+  `);
+export const TabList = ({ children, setActiveTab, activeTab, tabRefs, fullWidth, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(StyledTabList, { accessible: true, accessibilityRole: "tablist", ...rest, children: Children.map(validChildren, (child, i) => cloneElement(child, {
+            onPress: callAll(() => setActiveTab && setActiveTab(i), child.props.onPress),
+            active: activeTab === i,
+            fullWidth,
+            ref: tabRefs?.[i],
+        })) }));
+};

package/dist/esm/src/components/Tabs/TabPanel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+const StyledView = styled.View(({ theme }) => css `
+    padding: ${numToPx(theme.space[400])};
+    border-top-width: ${numToPx(theme.border.width.sm)};
+    border-style: solid;
+    border-color: ${theme.color.input.borderDim};
+    z-index: -1;
+  `);
+export const TabPanel = ({ ...rest }) => {
+    return _jsx(StyledView, { ...rest });
+};

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

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { cloneElement, createRef, useEffect, useRef, useState, } from 'react';
+import styled, { css } from '../../styled.native';
+import { filterChildrenByType } from '../../utils';
+import { Card } from '../Card';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+const TabsCard = styled(Card)(({ theme }) => css `
+    padding: 0;
+    border: ${numToPx(theme.border.width.sm)} solid transparent;
+    background: transparent;
+  `);
+export const Tabs = ({ children, defaultSelected = 0, onSelected, fullWidth, ...rest }) => {
+    const [activeTab, setActiveTab] = useState(defaultSelected);
+    const tabList = filterChildrenByType(children, TabList);
+    const tabPanels = filterChildrenByType(children, TabPanel);
+    const tabRefs = tabPanels.map(() => createRef());
+    const loaded = useRef(false);
+    useEffect(() => {
+        if (loaded.current) {
+            onSelected && onSelected(activeTab);
+        }
+        else {
+            loaded.current = true;
+        }
+    }, [onSelected, activeTab]);
+    return (_jsxs(TabsCard, { ...rest, children: [tabList.map((child) => cloneElement(child, {
+                setActiveTab,
+                activeTab,
+                tabRefs,
+                fullWidth,
+            })), tabPanels
+                .filter((_, index) => index === activeTab)
+                .map((child, index) => cloneElement(child, {
+                hidden: activeTab !== index,
+            }))] }));
+};

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

@@ -0,0 +1,4 @@
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';
+export { Tabs } from './Tabs';

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

@@ -0,0 +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, {}) }));
+};

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

@@ -0,0 +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 });
+export { TextInput };

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

@@ -0,0 +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, {}) }));
+};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+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 TextareaInput = ({ rows = 3, ref, ...rest }) => {
+    return (_jsx(StyledInput, { ...rest, keyboardType: "default", multiline: true, textAlignVertical: "top", rows: rows, ref: ref }));
+};
+export { TextareaInput };

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

@@ -0,0 +1,118 @@
+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';
+import { useEffect, useRef, useState } from 'react';
+import { Dimensions, TouchableOpacity, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+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 StyledView = styled.View(({ theme, variant }) => css `
+    background-color: ${variant === 'default'
+    ? theme.color.alert.success
+    : theme.color.alert.error};
+    overflow: hidden;
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[200])};
+    padding-right: ${numToPx(theme.space[200])};
+    padding-left: ${numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    flex-direction: row;
+  `);
+const StyledP = styled(P)(({ theme }) => css `
+    color: ${theme.color.surface.bright};
+  `);
+const StyledBorder = styled(Animated.View)(({ theme, variant }) => css `
+    background-color: ${variant === 'default'
+    ? theme.color.alert.successTint
+    : theme.color.alert.errorTint};
+    height: 4px;
+  `);
+const StyledCloseIcon = styled(TouchableOpacity)(({ theme }) => css `
+    background-color: ${theme.color.surface.onSurface};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    width: ${numToPx(theme.space[700])};
+    height: ${numToPx(theme.space[700])};
+    padding: ${numToPx(theme.space[200])};
+    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, { ...t, dismissible: dismissible, action: action, actionTitle: actionTitle, variant: variant }, message)),
+        })
+        : toast(message, {
+            id: 'clipboard',
+            position: ToastPosition.BOTTOM,
+            duration,
+            disableShadow: true,
+            customToast: t => (_jsx(CustomToastWithTimeIndicator, { ...t, variant: variant }, message)),
+        });
+};
+const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) => {
+    const toastPadding = 20;
+    const textRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const windowWidth = Dimensions.get('window').width;
+    const screenPadding = 32;
+    const toastWidth = windowWidth - screenPadding;
+    const sharedWidth = useSharedValue(toastWidth);
+    const style = useAnimatedStyle(() => {
+        return {
+            width: withTiming(sharedWidth.value, {
+                duration: duration,
+                easing: Easing.linear,
+            }),
+        };
+    });
+    useEffect(() => {
+        sharedWidth.value = 0;
+    }, []);
+    return (_jsxs(StyledView, { variant: variant, style: {
+            width: toastWidth,
+            height: textHeight + toastPadding,
+            flexWrap: 'wrap',
+        }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                    textRef.current?.measureInWindow((_x, _y, _width, height) => {
+                        setTextHeight(height);
+                    });
+                }, 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 textRef = useRef(null);
+    const actionRef = useRef(null);
+    const [textHeight, setTextHeight] = useState(0);
+    const [actionHeight, setActionHeight] = useState(0);
+    const toastHeight = textHeight + actionHeight;
+    const handleAction = () => {
+        if (action && actionTitle) {
+            action();
+            toast.dismiss(id);
+        }
+    };
+    return (_jsxs(StyledView, { variant: variant, style: {
+            width,
+            height: toastHeight + toastPadding,
+            alignItems: action ? 'flex-start' : 'center',
+        }, children: [_jsxs(View, { style: {
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    justifyContent: 'space-between',
+                    flex: 1,
+                }, children: [_jsx(StyledP, { ref: textRef, onLayout: () => {
+                            textRef.current?.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: () => {
+                            actionRef.current?.measureInWindow((_x, _y, _width, height) => {
+                                setActionHeight(height);
+                            });
+                        }, children: actionTitle })) : null] }), dismissible ? (_jsx(StyledCloseIcon, { onPress: () => toast.dismiss(id), children: _jsx(Icon, { name: "cross", color: "#fff", size: 14 }) })) : null] }));
+};

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

@@ -0,0 +1 @@
+export { ToastsContainer, showToast } from './Toast';

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { HintText } from '../HintText/HintText';
+import { LabelText } from '../LabelText';
+import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
+const Input = ({ checked, labelPosition, testID, ...rest }) => {
+    const theme = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
+    useEffect(() => {
+        Animated.timing(leftVal, {
+            toValue: checked ? theme.space[600] : theme.space[100],
+            duration: theme.transition.duration.fast,
+            useNativeDriver: true,
+        }).start();
+    }, [checked]);
+    return (_jsx(StyledToggleInputWrapper, { labelPosition: labelPosition, ...rest, children: _jsx(StyledToggleInput, { checked: checked, testID: testID, children: _jsx(StyledToggleDot, { style: {
+                    transform: [{ translateX: leftVal }],
+                }, checked: checked }) }) }));
+};
+export const Toggle = ({ activeOpacity = 0.8, checked = false, label, hint, inline, labelPosition = 'left', testID, ref, ...rest }) => {
+    const hasLabel = label !== undefined;
+    return (_jsxs(StyledWrapper, { 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 })] }));
+};

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

@@ -0,0 +1,39 @@
+import { numToPx } from '@ovotech/element-core';
+import { Animated } from 'react-native';
+import styled from '../../styled.native';
+export const StyledWrapper = styled.TouchableOpacity(({ theme, hasLabel, inline, labelPosition }) => `
+    width: ${hasLabel ? (inline ? undefined : '100%') : numToPx(theme.space[1100])};
+    display: flex;
+    flex-direction: row${labelPosition === 'left' ? '' : '-reverse'};
+    justify-content: space-between;
+    position: relative;
+  `);
+export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) => {
+    return `
+    width: ${numToPx(theme.space[1100])};
+    height: ${numToPx(theme.space[600])};
+    ${labelPosition
+        ? labelPosition === 'left'
+            ? 'margin-left: 10px;'
+            : 'margin-right: 10px;'
+        : null}
+    `;
+});
+export const StyledToggleInput = styled.View(({ theme, checked }) => {
+    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
+        : theme.color.surface.onSurfaceVariant};
+    `;
+});
+export const StyledToggleDot = styled(Animated.View)(({ theme, checked }) => `
+  position: absolute;
+  width: ${numToPx(theme.space[400])};
+  height: ${numToPx(theme.space[400])};
+  border-radius: ${numToPx(theme.space[400])};
+  background-color: ${checked ? theme.color.brand.onBrand : theme.color.surface.dim};
+`);

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

@@ -0,0 +1,55 @@
+export * from './Accordion';
+export * from './ActionCard';
+export * from './ActionList';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Cards';
+export * from './Checkbox';
+export * from './CurrencyField';
+export * from './CurrencyInput';
+export * from './DataTable';
+export * from './DateField';
+export * from './Disclosure';
+export * from './Display';
+export * from './Divider';
+export * from './Em';
+export * from './EmailField';
+export * from './EmailInput';
+export * from './Field';
+export * from './Grid';
+export * from './Heading';
+export * from './Icon';
+export * from './LineThrough';
+export * from './Link';
+export * from './List';
+export * from './Margin';
+export * from './NavHeader';
+export * from './Notification';
+export * from './NumberField';
+export * from './NumberInput';
+export * from './P';
+export * from './PasswordField';
+export * from './PasswordInput';
+export * from './PhoneField';
+export * from './PhoneInput';
+export * from './Pictogram';
+export * from './Radio';
+export * from './RadioCard';
+export * from './RemoteImage';
+export * from './SegmentedControls';
+export * from './SelectField';
+export * from './SkeletonButton';
+export * from './SkeletonCircle';
+export * from './SkeletonHeading';
+export * from './SkeletonText';
+export * from './Spinner';
+export * from './Stack';
+export * from './Strong';
+export * from './Tabs';
+export * from './TextareaField';
+export * from './TextareaInput';
+export * from './TextField';
+export * from './TextInput';
+export * from './Toast';
+export * from './Toggle';

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

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

package/dist/esm/src/hooks/use-breakpoint.js

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

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

@@ -0,0 +1,15 @@
+import { useEffect, useState } 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/esm/src/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/esm/src/index.js

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

package/dist/esm/src/providers/IconsProvider.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { Address, Advice, Ai, Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, Battery, BritishSignLanguage, Cal, CalBook, CaretArrowDown, CaretArrowLeft, CaretArrowRight, CaretArrowUp, Chart, ChartFilled, Check, CheckCircle, ChevronDown, ChevronDownSmall, ChevronLeft, ChevronLeftSmall, ChevronLeftSmallFirst, ChevronRight, ChevronRightSmall, ChevronRightSmallLast, ChevronUp, ChevronUpSmall, Circle, CloseCircle, Copy, Cross, Doc, Dollar, Dots, Download, Eco, EcoHome, Edit, ElectricCar, ElectricHome, Electricity, Ellipsis, EnergyAdvice, Equals, Euro, Gas, GlobeAddress, HeatPump, Help, HelpFilled, Hide, Home, HomeFilled, HydroPower, Info, Link, Logo, Mail, MailOpen, Menu, Message, MessageFilled, Minus, Mobile, NewWindow, OvoLive, OvoLiveFilled, Pause, PaymentCard, PaymentCardFilled, Paypoint, Phone, Plus, PlusFilled, Pound, Pricing, PricingFilled, Search, Security, Send, Share, Show, SmartHome, SmartMeter, Solar, Star, StarFilled, Sun, Switch, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, Torch, Trees, Tune, User, UserFilled, Wallet, WarmHome, Warning, WebAddress, WindPower, } from './icons';
+const defaultIcons = {
+    address: Address,
+    advice: Advice,
+    ai: Ai,
+    archive: Archive,
+    'arrow-down': ArrowDown,
+    'arrow-left': ArrowLeft,
+    'arrow-right': ArrowRight,
+    'arrow-up': ArrowUp,
+    award: Award,
+    battery: Battery,
+    'british-sign-language': BritishSignLanguage,
+    cal: Cal,
+    'cal-book': CalBook,
+    'caret-arrow-down': CaretArrowDown,
+    'caret-arrow-left': CaretArrowLeft,
+    'caret-arrow-right': CaretArrowRight,
+    'caret-arrow-up': CaretArrowUp,
+    chart: Chart,
+    'chart-filled': ChartFilled,
+    check: Check,
+    'check-circle': CheckCircle,
+    'chevron-down': ChevronDown,
+    'chevron-down-small': ChevronDownSmall,
+    'chevron-left': ChevronLeft,
+    'chevron-left-small': ChevronLeftSmall,
+    'chevron-left-small-first': ChevronLeftSmallFirst,
+    'chevron-right': ChevronRight,
+    'chevron-right-small': ChevronRightSmall,
+    'chevron-right-small-last': ChevronRightSmallLast,
+    'chevron-up': ChevronUp,
+    'chevron-up-small': ChevronUpSmall,
+    circle: Circle,
+    'close-circle': CloseCircle,
+    copy: Copy,
+    cross: Cross,
+    doc: Doc,
+    dollar: Dollar,
+    dots: Dots,
+    download: Download,
+    eco: Eco,
+    'eco-home': EcoHome,
+    edit: Edit,
+    'electric-car': ElectricCar,
+    'electric-home': ElectricHome,
+    electricity: Electricity,
+    ellipsis: Ellipsis,
+    'energy-advice': EnergyAdvice,
+    equals: Equals,
+    euro: Euro,
+    gas: Gas,
+    'globe-address': GlobeAddress,
+    'heat-pump': HeatPump,
+    help: Help,
+    'help-filled': HelpFilled,
+    hide: Hide,
+    home: Home,
+    'home-filled': HomeFilled,
+    'hydro-power': HydroPower,
+    info: Info,
+    link: Link,
+    logo: Logo,
+    mail: Mail,
+    'mail-open': MailOpen,
+    menu: Menu,
+    message: Message,
+    'message-filled': MessageFilled,
+    minus: Minus,
+    mobile: Mobile,
+    'new-window': NewWindow,
+    'ovo-live': OvoLive,
+    'ovo-live-filled': OvoLiveFilled,
+    pause: Pause,
+    'payment-card': PaymentCard,
+    'payment-card-filled': PaymentCardFilled,
+    paypoint: Paypoint,
+    phone: Phone,
+    plus: Plus,
+    'plus-filled': PlusFilled,
+    pound: Pound,
+    pricing: Pricing,
+    'pricing-filled': PricingFilled,
+    search: Search,
+    security: Security,
+    send: Send,
+    share: Share,
+    show: Show,
+    'smart-home': SmartHome,
+    'smart-meter': SmartMeter,
+    solar: Solar,
+    star: Star,
+    'star-filled': StarFilled,
+    sun: Sun,
+    switch: Switch,
+    'thumbs-down': ThumbsDown,
+    'thumbs-down-filled': ThumbsDownFilled,
+    'thumbs-up': ThumbsUp,
+    'thumbs-up-filled': ThumbsUpFilled,
+    torch: Torch,
+    trees: Trees,
+    tune: Tune,
+    user: User,
+    'user-filled': UserFilled,
+    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 { defaultIcons, IconsProvider, useIcons };