@uncinc/uncinc-react-kitchen-sink 2.7.1 → 2.7.3

package/README.md

@@ -8,6 +8,12 @@ Everything but the kitchen sink!
 yarn add @uncinc/uncinc-react-kitchen-sink
 ```
 
+To be able to run githooks:
+
+```bash
+brew install gitleaks
+```
+
 ## Usage
 
 You can import the components in your own React project.

package/dist/components/Button/index.d.ts

@@ -1,4 +1,4 @@
-export function Button({ href, dispatch, className, children, primary, inverted, language, enableLoader, loading, htmlType, ...props }: {
+export function Button({ href, dispatch, className, children, primary, inverted, language, enableLoader, loading, htmlType, target, ...props }: {
     [x: string]: any;
     href: any;
     dispatch: any;
@@ -10,6 +10,7 @@ export function Button({ href, dispatch, className, children, primary, inverted,
     enableLoader: any;
     loading: any;
     htmlType: any;
+    target: any;
 }): React.JSX.Element;
 export namespace Button {
     namespace defaultProps {
@@ -19,6 +20,7 @@ export namespace Button {
         let href: null;
         let enableLoader: boolean;
         let htmlType: string;
+        let target: string;
     }
     namespace propTypes {
         let href_1: PropTypes.Requireable<string>;
@@ -33,6 +35,8 @@ export namespace Button {
         export { enableLoader_1 as enableLoader };
         let htmlType_1: PropTypes.Requireable<string>;
         export { htmlType_1 as htmlType };
+        let target_1: PropTypes.Requireable<string>;
+        export { target_1 as target };
     }
 }
 declare const _default: (props: any) => React.JSX.Element;

package/dist/components/Button/index.js

@@ -12,7 +12,7 @@ var _gtm = _interopRequireDefault(require("../../helpers/gtm"));
 var _link = require("../../helpers/link");
 var _withMapping = _interopRequireDefault(require("../../Context/withMapping"));
 require("./style.scss");
-var _excluded = ["href", "dispatch", "className", "children", "primary", "inverted", "language", "enableLoader", "loading", "htmlType"];
+var _excluded = ["href", "dispatch", "className", "children", "primary", "inverted", "language", "enableLoader", "loading", "htmlType", "target"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -28,6 +28,7 @@ var Button = function Button(_ref) {
     enableLoader = _ref.enableLoader,
     loading = _ref.loading,
     htmlType = _ref.htmlType,
+    target = _ref.target,
     props = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('Button', className, {
     'Button--primary': primary,
@@ -67,7 +68,8 @@ var Button = function Button(_ref) {
     onClick: onClick
   }), children) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, _extends({
     to: href,
-    className: classes
+    className: classes,
+    target: target
   }, props, {
     onClick: onClick
   }), children);
@@ -79,7 +81,8 @@ Button.defaultProps = {
   disabled: false,
   href: null,
   enableLoader: false,
-  htmlType: 'button'
+  htmlType: 'button',
+  target: '_self'
 };
 Button.propTypes = {
   href: _propTypes.default.string,
@@ -87,7 +90,8 @@ Button.propTypes = {
   disabled: _propTypes.default.bool,
   inverted: _propTypes.default.bool,
   enableLoader: _propTypes.default.bool,
-  htmlType: _propTypes.default.oneOf(['button', 'submit', 'reset'])
+  htmlType: _propTypes.default.oneOf(['button', 'submit', 'reset']),
+  target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
 };
 var _default = (0, _withMapping.default)(Button);
 exports.default = _default;

package/dist/components/Form/Checkboxes/index.js

@@ -48,7 +48,11 @@ function Checkbox(props) {
       // value is unchecked, we want to add it to the list of checked values.
       // And if the current value is checked, we want to filter it out of the
       // list of checked values.
+
       if (!checked) {
+        if (field.value === undefined || field.value === null) {
+          return [value];
+        }
         return [].concat(_toConsumableArray(field.value), [value]);
       }
       return field.value.filter(function (item) {

package/dist/components/Form/DatePickerRange/Picker/index.d.ts

@@ -0,0 +1,40 @@
+export default Picker;
+declare function Picker(props: any): React.JSX.Element;
+declare namespace Picker {
+    namespace defaultProps {
+        let title: string;
+        let placeholder: string;
+        let value: null;
+        let startDate: null;
+        let endDate: null;
+        let minDate: null;
+        let maxDate: null;
+        let className: string;
+        let disabled: boolean;
+        function onChange(): void;
+    }
+    namespace propTypes {
+        let title_1: PropTypes.Requireable<string>;
+        export { title_1 as title };
+        let placeholder_1: PropTypes.Requireable<string>;
+        export { placeholder_1 as placeholder };
+        let value_1: PropTypes.Requireable<Date>;
+        export { value_1 as value };
+        let startDate_1: PropTypes.Requireable<Date>;
+        export { startDate_1 as startDate };
+        let endDate_1: PropTypes.Requireable<Date>;
+        export { endDate_1 as endDate };
+        let minDate_1: PropTypes.Requireable<Date>;
+        export { minDate_1 as minDate };
+        let maxDate_1: PropTypes.Requireable<Date>;
+        export { maxDate_1 as maxDate };
+        let className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        let disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        let onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onChange_1 as onChange };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Form/DatePickerRange/Picker/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+var _GenericFormElement = _interopRequireDefault(require("../../GenericFormElement"));
+require("react-datepicker/dist/react-datepicker.css");
+var _excluded = ["title", "placeholder", "value", "startDate", "endDate", "minDate", "maxDate", "className", "disabled", "onChange"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Picker = function Picker(props) {
+  var title = props.title,
+    placeholder = props.placeholder,
+    value = props.value,
+    startDate = props.startDate,
+    endDate = props.endDate,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    className = props.className,
+    disabled = props.disabled,
+    onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
+    className: className,
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, _extends({
+    selected: value,
+    onChange: onChange,
+    peekNextMonth: true,
+    showMonthDropdown: true,
+    showYearDropdown: true,
+    dropdownMode: "select",
+    startDate: startDate,
+    endDate: endDate,
+    minDate: minDate,
+    maxDate: maxDate,
+    disabled: disabled,
+    placeholderText: placeholder
+  }, restProps)));
+};
+Picker.defaultProps = {
+  title: '',
+  placeholder: '',
+  value: null,
+  startDate: null,
+  endDate: null,
+  minDate: null,
+  maxDate: null,
+  className: '',
+  disabled: false,
+  onChange: function onChange() {}
+};
+Picker.propTypes = {
+  title: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  value: _propTypes.default.instanceOf(Date),
+  startDate: _propTypes.default.instanceOf(Date),
+  endDate: _propTypes.default.instanceOf(Date),
+  minDate: _propTypes.default.instanceOf(Date),
+  maxDate: _propTypes.default.instanceOf(Date),
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+var _default = Picker;
+exports.default = _default;

package/dist/components/Form/DatePickerRange/index.d.ts

@@ -0,0 +1,62 @@
+export default DatePickerRange;
+declare function DatePickerRange(props: any): React.JSX.Element;
+declare namespace DatePickerRange {
+    namespace defaultProps {
+        let isSinglePicker: boolean;
+        let title: string;
+        let startDateTitle: string;
+        let endDateTitle: string;
+        let required: boolean;
+        let description: string;
+        let startDatePlaceholder: string;
+        let endDatePlaceholder: string;
+        function validation(): void;
+        let defaultValue: never[];
+        let minDate: null;
+        let maxDate: null;
+        let startDateClassName: string;
+        let endDateClassName: string;
+        let wrapperClassName: string;
+        let disabled: boolean;
+        function onChange(): void;
+    }
+    namespace propTypes {
+        let isSinglePicker_1: PropTypes.Requireable<boolean>;
+        export { isSinglePicker_1 as isSinglePicker };
+        let title_1: PropTypes.Requireable<string>;
+        export { title_1 as title };
+        let startDateTitle_1: PropTypes.Requireable<string>;
+        export { startDateTitle_1 as startDateTitle };
+        let endDateTitle_1: PropTypes.Requireable<string>;
+        export { endDateTitle_1 as endDateTitle };
+        let required_1: PropTypes.Requireable<boolean>;
+        export { required_1 as required };
+        let description_1: PropTypes.Requireable<string>;
+        export { description_1 as description };
+        let startDatePlaceholder_1: PropTypes.Requireable<string>;
+        export { startDatePlaceholder_1 as startDatePlaceholder };
+        let endDatePlaceholder_1: PropTypes.Requireable<string>;
+        export { endDatePlaceholder_1 as endDatePlaceholder };
+        export let fieldName: PropTypes.Validator<string>;
+        let validation_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { validation_1 as validation };
+        let defaultValue_1: PropTypes.Requireable<(Date | null | undefined)[]>;
+        export { defaultValue_1 as defaultValue };
+        let minDate_1: PropTypes.Requireable<Date>;
+        export { minDate_1 as minDate };
+        let maxDate_1: PropTypes.Requireable<Date>;
+        export { maxDate_1 as maxDate };
+        let startDateClassName_1: PropTypes.Requireable<string>;
+        export { startDateClassName_1 as startDateClassName };
+        let endDateClassName_1: PropTypes.Requireable<string>;
+        export { endDateClassName_1 as endDateClassName };
+        let wrapperClassName_1: PropTypes.Requireable<string>;
+        export { wrapperClassName_1 as wrapperClassName };
+        let disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        let onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onChange_1 as onChange };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Form/DatePickerRange/index.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactI18next = require("react-i18next");
+var _FormikWrapper = require("../FormikWrapper");
+var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _Picker = _interopRequireDefault(require("./Picker"));
+var _excluded = ["isSinglePicker", "title", "startDateTitle", "endDateTitle", "required", "description", "startDatePlaceholder", "endDatePlaceholder", "fieldName", "validation", "defaultValue", "minDate", "maxDate", "startDateClassName", "endDateClassName", "wrapperClassName", "disabled", "onChange"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var DatePickerRange = function DatePickerRange(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isSinglePicker = props.isSinglePicker,
+    title = props.title,
+    startDateTitle = props.startDateTitle,
+    endDateTitle = props.endDateTitle,
+    required = props.required,
+    description = props.description,
+    startDatePlaceholder = props.startDatePlaceholder,
+    endDatePlaceholder = props.endDatePlaceholder,
+    fieldName = props.fieldName,
+    validation = props.validation,
+    defaultValue = props.defaultValue,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    startDateClassName = props.startDateClassName,
+    endDateClassName = props.endDateClassName,
+    wrapperClassName = props.wrapperClassName,
+    disabled = props.disabled,
+    _onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    setFieldValue = _useExtendedFormikCon.setFieldValue,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var isTouched = touched[fieldName];
+  var error = errors[fieldName];
+  var startDateClassNames = (0, _classnames.default)('DatePickerRange--start', startDateClassName);
+  var endDateClassNames = (0, _classnames.default)('DatePickerRange--end', endDateClassName);
+  var wrapperClassNames = (0, _classnames.default)('DatePickerRange', wrapperClassName);
+  var _useMemo = (0, _react.useMemo)(function () {
+      var value = values[fieldName] || [];
+      var startDate = value[0] || defaultValue[0] || null;
+      var endDate = value[1] || defaultValue[1] || null;
+      return [startDate, endDate];
+    }, [defaultValue, fieldName, values]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    startDate = _useMemo2[0],
+    endDate = _useMemo2[1];
+  var fieldValidation = function fieldValidation(value) {
+    // Required validation.
+    if (required && (!value || !Array.isArray(value) || value.length === 0)) {
+      return t(['webform.component.date_picker_range.required', 'webform.required', 'webform_required']);
+    }
+
+    // Min date validation.
+    if (minDate && _typeof(minDate) === 'object' && value[0] && _typeof(value[0]) === 'object' && value[0].getTime() < minDate.getTime()) {
+      return t(['webform.component.date_picker_range.min', 'webform.min', 'webform_min']);
+    }
+
+    // Max date validation.
+    if (maxDate && _typeof(maxDate) === 'object' && value[1] && _typeof(value[1]) === 'object' && value[1].getTime() > maxDate.getTime()) {
+      return t(['webform.component.date_picker_range.max', 'webform.max', 'webform_max']);
+    }
+
+    // Custom validation.
+    if (validation) {
+      return validation(value);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
+    className: wrapperClassNames,
+    title: title,
+    required: required,
+    description: description,
+    fieldName: fieldName,
+    touched: isTouched,
+    error: error,
+    displayRequiredIndicator: displayRequiredIndicator
+  }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+    name: fieldName,
+    value: [startDate, endDate],
+    validate: fieldValidation
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Picker.default, _extends({}, restProps, {
+      title: startDateTitle,
+      placeholder: startDatePlaceholder,
+      value: startDate,
+      selectsStart: !isSinglePicker,
+      selectsRange: isSinglePicker,
+      startDate: startDate,
+      endDate: endDate,
+      minDate: minDate,
+      maxDate: maxDate,
+      className: startDateClassNames,
+      disabled: disabled,
+      shouldCloseOnSelect: !isSinglePicker,
+      onChange: function onChange(date) {
+        // When selectsRange is true, date is an array of Date values.
+        // Otherwise date is a single Date value.
+        var newValue = isSinglePicker ? date : [date, endDate];
+        setFieldValue(fieldName, newValue);
+        if (_onChange) {
+          _onChange(newValue);
+        }
+      }
+    })), !isSinglePicker && /*#__PURE__*/_react.default.createElement(_Picker.default, _extends({}, restProps, {
+      title: endDateTitle,
+      placeholder: endDatePlaceholder,
+      value: endDate,
+      selectsEnd: true,
+      startDate: startDate,
+      endDate: endDate,
+      minDate: startDate,
+      maxDate: maxDate,
+      className: endDateClassNames,
+      disabled: disabled,
+      onChange: function onChange(date) {
+        setFieldValue(fieldName, [startDate, date]);
+        if (_onChange) {
+          _onChange([startDate, date]);
+        }
+      }
+    })));
+  }));
+};
+DatePickerRange.defaultProps = {
+  isSinglePicker: false,
+  title: '',
+  startDateTitle: '',
+  endDateTitle: '',
+  required: false,
+  description: '',
+  startDatePlaceholder: '',
+  endDatePlaceholder: '',
+  validation: function validation() {},
+  defaultValue: [],
+  minDate: null,
+  maxDate: null,
+  startDateClassName: '',
+  endDateClassName: '',
+  wrapperClassName: '',
+  disabled: false,
+  onChange: function onChange() {}
+};
+DatePickerRange.propTypes = {
+  isSinglePicker: _propTypes.default.bool,
+  title: _propTypes.default.string,
+  startDateTitle: _propTypes.default.string,
+  endDateTitle: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  description: _propTypes.default.string,
+  startDatePlaceholder: _propTypes.default.string,
+  endDatePlaceholder: _propTypes.default.string,
+  fieldName: _propTypes.default.string.isRequired,
+  validation: _propTypes.default.func,
+  defaultValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
+  minDate: _propTypes.default.instanceOf(Date),
+  maxDate: _propTypes.default.instanceOf(Date),
+  startDateClassName: _propTypes.default.string,
+  endDateClassName: _propTypes.default.string,
+  wrapperClassName: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+var _default = DatePickerRange;
+exports.default = _default;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,17 @@
+export default Icon;
+declare function Icon({ flair, name }: {
+    flair?: string | undefined;
+    name: any;
+}): React.JSX.Element;
+declare namespace Icon {
+    namespace defaultProps {
+        let flair: string;
+    }
+    namespace propTypes {
+        export let name: PropTypes.Validator<string>;
+        let flair_1: PropTypes.Requireable<string>;
+        export { flair_1 as flair };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Icon/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Icon = function Icon(_ref) {
+  var _ref$flair = _ref.flair,
+    flair = _ref$flair === void 0 ? '' : _ref$flair,
+    name = _ref.name;
+  var flairPostFix = flair && flair.length > 0 ? '-' : '';
+  var className = (0, _classnames.default)('Icon', "Icon-".concat(flair).concat(flairPostFix).concat(name));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  });
+};
+Icon.defaultProps = {
+  flair: ''
+};
+Icon.propTypes = {
+  name: _propTypes.default.string.isRequired,
+  flair: _propTypes.default.string
+};
+var _default = Icon;
+exports.default = _default;

package/dist/components/Icon/style.scss

@@ -0,0 +1,100 @@
+@use 'sass:list';
+@use 'sass:color';
+
+// https://github.com/marella/material-design-icons/tree/main/svg#readme
+// https://marella.me/material-design-icons/demo/svg/
+
+$custom-icon-path: '' !default;
+
+$material-icon-names: (
+    arrow_forward,
+    chevron_right,
+    download,
+    filter_list,
+    info,
+    check,
+    radio,
+    ) !default;
+
+$material-icon-styles: (
+    filled,
+    outlined,
+    round,
+    sharp,
+    two-tone
+);
+
+@mixin icon-color($color: #000000, $opacity: 1) {
+    $r: color.red($color) / 255;
+    $g: color.green($color) / 255;
+    $b: color.blue($color) / 255;
+    $a: $opacity;
+
+    // grayscale fallback if SVG from data url is not supported
+    $lightness: lightness($color);
+    filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+
+    // color filter
+    $svg-filter-id: "recolor";
+    filter: url('data:image/svg+xml;utf8,\
+    <svg xmlns="http://www.w3.org/2000/svg">\
+      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
+        <feColorMatrix type="matrix" values="\
+          0 0 0 0 #{$r}\
+          0 0 0 0 #{$g}\
+          0 0 0 0 #{$b}\
+          0 0 0 #{$a} 0\
+        "/>\
+      </filter>\
+    </svg>\
+    ##{$svg-filter-id}');
+}
+
+@mixin unset-icon-color() {
+    filter: none;
+}
+
+@mixin generateMaterialIconClasses() {
+    @for $styleIndex from 1 through length($material-icon-styles) {
+        $style: list.nth($material-icon-styles, $styleIndex);
+
+        @for $nameIndex from 1 through length($material-icon-names) {
+            $name: list.nth($material-icon-names, $nameIndex);
+
+            .Icon-#{$style}-#{$name} {
+                background: url('~@material-design-icons/svg/#{$style}/#{$name}.svg');
+                font-size: 100%;
+                vertical-align: middle;
+                text-indent: -9999px;
+                overflow: hidden;
+                background-position: 0 0;
+                background-size: 1em;
+                background-repeat: no-repeat;
+            }
+        }
+    }
+}
+
+@mixin generateCustomIconClasses() {
+    @for $nameIndex from 1 through length($custom-icon-names) {
+      $name: list.nth($custom-icon-names, $nameIndex);
+  
+      .Icon-#{$name} {
+        background: url('#{$custom-icon-path}/#{$name}.svg');
+        font-size: 100%;
+        vertical-align: middle;
+        text-indent: -9999px;
+        overflow: hidden;
+        background-position: 0 0;
+        background-size: 1em;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+  
+
+.Icon {
+    height: 1em;
+    width: 1em;
+    @include icon-color(#000000);
+}

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as AccordionItemVariant } from "./components/Accordion/Accordio
 export { default as Button } from "./components/Button";
 export { default as Hamburger } from "./components/Hamburger";
 export { default as Image } from "./components/Image";
+export { default as Icon } from "./components/Icon";
 export { default as ImageBackground } from "./components/Image/Background";
 export { default as Lottie } from "./components/Lottie";
 export { default as LottieAnimationWithMousePosition } from "./components/Lottie/LottieAnimationWithMousePosition";
@@ -19,6 +20,7 @@ export { default as FormCheckbox } from "./components/Form/Checkbox";
 export { default as FormCheckboxes } from "./components/Form/Checkboxes";
 export { default as FormDate } from "./components/Form/DateField";
 export { default as FormDatePicker } from "./components/Form/DatePicker";
+export { default as FormDatePickerRange } from "./components/Form/DatePickerRange";
 export { default as FormDateSelect } from "./components/Form/DateSelect";
 export { default as FormEmail } from "./components/Form/Email";
 export { default as FormNumber } from "./components/Form/Number";

package/dist/index.js

@@ -112,6 +112,12 @@ Object.defineProperty(exports, "FormDatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "FormDatePickerRange", {
+  enumerable: true,
+  get: function get() {
+    return _DatePickerRange.default;
+  }
+});
 Object.defineProperty(exports, "FormDateSelect", {
   enumerable: true,
   get: function get() {
@@ -184,6 +190,12 @@ Object.defineProperty(exports, "Header", {
     return _Header.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function get() {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function get() {
@@ -479,6 +491,7 @@ var _AccordionItemVariant = _interopRequireDefault(require("./components/Accordi
 var _Button = _interopRequireDefault(require("./components/Button"));
 var _Hamburger = _interopRequireDefault(require("./components/Hamburger"));
 var _Image = _interopRequireDefault(require("./components/Image"));
+var _Icon = _interopRequireDefault(require("./components/Icon"));
 var _Background = _interopRequireDefault(require("./components/Image/Background"));
 var _Lottie = _interopRequireDefault(require("./components/Lottie"));
 var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
@@ -493,6 +506,7 @@ var _Checkbox = _interopRequireDefault(require("./components/Form/Checkbox"));
 var _Checkboxes = _interopRequireDefault(require("./components/Form/Checkboxes"));
 var _DateField = _interopRequireDefault(require("./components/Form/DateField"));
 var _DatePicker = _interopRequireDefault(require("./components/Form/DatePicker"));
+var _DatePickerRange = _interopRequireDefault(require("./components/Form/DatePickerRange"));
 var _DateSelect = _interopRequireDefault(require("./components/Form/DateSelect"));
 var _Email = _interopRequireDefault(require("./components/Form/Email"));
 var _FormikWrapper = _interopRequireWildcard(require("./components/Form/FormikWrapper"));

package/dist/organisms/Text/index.d.ts

@@ -11,6 +11,9 @@ export interface TextProps {
     link?: string;
     linkText?: string;
     target?: string;
+    secondaryLink?: string;
+    secondaryLinkText?: string;
+    secondaryTarget?: string;
     className?: string;
 }
 declare const Text: React.FC<TextProps>;

package/dist/organisms/Text/index.js

@@ -10,6 +10,7 @@ var _reactI18next = require("react-i18next");
 var _reactAnimateHeight = _interopRequireDefault(require("react-animate-height"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TitleWithText = _interopRequireDefault(require("../../components/TitleWithText"));
+var _components = require("../../components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -35,6 +36,10 @@ var Text = function Text(_ref) {
     linkText = _ref.linkText,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_self' : _ref$target,
+    secondaryLink = _ref.secondaryLink,
+    secondaryLinkText = _ref.secondaryLinkText,
+    _ref$secondaryTarget = _ref.secondaryTarget,
+    secondaryTarget = _ref$secondaryTarget === void 0 ? '_self' : _ref$secondaryTarget,
     className = _ref.className;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -67,12 +72,20 @@ var Text = function Text(_ref) {
     onClick: function onClick() {
       return setReadMoreOpened(!readMoreOpened);
     }
-  }, readMoreOpened ? t('organisms.text.read_less') : t('organisms.text.read_more'))), link && /*#__PURE__*/_react.default.createElement("a", {
+  }, readMoreOpened ? t('organisms.text.read_less') : t('organisms.text.read_more'))), (link || secondaryLink) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Text__links"
+  }, link && /*#__PURE__*/_react.default.createElement(_components.Button, {
     className: "Text__link",
     href: link,
     target: target,
     rel: "noreferrer"
-  }, linkText));
+  }, linkText), secondaryLink && /*#__PURE__*/_react.default.createElement(_components.Button, {
+    className: "Text__link__secondary",
+    href: secondaryLink,
+    target: secondaryTarget,
+    inverted: true,
+    rel: "noreferrer"
+  }, secondaryLinkText)));
 };
 var _default = Text;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.7.1",
+  "version": "2.7.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -21,8 +21,6 @@
     "access": "public"
   },
   "scripts": {
-    "stylelint": "stylelint **/*.scss",
-    "stylelint:fix": "stylelint --fix **/*.scss",
     "start": "yarn run storybook",
     "build": "react-scripts build",
     "build:js": "cross-env NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src --out-dir dist --copy-files --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs",
@@ -31,14 +29,19 @@
     "test": "react-scripts test",
     "test:ci": "react-scripts test --collectCoverage --coverageReporters=cobertura --coverageDirectory=\"./__tests__/coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
     "eject": "react-scripts eject",
-    "prepare": "yarn run publish:npm",
+    "prepare": "yarn run publish:npm && husky install",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "yalc-watch": "nodemon -e js,jsx --ignore dist --exec \"yalc publish && yalc push\"",
     "publish:npm": "yarn build:js && yarn build:types && yarn build:cleanup",
     "extract": "sb extract",
     "eslint": "NODE_ENV=development eslint './src/**/*.{js,jsx,ts,tsx}'",
-    "eslint:fix": "NODE_ENV=development eslint --fix './src/**/*.{js,jsx,ts,tsx}'"
+    "eslint:fix": "NODE_ENV=development eslint --fix './src/**/*.{js,jsx,ts,tsx}'",
+    "eslint-staged": "NODE_ENV=development eslint $(git diff --staged --name-only --diff-filter=ACM -- '*.js' '*.jsx' '*.ts' '*.tsx')",
+    "stylelint": "stylelint **/*.scss",
+    "stylelint:fix": "stylelint --fix **/*.scss",
+    "stylelint-staged": "stylelint --allow-empty-input $(git diff --staged --name-only --diff-filter=ACM | grep -E .scss || echo foo)",
+    "commitlint": "commitlint --edit"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
@@ -107,6 +110,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/runtime": "^7.9.6",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@material-design-icons/svg": "^0.14.11",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
@@ -127,6 +133,7 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
+    "husky": "^8.0.3",
     "jest-environment-jsdom": "^29.5.0",
     "jest-junit": "^16.0.0",
     "prop-types": "^15.8.1",
@@ -139,6 +146,9 @@
     "storybook-react-i18next": "^1.1.3",
     "webpack": "^5.85.1"
   },
+  "peerDependencies": {
+    "@material-design-icons/svg": "^0.14.11"
+  },
   "files": [
     "dist"
   ],