@onesy/ui-react 1.0.164 → 1.0.165

package/esm/CalendarWeek/CalendarWeek.js

@@ -127,10 +127,10 @@ const useStyle = styleMethod(theme => ({
 const CalendarWeek = /*#__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?.onesyCalendarWeek?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarWeek?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
   const {
       date,
       times: timesProps,
@@ -181,7 +181,7 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       clearInterval(refs.interval.current);
     };
   }, []);
-  const getDates = React.useCallback(available => {
+  const getDates = available => {
     const values = available.dates?.values || [];
     return values.map(item => {
       if (item.entire) {
@@ -198,7 +198,7 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
       return item;
     });
-  }, [times]);
+  };
   const optionsStatus = React.useMemo(() => {
     return [{
       name: l('Working'),
@@ -223,23 +223,23 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       value: 'other'
     }];
   }, []);
-  const getColor = React.useCallback(item => {
+  const getColor = item_0 => {
     let palette = theme.palette.color.neutral;
-    if (item?.status === 'working') palette = theme.palette.color.success;
-    if (item?.status === 'not-working') palette = theme.palette.color.info;
-    if (item?.status === 'break') palette = theme.palette.color.warning;
-    if (item?.status === 'pending') palette = theme.methods.color(colors.yellow[50]);
-    if (item?.status === 'rescheduled') palette = theme.methods.color(colors.purple[50]);
-    if (item?.status === 'canceled') palette = theme.palette.color.error;
-    if (item?.status === 'other') palette = theme.palette.color.neutral;
-    if (item.color) palette = theme.methods.color(item.color);
+    if (item_0?.status === 'working') palette = theme.palette.color.success;
+    if (item_0?.status === 'not-working') palette = theme.palette.color.info;
+    if (item_0?.status === 'break') palette = theme.palette.color.warning;
+    if (item_0?.status === 'pending') palette = theme.methods.color(colors.yellow[50]);
+    if (item_0?.status === 'rescheduled') palette = theme.methods.color(colors.purple[50]);
+    if (item_0?.status === 'canceled') palette = theme.palette.color.error;
+    if (item_0?.status === 'other') palette = theme.palette.color.neutral;
+    if (item_0.color) palette = theme.methods.color(item_0.color);
     return palette[rangeShade];
-  }, [rangeShade, colors, theme]);
-  const itemToText = React.useCallback(item => {
-    if (item === 'pending') return l('Scheduled');
-    if (item === 'not-count-workout-session') return l(`Don't count workout session`);
-    return optionsStatus?.find(itemStatus => itemStatus.value === item)?.name ?? l(item);
-  }, []);
+  };
+  const itemToText = item_1 => {
+    if (item_1 === 'pending') return l('Scheduled');
+    if (item_1 === 'not-count-workout-session') return l(`Don't count workout session`);
+    return optionsStatus?.find(itemStatus => itemStatus.value === item_1)?.name ?? l(item_1);
+  };
   const renderTimes = (day, valuesAll, weekly = true, itemDay) => {
     if (itemDay !== undefined && !itemDay?.active) return null;
     if (weekly) {
@@ -252,38 +252,38 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     const dayStartOfDay = startOf(day, 'day');
     const dayDate = format(day, formats.date);
-    const values = valuesAll?.filter(item => {
-      const from = new OnesyDate(item.from);
-      const fromStartOfDay = startOf(from, 'day');
-      const to = new OnesyDate(item.to);
-      const toStartOfDay = startOf(to, 'day');
-      return [undefined, true].includes(refs.statuses.current[item.status || 'working']) && (weekly ? weekly :
+    const values_0 = valuesAll?.filter(item_2 => {
+      const from_0 = new OnesyDate(item_2.from);
+      const fromStartOfDay = startOf(from_0, 'day');
+      const to_0 = new OnesyDate(item_2.to);
+      const toStartOfDay = startOf(to_0, 'day');
+      return [undefined, true].includes(refs.statuses.current[item_2.status || 'working']) && (weekly ? weekly :
       // from
-      (dayDate === format(from, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (
+      (dayDate === format(from_0, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (
       // to
 
-      dayDate === format(to, formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds));
+      dayDate === format(to_0, formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds));
     });
     const elements = [];
     const renderTo = valueNew => {
       if (valueNew === '23:59') return '24:00';
       return valueNew;
     };
-    values?.forEach((item, index) => {
-      if (!(item.from && item.to)) return;
-      let from = new OnesyDate(item.from);
-      let to = new OnesyDate(item.to);
+    values_0?.forEach((item_3, index) => {
+      if (!(item_3.from && item_3.to)) return;
+      let from_1 = new OnesyDate(item_3.from);
+      let to_1 = new OnesyDate(item_3.to);
       if (!weekly) {
-        const fromStartOfDay = startOf(from, 'day');
-        const toStartOfDay = startOf(to, 'day');
-        if (dayStartOfDay?.milliseconds > fromStartOfDay?.milliseconds && (dayDate === format(to, formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds)) item.from = startOf(from, 'day').milliseconds;
-        if ((dayDate === format(from, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && dayStartOfDay?.milliseconds < toStartOfDay?.milliseconds) item.to = endOf(to, 'day').milliseconds;
+        const fromStartOfDay_0 = startOf(from_1, 'day');
+        const toStartOfDay_0 = startOf(to_1, 'day');
+        if (dayStartOfDay?.milliseconds > fromStartOfDay_0?.milliseconds && (dayDate === format(to_1, formats.date) || dayStartOfDay.milliseconds < toStartOfDay_0.milliseconds)) item_3.from = startOf(from_1, 'day').milliseconds;
+        if ((dayDate === format(from_1, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay_0.milliseconds) && dayStartOfDay?.milliseconds < toStartOfDay_0?.milliseconds) item_3.to = endOf(to_1, 'day').milliseconds;
       }
-      from = new OnesyDate(item.from);
-      to = new OnesyDate(item.to);
+      from_1 = new OnesyDate(item_3.from);
+      to_1 = new OnesyDate(item_3.to);
       const itemDate = format(day, formats.date);
-      const top = +(100 * ((from.hour * 60 + from.minute) / (24 * 60))).toFixed(4);
-      const bottom = +(100 - 100 * ((to.hour * 60 + (to.minute === 59 ? 60 : to.minute)) / (24 * 60))).toFixed(4);
+      const top = +(100 * ((from_1.hour * 60 + from_1.minute) / (24 * 60))).toFixed(4);
+      const bottom = +(100 - 100 * ((to_1.hour * 60 + (to_1.minute === 59 ? 60 : to_1.minute)) / (24 * 60))).toFixed(4);
       if (!refs.days.current[itemDate]) refs.days.current[itemDate] = [];
       if (!refs.overlaping.current[itemDate]) refs.overlaping.current[itemDate] = [];
       const bottom_ = 100 - bottom;
@@ -294,23 +294,23 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       });
       let level = 0;
       if (overlaps.length) {
-        level = refs.overlaping.current[itemDate].filter(([itemTop, itemBottom]) => {
-          return !(top >= itemBottom || bottom_ <= itemTop);
+        level = refs.overlaping.current[itemDate].filter(([itemTop_0, itemBottom_0]) => {
+          return !(top >= itemBottom_0 || bottom_ <= itemTop_0);
         }).length + 1;
         refs.overlaping.current[itemDate].push([top, bottom_]);
       }
       refs.days.current[itemDate].push([top, bottom_]);
       const minimal = 100 - bottom - top < 5;
-      const background = getColor(item);
-      const WrapperElement = item.status ? Tooltip : React.Fragment;
-      const WrapperElementProps = item.status ? {
-        name: cleanValue(itemToText(item.status), {
+      const background = getColor(item_3);
+      const WrapperElement = item_3.status ? Tooltip : React.Fragment;
+      const WrapperElementProps = item_3.status ? {
+        name: cleanValue(itemToText(item_3.status), {
           capitalize: true
         }),
-        color: getColor(item)
+        color: getColor(item_3)
       } : undefined;
       const itemProps = {
-        onClick: event => onOpen(_objectSpread(_objectSpread({}, item), {}, {
+        onClick: event => onOpen(_objectSpread(_objectSpread({}, item_3), {}, {
           day,
           weekly
         }), event),
@@ -325,7 +325,7 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }, top === 0 && bottom === 0 && {
         border: 'none'
       });
-      const elementRendered = is('function', render) ? render(item, dayProp ? 'day' : 'week') : /*#__PURE__*/React.createElement(Line, _extends({
+      const elementRendered = is('function', render) ? render(item_3, dayProp ? 'day' : 'week') : /*#__PURE__*/React.createElement(Line, _extends({
         key: index,
         gap: 0.5,
         align: "center",
@@ -336,16 +336,16 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
         align: "center",
         className: classes.time,
         style: {
-          background: getColor(item)
+          background: getColor(item_3)
         }
-      }, format(from, 'hh:mm a', {
+      }, format(from_1, 'hh:mm a', {
         l
-      }), " - ", renderTo(format(to, 'hh:mm a', {
+      }), " - ", renderTo(format(to_1, 'hh:mm a', {
         l
-      }))), item.description && /*#__PURE__*/React.createElement(Type, {
+      }))), item_3.description && /*#__PURE__*/React.createElement(Type, {
         version: "b2",
         dangerouslySetInnerHTML: {
-          __html: textToInnerHTML(item.description)
+          __html: textToInnerHTML(item_3.description)
         },
         style: {
           maxHeight: 24,
@@ -359,33 +359,33 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
     return elements;
   };
-  const onTimeClickMethod = React.useCallback((itemDay, event) => {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const relativeY = event.clientY - rect.top;
+  const onTimeClickMethod = (itemDay_0, event_0) => {
+    const rect = event_0.currentTarget.getBoundingClientRect();
+    const relativeY = event_0.clientY - rect.top;
     const relativePercentage = relativeY / rect.height * 100;
-    let timeDate = set(Math.floor(24 * (relativePercentage / 100)), 'hour', itemDay);
+    let timeDate = set(Math.floor(24 * (relativePercentage / 100)), 'hour', itemDay_0);
 
     // start of the hour
     timeDate = startOf(timeDate, 'hour');
-    onTimeClick?.(timeDate, dayProp ? 'day' : 'week', event);
-  }, []);
-  const timesUI = React.useCallback(dayDate => {
+    onTimeClick?.(timeDate, dayProp ? 'day' : 'week', event_0);
+  };
+  const timesUI = dayDate_0 => {
     // clean up
     refs.days.current = {};
     refs.overlaping.current = {};
-    const day = dayDate.dayWeek === 0 ? 7 : dayDate.dayWeek;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, times.map(item => /*#__PURE__*/React.createElement(React.Fragment, null, item.weekly && renderTimes(dayDate, item.weekly.days[day]?.values, true, item.weekly.days[day]), item.dates && renderTimes(dayDate, getDates(item), false))));
-  }, [theme, times, date]);
+    const day_0 = dayDate_0.dayWeek === 0 ? 7 : dayDate_0.dayWeek;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, times.map(item_4 => /*#__PURE__*/React.createElement(React.Fragment, null, item_4.weekly && renderTimes(dayDate_0, item_4.weekly.days[day_0]?.values, true, item_4.weekly.days[day_0]), item_4.dates && renderTimes(dayDate_0, getDates(item_4), false))));
+  };
   const hours = React.useMemo(() => {
     return Array.from({
       length: 24
-    }).map((item, index) => set(index, 'hour', date));
+    }).map((item_5, index_0) => set(index_0, 'hour', date));
   }, [date]);
   const days = React.useMemo(() => {
     const weekStartDate = set(4, 'hour', startOf(date, 'week'));
     return Array.from({
       length: 7
-    }).map((_, index) => add(index, 'day', weekStartDate));
+    }).map((_, index_1) => add(index_1, 'day', weekStartDate));
   }, [date]);
   return /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
@@ -412,13 +412,13 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     flex: true,
     fullWidth: true,
     className: classes.hourWrapper
-  }, hours.map((itemHour, index) => /*#__PURE__*/React.createElement(Line, {
-    key: index,
+  }, hours.map((itemHour, index_2) => /*#__PURE__*/React.createElement(Line, {
+    key: index_2,
     gap: 1,
     align: "unset",
     className: classes.hour,
     style: {
-      top: `${100 / 24 * index}%`
+      top: `${100 / 24 * index_2}%`
     }
   }, /*#__PURE__*/React.createElement(Type, {
     version: "b3",
@@ -455,7 +455,7 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classes.dayBody,
     flex: true,
     fullWidth: true,
-    onClick: event => onTimeClickMethod(date, event)
+    onClick: event_1 => onTimeClickMethod(date, event_1)
   }, timesUI(date), hours.map((itemGuide, indexGuide) => /*#__PURE__*/React.createElement(Line, {
     key: indexGuide,
     className: classes.guide,
@@ -469,9 +469,9 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     style: {
       top: `${(now.hour * 60 + now.minute) / (24 * 60) * 100}%`
     }
-  }))), !dayProp && days.map((itemDay, index) => {
+  }))), !dayProp && days.map((itemDay_1, index_3) => {
     return /*#__PURE__*/React.createElement(Line, {
-      key: index,
+      key: index_3,
       gap: 0,
       direction: "column",
       align: "center",
@@ -485,31 +485,31 @@ const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, /*#__PURE__*/React.createElement(Type, {
       version: "l1",
       weight: 200
-    }, format(itemDay, 'd', {
+    }, format(itemDay_1, 'd', {
       l
     })), /*#__PURE__*/React.createElement(Line, {
       align: "center",
       justify: "center",
-      className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
+      className: classNames([classes.weekDay, itemDay_1.year === now.year && itemDay_1.dayYear === now.dayYear && classes.today])
     }, /*#__PURE__*/React.createElement(Type, {
       version: "h3",
       weight: 400,
       align: "center"
-    }, format(itemDay, 'D', {
+    }, format(itemDay_1, 'D', {
       l
     })))), /*#__PURE__*/React.createElement(Line, {
       className: classes.dayBody,
       flex: true,
       fullWidth: true,
-      onClick: event => onTimeClickMethod(itemDay, event)
-    }, timesUI(itemDay), hours.map((itemGuide, indexGuide) => /*#__PURE__*/React.createElement(Line, {
-      key: indexGuide,
+      onClick: event_2 => onTimeClickMethod(itemDay_1, event_2)
+    }, timesUI(itemDay_1), hours.map((itemGuide_0, indexGuide_0) => /*#__PURE__*/React.createElement(Line, {
+      key: indexGuide_0,
       className: classes.guide,
       fullWidth: true,
       style: {
-        top: `${100 / 24 * indexGuide}%`
+        top: `${100 / 24 * indexGuide_0}%`
       }
-    })), format(now, formats.date) === format(itemDay, formats.date) && /*#__PURE__*/React.createElement(Line, {
+    })), format(now, formats.date) === format(itemDay_1, formats.date) && /*#__PURE__*/React.createElement(Line, {
       className: classes.guidelineHour,
       fullWidth: true,
       style: {

package/esm/Card/Card.js

@@ -43,10 +43,10 @@ const useStyle = styleMethod(theme => ({
 });
 const Card = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCard?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCard?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
   const {
       tonal = true,
       color: color_ = 'primary',
@@ -75,18 +75,18 @@ const Card = /*#__PURE__*/React.forwardRef((props_, ref) => {
     color = 'neutral';
     elevation = 0;
   }
-  const onFocus = React.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && !disabled) {
       setFocus(true);
       if (is('function', onFocus_)) onFocus_(event);
     }
-  }, [focus_, disabled, onFocus_]);
-  const onBlur = React.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) {
       setFocus(false);
-      if (is('function', onBlur_)) onBlur_(event);
+      if (is('function', onBlur_)) onBlur_(event_0);
     }
-  }, [focus_, disabled, onBlur_]);
+  };
   return /*#__PURE__*/React.createElement(Surface, _extends({
     ref: ref,
     gap: 0,

package/esm/CardButton/CardButton.js

@@ -19,8 +19,8 @@ const useStyle = styleMethod(theme => ({
 });
 const CardButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardButton?.props?.default), props_), [props_]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardButton?.props?.default), props_);
+  const Interaction = theme?.elements?.Interaction || InteractionElement;
   const {
       focus: focus_,
       selected,
@@ -38,18 +38,18 @@ const CardButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const [focus, setFocus] = React.useState(focus_ !== undefined ? focus_ : false);
-  const onFocus = React.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && !disabled) {
       setFocus(true);
       if (is('function', onFocus_)) onFocus_(event);
     }
-  }, [focus_, disabled, onFocus_]);
-  const onBlur = React.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) {
       setFocus(false);
-      if (is('function', onBlur_)) onBlur_(event);
+      if (is('function', onBlur_)) onBlur_(event_0);
     }
-  }, [focus_, disabled, onBlur_]);
+  };
   const Component = Component_;
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,

package/esm/CardFooter/CardFooter.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "elevation", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
@@ -16,33 +17,56 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-CardFooter'
 });
 const CardFooter = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(7);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardFooter?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardFooter?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
-      tonal = true,
+      tonal: t0,
       color,
       version,
       elevation,
-      Component = 'div',
+      Component: t1,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  t0 === undefined ? true : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    gap: 1,
-    direction: "row",
-    wrap: "wrap",
-    align: "center",
-    justify: "flex-end",
-    fullWidth: true,
-    Component: Component,
-    className: classNames([staticClassName('CardFooter', theme) && [`onesy-CardFooter-root`], className, classes.root])
-  }, other), children);
+  const t2 = 1;
+  const t3 = "row";
+  const t4 = "wrap";
+  const t5 = "center";
+  const t6 = "flex-end";
+  const t7 = true;
+  const t8 = classNames([staticClassName("CardFooter", theme) && ["onesy-CardFooter-root"], className, classes.root]);
+  let t9;
+  if ($[0] !== Component || $[1] !== Line || $[2] !== children || $[3] !== other || $[4] !== ref || $[5] !== t8) {
+    t9 = /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      gap: t2,
+      direction: t3,
+      wrap: t4,
+      align: t5,
+      justify: t6,
+      fullWidth: t7,
+      Component: Component,
+      className: t8
+    }, other), children);
+    $[0] = Component;
+    $[1] = Line;
+    $[2] = children;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t8;
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
+  return t9;
 });
 CardFooter.displayName = 'onesy-CardFooter';
 export default CardFooter;

package/esm/CardHeader/CardHeader.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "elevation", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
@@ -16,36 +17,84 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-CardHeader'
 });
 const CardHeader = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(18);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardHeader?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardHeader?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
-      tonal = true,
+      tonal: t0,
       color,
       version,
       elevation,
-      Component = 'div',
+      Component: t1,
       className,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    fullWidth: true,
-    Component: Component,
-    className: classNames([staticClassName('CardHeader', theme) && [`onesy-CardHeader-root`], className, classes.root])
-  }, other), /*#__PURE__*/React.cloneElement(children, {
-    tonal: children.props.tonal !== undefined ? children.props.tonal : tonal,
-    version: children.props.version !== undefined ? children.props.version : version,
-    elevation: children.props.elevation !== undefined ? children.props.elevation : elevation,
-    color: children.props.color !== undefined ? children.props.color : color
-  }));
+  const t2 = "row";
+  const t3 = "center";
+  const t4 = "center";
+  const t5 = true;
+  const t6 = classNames([staticClassName("CardHeader", theme) && ["onesy-CardHeader-root"], className, classes.root]);
+  let t7;
+  if ($[0] !== children || $[1] !== color || $[2] !== elevation || $[3] !== tonal || $[4] !== version) {
+    const t8 = children.props.tonal !== undefined ? children.props.tonal : tonal;
+    const t9 = children.props.version !== undefined ? children.props.version : version;
+    const t10 = children.props.elevation !== undefined ? children.props.elevation : elevation;
+    const t11 = children.props.color !== undefined ? children.props.color : color;
+    let t12;
+    if ($[6] !== t10 || $[7] !== t11 || $[8] !== t8 || $[9] !== t9) {
+      t12 = {
+        tonal: t8,
+        version: t9,
+        elevation: t10,
+        color: t11
+      };
+      $[6] = t10;
+      $[7] = t11;
+      $[8] = t8;
+      $[9] = t9;
+      $[10] = t12;
+    } else {
+      t12 = $[10];
+    }
+    t7 = /*#__PURE__*/React.cloneElement(children, t12);
+    $[0] = children;
+    $[1] = color;
+    $[2] = elevation;
+    $[3] = tonal;
+    $[4] = version;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  let t8;
+  if ($[11] !== Component || $[12] !== Line || $[13] !== other || $[14] !== ref || $[15] !== t6 || $[16] !== t7) {
+    t8 = /*#__PURE__*/React.createElement(Line, _extends({
+      ref: ref,
+      direction: t2,
+      align: t3,
+      justify: t4,
+      fullWidth: t5,
+      Component: Component,
+      className: t6
+    }, other), t7);
+    $[11] = Component;
+    $[12] = Line;
+    $[13] = other;
+    $[14] = ref;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  return t8;
 });
 CardHeader.displayName = 'onesy-CardHeader';
 export default CardHeader;