@nutui/nutui-react 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/cjs/packages/avatar/style/avatar.scss

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

package/dist/cjs/packages/avatar/style/style.css

@@ -73,6 +73,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +101,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +114,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

package/dist/cjs/packages/badge/badge.js

@@ -48,10 +48,11 @@ var Badge = function Badge(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, color = _$_object_spread.color, fill = _$_object_spread.fill;
     var classPrefix = 'nut-badge';
     var classes = (0, _classnames.default)(classPrefix, className, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(fill), fill === 'outline'));
-    var contentClasses = (0, _classnames.default)((0, _define_property._)({}, "".concat(classPrefix, "-dot"), dot), "".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)({}, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1));
+    var _obj;
+    var contentClasses = (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof content() === 'string' && ((_this = "".concat(content())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), _obj));
     var getStyle = function getStyle() {
         var style = {};
-        style.top = "".concat(Number(top) || parseFloat(String(top)) || 0, "px");
+        style.top = "".concat(Number(-top) || parseFloat(String(-top)) || 0, "px");
         var dir = rtl ? 'left' : 'right';
         style[dir] = "".concat(Number(right) || parseFloat(String(right)) || 0, "px");
         if (color) {
@@ -68,11 +69,12 @@ var Badge = function Badge(props) {
         }
         return style;
     };
+    var _obj1;
     return /*#__PURE__*/ _react.default.createElement("div", {
         className: classes,
         style: style
     }, isIcon() && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-icon")
+        className: (0, _classnames.default)("".concat(classPrefix, "-content"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-icon-rtl"), rtl), _obj1))
     }, value), children, !isIcon() && /*#__PURE__*/ _react.default.createElement("div", {
         className: contentClasses,
         style: getStyle()

package/dist/cjs/packages/badge/style/badge.scss

@@ -1,15 +1,19 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
-
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
   &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
@@ -29,7 +33,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    /* #ifdef harmony */
+    background: $color-primary;
+    /* #endif */
+    /* #ifndef harmony */
     background: $badge-background-color;
+    /* #endif */
     color: $badge-color;
     padding: $badge-padding;
     font-size: $badge-font-size;
@@ -49,7 +58,9 @@
   }
 
   &-content {
+    /* #ifndef rn */
     transform: $badge-content-transform;
+    /* #endif */
   }
 
   &-dot {
@@ -61,25 +72,8 @@
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
+    background: $color-primary-text;
+    border: 1px solid $color-primary;
+    color: $color-primary;
   }
 }

package/dist/cjs/packages/badge/style/style.css

@@ -1,6 +1,13 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
+  /* #ifndef harmony */
+  min-width: auto;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
@@ -8,8 +15,6 @@
   justify-content: center;
   align-items: center;
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
   padding: var(--nutui-badge-icon-padding, 3px);
   text-align: center;
   border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
@@ -27,7 +32,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* #ifdef harmony */
+  background: var(--nutui-color-primary, #ff0f23);
+  /* #endif */
+  /* #ifndef harmony */
   background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
+  /* #endif */
   color: var(--nutui-badge-color, #fff);
   padding: var(--nutui-badge-padding, 0 4px);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
@@ -45,7 +55,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  /* #ifndef rn */
+  transform: var(--nutui-badge-content-transform, translateX(100%));
+  /* #endif */
 }
 .nut-badge-dot {
   width: var(--nutui-badge-dot-width, 7px);
@@ -54,18 +66,8 @@
   border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
 }
-.nut-badge-outline .nut-badge-content {
+.nut-badge-outline {
   background: var(--nutui-color-primary-text, #ffffff);
   border: 1px solid var(--nutui-color-primary, #ff0f23);
   color: var(--nutui-color-primary, #ff0f23);
-}
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
 }

package/dist/cjs/packages/calendarcard/calendarcard.js

@@ -82,7 +82,7 @@ var CalendarCard = /*#__PURE__*/ _react.default.forwardRef(function(props, ref)
             onChange === null || onChange === void 0 ? void 0 : onChange(val);
         }
     };
-    var getDays = function getDays(month) {
+    var getDays = (0, _react.useCallback)(function(month) {
         var y = month.year;
         var m = month.month;
         var days = (0, _to_consumable_array._)((0, _utils.getPrevMonthDays)(y, m, firstDayOfWeek)).concat((0, _to_consumable_array._)((0, _utils.getCurrentMonthDays)(y, m)));
@@ -99,13 +99,18 @@ var CalendarCard = /*#__PURE__*/ _react.default.forwardRef(function(props, ref)
             });
         }
         return days;
-    };
+    }, [
+        firstDayOfWeek
+    ]);
     (0, _react.useEffect)(function() {
         var newDays = getDays(month);
         setDays(newDays);
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-        month
+        month,
+        getDays,
+        onPageChange,
+        firstDayOfWeek
     ]);
     var isSameDay = function isSameDay(day1, day2) {
         return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);

package/dist/cjs/packages/calendarcard/style/calendarcard.scss

@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

package/dist/cjs/packages/calendarcard/style/style.css

@@ -47,6 +47,9 @@
   cursor: auto;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 12px;
   font-size: 12px;
@@ -57,11 +60,21 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-color-primary-text, #ffffff);
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
+.nut-calendarcard-day.active .nut-calendarcard-day-top,
+.nut-calendarcard-day.active .nut-calendarcard-day-inner,
+.nut-calendarcard-day.active .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-primary-text, #ffffff);
+}
 .nut-calendarcard-day.start, .nut-calendarcard-day.end {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-calendarcard-day.start .nut-calendarcard-day-top,
+.nut-calendarcard-day.start .nut-calendarcard-day-inner,
+.nut-calendarcard-day.start .nut-calendarcard-day-bottom, .nut-calendarcard-day.end .nut-calendarcard-day-top,
+.nut-calendarcard-day.end .nut-calendarcard-day-inner,
+.nut-calendarcard-day.end .nut-calendarcard-day-bottom {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.start {
@@ -74,15 +87,27 @@
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-calendarcard-day.mid .nut-calendarcard-day-top,
+.nut-calendarcard-day.mid .nut-calendarcard-day-inner,
+.nut-calendarcard-day.mid .nut-calendarcard-day-bottom {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-calendarcard-day .nut-calendar-day-info {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.prev, .nut-calendarcard-day.next, .nut-calendarcard-day.disabled {
-  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
+.nut-calendarcard-day.prev .nut-calendarcard-day-top,
+.nut-calendarcard-day.prev .nut-calendarcard-day-inner,
+.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, .nut-calendarcard-day.next .nut-calendarcard-day-top,
+.nut-calendarcard-day.next .nut-calendarcard-day-inner,
+.nut-calendarcard-day.next .nut-calendarcard-day-bottom, .nut-calendarcard-day.disabled .nut-calendarcard-day-top,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-inner,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 
 [dir=rtl] .nut-calendarcard-header-left .left, [dir=rtl] .nut-calendarcard-header-right .left,
 .nut-rtl .nut-calendarcard-header-left .left,

package/dist/cjs/packages/input/style/input.scss

@@ -47,3 +47,7 @@
     -webkit-text-fill-color: $input-disabled-color;
   }
 }
+
+.nut-input-clear {
+  flex: 0;
+}

package/dist/cjs/packages/input/style/style.css

@@ -43,4 +43,8 @@
   background: none;
   opacity: 1;
   -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+
+.nut-input-clear {
+  flex: 0;
 }

package/dist/cjs/packages/navbar/navbar.js

@@ -16,6 +16,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _index = require("../configprovider/index");
 var _typings = require("../../utils/typings");
 var _useclientrect = require("../../utils/use-client-rect");
 var _safearea = require("../safearea/safearea");
@@ -32,6 +33,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 var NavBar = function NavBar(props) {
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = (0, _index.useRtl)();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -75,11 +77,12 @@ var NavBar = function NavBar(props) {
         back
     ]);
     var renderLeft = function renderLeft() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-left"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-left"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-left-back"),
+            className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children"), left), (0, _define_property._)(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function onClick(e) {
                 return onBackClick(e);
             }
@@ -94,14 +97,16 @@ var NavBar = function NavBar(props) {
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-title"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-title"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function renderRight() {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-right"),
+            className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-right"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -113,7 +118,7 @@ var NavBar = function NavBar(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-fixed"), fixed), (0, _define_property._)(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), (0, _define_property._)(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = (0, _classnames.default)(classPrefix, classes, className);
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ _react.default.createElement(_safearea.SafeArea, {
         position: "top"