@onesy/ui-react 1.0.164 → 1.0.167

package/esm/SectionCards/SectionCards.js

@@ -82,11 +82,11 @@ const useStyle = styleMethod(theme => ({
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCards?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCards?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       size = 'regular',
       values = [],
@@ -102,7 +102,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const refs = {
     root: React.useRef(undefined)
   };
-  const getItem = React.useCallback((item, index) => {
+  const getItem = (item, index) => {
     let styleBackground = {};
     const themed = [undefined, true].includes(item.themed);
     if (item.backgroundColor) {
@@ -136,9 +136,9 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     let styleOverlay = {};
     if (item.overlay) {
-      const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
+      const palette_0 = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
       styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
-        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette_0), 0.74) : palette_0?.main
       });
     }
     const urlVideo = item.backgroundVideo?.url || item.backgroundVideo?.urlSmall || (is('string', item.backgroundVideo) ? item.backgroundVideo : '');
@@ -209,13 +209,13 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, item.propsButton, {
       className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-item-button'], item.propsButton?.className, classes.button])
     }), item.buttonText || l('Click here')))));
-  }, [theme, size]);
+  };
   return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     maxWidth: false,
     MainProps: {
@@ -230,7 +230,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row"
   }, ItemsProps, {
     className: classNames([staticClassName('SectionCards', theme) && ['onesy-SectionCards-items'], ItemsProps?.className, classes.items])
-  }), values?.map((item, index) => getItem(item, index))));
+  }), values?.map((item_1, index_0) => getItem(item_1, index_0))));
 });
 Element.displayName = 'onesy-SectionCards';
 export default Element;

package/esm/SectionCarousel/SectionCarousel.js

@@ -104,12 +104,12 @@ const useStyle = styleMethod(theme => ({
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCarousel?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const Carousel = React.useMemo(() => theme?.elements?.Carousel || CarouselElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionCarousel?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Button = theme?.elements?.Button || ButtonElement;
+  const Carousel = theme?.elements?.Carousel || CarouselElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       size: size_ = 'regular',
       values: values_ = [],
@@ -140,7 +140,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
   // Max 4
   const values = values_?.slice(0, 4);
-  const getItem = React.useCallback((item, index) => {
+  const getItem = (item, index) => {
     let styleBackground = {};
     const themed = [undefined, true].includes(item.themed);
     if (item.backgroundColor) {
@@ -174,9 +174,9 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     let styleOverlay = {};
     if (item.overlay) {
-      const palette = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
+      const palette_0 = theme.palette.color[item.overlay] || theme.methods.color(item.overlay);
       styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
-        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
+        backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette_0), 0.74) : palette_0?.main
       });
     }
     const urlVideo = item.backgroundVideo?.url || item.backgroundVideo?.urlSmall || (is('string', item.backgroundVideo) ? item.backgroundVideo : '');
@@ -239,19 +239,19 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, item.propsButton, {
       className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-item-button'], item.propsButton?.className, classes.button])
     }), item.buttonText || l('Click here')))));
-  }, [theme, size]);
+  };
   return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     maxWidth: false,
     padding: !values?.length,
     className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-root', `onesy-SectionCarousel-size-${size}`], className, classes.root])
   }, other), !!values?.length && /*#__PURE__*/React.createElement(Carousel, _extends({
-    items: values?.map((item, index) => getItem(item, index)),
+    items: values?.map((item_1, index_0) => getItem(item_1, index_0)),
     autoPlay: true
   }, CarouselProps, {
     className: classNames([staticClassName('SectionCarousel', theme) && ['onesy-SectionCarousel-items'], CarouselProps?.className, classes.items, classes[`size_${size}`], fullHeight && classes.fullHeight])

package/esm/SectionContact/SectionContact.js

@@ -37,11 +37,11 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionContact?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Properties = React.useMemo(() => theme?.elements?.Properties || PropertiesElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionContact?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Properties = theme?.elements?.Properties || PropertiesElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       map,
       mapPosition: mapPosition_ = 'bottom',

package/esm/SectionImageGallery/SectionImageGallery.js

@@ -17,9 +17,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionImageGallery?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const ImageGallery = React.useMemo(() => theme?.elements?.ImageGallery || ImageGalleryElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionImageGallery?.props?.default), props_);
+  const Section = theme?.elements?.Section || SectionElement;
+  const ImageGallery = theme?.elements?.ImageGallery || ImageGalleryElement;
   const {
       values,
       value,

package/esm/SectionLogos/SectionLogos.js

@@ -47,10 +47,10 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionLogos?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionLogos?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       values = [],
       size = 'regular',
@@ -86,7 +86,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     justify: "flex-start",
     align: "center",
     className: classNames([staticClassName('SectionLogos', theme) && ['onesy-SectionLogos-items'], classes.items, gray && classes.gray])
-  }, values?.map((item, index) => /*#__PURE__*/React.createElement(Line, _extends({
+  }, values?.map((item_0, index) => /*#__PURE__*/React.createElement(Line, _extends({
     key: index
   }, WrapperProps, {
     fullWidth: true,
@@ -95,14 +95,14 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     className: classNames([staticClassName('SectionLogos', theme) && ['onesy-SectionLogos-item'], ItemProps?.className, classes.item]),
     style: {
-      backgroundImage: `url(${item?.url || item?.urlSmall})`
+      backgroundImage: `url(${item_0?.url || item_0?.urlSmall})`
     }
   })), name && /*#__PURE__*/React.createElement(Type, {
     version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3',
     align: "center",
     fullWidth: true,
     className: classNames([staticClassName('SectionLogos', theme) && ['onesy-SectionLogos-name'], classes.name])
-  }, cleanValue(item?.name || 'No name', {
+  }, cleanValue(item_0?.name || 'No name', {
     capitalize: true
   }))))));
 });

package/esm/SectionMedia/SectionMedia.js

@@ -56,14 +56,14 @@ const useStyle = styleMethod(theme => ({
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionMedia?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Image = React.useMemo(() => theme?.elements?.Image || ImageElement, [theme]);
-  const AudioPlayer = React.useMemo(() => theme?.elements?.AudioPlayer || AudioPlayerElement, [theme]);
-  const VideoPlayer = React.useMemo(() => theme?.elements?.VideoPlayer || VideoPlayerElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionMedia?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Image = theme?.elements?.Image || ImageElement;
+  const AudioPlayer = theme?.elements?.AudioPlayer || AudioPlayerElement;
+  const VideoPlayer = theme?.elements?.VideoPlayer || VideoPlayerElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       value,
       size = 'regular',
@@ -83,9 +83,9 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const refs = {
     root: React.useRef(undefined)
   };
-  const onOpenMedia = React.useCallback(media => {
+  const onOpenMedia = media => {
     window.open(media.url || media.urlSmall, 'blank_');
-  }, []);
+  };
   let element;
   if (value) {
     const mime = value.mime;

package/esm/SectionReviews/SectionReviews.js

@@ -45,12 +45,12 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionReviews?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Avatar = React.useMemo(() => theme?.elements?.Avatar || AvatarElement, [theme]);
-  const Rating = React.useMemo(() => theme?.elements?.Rating || RatingElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionReviews?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Avatar = theme?.elements?.Avatar || AvatarElement;
+  const Rating = theme?.elements?.Rating || RatingElement;
   const {
       values = [],
       size = 'regular',
@@ -88,7 +88,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "flex-start"
   }, ReviewsProps, {
     className: classNames([staticClassName('SectionReviews', theme) && ['onesy-SectionReviews-reviews'], ReviewsProps?.className, classes.reviews])
-  }), values.filter(Boolean).map((item, index) => /*#__PURE__*/React.createElement(Line, _extends({
+  }), values.filter(Boolean).map((item_0, index) => /*#__PURE__*/React.createElement(Line, _extends({
     key: index,
     gap: 1.4,
     direction: "column",
@@ -101,14 +101,14 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
     align: "center"
   }, /*#__PURE__*/React.createElement(Avatar, _extends({
     size: size,
-    image: is('string', item.image) ? item.image : item.image?.url || item.image?.urlSmall
+    image: is('string', item_0.image) ? item_0.image : item_0.image?.url || item_0.image?.urlSmall
   }, AvatarProps, {
     className: classNames([staticClassName('SectionReviews', theme) && ['onesy-SectionReviews-avatar'], AvatarProps?.className])
-  }), item.name?.split(' ').map(item_ => item_[0]).join('')), /*#__PURE__*/React.createElement(Line, {
+  }), item_0.name?.split(' ').map(item_ => item_[0]).join('')), /*#__PURE__*/React.createElement(Line, {
     gap: 0.5,
     direction: "column"
   }, /*#__PURE__*/React.createElement(Rating, _extends({
-    value: item.rating,
+    value: item_0.rating,
     size: ['regular', 'small'].includes(size) ? 'small' : 'regular',
     readOnly: true
   }, RatingProps, {
@@ -119,14 +119,14 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Type, _extends({
     version: size === 'large' ? 't2' : size === 'regular' ? 't3' : 'l1',
     dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(item.name)
+      __html: textToInnerHTML(item_0.name)
     }
   }, NameProps, {
     className: classNames([staticClassName('SectionReviews', theme) && ['onesy-SectionReviews-name'], NameProps?.className])
-  })), item.meta && /*#__PURE__*/React.createElement(Type, _extends({
+  })), item_0.meta && /*#__PURE__*/React.createElement(Type, _extends({
     version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
     dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(item.meta)
+      __html: textToInnerHTML(item_0.meta)
     }
   }, MetaProps, {
     className: classNames([staticClassName('SectionReviews', theme) && ['onesy-SectionReviews-meta'], MetaProps?.className])
@@ -136,7 +136,7 @@ const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, /*#__PURE__*/React.createElement(Type, _extends({
     version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
     dangerouslySetInnerHTML: {
-      __html: textToInnerHTML(item.description)
+      __html: textToInnerHTML(item_0.description)
     }
   }, DescriptionProps, {
     className: classNames([staticClassName('SectionReviews', theme) && ['onesy-SectionReviews-description'], DescriptionProps?.className])

package/esm/SectionTextMedia/SectionTextMedia.js

@@ -31,15 +31,15 @@ const useStyle = styleMethod(theme => ({
 const SectionTextMedia = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionTextMedia?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Text = React.useMemo(() => theme?.elements?.Text || TextElement, [theme]);
-  const Image = React.useMemo(() => theme?.elements?.Image || ImageElement, [theme]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const AudioPlayer = React.useMemo(() => theme?.elements?.AudioPlayer || AudioPlayerElement, [theme]);
-  const VideoPlayer = React.useMemo(() => theme?.elements?.VideoPlayer || VideoPlayerElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionTextMedia?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Text = theme?.elements?.Text || TextElement;
+  const Image = theme?.elements?.Image || ImageElement;
+  const Section = theme?.elements?.Section || SectionElement;
+  const AudioPlayer = theme?.elements?.AudioPlayer || AudioPlayerElement;
+  const VideoPlayer = theme?.elements?.VideoPlayer || VideoPlayerElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
     classes
   } = useStyle();

package/esm/SectionTimeline/SectionTimeline.js

@@ -29,12 +29,12 @@ const useStyle = styleMethod(theme => ({
 });
 const SectionTimeline = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionTimeline?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
-  const Timeline = React.useMemo(() => theme?.elements?.Timeline || TimelineElement, [theme]);
-  const TimelineItem = React.useMemo(() => theme?.elements?.TimelineItem || TimelineItemElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionTimeline?.props?.default), props_);
+  const Section = theme?.elements?.Section || SectionElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
+  const Timeline = theme?.elements?.Timeline || TimelineElement;
+  const TimelineItem = theme?.elements?.TimelineItem || TimelineItemElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
       size = 'regular',
       values = [],
@@ -66,33 +66,33 @@ const SectionTimeline = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true
   }, TimelineProps, {
     className: classNames([staticClassName('SectionTimeline', theme) && ['onesy-SectionTimeline-timeline'], TimelineProps?.className, classes.timeline])
-  }), values?.map((item, index) => /*#__PURE__*/React.createElement(TimelineItem, _extends({
+  }), values?.map((item_0, index) => /*#__PURE__*/React.createElement(TimelineItem, _extends({
     key: index,
-    start: is('string', item.title) ? /*#__PURE__*/React.createElement(Type, _extends({
+    start: is('string', item_0.title) ? /*#__PURE__*/React.createElement(Type, _extends({
       version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
       align: "right"
     }, ItemStartProps, {
       className: classNames([staticClassName('SectionTimeline', theme) && ['onesy-SectionTimeline-item-start'], ItemStartProps?.className, classes.start]),
       dangerouslySetInnerHTML: {
-        __html: textToInnerHTML(item.title)
+        __html: textToInnerHTML(item_0.title)
       }
-    })) : item.title,
+    })) : item_0.title,
     end: /*#__PURE__*/React.createElement(ListItem, _extends({
       Component: "div",
-      primary: is('string', item.heading) ? /*#__PURE__*/React.createElement(Type, _extends({
+      primary: is('string', item_0.heading) ? /*#__PURE__*/React.createElement(Type, _extends({
         version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3'
       }, HeadingProps, {
         dangerouslySetInnerHTML: {
-          __html: textToInnerHTML(item.heading)
+          __html: textToInnerHTML(item_0.heading)
         }
-      })) : item.heading,
-      secondary: is('string', item.description) ? /*#__PURE__*/React.createElement(Type, _extends({
+      })) : item_0.heading,
+      secondary: is('string', item_0.description) ? /*#__PURE__*/React.createElement(Type, _extends({
         version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3'
       }, DescriptionProps, {
         dangerouslySetInnerHTML: {
-          __html: textToInnerHTML(item.description)
+          __html: textToInnerHTML(item_0.description)
         }
-      })) : item.description,
+      })) : item_0.description,
       noBackground: true
     }, ItemEndProps, {
       className: classNames([staticClassName('SectionTimeline', theme) && ['onesy-SectionTimeline-item-end'], ItemEndProps?.className, classes.end]),

package/esm/SectionWatch/SectionWatch.js

@@ -17,9 +17,9 @@ const useStyle = styleMethod(theme => ({
 });
 const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionWatch?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Watch = React.useMemo(() => theme?.elements?.Watch || WatchElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySectionWatch?.props?.default), props_);
+  const Section = theme?.elements?.Section || SectionElement;
+  const Watch = theme?.elements?.Watch || WatchElement;
   const {
       version = 'modern',
       size = 'regular',