sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/components/ReportTable.style.js

@@ -0,0 +1,306 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tr = exports.TooltipWrapper = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.ReportTableWrapper = exports.RecordDisplay = exports.PaginationWrapper = exports.PaginationContainer = exports.LoaderWrapper = exports.Loader = exports.InfoText = exports.InfoBlock = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    height: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const rotation = (0, _styledComponents.keyframes)`
+  0%, 100% {
+      box-shadow: 
+          0px -8.32px 0px 0px #1F7677, 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.5), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.7);
+  }
+
+  12.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.7), 
+          5.76px -5.76px 0 0px #1F7677, 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.5);
+  }
+
+  25% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.5), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.7), 
+          8px 0px 0 0px #1F7677, 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  37.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.5), 
+          8px 0px 0 0px rgba(31, 118, 119,0.7), 
+          5.6px 5.6px 0 0px #1F7677, 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  50% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.5), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.7), 
+          0px 8px 0 0px #1F7677, 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  62.5% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.5), 
+          0px 8px 0 0px rgba(31, 118, 119,0.7), 
+          -5.76px 5.76px 0 0px #1F7677, 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  75% {
+      box-shadow: 
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.5), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.7), 
+          -8.32px 0px 0 0px #1F7677, 
+          -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
+  }
+
+  87.5% {
+      box-shadow:     
+          0px -8.32px 0px 0px rgba(31, 118, 119,0.2), 
+          5.76px -5.76px 0 0px rgba(31, 118, 119,0.2), 
+          8px 0px 0 0px rgba(31, 118, 119,0.2), 
+          5.6px 5.6px 0 0px rgba(31, 118, 119,0.2), 
+          0px 8px 0 0px rgba(31, 118, 119,0.2), 
+          -5.76px 5.76px 0 0px rgba(31, 118, 119,0.5), 
+          -8.32px 0px 0 0px rgba(31, 118, 119,0.7), 
+          -5.76px -5.76px 0 0px #1F7677;
+  }
+`;
+const ReportTableWrapper = exports.ReportTableWrapper = _styledComponents.default.div`
+`;
+const PaginationContainer = exports.PaginationContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 20px auto;
+
+  .page-number {
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: black;
+    transition: background-color 0.2s ease;
+    font-size: 14px;
+    font-weight: 400;
+    font-family: "Poppins";
+    text-align: center;
+
+    &:hover {
+      background-color: #b0b0b0;
+    }
+
+    &.active {
+      background-color: #f2f2f2;
+      color: #1b30aa;
+      cursor: default;
+    }
+  }
+
+  .arrow {
+    cursor: pointer;
+    color: black;
+    font-weight: bold;
+    transition: color 0.2s ease;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      color: #1b30aa;
+    }
+
+    &.disabled {
+      color: red;
+      cursor: not-allowed;
+
+      &:hover {
+        color: red;
+      }
+    }
+  }
+
+  .ellipsis {
+    padding: 5px;
+    color: #999;
+    cursor: default;
+  }
+`;
+const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div`
+  width: max-content;
+  max-width: 330px;
+  /* white-space: wrap; */
+  height: auto;
+  overflow: hidden;
+  max-height: calc(1.2em * 5);
+  line-height: 1.2em;
+  word-wrap: break-word;
+  white-space: normal;
+`;
+const RecordDisplay = exports.RecordDisplay = _styledComponents.default.div`
+  color: #8b8989;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: "Poppins";
+  margin-left: 20px;
+  position: absolute;
+`;
+const PaginationWrapper = exports.PaginationWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const LoaderWrapper = exports.LoaderWrapper = _styledComponents.default.div`
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  color: #1f7677;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 12px;
+  }
+`;
+const Loader = exports.Loader = _styledComponents.default.span`
+  font-size: 10px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: ${rotation} 1.5s infinite ease;
+  transform: translateZ(0);
+`;
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
+  position: relative;
+  width: ${props => `${props.width}`};
+  height: ${props => `${props.height}`};
+  white-space: nowrap;
+  border: 1px solid #dddddd;
+  border-radius: ${props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px'};
+  overflow-x: ${props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden'};
+  ${scrollableStyles}
+`;
+const Table = exports.Table = _styledComponents.default.table`
+  font-family: "Poppins", sans-serif;
+  width: ${props => `${props.tableWidthSize}%`};
+  table-layout: fixed;
+  position: relative;
+  background-color: white;
+  border-collapse: collapse;
+  th,
+  td {
+    /* width: 100%; */
+    text-align: left;
+    text-overflow: ellipsis;
+  }
+`;
+const Th = exports.Th = _styledComponents.default.th`
+  font-weight: 600;
+  font-size: 12px;
+  color: #212121;
+  padding-top: 16px;
+  padding-left: 40px;
+
+  > div {
+    display: inline-flex;
+    gap: 10px;
+    align-items: center;
+  }
+`;
+const Td = exports.Td = _styledComponents.default.td`
+  font-weight: 400;
+  font-size: 12px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 40px;
+`;
+const Tr = exports.Tr = _styledComponents.default.tr`
+  border-bottom: 1px solid #f3f4f6;
+  ${_ref => {
+  let {
+    enableHover,
+    selectHoverColor
+  } = _ref;
+  return enableHover && `&:hover {
+      background-color: ${selectHoverColor};
+      cursor: pointer;
+    }`;
+}}
+`;
+const InfoText = exports.InfoText = _styledComponents.default.div`
+  font-weight: 400;
+  font-size: 14px;
+  color: #212121;
+  padding-top: 20px;
+  padding-bottom: 20px;
+`;
+const InfoBlock = exports.InfoBlock = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  background-color: white;
+`;

package/dist/stories/components/SagButton.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SagButton = require("./SagButton.style");
+const SagButton = props => {
+  const {
+    text,
+    disabled,
+    fontSize,
+    fontWeight,
+    textColor,
+    backgroundColor,
+    borderColor,
+    onClickColor,
+    height,
+    width,
+    radius,
+    onClick
+  } = props;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const handleButtonClick = event => {
+    setClicked(true);
+    onClick(event);
+    setTimeout(() => {
+      setClicked(false);
+      // Add any logic you want to execute after the transition is complete
+    }, 300); // Adjust the transition duration (in milliseconds) as needed
+  };
+  return /*#__PURE__*/_react.default.createElement(_SagButton.ButtonContainer, {
+    id: "ButtonContainer"
+  }, /*#__PURE__*/_react.default.createElement(_SagButton.Button, {
+    id: "Button",
+    className: clicked ? 'button-clicked' : '',
+    onClick: !disabled ? handleButtonClick : null,
+    width: width,
+    height: height,
+    radius: radius,
+    disabled: disabled,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    onClickColor: onClickColor
+  }, /*#__PURE__*/_react.default.createElement(_SagButton.Label, {
+    id: "Label",
+    textColor: textColor,
+    fontSize: fontSize,
+    fontWeight: fontWeight
+  }, text)));
+};
+var _default = exports.default = SagButton;
+SagButton.defaultProps = {
+  text: '',
+  textColor: '#1B30AA',
+  onClickColor: '#1B30AA',
+  backgroundColor: '#ffffff',
+  fontSize: '14px',
+  disabled: false,
+  width: '100%',
+  height: '50px',
+  radius: '12px',
+  onClick: () => {},
+  fontWeight: '500',
+  borderColor: '#1B30AA'
+};

package/dist/stories/components/SagButton.style.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.ButtonContainer = exports.Button = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
+  position: relative;
+`;
+const Button = exports.Button = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  border: ${props => `1px solid ${props.borderColor}`}; 
+  border-radius: ${props => props.radius};
+  background-color: ${props => props.disabled ? '#c5c5c5' : props.backgroundColor};
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${props => props.disabled ? '#c5c5c5' : props.backgroundColor};
+    box-shadow: ${props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)'};
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.button-clicked {
+    background-color: ${props => props.onClickColor};
+    color: white;
+    padding: 10px 10px;  
+    cursor: pointer;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;
+const Label = exports.Label = _styledComponents.default.label`
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: ${props => props.fontWeight};
+  color: ${props => props.textColor};
+  pointer-events: none;
+  font-size: ${props => props.fontSize};
+  user-select: none;
+`;

package/dist/stories/components/SagIconButton.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SagIconButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SagIconButton = require("./SagIconButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+var _OptionsIcon = require("./icons/OptionsIcon");
+var _DownloadIcon = require("./icons/DownloadIcon");
+var _DocumentIcon = require("./icons/DocumentIcon");
+var _FlyIcon = require("./icons/FlyIcon");
+var _BellIcon = require("./icons/BellIcon");
+var _MaintenanceIcon = require("./icons/MaintenanceIcon");
+var _ExitIcon = require("./icons/ExitIcon");
+var _EyeIcon = require("./icons/EyeIcon");
+const SagIconButton = props => {
+  const {
+    iconName,
+    color,
+    backgroundColor,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick,
+    className
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(prevState => !prevState);
+  };
+  const getIcon = icon => {
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+      default:
+        return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: activeState ? activeColor : color
+        });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_SagIconButton.SagIconButtonWrapper, {
+    className: className,
+    height: height,
+    color: activeState ? activeColor : color,
+    backgroundColor: backgroundColor,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, getIcon(iconName), buttonText && /*#__PURE__*/_react.default.createElement(_SagIconButton.SpanText, null, buttonText));
+};
+exports.SagIconButton = SagIconButton;
+var _default = exports.default = SagIconButton;
+SagIconButton.defaultProps = {
+  className: '',
+  iconName: 'filter',
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  backgroundColor: 'transparent',
+  // '#E8F5EB',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

package/dist/stories/components/SagIconButton.style.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.SagIconButtonWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const SagIconButtonWrapper = exports.SagIconButtonWrapper = _styledComponents.default.button`
+  height: ${props => props.height};
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  white-space: nowrap;
+  color: ${props => props.color};
+  border-radius: 8px;
+  border: 1px solid ${props => props.color};
+  background: ${props => props.backgroundColor ? props.backgroundColor : 'transparent'}; 
+  transition: box-shadow 0.3s ease;
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText = exports.SpanText = _styledComponents.default.span`
+`;

package/dist/stories/components/SagInput.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SagInput = require("./SagInput.style");
+const SagInput = props => {
+  const {
+    labelText,
+    inputType,
+    showLabel,
+    labelColor,
+    isReauired,
+    placeholder,
+    onTyping,
+    width,
+    borderRadius
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+    onTyping(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_SagInput.TextFieldContainer, null, /*#__PURE__*/_react.default.createElement(_SagInput.TextFieldInput, {
+    type: inputType,
+    value: inputValue,
+    onChange: handleInputChange,
+    placeholder: placeholder,
+    width: width,
+    borderRadius: borderRadius
+  }), showLabel && /*#__PURE__*/_react.default.createElement(_SagInput.Label, {
+    color: labelColor
+  }, labelText, isReauired && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#D23630'
+    }
+  }, " *")));
+};
+var _default = exports.default = SagInput;
+SagInput.defaultProps = {
+  labelText: '',
+  inputType: 'text',
+  showLabel: true,
+  labelColor: '#1B30AA',
+  isReauired: true,
+  placeholder: 'placeholder',
+  width: '100%',
+  borderRadius: '12px',
+  onTyping: () => {}
+};

package/dist/stories/components/SagInput.style.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldInput = exports.TextFieldContainer = exports.Label = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div`
+  position: relative;
+`;
+const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input`
+  padding: 14px 10px;
+  font-size: 14px;
+  width: ${props => props.width};
+  border: 1px solid #ccc;
+  border-radius: ${props => props.borderRadius};
+  box-sizing: border-box;
+  &::placeholder {
+    color: #B1B1B1;
+  }
+
+  /* &:focus + label,
+  &:not(:placeholder-shown) + label {
+    top: -8px;
+    font-size: 12px;
+    color: #007bff;
+    background-color: white;
+  } */
+`;
+const Label = exports.Label = _styledComponents.default.label`
+  position: absolute;
+  top: -8px;
+  left: 12px;
+  color: ${props => props.color};
+  pointer-events: none;
+  font-size: 14px;
+  padding: 0 3px;
+  background: white;
+  /* transition: all 0.3s ease; */
+`;