@uncinc/uncinc-react-kitchen-sink 2.5.4 → 2.6.0

package/dist/Context/KitchenSinkComponentMapperContext.d.ts

@@ -0,0 +1,3 @@
+export default KitchenSinkComponentMapperContext;
+declare const KitchenSinkComponentMapperContext: React.Context<any>;
+import React from 'react';

package/dist/Context/withMapping.d.ts

@@ -0,0 +1,3 @@
+export default withMapping;
+declare function withMapping(BaseComponent: any): (props: any) => React.JSX.Element;
+import React from 'react';

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

@@ -0,0 +1,41 @@
+export function Button({ href, dispatch, className, children, primary, inverted, language, enableLoader, loading, htmlType, ...props }: {
+    [x: string]: any;
+    href: any;
+    dispatch: any;
+    className: any;
+    children: any;
+    primary: any;
+    inverted: any;
+    language: any;
+    enableLoader: any;
+    loading: any;
+    htmlType: any;
+}): React.JSX.Element;
+export namespace Button {
+    namespace defaultProps {
+        let primary: boolean;
+        let inverted: boolean;
+        let disabled: boolean;
+        let href: any;
+        let enableLoader: boolean;
+        let htmlType: string;
+    }
+    namespace propTypes {
+        let href_1: PropTypes.Requireable<string>;
+        export { href_1 as href };
+        let primary_1: PropTypes.Requireable<boolean>;
+        export { primary_1 as primary };
+        let disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        let inverted_1: PropTypes.Requireable<boolean>;
+        export { inverted_1 as inverted };
+        let enableLoader_1: PropTypes.Requireable<boolean>;
+        export { enableLoader_1 as enableLoader };
+        let htmlType_1: PropTypes.Requireable<string>;
+        export { htmlType_1 as htmlType };
+    }
+}
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;
+import React from 'react';
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ButtonProps {
+    text: string;
+    link: string;
+}
+export interface CallToActionProps {
+    title: string;
+    text?: string;
+    button: ButtonProps;
+    buttonSecondary?: ButtonProps;
+    iconClasses?: string;
+    className?: string;
+}
+declare const CallToAction: React.FC<CallToActionProps>;
+export default CallToAction;

package/dist/components/CallToAction/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _WysiwygField = _interopRequireDefault(require("../WysiwygField"));
+var _Button = _interopRequireDefault(require("../Button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var CallToAction = function CallToAction(_ref) {
+  var title = _ref.title,
+    text = _ref.text,
+    button = _ref.button,
+    buttonSecondary = _ref.buttonSecondary,
+    _ref$iconClasses = _ref.iconClasses,
+    iconClasses = _ref$iconClasses === void 0 ? 'icon-arrow icon-after icon-variant-1' : _ref$iconClasses,
+    className = _ref.className;
+  var classes = (0, _classnames.default)('CallToAction', className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "CallToAction__title"
+  }, title), text && /*#__PURE__*/_react.default.createElement(_WysiwygField.default, {
+    className: "CallToAction__text",
+    property: "schema:text",
+    customElementHandler: function customElementHandler() {},
+    html: text
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "CallToAction__buttonWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    primary: true,
+    className: "CallToAction__button ".concat(iconClasses),
+    href: button.link
+  }, button.text), buttonSecondary && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    inverted: true,
+    className: "CallToAction__button ".concat(iconClasses),
+    href: buttonSecondary.link
+  }, buttonSecondary.text)));
+};
+var _default = CallToAction;
+exports.default = _default;

package/dist/components/CallToAction/stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.scss';
+declare const _default: {
+    component: React.FC<import(".").CallToActionProps>;
+    title: string;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/dist/components/CallToAction/stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+require("./style.scss");
+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); }
+var _default = {
+  component: _.default,
+  title: 'Molecules/CallToAction'
+};
+exports.default = _default;
+var Default = function Default(args) {
+  var title = "Call To Action";
+  var html = "\n    <p>This is a <code>WysiwygField</code> component so you can put whatever you like in here.</p>\n    <p>Lorem ipsum dolor sit amet, <abbr title=\"Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.\">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>\n  ";
+  var buttonText = "Button";
+  var buttonTextSecondary = "Button 2";
+  var buttonLink = "https://www.uncinc.nl";
+  var buttonLinkSecondary = "https://www.uncinc.nl/werk";
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    title: title,
+    text: html,
+    button: {
+      text: buttonText,
+      link: buttonLink
+    },
+    buttonSecondary: {
+      text: buttonTextSecondary,
+      link: buttonLinkSecondary
+    }
+  }, args));
+};
+exports.Default = Default;

package/dist/components/CallToAction/style.scss

@@ -0,0 +1,25 @@
+@import '../../styles/assets/variables';
+
+.CallToAction {
+  text-align: center;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 5px;
+  margin: 2rem;
+  padding: 2rem 3rem;
+
+  &--primary {
+    background-color: #000;
+  }
+
+  &--inverted {
+    background-color: #555;
+  }
+
+  &:hover {
+    background-color: #999;
+  }
+}

package/dist/components/Cookie/index.js

@@ -28,6 +28,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
+var STATUS_DECLINED = '0';
+var STATUS_NOT_YET_ANSWERED = '1';
+var STATUS_ACCEPTED = '2';
 var CookieCompliancePopup = function CookieCompliancePopup(props) {
   var className = props.className,
     children = props.children,
@@ -43,34 +46,27 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     defaultValues = props.defaultValues,
     manualHeader = props.manualHeader,
     manualButtonClassname = props.manualButtonClassname;
-
   // This is an internal state to check whether we should show the options.
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     manualChoiceVisible = _useState2[0],
     setManualChoiceVisible = _useState2[1];
-
-  // This is an extra hidden variable to internally check if we should show the notification.
-  // This also allows us to add an animation when the user accepts.
-  var _useState3 = (0, _react.useState)(false),
+  // This is an internal state to check whether the user has answered in the current session.
+  // It is either null (because we don't know if it was already in the cookies) or true
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    hiddenInternal = _useState4[0],
-    setHiddenInternal = _useState4[1];
+    answeredInCurrentSession = _useState4[0],
+    setAnsweredInCurrentSession = _useState4[1];
 
   // Cookie stating if the cookie has already been accepted. Uses the following states:
-  // 0: Declined (Not yet used).
-  // 1: Not yet agreed/disagreed (Not yet used).
-  // 2: Accepted.
+  // null: unknown
+  // STATUS DECLINED (0 as cookie value)
+  // STATUS NOT YET ANSWERED (1 as cookie value)
+  // STATUS ACCEPTED (2 as cookie value)
   var _useCookie = (0, _reactUseCookie.default)('cookie-agreed', null),
     _useCookie2 = _slicedToArray(_useCookie, 2),
     didConsent = _useCookie2[0],
     setDidConsent = _useCookie2[1];
-
-  // Cookie stating whether we should render the notification.
-  var _useState5 = (0, _react.useState)(didConsent !== null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hidden = _useState6[0],
-    setHidden = _useState6[1];
   var categories = cookieLevels.map(function (item) {
     return item.value;
   });
@@ -81,26 +77,20 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
   }, {});
 
   // Default choices for select, this way we can locally manage the state of the form.
-  var _useState7 = (0, _react.useState)(defaultState),
-    _useState8 = _slicedToArray(_useState7, 2),
-    choicesSelected = _useState8[0],
-    setChoicesSelected = _useState8[1];
-  (0, _react.useEffect)(function () {
-    if (hidden) {
-      setHiddenInternal(true);
-    }
-    // We don't want to add hidden to the dependency list, as this would -
-    // unrender the notification immediately on save.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Check if didConsent has been changed.
-  // If so, set the hidden cookie for page reloads.
+  var _useState5 = (0, _react.useState)(defaultState),
+    _useState6 = _slicedToArray(_useState5, 2),
+    choicesSelected = _useState6[0],
+    setChoicesSelected = _useState6[1];
   (0, _react.useEffect)(function () {
-    if (didConsent !== null) {
-      setHidden(true);
+    // We now know the value of the cookie. If there is no cookie set,
+    // immediately set the didConsent state to STATUS_NOT_YET_ANSWERED.
+    if (didConsent === null) {
+      setDidConsent(STATUS_NOT_YET_ANSWERED, cookieOptions);
     }
-  }, [didConsent, cookieOptions, setHidden]);
+  }, [didConsent, cookieOptions, setDidConsent]);
+  var isLoading = didConsent === null;
+  var isPrompting = didConsent === STATUS_NOT_YET_ANSWERED;
+  var isAnswered = didConsent === STATUS_ACCEPTED || didConsent === STATUS_DECLINED;
 
   // This function expands the notification to show the options.
   var displayConsentChoices = function displayConsentChoices(e) {
@@ -108,7 +98,7 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     setManualChoiceVisible(true);
   };
 
-  // This function sets cookie-agreed to 2 ( accepted state ),
+  // This function sets cookie-agreed to STATUS_ACCEPTED,
   // and also sets the accepted categories in CookieAgreedCategories.
   var _onAgree = function _onAgree(choices) {
     var selectedChoices = Object.keys(choices).filter(function (key) {
@@ -122,7 +112,8 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
         });
       }
     });
-    setDidConsent('2', cookieOptions);
+    setDidConsent(STATUS_ACCEPTED, cookieOptions);
+    setAnsweredInCurrentSession(true);
 
     // I used js-cookie for this insead of react-use-cookie because the encoding is not what we want
     // for arrays in react-use-cookie. This shouldn't be an issue, as we don't want to keep track of
@@ -149,7 +140,8 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     onAgree(choices);
   };
   var _onDisagree = function _onDisagree() {
-    setDidConsent('0', cookieOptions);
+    setDidConsent(STATUS_DECLINED, cookieOptions);
+    setAnsweredInCurrentSession(true);
     _jsCookie.default.set('cookie-agreed-categories', JSON.stringify([]), {
       expires: 365,
       domain: cookieDomain
@@ -196,11 +188,18 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     setChoicesSelected(_objectSpread(_objectSpread({}, choicesSelected), {}, _defineProperty({}, value, checked)));
   };
   var classes = (0, _classnames.default)('Cookie', className, {
-    'Cookie--hidden': didConsent !== null
+    'Cookie--prompting': isPrompting,
+    'Cookie--loading': isLoading,
+    'Cookie--answered': isAnswered,
+    // answering refers to the fact that the user has answered in the current session.
+    'Cookie--answering': answeredInCurrentSession,
+    'Cookie--hidden': isAnswered
   });
 
-  // If hiddenInternal is true, we do not render the notification.
-  if (hiddenInternal === true) {
+  // if it is answered in the current session, we still render the cookie but with the --hidden modifier,
+  // allowing consumers to apply an animation if desired. In other words, don't render only if a user has
+  // answered in a previous session.
+  if (isAnswered && !answeredInCurrentSession) {
     return null;
   }
 

package/dist/components/Cookie/style.scss

@@ -1,13 +1,21 @@
 @import '../../styles/assets/mixins';
 @import '../../styles/assets/variables';
 
+@keyframes slide {
+  0% {
+    transform: translateX(-50%) translateY(110vh);
+  }
+  100% {
+    transform: translateX(-50%) translateY(0vh);
+  }
+}
+
 .Cookie {
   width: 100%;
   position: fixed;
   left: 50%;
   max-height: 100%;
   bottom: 0;
-  transform: translateX(-50%);
   z-index: 10000;
 
   &--hidden {
@@ -20,6 +28,15 @@
     }
   }
 
+  &--prompting {
+    transform: translateX(-50%) translateY(0vh);
+    animation: slide 1s forwards;
+  }
+
+  &--loading {
+    transform: translateX(-50%) translateY(110vh);
+  }
+
   &__content {
     max-height: 100vh;
     overflow-y: auto;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface DownloadProps {
+    source: string;
+    title: string;
+    description?: string;
+    filesize?: number;
+    filename?: string;
+    mime: string;
+    target?: string;
+    className?: string;
+}
+declare const Download: React.FC<DownloadProps>;
+export default Download;

package/dist/components/Download/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _prettyBytes = _interopRequireDefault(require("pretty-bytes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+var Download = function Download(_ref) {
+  var source = _ref.source,
+    title = _ref.title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    _ref$filesize = _ref.filesize,
+    filesize = _ref$filesize === void 0 ? null : _ref$filesize,
+    _ref$filename = _ref.filename,
+    filename = _ref$filename === void 0 ? '' : _ref$filename,
+    mime = _ref.mime,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    className = _ref.className;
+  var classes = (0, _classnames.default)('Download', className);
+  var _mime$split = mime.split('/'),
+    _mime$split2 = _slicedToArray(_mime$split, 2),
+    mimeType = _mime$split2[0],
+    mimeSubType = _mime$split2[1];
+  var extension = filename.match(/\w+$/);
+  return /*#__PURE__*/_react.default.createElement("a", {
+    className: classes,
+    target: target,
+    href: source,
+    rel: "noreferrer"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Download__icon icon icon-dowload icon-".concat(mimeType, " icon-").concat(mimeSubType)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Download__content"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Download__title label"
+  }, title), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Download__description"
+  }, description)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Download__attributes"
+  }, extension && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Download__extension"
+  }, extension[0].toUpperCase()), filesize && /*#__PURE__*/_react.default.createElement("span", {
+    className: "Download__filesize"
+  }, "(", (0, _prettyBytes.default)(filesize), ")")));
+};
+var _default = Download;
+exports.default = _default;

package/dist/components/Download/stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './stories.scss';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").DownloadProps>;
+};
+export default _default;
+export declare const Default: (args: any) => React.JSX.Element;

package/dist/components/Download/stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+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); }
+var _default = {
+  title: 'Molecules/Download',
+  component: _.default
+};
+exports.default = _default;
+var Default = function Default(args) {
+  var source = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    source: source,
+    title: "Download",
+    description: "Description",
+    filesize: 12594348,
+    filename: "dummy.pdf",
+    mime: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+  }, args)), /*#__PURE__*/_react.default.createElement("p", null, "Borders have been added to show the nesting of elements. The orange colored box is an ", /*#__PURE__*/_react.default.createElement("code", null, "a-tag"), " which will contain the link.", /*#__PURE__*/_react.default.createElement("br", null), "The icon has been provided withclasses\xA0", /*#__PURE__*/_react.default.createElement("code", null, "icon-mimeType"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "icon-mimeSubType"), ".", /*#__PURE__*/_react.default.createElement("br", null), "Based on that, you can overwrite the default ", /*#__PURE__*/_react.default.createElement("code", null, "icon-download"), " icon."));
+};
+exports.Default = Default;

package/dist/components/Download/stories.scss

@@ -0,0 +1,67 @@
+@import '../../styles/assets/variables';
+
+.Download {
+  display: flex;
+  align-items: center;
+
+  max-width: 80rem;
+  margin-bottom: 3rem;
+  padding: 1rem;
+  padding: 1rem;
+
+  text-decoration: none;
+
+  background-color: $color--grey--lighter;
+  border: 2px solid $color--grey;
+  border-radius: 1rem;
+  border-radius: 1rem;
+
+
+  &:hover {
+    color: $color--white;
+    background-color: $color--primary;
+    border-radius: 1rem;
+
+    div {
+      color: $color--white;
+    }
+
+    &__icon {
+      background-position-y: -1em;
+    }
+  }
+
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    margin: 3rem 3rem 3rem 2rem;
+    font-size: 3rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 1rem;
+
+    margin-right: 1rem;
+    padding: 1rem;
+
+    border: 2px solid $color--grey;
+    border-radius: 1rem;
+  }
+
+  &__title,
+  &__description,
+  &__attributes {
+    margin: 0;
+    padding: 1rem;
+    border: 2px solid $color--grey;
+    border-radius: 1rem;
+  }
+
+  &__extension {
+    margin-right: 1rem;
+    text-decoration: none;
+  }
+}

package/dist/components/Image/LazyLoadWrapper/index.d.ts

@@ -0,0 +1,10 @@
+export default LazyLoadWrapper;
+declare class LazyLoadWrapper extends React.Component<any, any, any> {
+    constructor(props: any);
+    state: {
+        loaded: boolean;
+        error: boolean;
+    };
+    render(): any;
+}
+import React from 'react';

package/dist/components/Image/Picture/index.d.ts

@@ -0,0 +1,23 @@
+export default Picture;
+declare function Picture({ src, className, onLoad, imageRef, includeWebP, ...props }: {
+    [x: string]: any;
+    src: any;
+    className: any;
+    onLoad: any;
+    imageRef: any;
+    includeWebP: any;
+}): React.JSX.Element;
+declare namespace Picture {
+    namespace propTypes {
+        let onLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        let alt: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        export function onLoad_1(): void;
+        export { onLoad_1 as onLoad };
+        let alt_1: any;
+        export { alt_1 as alt };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Image/Picture/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _immutable = _interopRequireDefault(require("immutable"));
 var _path = _interopRequireDefault(require("path"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _extToMimeTypes = _interopRequireDefault(require("./data/ext-to-mime-types.json"));
 require("./style.scss");
 var _excluded = ["src", "className", "onLoad", "imageRef", "includeWebP"];
@@ -132,8 +133,13 @@ var Picture = function Picture(_ref) {
   }
   return null;
 };
+Picture.propTypes = {
+  onLoad: _propTypes.default.func,
+  alt: _propTypes.default.string
+};
 Picture.defaultProps = {
-  onLoad: function onLoad() {}
+  onLoad: function onLoad() {},
+  alt: null
 };
 var _default = Picture;
 exports.default = _default;

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

@@ -0,0 +1,15 @@
+export default Image;
+declare function Image(props: any): React.JSX.Element;
+declare namespace Image {
+    let propTypes: {
+        onLoad: PropTypes.Requireable<(...args: any[]) => any>;
+        alt: PropTypes.Requireable<string>;
+        src: PropTypes.Validator<{}>;
+        lazyload: PropTypes.Requireable<boolean>;
+    };
+    namespace defaultProps {
+        let lazyload: boolean;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/Image/index.js

@@ -10,6 +10,12 @@ var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-p
 var _LazyLoadWrapper = _interopRequireDefault(require("./LazyLoadWrapper"));
 var _Picture = _interopRequireDefault(require("./Picture"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var Image = function Image(props) {
   var lazyload = props.lazyload;
   if (lazyload) {
@@ -19,10 +25,10 @@ var Image = function Image(props) {
   }
   return /*#__PURE__*/_react.default.createElement(_Picture.default, props);
 };
-Image.propTypes = {
+Image.propTypes = _objectSpread({
   src: _propTypes.default.oneOfType([_propTypes.default.string, _reactImmutableProptypes.default.map]).isRequired,
   lazyload: _propTypes.default.bool
-};
+}, _Picture.default.propTypes);
 Image.defaultProps = {
   lazyload: true
 };