@ovotech/element-native 5.4.1 → 5.4.2-canary-317a648-425

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

@@ -9,39 +9,33 @@ 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: { core }, variant }) => css `
+const StyledView = styled.View(({ theme, variant }) => css `
     background-color: ${variant === 'default'
-    ? core.color.brand.forest
-    : core.color.red.darkest};
+    ? theme.color.alert.success
+    : theme.color.alert.error};
     overflow: hidden;
-    padding-top: ${numToPx(core.space[2])};
-    padding-bottom: ${numToPx(core.space[3])};
-    padding-right: ${numToPx(core.space[2])};
-    padding-left: ${numToPx(core.space[4])};
-    border-radius: ${numToPx(core.radius.max)};
+    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: { semantic } }) => css `
-    color: ${semantic.inverted.message.base};
+const StyledP = styled(P)(({ theme }) => css `
+    color: ${theme.color.surface.bright};
   `);
-const StyledThinBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
+const StyledBorder = styled(Animated.View)(({ theme, variant }) => css `
     background-color: ${variant === 'default'
-    ? core.color.brand.energised
-    : core.color.red.light};
-    height: 1px;
+    ? theme.color.alert.successTint
+    : theme.color.alert.errorTint};
+    height: 4px;
   `);
-const StyledThickBorder = styled(Animated.View)(({ theme: { core }, variant }) => css `
-    background-color: ${variant === 'default'
-    ? core.color.brand.leaf
-    : core.color.red.base};
-    height: 3px;
-  `);
-const StyledCloseIcon = styled(TouchableOpacity)(({ theme: { core, semantic } }) => css `
-    background-color: ${semantic.inverted.surface};
-    border-radius: ${numToPx(core.radius.max)};
-    width: ${numToPx(core.space[7])};
-    height: ${numToPx(core.space[7])};
-    padding: ${numToPx(core.space[2])};
+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;
   `);
@@ -88,7 +82,7 @@ const CustomToastWithTimeIndicator = ({ message, duration = 5000, variant, }) =>
                     textRef.current?.measureInWindow((_x, _y, _width, height) => {
                         setTextHeight(height);
                     });
-                }, children: message }), _jsxs(View, { style: { position: 'absolute', bottom: 0 }, children: [_jsx(StyledThinBorder, { variant: variant, style: style }), _jsx(StyledThickBorder, { variant: variant, style: style })] })] }));
+                }, 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;
@@ -96,9 +90,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
     const actionRef = useRef(null);
     const [textHeight, setTextHeight] = useState(0);
     const [actionHeight, setActionHeight] = useState(0);
-    const toastHeight = Math.floor(textHeight) === Math.floor(actionHeight) && !dismissible // handling multiline
-        ? textHeight
-        : textHeight + actionHeight;
+    const toastHeight = textHeight + actionHeight;
     const handleAction = () => {
         if (action && actionTitle) {
             action();
@@ -118,7 +110,7 @@ const CustomToast = ({ id, message, dismissible, action, actionTitle, width, var
                             textRef.current?.measureInWindow((_x, _y, _width, height) => {
                                 setTextHeight(height);
                             });
-                        }, children: message }), action && actionTitle ? (_jsx(Action, { ref: actionRef, style: { width: 'auto' }, inverted: true, inline: true, iconRight: "chevron-right-small", onPress: handleAction, onLayout: () => {
+                        }, 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);
                             });

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

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

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

@@ -4,14 +4,14 @@ import { Animated, View } from 'react-native';
 import { useTheme } from '../../styled.native';
 import { HintText } from '../HintText/HintText';
 import { LabelText } from '../LabelText';
-import { StyledToggleDot, StyledToggleInputWrapper, StyledToggleInput, StyledWrapper, } from './styles';
+import { StyledToggleDot, StyledToggleInput, StyledToggleInputWrapper, StyledWrapper, } from './styles';
 const Input = ({ checked, labelPosition, testID, ...rest }) => {
-    const { core } = useTheme();
-    const leftVal = useRef(new Animated.Value(checked ? core.space[6] : core.space[1])).current;
+    const theme = useTheme();
+    const leftVal = useRef(new Animated.Value(checked ? theme.space[600] : theme.space[100])).current;
     useEffect(() => {
         Animated.timing(leftVal, {
-            toValue: checked ? core.space[6] : core.space[1],
-            duration: 150, // i.e. theme.core.transition.fast
+            toValue: checked ? theme.space[600] : theme.space[100],
+            duration: theme.transition.duration.fast,
             useNativeDriver: true,
         }).start();
     }, [checked]);

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

@@ -1,17 +1,17 @@
 import { numToPx } from '@ovotech/element-core';
 import { Animated } from 'react-native';
 import styled from '../../styled.native';
-export const StyledWrapper = styled.TouchableOpacity(({ theme: { core }, hasLabel, inline, labelPosition }) => `
-    width: ${hasLabel ? (inline ? undefined : '100%') : numToPx(core.space[11])};
+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: { core }, labelPosition }) => {
+export const StyledToggleInputWrapper = styled.View(({ theme, labelPosition }) => {
     return `
-    width: ${numToPx(core.space[11])};
-    height: ${numToPx(core.space[6])};
+    width: ${numToPx(theme.space[1100])};
+    height: ${numToPx(theme.space[600])};
     ${labelPosition
         ? labelPosition === 'left'
             ? 'margin-left: 10px;'
@@ -19,19 +19,21 @@ export const StyledToggleInputWrapper = styled.View(({ theme: { core }, labelPos
         : ''}
     `;
 });
-export const StyledToggleInput = styled.View(({ theme: { core, semantic }, checked }) => {
+export const StyledToggleInput = styled.View(({ theme, checked }) => {
     return `
-      width: ${numToPx(core.space[11])};
-      height: ${numToPx(core.space[6])};
+      width: ${numToPx(theme.space[1100])};
+      height: ${numToPx(theme.space[600])};
       justify-content: center;
-      border-radius: ${numToPx(core.radius.large)};
-      background: ${checked ? semantic.focus.outline : semantic.message.secondary};
+      border-radius: ${numToPx(theme.border.radius.lg)};
+      background: ${checked
+        ? theme.color.outline.outer
+        : theme.color.surface.onSurfaceVariant};
     `;
 });
-export const StyledToggleDot = styled(Animated.View)(({ theme: { core }, checked }) => `
+export const StyledToggleDot = styled(Animated.View)(({ theme, checked }) => `
   position: absolute;
-  width: ${numToPx(core.space[4])};
-  height: ${numToPx(core.space[4])};
-  border-radius: ${numToPx(core.space[4])};
-  background-color: ${checked ? core.color.brand.white : core.color.neutral.lighter};
+  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/components/index.js

@@ -2,39 +2,30 @@ 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 './CTAButton';
-export * from './CTALink';
 export * from './CurrencyField';
 export * from './CurrencyInput';
 export * from './DataTable';
 export * from './DateField';
-export * from './DescriptionList';
 export * from './Disclosure';
-export * from './Display0';
-export * from './Display1';
-export * from './Display2';
-export * from './Display3';
+export * from './Display';
 export * from './Divider';
 export * from './Em';
 export * from './EmailField';
 export * from './EmailInput';
-export * from './ErrorSummaryNotification';
 export * from './Field';
-export * from './FilterSelect';
 export * from './Grid';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
+export * from './Heading';
 export * from './Icon';
-export * from './Label';
-export * from './Lead';
 export * from './LineThrough';
+export * from './Link';
 export * from './List';
 export * from './Margin';
 export * from './NavHeader';
+export * from './NavIcon';
 export * from './Notification';
 export * from './NumberField';
 export * from './NumberInput';
@@ -43,14 +34,17 @@ export * from './PasswordField';
 export * from './PasswordInput';
 export * from './PhoneField';
 export * from './PhoneInput';
+export * from './Pictogram';
 export * from './Radio';
+export * from './RadioCard';
+export * from './ScreenView';
+export * from './RemoteImage';
 export * from './SegmentedControls';
 export * from './SelectField';
+export * from './SkeletonButton';
 export * from './SkeletonCircle';
-export * from './SkeletonCTA';
 export * from './SkeletonHeading';
 export * from './SkeletonText';
-export * from './Small';
 export * from './Spinner';
 export * from './Stack';
 export * from './Strong';
@@ -58,10 +52,6 @@ export * from './Tabs';
 export * from './TextareaField';
 export * from './TextareaInput';
 export * from './TextField';
-export * from './TextGroup';
 export * from './TextInput';
-export * from './TextLink';
-export * from './Toggle';
 export * from './Toast';
-export * from './ProductCarousel';
-export * from './RadioCard';
+export * from './Toggle';

package/dist/esm/hooks/index.js

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

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

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

package/dist/esm/index.js

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

package/dist/esm/providers/IconsProvider.js

@@ -1,9 +1,10 @@
 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';
+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,
@@ -11,85 +12,98 @@ const defaultIcons = {
     'arrow-up': ArrowUp,
     award: Award,
     battery: Battery,
-    'cal-book': CalBook,
+    '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,
-    'caret-down': CaretDown,
-    'caret-left': CaretLeft,
-    'caret-right': CaretRight,
-    'caret-up': CaretUp,
-    'chart-filled': ChartFilled,
     chart: Chart,
-    'check-circle': CheckCircle,
+    'chart-filled': ChartFilled,
     check: Check,
+    'check-circle': CheckCircle,
     'chevron-down': ChevronDown,
-    'chevron-left-small-first': ChevronLeftSmallFirst,
-    'chevron-left-small': ChevronLeftSmall,
+    'chevron-down-small': ChevronDownSmall,
     'chevron-left': ChevronLeft,
-    'chevron-right-small-last': ChevronRightSmallLast,
-    'chevron-right-small': ChevronRightSmall,
+    '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-home': EcoHome,
     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,
-    'help-filled': HelpFilled,
+    'heat-pump': HeatPump,
     help: Help,
+    'help-filled': HelpFilled,
     hide: Hide,
-    'home-filled': HomeFilled,
     home: Home,
+    'home-filled': HomeFilled,
     'hydro-power': HydroPower,
     info: Info,
     link: Link,
     logo: Logo,
-    'mail-open': MailOpen,
     mail: Mail,
+    'mail-open': MailOpen,
     menu: Menu,
-    'message-filled': MessageFilled,
     message: Message,
+    'message-filled': MessageFilled,
     minus: Minus,
     mobile: Mobile,
     'new-window': NewWindow,
-    'payment-card-filled': PaymentCardFilled,
+    '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-filled': PricingFilled,
     pricing: Pricing,
+    'pricing-filled': PricingFilled,
     search: Search,
     security: Security,
-    'shop-filled': ShopFilled,
-    shop: Shop,
+    send: Send,
+    share: Share,
     show: Show,
     'smart-home': SmartHome,
     'smart-meter': SmartMeter,
     solar: Solar,
-    'star-filled': StarFilled,
     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-filled': UserFilled,
     user: User,
+    'user-filled': UserFilled,
     wallet: Wallet,
     'warm-home': WarmHome,
     warning: Warning,
@@ -109,4 +123,4 @@ function IconsProvider({ children, icons = {}, }) {
     };
     return (_jsx(IconsContext.Provider, { value: mergedIcons, children: children }));
 }
-export { useIcons, IconsProvider, defaultIcons };
+export { defaultIcons, IconsProvider, useIcons };

package/dist/esm/providers/icons/index.js

@@ -1,5 +1,6 @@
 export * from './Address';
 export * from './Advice';
+export * from './AI';
 export * from './Archive';
 export * from './ArrowDown';
 export * from './ArrowLeft';
@@ -7,85 +8,98 @@ export * from './ArrowRight';
 export * from './ArrowUp';
 export * from './Award';
 export * from './Battery';
-export * from './CalBook';
+export * from './BritishSignLanguage';
 export * from './Cal';
+export * from './CalBook';
 export * from './CaretArrowDown';
 export * from './CaretArrowLeft';
 export * from './CaretArrowRight';
 export * from './CaretArrowUp';
-export * from './CaretDown';
-export * from './CaretLeft';
-export * from './CaretRight';
-export * from './CaretUp';
-export * from './ChartFilled';
 export * from './Chart';
-export * from './CheckCircle';
+export * from './ChartFilled';
 export * from './Check';
+export * from './CheckCircle';
 export * from './ChevronDown';
-export * from './ChevronLeftSmallFirst';
-export * from './ChevronLeftSmall';
+export * from './ChevronDownSmall';
 export * from './ChevronLeft';
-export * from './ChevronRightSmallLast';
-export * from './ChevronRightSmall';
+export * from './ChevronLeftSmall';
+export * from './ChevronLeftSmallFirst';
 export * from './ChevronRight';
+export * from './ChevronRightSmall';
+export * from './ChevronRightSmallLast';
 export * from './ChevronUp';
+export * from './ChevronUpSmall';
 export * from './Circle';
 export * from './CloseCircle';
+export * from './Copy';
 export * from './Cross';
 export * from './Doc';
 export * from './Dollar';
+export * from './Dots';
 export * from './Download';
-export * from './EcoHome';
 export * from './Eco';
+export * from './EcoHome';
 export * from './Edit';
 export * from './ElectricCar';
 export * from './ElectricHome';
 export * from './Electricity';
+export * from './Ellipsis';
 export * from './EnergyAdvice';
 export * from './Equals';
 export * from './Euro';
 export * from './Gas';
 export * from './GlobeAddress';
-export * from './HelpFilled';
+export * from './HeatPump';
 export * from './Help';
+export * from './HelpFilled';
 export * from './Hide';
-export * from './HomeFilled';
 export * from './Home';
+export * from './HomeFilled';
 export * from './HydroPower';
 export * from './Info';
 export * from './Link';
 export * from './Logo';
-export * from './MailOpen';
 export * from './Mail';
+export * from './MailOpen';
 export * from './Menu';
-export * from './MessageFilled';
 export * from './Message';
+export * from './MessageFilled';
 export * from './Minus';
 export * from './Mobile';
 export * from './NewWindow';
-export * from './PaymentCardFilled';
+export * from './OvoLive';
+export * from './OvoLiveFilled';
+export * from './Pause';
 export * from './PaymentCard';
+export * from './PaymentCardFilled';
+export * from './Paypoint';
 export * from './Phone';
 export * from './Plus';
+export * from './PlusFilled';
 export * from './Pound';
-export * from './PricingFilled';
 export * from './Pricing';
+export * from './PricingFilled';
 export * from './Search';
 export * from './Security';
-export * from './ShopFilled';
-export * from './Shop';
+export * from './Send';
+export * from './Share';
 export * from './Show';
 export * from './SmartHome';
 export * from './SmartMeter';
 export * from './Solar';
-export * from './StarFilled';
 export * from './Star';
+export * from './StarFilled';
 export * from './Sun';
+export * from './Switch';
+export * from './ThumbsDown';
+export * from './ThumbsDownFilled';
+export * from './ThumbsUp';
+export * from './ThumbsUpFilled';
 export * from './Torch';
 export * from './Trees';
 export * from './Tune';
-export * from './UserFilled';
 export * from './User';
+export * from './UserFilled';
 export * from './Wallet';
 export * from './WarmHome';
 export * from './Warning';

package/dist/esm/providers/index.js

@@ -1,2 +1,4 @@
 export * from './IconsProvider';
-export * from './types';
+export * from './PictogramsProvider';
+export * from './icons-types';
+export * from './pictograms-types';

package/dist/esm/styled.native.js

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

package/dist/esm/utils/utils.js

@@ -42,6 +42,7 @@ function responsiveStyle(property, value, breakpoints, formatter) {
         values = [value];
     }
     const ascMediaQueries = [
+        breakpoints.xsmallAndUp,
         breakpoints.smallAndUp,
         breakpoints.mediumAndUp,
         breakpoints.largeAndUp,
@@ -65,4 +66,4 @@ function filterChildrenByType(children, type) {
 function getValidChildren(children) {
     return Children.toArray(children).filter(Boolean);
 }
-export { callAll, filterChildrenByType, getErrorMessage, getValidChildren, getText, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };
+export { callAll, filterChildrenByType, getErrorMessage, getText, getValidChildren, mergeRefs, responsiveStyle, styledComponentWithBreakpoints, };

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/providers/IconsProvider.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
-import { IconsType } from './types';
+import { IconsType } from './icons-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 };
+export { defaultIcons, IconsProvider, useIcons };