@onesy/ui-react 1.0.163 → 1.0.165

package/CalendarWeek/CalendarWeek.js

@@ -132,24 +132,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-CalendarWeek'
 });
 const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCalendarWeek) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
-  }, [theme]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCalendarWeek) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
   const {
       date,
       times: timesProps,
@@ -200,7 +189,7 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       clearInterval(refs.interval.current);
     };
   }, []);
-  const getDates = _react.default.useCallback(available => {
+  const getDates = available => {
     var _available$dates;
     const values = ((_available$dates = available.dates) === null || _available$dates === void 0 ? void 0 : _available$dates.values) || [];
     return values.map(item => {
@@ -218,7 +207,7 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
       return item;
     });
-  }, [times]);
+  };
   const optionsStatus = _react.default.useMemo(() => {
     return [{
       name: l('Working'),
@@ -243,24 +232,24 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       value: 'other'
     }];
   }, []);
-  const getColor = _react.default.useCallback(item => {
+  const getColor = item_0 => {
     let palette = theme.palette.color.neutral;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'working') palette = theme.palette.color.success;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'not-working') palette = theme.palette.color.info;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'break') palette = theme.palette.color.warning;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'canceled') palette = theme.palette.color.error;
-    if ((item === null || item === void 0 ? void 0 : item.status) === 'other') palette = theme.palette.color.neutral;
-    if (item.color) palette = theme.methods.color(item.color);
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'working') palette = theme.palette.color.success;
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'not-working') palette = theme.palette.color.info;
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'break') palette = theme.palette.color.warning;
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'pending') palette = theme.methods.color(_styleReact.colors.yellow[50]);
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'rescheduled') palette = theme.methods.color(_styleReact.colors.purple[50]);
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'canceled') palette = theme.palette.color.error;
+    if ((item_0 === null || item_0 === void 0 ? void 0 : item_0.status) === 'other') palette = theme.palette.color.neutral;
+    if (item_0.color) palette = theme.methods.color(item_0.color);
     return palette[rangeShade];
-  }, [rangeShade, _styleReact.colors, theme]);
-  const itemToText = _react.default.useCallback(item => {
+  };
+  const itemToText = item_1 => {
     var _optionsStatus$find$n, _optionsStatus$find;
-    if (item === 'pending') return l('Scheduled');
-    if (item === 'not-count-workout-session') return l(`Don't count workout session`);
-    return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item);
-  }, []);
+    if (item_1 === 'pending') return l('Scheduled');
+    if (item_1 === 'not-count-workout-session') return l(`Don't count workout session`);
+    return (_optionsStatus$find$n = optionsStatus === null || optionsStatus === void 0 || (_optionsStatus$find = optionsStatus.find(itemStatus => itemStatus.value === item_1)) === null || _optionsStatus$find === void 0 ? void 0 : _optionsStatus$find.name) !== null && _optionsStatus$find$n !== void 0 ? _optionsStatus$find$n : l(item_1);
+  };
   const renderTimes = (day, valuesAll, weekly = true, itemDay) => {
     if (itemDay !== undefined && !(itemDay !== null && itemDay !== void 0 && itemDay.active)) return null;
     if (weekly) {
@@ -273,39 +262,39 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }
     const dayStartOfDay = (0, _date.startOf)(day, 'day');
     const dayDate = (0, _date.format)(day, _utils2.formats.date);
-    const values = valuesAll === null || valuesAll === void 0 ? void 0 : valuesAll.filter(item => {
-      const from = new _date.OnesyDate(item.from);
-      const fromStartOfDay = (0, _date.startOf)(from, 'day');
-      const to = new _date.OnesyDate(item.to);
-      const toStartOfDay = (0, _date.startOf)(to, 'day');
-      return [undefined, true].includes(refs.statuses.current[item.status || 'working']) && (weekly ? weekly :
+    const values_0 = valuesAll === null || valuesAll === void 0 ? void 0 : valuesAll.filter(item_2 => {
+      const from_0 = new _date.OnesyDate(item_2.from);
+      const fromStartOfDay = (0, _date.startOf)(from_0, 'day');
+      const to_0 = new _date.OnesyDate(item_2.to);
+      const toStartOfDay = (0, _date.startOf)(to_0, 'day');
+      return [undefined, true].includes(refs.statuses.current[item_2.status || 'working']) && (weekly ? weekly :
       // from
-      (dayDate === (0, _date.format)(from, _utils2.formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (
+      (dayDate === (0, _date.format)(from_0, _utils2.formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (
       // to
 
-      dayDate === (0, _date.format)(to, _utils2.formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds));
+      dayDate === (0, _date.format)(to_0, _utils2.formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds));
     });
     const elements = [];
     const renderTo = valueNew => {
       if (valueNew === '23:59') return '24:00';
       return valueNew;
     };
-    values === null || values === void 0 || values.forEach((item, index) => {
+    values_0 === null || values_0 === void 0 || values_0.forEach((item_3, index) => {
       var _elementRendered$prop, _elementRendered$prop2;
-      if (!(item.from && item.to)) return;
-      let from = new _date.OnesyDate(item.from);
-      let to = new _date.OnesyDate(item.to);
+      if (!(item_3.from && item_3.to)) return;
+      let from_1 = new _date.OnesyDate(item_3.from);
+      let to_1 = new _date.OnesyDate(item_3.to);
       if (!weekly) {
-        const fromStartOfDay = (0, _date.startOf)(from, 'day');
-        const toStartOfDay = (0, _date.startOf)(to, 'day');
-        if ((dayStartOfDay === null || dayStartOfDay === void 0 ? void 0 : dayStartOfDay.milliseconds) > (fromStartOfDay === null || fromStartOfDay === void 0 ? void 0 : fromStartOfDay.milliseconds) && (dayDate === (0, _date.format)(to, _utils2.formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds)) item.from = (0, _date.startOf)(from, 'day').milliseconds;
-        if ((dayDate === (0, _date.format)(from, _utils2.formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (dayStartOfDay === null || dayStartOfDay === void 0 ? void 0 : dayStartOfDay.milliseconds) < (toStartOfDay === null || toStartOfDay === void 0 ? void 0 : toStartOfDay.milliseconds)) item.to = (0, _date.endOf)(to, 'day').milliseconds;
+        const fromStartOfDay_0 = (0, _date.startOf)(from_1, 'day');
+        const toStartOfDay_0 = (0, _date.startOf)(to_1, 'day');
+        if ((dayStartOfDay === null || dayStartOfDay === void 0 ? void 0 : dayStartOfDay.milliseconds) > (fromStartOfDay_0 === null || fromStartOfDay_0 === void 0 ? void 0 : fromStartOfDay_0.milliseconds) && (dayDate === (0, _date.format)(to_1, _utils2.formats.date) || dayStartOfDay.milliseconds < toStartOfDay_0.milliseconds)) item_3.from = (0, _date.startOf)(from_1, 'day').milliseconds;
+        if ((dayDate === (0, _date.format)(from_1, _utils2.formats.date) || dayStartOfDay.milliseconds > fromStartOfDay_0.milliseconds) && (dayStartOfDay === null || dayStartOfDay === void 0 ? void 0 : dayStartOfDay.milliseconds) < (toStartOfDay_0 === null || toStartOfDay_0 === void 0 ? void 0 : toStartOfDay_0.milliseconds)) item_3.to = (0, _date.endOf)(to_1, 'day').milliseconds;
       }
-      from = new _date.OnesyDate(item.from);
-      to = new _date.OnesyDate(item.to);
+      from_1 = new _date.OnesyDate(item_3.from);
+      to_1 = new _date.OnesyDate(item_3.to);
       const itemDate = (0, _date.format)(day, _utils2.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;
@@ -316,23 +305,23 @@ const CalendarWeek = /*#__PURE__*/_react.default.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.default.Fragment;
-      const WrapperElementProps = item.status ? {
-        name: (0, _utils.cleanValue)(itemToText(item.status), {
+      const background = getColor(item_3);
+      const WrapperElement = item_3.status ? Tooltip : _react.default.Fragment;
+      const WrapperElementProps = item_3.status ? {
+        name: (0, _utils.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),
@@ -347,7 +336,7 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }, top === 0 && bottom === 0 && {
         border: 'none'
       });
-      const elementRendered = (0, _utils.is)('function', render) ? render(item, dayProp ? 'day' : 'week') : /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+      const elementRendered = (0, _utils.is)('function', render) ? render(item_3, dayProp ? 'day' : 'week') : /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
         key: index,
         gap: 0.5,
         align: "center",
@@ -358,16 +347,16 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         align: "center",
         className: classes.time,
         style: {
-          background: getColor(item)
+          background: getColor(item_3)
         }
-      }, (0, _date.format)(from, 'hh:mm a', {
+      }, (0, _date.format)(from_1, 'hh:mm a', {
         l
-      }), " - ", renderTo((0, _date.format)(to, 'hh:mm a', {
+      }), " - ", renderTo((0, _date.format)(to_1, 'hh:mm a', {
         l
-      }))), item.description && /*#__PURE__*/_react.default.createElement(Type, {
+      }))), item_3.description && /*#__PURE__*/_react.default.createElement(Type, {
         version: "b2",
         dangerouslySetInnerHTML: {
-          __html: (0, _utils.textToInnerHTML)(item.description)
+          __html: (0, _utils.textToInnerHTML)(item_3.description)
         },
         style: {
           maxHeight: 24,
@@ -381,36 +370,36 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
     return elements;
   };
-  const onTimeClickMethod = _react.default.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 = (0, _date.set)(Math.floor(24 * (relativePercentage / 100)), 'hour', itemDay);
+    let timeDate = (0, _date.set)(Math.floor(24 * (relativePercentage / 100)), 'hour', itemDay_0);
 
     // start of the hour
     timeDate = (0, _date.startOf)(timeDate, 'hour');
-    onTimeClick === null || onTimeClick === void 0 || onTimeClick(timeDate, dayProp ? 'day' : 'week', event);
-  }, []);
-  const timesUI = _react.default.useCallback(dayDate => {
+    onTimeClick === null || onTimeClick === void 0 || 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.default.createElement(_react.default.Fragment, null, times.map(item => {
-      var _day;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.weekly && renderTimes(dayDate, (_day = item.weekly.days[day]) === null || _day === void 0 ? void 0 : _day.values, true, item.weekly.days[day]), item.dates && renderTimes(dayDate, getDates(item), false));
+    const day_0 = dayDate_0.dayWeek === 0 ? 7 : dayDate_0.dayWeek;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, times.map(item_4 => {
+      var _day_;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item_4.weekly && renderTimes(dayDate_0, (_day_ = item_4.weekly.days[day_0]) === null || _day_ === void 0 ? void 0 : _day_.values, true, item_4.weekly.days[day_0]), item_4.dates && renderTimes(dayDate_0, getDates(item_4), false));
     }));
-  }, [theme, times, date]);
+  };
   const hours = _react.default.useMemo(() => {
     return Array.from({
       length: 24
-    }).map((item, index) => (0, _date.set)(index, 'hour', date));
+    }).map((item_5, index_0) => (0, _date.set)(index_0, 'hour', date));
   }, [date]);
   const days = _react.default.useMemo(() => {
     const weekStartDate = (0, _date.set)(4, 'hour', (0, _date.startOf)(date, 'week'));
     return Array.from({
       length: 7
-    }).map((_, index) => (0, _date.add)(index, 'day', weekStartDate));
+    }).map((_, index_1) => (0, _date.add)(index_1, 'day', weekStartDate));
   }, [date]);
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
@@ -437,13 +426,13 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     flex: true,
     fullWidth: true,
     className: classes.hourWrapper
-  }, hours.map((itemHour, index) => /*#__PURE__*/_react.default.createElement(Line, {
-    key: index,
+  }, hours.map((itemHour, index_2) => /*#__PURE__*/_react.default.createElement(Line, {
+    key: index_2,
     gap: 1,
     align: "unset",
     className: classes.hour,
     style: {
-      top: `${100 / 24 * index}%`
+      top: `${100 / 24 * index_2}%`
     }
   }, /*#__PURE__*/_react.default.createElement(Type, {
     version: "b3",
@@ -480,7 +469,7 @@ const CalendarWeek = /*#__PURE__*/_react.default.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.default.createElement(Line, {
     key: indexGuide,
     className: classes.guide,
@@ -494,9 +483,9 @@ const CalendarWeek = /*#__PURE__*/_react.default.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.default.createElement(Line, {
-      key: index,
+      key: index_3,
       gap: 0,
       direction: "column",
       align: "center",
@@ -510,31 +499,31 @@ const CalendarWeek = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, /*#__PURE__*/_react.default.createElement(Type, {
       version: "l1",
       weight: 200
-    }, (0, _date.format)(itemDay, 'd', {
+    }, (0, _date.format)(itemDay_1, 'd', {
       l
     })), /*#__PURE__*/_react.default.createElement(Line, {
       align: "center",
       justify: "center",
-      className: (0, _styleReact.classNames)([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
+      className: (0, _styleReact.classNames)([classes.weekDay, itemDay_1.year === now.year && itemDay_1.dayYear === now.dayYear && classes.today])
     }, /*#__PURE__*/_react.default.createElement(Type, {
       version: "h3",
       weight: 400,
       align: "center"
-    }, (0, _date.format)(itemDay, 'D', {
+    }, (0, _date.format)(itemDay_1, 'D', {
       l
     })))), /*#__PURE__*/_react.default.createElement(Line, {
       className: classes.dayBody,
       flex: true,
       fullWidth: true,
-      onClick: event => onTimeClickMethod(itemDay, event)
-    }, timesUI(itemDay), hours.map((itemGuide, indexGuide) => /*#__PURE__*/_react.default.createElement(Line, {
-      key: indexGuide,
+      onClick: event_2 => onTimeClickMethod(itemDay_1, event_2)
+    }, timesUI(itemDay_1), hours.map((itemGuide_0, indexGuide_0) => /*#__PURE__*/_react.default.createElement(Line, {
+      key: indexGuide_0,
       className: classes.guide,
       fullWidth: true,
       style: {
-        top: `${100 / 24 * indexGuide}%`
+        top: `${100 / 24 * indexGuide_0}%`
       }
-    })), (0, _date.format)(now, _utils2.formats.date) === (0, _date.format)(itemDay, _utils2.formats.date) && /*#__PURE__*/_react.default.createElement(Line, {
+    })), (0, _date.format)(now, _utils2.formats.date) === (0, _date.format)(itemDay_1, _utils2.formats.date) && /*#__PURE__*/_react.default.createElement(Line, {
       className: classes.guidelineHour,
       fullWidth: true,
       style: {

package/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
 import { IPropsAny } from '../types';
-export type ICard = ISurface & {
+export declare type ICard = ISurface & {
     focus?: boolean;
     selected?: boolean;
     button?: boolean;

package/Card/Card.js

@@ -49,23 +49,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Card'
 });
 const Card = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCard) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
-  }, [theme]);
-  const Interaction = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Interaction) || _Interaction.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCard) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Interaction) || _Interaction.default;
   const {
       tonal = true,
       color: color_ = 'primary',
@@ -94,18 +83,18 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     color = 'neutral';
     elevation = 0;
   }
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && !disabled) {
       setFocus(true);
       if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
     }
-  }, [focus_, disabled, onFocus_]);
-  const onBlur = _react.default.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) {
       setFocus(false);
-      if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+      if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
     }
-  }, [focus_, disabled, onBlur_]);
+  };
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
     ref: ref,
     gap: 0,

package/CardButton/CardButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IPropsAny } from '../types';
-export type ICardButton = IBaseElement & {
+export declare type ICardButton = IBaseElement & {
     focus?: boolean;
     selected?: boolean;
     href?: boolean;

package/CardButton/CardButton.js

@@ -25,15 +25,10 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-CardButton'
 });
 const CardButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCardButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Interaction = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCardButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
   const {
       focus: focus_,
       selected,
@@ -51,18 +46,18 @@ const CardButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const [focus, setFocus] = _react.default.useState(focus_ !== undefined ? focus_ : false);
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event => {
     if (focus_ === undefined && !disabled) {
       setFocus(true);
       if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
     }
-  }, [focus_, disabled, onFocus_]);
-  const onBlur = _react.default.useCallback(event => {
+  };
+  const onBlur = event_0 => {
     if (focus_ === undefined && !disabled) {
       setFocus(false);
-      if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+      if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
     }
-  }, [focus_, disabled, onBlur_]);
+  };
   const Component = Component_;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,

package/CardFooter/CardFooter.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElevation, IVersion } from '../types';
-export type ICardFooter = ILine & {
+export declare type ICardFooter = ILine & {
     version?: IVersion;
     elevation?: IElevation;
 };

package/CardFooter/CardFooter.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
@@ -23,39 +24,57 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-CardFooter'
 });
 const CardFooter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(7);
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCardFooter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCardFooter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
-      tonal = true,
+      tonal: t0,
       color,
       version,
       elevation,
-      Component = 'div',
+      Component: t1,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  t0 === undefined ? true : t0;
+  const Component = t1 === undefined ? "div" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: ref,
-    gap: 1,
-    direction: "row",
-    wrap: "wrap",
-    align: "center",
-    justify: "flex-end",
-    fullWidth: true,
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.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 = (0, _styleReact.classNames)([(0, _utils.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.default.createElement(Line, (0, _extends2.default)({
+      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';
 var _default = exports.default = CardFooter;

package/CardHeader/CardHeader.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElevation, IVersion } from '../types';
-export type ICardHeader = ILine & {
+export declare type ICardHeader = ILine & {
     version?: IVersion;
     elevation?: IElevation;
 };