intelicoreact 0.0.5 → 0.0.6

package/dist/Atomic/FormElements/Calendar/Calendar.js

@@ -33,18 +33,26 @@ function _default(props) {
       _props$allowPrev = props.allowPrev,
       allowPrev = _props$allowPrev === void 0 ? true : _props$allowPrev,
       _props$allowNext = props.allowNext,
-      allowNext = _props$allowNext === void 0 ? true : _props$allowNext;
+      allowNext = _props$allowNext === void 0 ? true : _props$allowNext,
+      params = props.params;
+  var minDate = params.minDate,
+      maxDate = params.maxDate;
 
   var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       days = _useState2[0],
       setDays = _useState2[1];
 
-  var selectedDay = (0, _moment.default)(date);
+  var _useState3 = (0, _react.useState)(date),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showDate = _useState4[0],
+      setShowDate = _useState4[1];
+
+  var selectedDay = (0, _moment.default)(showDate);
   var isError = 'Invalid date';
   var title = (0, _react.useMemo)(function () {
-    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(date).format('YYYY'));
-  }, [date]);
+    return selectedDay.format('MMM') === isError ? isError : "".concat(selectedDay.format('MMM'), " ").concat((0, _moment.default)(showDate).format('YYYY'));
+  }, [date, showDate]);
   (0, _react.useEffect)(function () {
     var result = {};
     var day = selectedDay.startOf('month');
@@ -66,20 +74,23 @@ function _default(props) {
     }
 
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   var renderDay = function renderDay(week, dayOfWeek) {
     var day = days[week][dayOfWeek];
     if (!day) return /*#__PURE__*/_react.default.createElement("div", {
       className: "calendar__day"
     });
-    var isFutureDay = day && (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isFutureDay = day && maxDate ? (0, _moment.default)(day.date).isAfter((0, _moment.default)(maxDate || ''), 'day') : (0, _moment.default)(day.date).isAfter((0, _moment.default)(), 'day');
+    var isBeforeDay = day && (0, _moment.default)(day.date).isBefore((0, _moment.default)(minDate || ''), 'day');
     var classNames = (0, _classnames.default)('calendar__day', {
       'calendar__day--clickable': day
     }, {
       'calendar__day--disabled': isFutureDay
     }, {
-      'calendar__day--selected': selectedDay.format() === (0, _moment.default)(day.date).format()
+      'calendar__day--disabled': isBeforeDay
+    }, {
+      'calendar__day--selected': (0, _moment.default)(date).format() === (0, _moment.default)(day.date).format()
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "".concat(week, "_").concat(dayOfWeek),
@@ -93,11 +104,11 @@ function _default(props) {
   };
 
   var handlePrev = function handlePrev() {
-    setDate((0, _moment.default)(date).subtract(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).subtract(1, 'month').format('L'));
   };
 
   var handleNext = function handleNext() {
-    setDate((0, _moment.default)(date).add(1, 'month').format('L'));
+    setShowDate((0, _moment.default)(showDate).add(1, 'month').format('L'));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/Calendar/Calendar.scss

@@ -381,10 +381,10 @@ select.form-input {
   }
 }
 
-
 .calendar-header {
   display: flex;
   height: 24px;
+  margin: 0 6px;
 
   &__title {
     line-height: 20px;

package/dist/Atomic/FormElements/Calendar/Calendar.stories.js

@@ -2,74 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarSimple = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+exports.CalendarTemplate = exports.default = void 0;
 
-var _yup = require("yup");
-
-var _useClickOutside = require("../../../Functions/useClickOutside");
+var _react = _interopRequireDefault(require("react"));
 
 var _Calendar = _interopRequireDefault(require("./Calendar"));
 
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 global.lng = 'en';
 var _default = {
-  title: 'Form Elements/Calendar',
+  title: 'UI/Calendar',
   component: _Calendar.default
 };
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(args.date),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      _setDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isOpened = _useState4[0],
-      setIsOpened = _useState4[1];
-
-  var calendarRef = (0, _react.useRef)(null);
-  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
-    return setIsOpened(false);
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-container",
-    ref: calendarRef
-  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: "99/99/9999",
-    value: date,
-    onChange: function onChange(e) {
-      return _setDate(e.target.value);
-    },
-    className: "calendar-dropdown",
-    onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
-    }
-  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
-    setDate: function setDate(newDate) {
-      return _setDate(newDate);
-    }
-  }) : null);
+  return /*#__PURE__*/_react.default.createElement(_Calendar.default, args);
 };
 
-var CalendarSimple = Template.bind({});
-exports.CalendarSimple = CalendarSimple;
-CalendarSimple.args = {
-  date: '10/11/2021'
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: function setDate() {
+    return null;
+  }
 };

package/dist/Atomic/FormElements/DateTime/DateTime.stories.js

@@ -13,7 +13,7 @@ var _DateTime = _interopRequireDefault(require("./DateTime"));
 
 global.lng = 'en';
 var _default = {
-  title: 'DateTime',
+  title: 'Form Elements/DateTime',
   component: _DateTime.default
 };
 exports.default = _default;

package/dist/Atomic/FormElements/Input/Input.js

@@ -49,7 +49,8 @@ var Input = function Input(_ref) {
       onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       error = _ref.error,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      symbolsLimit = _ref.symbolsLimit;
 
   // STATES
   var _useState = (0, _react.useState)(false),
@@ -74,7 +75,7 @@ var Input = function Input(_ref) {
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
 
       onChange(inputValue.toString());
     },
@@ -82,17 +83,17 @@ var Input = function Input(_ref) {
       setEditing(!isEditing);
       onChange('');
     },
-    focus: function focus() {
+    focus: function focus(e) {
       setIsFocused(true);
-      if (onFocus) onFocus();
+      if (onFocus) onFocus(e);
     },
-    blur: function blur() {
+    blur: function blur(e) {
       setIsFocused(false);
       setEditing(false);
-      if (onBlur) onBlur();
+      if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
-      return onKeyUp ? onKeyUp(e.keyCode) : null;
+      return onKeyUp ? onKeyUp(e.keyCode, event) : null;
     }
   };
   (0, _react.useEffect)(function () {

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -71,6 +71,9 @@ var _default = {
     mask: {
       description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
     },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
     onBlur: {
       description: 'custom callback on blur'
     },
@@ -109,5 +112,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
+  symbolsLimit: 225
 };

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
+
+var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
+
+var _useClickOutside = require("../../../Functions/useClickOutside");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var InputCalendar = function InputCalendar(_ref) {
+  var data = _ref.data,
+      params = _ref.params;
+
+  var _useState = (0, _react.useState)(data),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(date),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isOpened = _useState6[0],
+      setIsOpened = _useState6[1];
+
+  var calendarRef = (0, _react.useRef)(null);
+  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
+    return setIsOpened(false);
+  });
+
+  var changeInputValue = function changeInputValue(value) {
+    if (!value.includes('_') && value) {
+      setDate((0, _moment.default)(value).format('L'));
+      setInputValue((0, _moment.default)(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  var changeCalendarDay = function changeCalendarDay(value) {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "calendar-container",
+    ref: calendarRef
+  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
+    mask: "99/99/9999",
+    value: inputValue,
+    onChange: function onChange(e) {
+      return changeInputValue(e.target.value);
+    },
+    className: "calendar-dropdown",
+    onFocus: function onFocus() {
+      return setIsOpened(!isOpened);
+    }
+  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    date: date,
+    setDate: function setDate(newDate) {
+      return changeCalendarDay(newDate);
+    },
+    params: params
+  }) : null);
+};
+
+var _default = InputCalendar;
+exports.default = _default;

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _yup = require("yup");
+
+var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/InputCalendar',
+  component: _InputCalendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var params = {
+    minDate: args === null || args === void 0 ? void 0 : args.minDate,
+    maxDate: args === null || args === void 0 ? void 0 : args.maxDate
+  };
+  return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
+    data: args.date,
+    params: params
+  });
+};
+
+var Calendar = Template.bind({});
+exports.Calendar = Calendar;
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021'
+};

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputDateRangeTemplate = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Table = _interopRequireDefault(require("../Table/Table"));
+
+var _excluded = ["dateRange"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/InputDateRange',
+  component: _.default,
+  argTypes: {// status: {
+    //   control: {
+    //     type: 'select',
+    //     options: ['admin', 'user']
+    //   }
+    // }
+  }
+};
+exports.default = _default;
+var tableData = {
+  header: [{
+    id: 1,
+    label: 'state'
+  }, {
+    id: 2,
+    label: 'Tags'
+  }, {
+    id: 3,
+    label: 'status'
+  }, {
+    id: 4,
+    label: 'loanAmountApproved'
+  }, {
+    id: 5,
+    label: 'loanAmountRejected'
+  }, {
+    id: 6,
+    label: 'approveRate'
+  }, {
+    id: 7,
+    label: 'actions',
+    type: 'actions'
+  }],
+  rows: [{
+    id: 1,
+    link: {
+      label: 'CA',
+      link: '#s'
+    },
+    tags: [{
+      label: 'Label 1'
+    }],
+    status: {
+      value: '90',
+      status: 'active'
+    },
+    loanAmountApproved: {
+      value: '$70,000'
+    },
+    loanAmountRejected: {
+      value: '$30,000'
+    },
+    approveRate: {
+      value: '70%'
+    }
+  }, {
+    id: 2,
+    link: {
+      label: 'NY',
+      link: '#s'
+    },
+    advancedTags: [{
+      labelLeft: 'home',
+      labelRight: 'hoods',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelRight: 'jewelry',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelLeft: 'home',
+      labelRight: 'improvement',
+      active: 0,
+      pause: 0,
+      warnLeft: true,
+      warnLeftMsg: 'landerNotIncluded',
+      warnRightMsg: 'noMerchants'
+    }, {
+      labelLeft: 'home',
+      labelRight: 'hoods',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }, {
+      labelRight: 'jewelry',
+      active: 3,
+      pause: 1,
+      merchants: 5
+    }],
+    status: {
+      label: 'Active',
+      className: 'color--green-haze'
+    },
+    loanAmountApproved: {
+      value: '$3,000'
+    },
+    loanAmountRejected: {
+      value: '$7,000'
+    },
+    approveRate: {
+      value: '30%'
+    }
+  }, {
+    id: 3,
+    link: {
+      label: 'NH',
+      link: '#s'
+    },
+    tags: [{
+      label: 'Label 1'
+    }, {
+      label: 'Label 2'
+    }, {
+      label: 'Label 3'
+    }],
+    status: {
+      status: 'error'
+    },
+    loanAmountApproved: {
+      value: '$70,000'
+    },
+    loanAmountRejected: {
+      value: '$30,000'
+    },
+    approveRate: {
+      value: '70%'
+    }
+  }]
+};
+
+var Template = function Template(args) {
+  var _state$rows;
+
+  var dateRange = args.dateRange,
+      restOfProps = (0, _objectWithoutProperties2.default)(args, _excluded);
+
+  var _useState = (0, _react.useState)(dateRange),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(tableData),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var rowsWithActions = state === null || state === void 0 ? void 0 : (_state$rows = state.rows) === null || _state$rows === void 0 ? void 0 : _state$rows.map(function (row) {
+    return _objectSpread(_objectSpread({}, row), {}, {
+      actions: row.isDeleted ? [{
+        type: 'undo'
+      }] : [{
+        type: 'download'
+      }, {
+        type: 'edit'
+      }, {
+        type: 'delete'
+      }]
+    });
+  }); // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb20"
+  }, /*#__PURE__*/_react.default.createElement(_.default, (0, _extends2.default)({}, restOfProps, {
+    value: value,
+    onChange: setValue
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Table.default, {
+    header: state.header,
+    rows: rowsWithActions,
+    onChange: setState
+  })));
+};
+
+var InputDateRangeTemplate = Template.bind({});
+exports.InputDateRangeTemplate = InputDateRangeTemplate;
+InputDateRangeTemplate.args = {
+  txt: {},
+  label: 'Date Range',
+  dateRange: {
+    intervalKey: 'today'
+  },
+  id: 'anyToggleButtonId',
+  className: 'anyExternalContainerClassName',
+  error: false,
+  disabled: false,
+  isHoverable: false,
+  // short: true,
+  isCompact: false,
+  // isFocused: true,
+  isIntervalsHidden: false,
+  isCompareHidden: true,
+  hideArrows: false,
+  isOptionsRight: false // limitRange,
+  // isUseAbs,
+  // absTooltip
+
+};