rsuite 5.62.1 → 5.63.0-alpha.2

package/Toggle/styles/index.css

@@ -16,6 +16,20 @@
   --rs-primary-600: #2589f5;
   --rs-primary-700: #1675e0;
   --rs-primary-900: #004299;
+  --rs-red-500: #f44336;
+  --rs-red-600: #eb3626;
+  --rs-orange-500: #fa8900;
+  --rs-orange-600: #f08800;
+  --rs-yellow-500: #ffb300;
+  --rs-yellow-600: #f5af00;
+  --rs-green-500: #4caf50;
+  --rs-green-600: #37ab3c;
+  --rs-cyan-500: #00bcd4;
+  --rs-cyan-600: #00b1cc;
+  --rs-blue-500: #2196f3;
+  --rs-blue-600: #1787e8;
+  --rs-violet-500: #673ab7;
+  --rs-violet-600: #5f2bb3;
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-toggle-bg: var(--rs-gray-300);
@@ -56,6 +70,20 @@
   --rs-primary-600: #25b3f5;
   --rs-primary-700: #169de0;
   --rs-primary-900: #006199;
+  --rs-red-500: #f04f43;
+  --rs-red-600: #e63f30;
+  --rs-orange-500: #ff9800;
+  --rs-orange-600: #f59700;
+  --rs-yellow-500: #ffc757;
+  --rs-yellow-600: #f5bb3d;
+  --rs-green-500: #58b15b;
+  --rs-green-600: #3fab45;
+  --rs-cyan-500: #00bcd4;
+  --rs-cyan-600: #00b1cc;
+  --rs-blue-500: #1499ef;
+  --rs-blue-600: #0e8ce6;
+  --rs-violet-500: #673ab7;
+  --rs-violet-600: #5f2bb3;
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-toggle-bg: var(--rs-gray-400);
@@ -92,6 +120,20 @@
   --rs-primary-600: #f1f500;
   --rs-primary-700: #d9e000;
   --rs-primary-900: #8f9900;
+  --rs-red-500: #bd1732;
+  --rs-red-600: #b51029;
+  --rs-orange-500: #ff9800;
+  --rs-orange-600: #f59700;
+  --rs-yellow-500: #ffc757;
+  --rs-yellow-600: #f5bb3d;
+  --rs-green-500: #0d822c;
+  --rs-green-600: #09802b;
+  --rs-cyan-500: #00bcd4;
+  --rs-cyan-600: #00b1cc;
+  --rs-blue-500: #1499ef;
+  --rs-blue-600: #0e8ce6;
+  --rs-violet-500: #673ab7;
+  --rs-violet-600: #5f2bb3;
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-toggle-bg: var(--rs-gray-800);
@@ -118,6 +160,8 @@
 .rs-toggle {
   position: relative;
   display: inline-block;
+  vertical-align: middle;
+  font-size: 14px;
 }
 .rs-toggle .rs-toggle-loader {
   width: 18px;
@@ -171,7 +215,15 @@
   left: 100%;
   margin-left: -21px;
 }
+.rs-toggle .rs-toggle-label {
+  font-size: 14px;
+}
+.rs-toggle-label {
+  cursor: pointer;
+  margin-left: 10px;
+}
 .rs-toggle-input {
+  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
@@ -293,6 +345,9 @@
   border-top-color: #fff;
   border-top-color: var(--rs-toggle-loader-rotor);
 }
+.rs-toggle-sm {
+  font-size: 12px;
+}
 .rs-toggle-sm .rs-toggle-loader {
   width: 10px;
   height: 10px;
@@ -349,6 +404,12 @@
   left: 100%;
   margin-left: -12px;
 }
+.rs-toggle-sm .rs-toggle-label {
+  font-size: 12px;
+}
+.rs-toggle-md {
+  font-size: 14px;
+}
 .rs-toggle-md .rs-toggle-loader {
   width: 18px;
   height: 18px;
@@ -401,6 +462,12 @@
   left: 100%;
   margin-left: -21px;
 }
+.rs-toggle-md .rs-toggle-label {
+  font-size: 14px;
+}
+.rs-toggle-lg {
+  font-size: 16px;
+}
 .rs-toggle-lg .rs-toggle-loader {
   width: 22px;
   height: 22px;
@@ -453,5 +520,64 @@
   left: 100%;
   margin-left: -26px;
 }
+.rs-toggle-lg .rs-toggle-label {
+  font-size: 16px;
+}
+.rs-toggle-checked.rs-toggle-red .rs-toggle-presentation {
+  background-color: #f44336;
+  background-color: var(--rs-red-500);
+}
+.rs-toggle-checked.rs-toggle-red .rs-toggle-presentation:hover {
+  background-color: #eb3626;
+  background-color: var(--rs-red-600);
+}
+.rs-toggle-checked.rs-toggle-orange .rs-toggle-presentation {
+  background-color: #fa8900;
+  background-color: var(--rs-orange-500);
+}
+.rs-toggle-checked.rs-toggle-orange .rs-toggle-presentation:hover {
+  background-color: #f08800;
+  background-color: var(--rs-orange-600);
+}
+.rs-toggle-checked.rs-toggle-yellow .rs-toggle-presentation {
+  background-color: #ffb300;
+  background-color: var(--rs-yellow-500);
+}
+.rs-toggle-checked.rs-toggle-yellow .rs-toggle-presentation:hover {
+  background-color: #f5af00;
+  background-color: var(--rs-yellow-600);
+}
+.rs-toggle-checked.rs-toggle-green .rs-toggle-presentation {
+  background-color: #4caf50;
+  background-color: var(--rs-green-500);
+}
+.rs-toggle-checked.rs-toggle-green .rs-toggle-presentation:hover {
+  background-color: #37ab3c;
+  background-color: var(--rs-green-600);
+}
+.rs-toggle-checked.rs-toggle-cyan .rs-toggle-presentation {
+  background-color: #00bcd4;
+  background-color: var(--rs-cyan-500);
+}
+.rs-toggle-checked.rs-toggle-cyan .rs-toggle-presentation:hover {
+  background-color: #00b1cc;
+  background-color: var(--rs-cyan-600);
+}
+.rs-toggle-checked.rs-toggle-blue .rs-toggle-presentation {
+  background-color: #2196f3;
+  background-color: var(--rs-blue-500);
+}
+.rs-toggle-checked.rs-toggle-blue .rs-toggle-presentation:hover {
+  background-color: #1787e8;
+  background-color: var(--rs-blue-600);
+}
+.rs-toggle-checked.rs-toggle-violet .rs-toggle-presentation {
+  background-color: #673ab7;
+  background-color: var(--rs-violet-500);
+}
+.rs-toggle-checked.rs-toggle-violet .rs-toggle-presentation:hover {
+  background-color: #5f2bb3;
+  background-color: var(--rs-violet-600);
+}
 
 /*# sourceMappingURL=index.css.map */

package/Toggle/styles/index.less

@@ -11,12 +11,19 @@
 .rs-toggle {
   position: relative;
   display: inline-block;
+  vertical-align: middle;
 
   // Default size is middle.
   .toggle(md);
+
+  &-label {
+    cursor: pointer;
+    margin-left: 10px;
+  }
 }
 
 .rs-toggle-input {
+  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
@@ -136,3 +143,14 @@
 .rs-toggle-lg {
   .toggle(lg);
 }
+
+// Colorful tags
+each(@spectrum, .(@color) {
+  .rs-toggle-checked.rs-toggle-@{color} .rs-toggle-presentation{
+    background-color: var(~'--rs-@{color}-500');
+
+    &:hover {
+      background-color: var(~'--rs-@{color}-600');
+    }
+  }
+});

package/Toggle/styles/mixin.less

@@ -1,5 +1,13 @@
-.toggle-size-variant(@toogle-height,@min-width,@toggle-handle-gap,@toggle-inner-margin,@toggle-inner-font-size) {
+.toggle-size-variant(
+  @toogle-height,
+  @min-width,
+  @toggle-handle-gap,
+  @toggle-inner-margin,
+  @toggle-inner-font-size,
+  @label-font-size,
+) {
   @handle-diameter: (@toogle-height - @toggle-handle-gap*2);
+  font-size: @label-font-size;
 
   .rs-toggle-loader {
     width: @handle-diameter;
@@ -72,6 +80,10 @@
     left: 100%;
     margin-left: -(@handle-diameter + @toggle-handle-gap);
   }
+
+  .rs-toggle-label {
+    font-size: @label-font-size;
+  }
 }
 
 // Small
@@ -81,7 +93,8 @@
     @toggle-sm-min-width,
     @toggle-sm-handle-gap,
     @toggle-sm-inner-margin,
-    @toggle-sm-inner-font-size
+    @toggle-sm-inner-font-size,
+    @font-size-small
   );
 }
 
@@ -92,7 +105,8 @@
     @toggle-md-min-width,
     @toggle-md-handle-gap,
     @toggle-md-inner-margin,
-    @toggle-md-inner-font-size
+    @toggle-md-inner-font-size,
+    @font-size-base
   );
 }
 
@@ -103,6 +117,7 @@
     @toggle-lg-min-width,
     @toggle-lg-handle-gap,
     @toggle-lg-inner-margin,
-    @toggle-lg-inner-font-size
+    @toggle-lg-inner-font-size,
+    @font-size-large
   );
 }

package/Transition/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Transition",
+  "private": true,
+  "main": "../cjs/Animation/Transition.js",
+  "module": "../esm/Animation/Transition.js",
+  "types": "../esm/Animation/Transition.d.ts"
+}

package/cjs/Accordion/Accordion.d.ts

@@ -1,9 +1,9 @@
 import { type PanelGroupProps } from '../PanelGroup';
-import Panel from '../Panel';
+import AccordionPanel from './AccordionPanel';
 import { RsRefForwardingComponent } from '../internals/types';
 export type AccordionProps = Omit<PanelGroupProps, 'accordion'>;
 export interface AccordionComponent extends RsRefForwardingComponent<'div', AccordionProps> {
-    Panel: typeof Panel;
+    Panel: typeof AccordionPanel;
 }
 /**
  * The `Accordion` component is used to display content that can be collapsed.

package/cjs/Accordion/Accordion.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _PanelGroup = _interopRequireDefault(require("../PanelGroup"));
-var _Panel = _interopRequireDefault(require("../Panel"));
+var _AccordionPanel = _interopRequireDefault(require("./AccordionPanel"));
 /**
  * The `Accordion` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/accordion
@@ -18,6 +18,6 @@ var Accordion = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ref: ref
   }, props));
 });
-Accordion.Panel = _Panel.default;
+Accordion.Panel = _AccordionPanel.default;
 Accordion.displayName = 'Accordion';
 var _default = exports.default = Accordion;

package/cjs/Accordion/AccordionPanel.d.ts

@@ -0,0 +1,2 @@
+import Panel from '../Panel';
+export default Panel;

package/cjs/Accordion/AccordionPanel.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _default = exports.default = _Panel.default;

package/cjs/Drawer/Drawer.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
-import { ModalProps, ModalBodyProps, ModalHeaderProps, ModalFooterProps, ModalTitleProps } from '../Modal';
-import { TypeAttributes, RsRefForwardingComponent } from '../internals/types';
+import { ModalProps } from '../Modal';
+import { TypeAttributes } from '../internals/types';
+import DrawerBody from './DrawerBody';
+import DrawerHeader from './DrawerHeader';
+import DrawerActions from './DrawerActions';
+import DrawerFooter from './DrawerFooter';
+import DrawerTitle from './DrawerTitle';
 export interface DrawerProps extends ModalProps {
     /** The placement of Drawer */
     placement?: TypeAttributes.Placement4;
     /** Custom close button */
     closeButton?: React.ReactNode | boolean;
 }
-declare const DrawerBody: RsRefForwardingComponent<'div', ModalBodyProps>;
-declare const DrawerHeader: RsRefForwardingComponent<'div', ModalHeaderProps>;
-declare const DrawerActions: RsRefForwardingComponent<'div', ModalFooterProps>;
-declare const DrawerFooter: RsRefForwardingComponent<'div', ModalFooterProps>;
-declare const DrawerTitle: RsRefForwardingComponent<'div', ModalTitleProps>;
 interface DrawerComponent extends React.FC<DrawerProps> {
     Body: typeof DrawerBody;
     Header: typeof DrawerHeader;

package/cjs/Drawer/Drawer.js

@@ -4,8 +4,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Slide = _interopRequireDefault(require("../Animation/Slide"));
@@ -14,44 +14,14 @@ var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _DrawerContext = _interopRequireDefault(require("./DrawerContext"));
 var _propTypes2 = require("../internals/propTypes");
+var _DrawerBody = _interopRequireDefault(require("./DrawerBody"));
+var _DrawerHeader = _interopRequireDefault(require("./DrawerHeader"));
+var _DrawerActions = _interopRequireDefault(require("./DrawerActions"));
+var _DrawerFooter = _interopRequireDefault(require("./DrawerFooter"));
+var _DrawerTitle = _interopRequireDefault(require("./DrawerTitle"));
 var _excluded = ["className", "placement", "classPrefix", "animation", "closeButton"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var DrawerBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Modal.default.Body, (0, _extends2.default)({
-    classPrefix: "drawer-body"
-  }, props, {
-    ref: ref
-  }));
-});
-var DrawerHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Modal.default.Header, (0, _extends2.default)({
-    classPrefix: "drawer-header"
-  }, props, {
-    ref: ref
-  }));
-});
-var DrawerActions = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Modal.default.Footer, (0, _extends2.default)({
-    classPrefix: "drawer-actions"
-  }, props, {
-    ref: ref
-  }));
-});
-var DrawerFooter = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Modal.default.Footer, (0, _extends2.default)({
-    classPrefix: "drawer-footer"
-  }, props, {
-    ref: ref
-  }));
-});
-var DrawerTitle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_Modal.default.Title, (0, _extends2.default)({
-    classPrefix: "drawer-title"
-  }, props, {
-    ref: ref
-  }));
-});
 /**
  * The Drawer component is used to display extra content from a main content.
  * @see https://rsuitejs.com/components/drawer
@@ -90,16 +60,16 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     animationProps: animationProps
   })));
 });
-DrawerBody.displayName = 'DrawerBody';
-DrawerHeader.displayName = 'DrawerHeader';
-DrawerActions.displayName = 'DrawerActions';
-DrawerFooter.displayName = 'DrawerFooter';
-DrawerTitle.displayName = 'DrawerTitle';
-Drawer.Body = DrawerBody;
-Drawer.Header = DrawerHeader;
-Drawer.Actions = DrawerActions;
-Drawer.Footer = (0, _utils.deprecateComponent)(DrawerFooter, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');
-Drawer.Title = DrawerTitle;
+_DrawerBody.default.displayName = 'DrawerBody';
+_DrawerHeader.default.displayName = 'DrawerHeader';
+_DrawerActions.default.displayName = 'DrawerActions';
+_DrawerFooter.default.displayName = 'DrawerFooter';
+_DrawerTitle.default.displayName = 'DrawerTitle';
+Drawer.Body = _DrawerBody.default;
+Drawer.Header = _DrawerHeader.default;
+Drawer.Actions = _DrawerActions.default;
+Drawer.Footer = (0, _utils.deprecateComponent)(_DrawerFooter.default, '<Drawer.Footer> has been deprecated, use <Drawer.Actions> instead.');
+Drawer.Title = _DrawerTitle.default;
 Drawer.displayName = 'Drawer';
 Drawer.propTypes = (0, _extends2.default)({}, _Modal.default.propTypes, {
   classPrefix: _propTypes.default.string,

package/cjs/Drawer/DrawerActions.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from '../internals/utils';
+export type DrawerActionsProps = ComponentProps;
+declare const DrawerActions: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
+export default DrawerActions;

package/cjs/Drawer/DrawerActions.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _utils = require("../internals/utils");
+var DrawerActions = (0, _utils.createComponent)({
+  name: 'DrawerActions'
+});
+var _default = exports.default = DrawerActions;

package/cjs/Drawer/DrawerBody.d.ts

@@ -0,0 +1,4 @@
+import { ModalBodyProps } from '../Modal/ModalBody';
+import { RsRefForwardingComponent } from '../internals/types';
+declare const DrawerBody: RsRefForwardingComponent<'div', ModalBodyProps>;
+export default DrawerBody;

package/cjs/Drawer/DrawerBody.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ModalBody = _interopRequireDefault(require("../Modal/ModalBody"));
+var DrawerBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalBody.default, (0, _extends2.default)({
+    classPrefix: "drawer-body"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = DrawerBody;

package/cjs/Drawer/DrawerFooter.d.ts

@@ -0,0 +1,4 @@
+import { ModalFooterProps } from '../Modal/ModalFooter';
+import { RsRefForwardingComponent } from '../internals/types';
+declare const DrawerFooter: RsRefForwardingComponent<'div', ModalFooterProps>;
+export default DrawerFooter;

package/cjs/Drawer/DrawerFooter.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ModalFooter = _interopRequireDefault(require("../Modal/ModalFooter"));
+var DrawerFooter = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalFooter.default, (0, _extends2.default)({
+    classPrefix: "drawer-footer"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = DrawerFooter;

package/cjs/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,4 @@
+import { ModalHeaderProps } from '../Modal/ModalHeader';
+import { RsRefForwardingComponent } from '../internals/types';
+declare const DrawerHeader: RsRefForwardingComponent<'div', ModalHeaderProps>;
+export default DrawerHeader;

package/cjs/Drawer/DrawerHeader.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ModalHeader = _interopRequireDefault(require("../Modal/ModalHeader"));
+var DrawerHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalHeader.default, (0, _extends2.default)({
+    classPrefix: "drawer-header"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = DrawerHeader;

package/cjs/Drawer/DrawerTitle.d.ts

@@ -0,0 +1,4 @@
+import { ModalTitleProps } from '../Modal/ModalTitle';
+import { RsRefForwardingComponent } from '../internals/types';
+declare const DrawerTitle: RsRefForwardingComponent<'div', ModalTitleProps>;
+export default DrawerTitle;

package/cjs/Drawer/DrawerTitle.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ModalTitle = _interopRequireDefault(require("../Modal/ModalTitle"));
+var DrawerTitle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_ModalTitle.default, (0, _extends2.default)({
+    classPrefix: "drawer-title"
+  }, props, {
+    ref: ref
+  }));
+});
+var _default = exports.default = DrawerTitle;