@uncinc/uncinc-react-kitchen-sink 2.6.5 → 2.6.7

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style.scss';
+interface Props extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    src: string | string[];
+    onLoad: (e: any) => void;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    aspectRatio?: number | string;
+}
+declare const AdaptivePicture: React.FC<Props>;
+export default AdaptivePicture;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+var _helpers = require("../helpers");
+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; }
+// extend html img props
+
+var AdaptivePicture = function AdaptivePicture(_ref) {
+  var src = _ref.src,
+    _onLoad = _ref.onLoad,
+    alt = _ref.alt,
+    objectFit = _ref.objectFit,
+    _ref$aspectRatio = _ref.aspectRatio,
+    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio;
+  var sourcesAsArray = Array.isArray(src) ? src : [src];
+  var validatedSources = sourcesAsArray.filter(_helpers.isValidImage);
+  var fallbackImage = validatedSources[0];
+  var imageRef = _react.default.useRef(null);
+  var style = {
+    objectFit: objectFit,
+    aspectRatio: aspectRatio
+  };
+  var _React$useState = _react.default.useState('PENDING'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    status = _React$useState2[0],
+    setStatus = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(fallbackImage),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    targetSrc = _React$useState4[0],
+    setTargetSrc = _React$useState4[1];
+  _react.default.useEffect(function () {
+    // @ts-ignore
+    if (global.ssr) return;
+    if (!imageRef.current) return;
+    var image = imageRef.current;
+    // get parent of image element
+    var container = image.parentElement;
+    if (!container) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var widthAfterResize = entries[0].contentRect.width;
+      if (image.width < widthAfterResize) {
+        var newTargetSrc = (0, _helpers.calculateTargetSrc)(image.width, validatedSources, fallbackImage);
+        if (targetSrc !== newTargetSrc) {
+          setTargetSrc(newTargetSrc);
+        }
+      } else {
+        var _newTargetSrc = (0, _helpers.calculateTargetSrc)(widthAfterResize, validatedSources, fallbackImage);
+        if (targetSrc !== _newTargetSrc) {
+          setTargetSrc(_newTargetSrc);
+        }
+      }
+      if (status === 'PENDING') {
+        setStatus('INITIAL_BREAKPOINT_CALCULATED');
+      }
+    });
+    resizeObserver.observe(container);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      resizeObserver.unobserve(container);
+    };
+  }, [fallbackImage, status, targetSrc, validatedSources]);
+  var loadedUrl = (0, _helpers.useImageLoader)(fallbackImage, targetSrc, imageRef);
+  function onErrorFallback(e) {
+    if (e.target.src !== fallbackImage) {
+      e.target.src = fallbackImage;
+    }
+  }
+  var classes = (0, _classnames.default)('AdaptivePicture', {
+    'AdaptivePicture--initiallyLoaded': status === 'INITIAL_LOADED'
+  });
+  if (!validatedSources.length) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("img", {
+    style: style,
+    className: classes,
+    onError: onErrorFallback,
+    onLoad: function onLoad(e) {
+      if (_onLoad) {
+        _onLoad(e);
+      }
+      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && e.target.src === targetSrc) {
+        setStatus('INITIAL_LOADED');
+      }
+    },
+    src: loadedUrl,
+    ref: imageRef,
+    alt: alt
+  });
+};
+var _default = AdaptivePicture;
+exports.default = _default;

package/dist/components/Image/AdaptivePicture/style.scss

@@ -0,0 +1,7 @@
+.AdaptivePicture {
+  width: 100%;
+}
+
+.AdaptivePicture:not(.AdaptivePicture--initiallyLoaded) {
+  filter: blur(1.5rem);
+}

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

@@ -10,6 +10,7 @@ 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 _helpers = require("../helpers");
 var _excluded = ["src", "className", "onLoad", "imageRef", "includeWebP"];
 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); }
@@ -35,21 +36,10 @@ var Picture = function Picture(_ref) {
     alt: alt,
     title: title
   };
-  var getImageExtension = function getImageExtension(url) {
-    var sanitizedUrl = url.replace(/\?.*/, '');
-    return _path.default.extname(sanitizedUrl).toLowerCase();
-  };
   var getMimeType = function getMimeType(url) {
-    var extension = getImageExtension(url);
+    var extension = (0, _helpers.getImageExtension)(url);
     return _extToMimeTypes.default[extension] ? _extToMimeTypes.default[extension] : FALLBACK_MIME_TYPE;
   };
-  var isValidImage = function isValidImage(url) {
-    if (!url) {
-      return false;
-    }
-    var extension = getImageExtension(url);
-    return Object.keys(_extToMimeTypes.default).includes(extension);
-  };
   if (_immutable.default.Iterable.isIterable(_immutable.default.fromJS(src))) {
     // Sources have to be defined in a descending order.
     // We sort them from best to worst quality.
@@ -57,7 +47,7 @@ var Picture = function Picture(_ref) {
       return parseInt(breakpoint);
     }).reverse();
     var sources = sourcesAll.map(function (url) {
-      if (isValidImage(url)) {
+      if ((0, _helpers.isValidImage)(url)) {
         return url;
       }
     }).filter(function (image) {
@@ -105,7 +95,7 @@ var Picture = function Picture(_ref) {
       src: fallback
     })));
   }
-  if (src && isValidImage(src)) {
+  if (src && (0, _helpers.isValidImage)(src)) {
     if (includeWebP) {
       var webpUrl = src.replace(/\.(png|gif|jp(e?)g)/, '.webp');
       return /*#__PURE__*/_react.default.createElement("picture", {

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export declare function getImageExtension(url: string): string;
+/**
+ * Check if the image that belongs to an url is a valid image.
+ *
+ * @param {string} url
+ */
+export declare function isValidImage(url: string): boolean;
+export declare function useImageLoader(initialSrc: string, targetSrc: string, imageRef: RefObject<HTMLImageElement>): string;
+export declare function calculateTargetSrc(referenceWidth: number, sources: string[], fallbackImage: string): string;

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

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateTargetSrc = calculateTargetSrc;
+exports.getImageExtension = getImageExtension;
+exports.isValidImage = isValidImage;
+exports.useImageLoader = useImageLoader;
+var _path = _interopRequireDefault(require("path"));
+var _react = require("react");
+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 breakpoints = [0, 256, 512, 1024, 2048];
+var mimeTypes = {
+  '.gif': 'image/gif',
+  '.png': 'image/png',
+  '.jpe': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.jpg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.svg': 'image/svg+xml'
+};
+function getImageExtension(url) {
+  var sanitizedUrl = url.replace(/\?.*/, '');
+  return _path.default.extname(sanitizedUrl).toLowerCase();
+}
+
+/**
+ * Check if the image that belongs to an url is a valid image.
+ *
+ * @param {string} url
+ */
+function isValidImage(url) {
+  if (!url) {
+    return false;
+  }
+  var extension = getImageExtension(url);
+  return Object.keys(mimeTypes).includes(extension);
+}
+function useImageLoader(initialSrc, targetSrc, imageRef) {
+  var _useState = (0, _react.useState)(initialSrc),
+    _useState2 = _slicedToArray(_useState, 2),
+    src = _useState2[0],
+    setSrc = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isInViewport = _useState4[0],
+    setIsInViewport = _useState4[1];
+  (0, _react.useEffect)(function () {
+    // @ts-ignore
+    if (global.ssr) return;
+    if (!imageRef.current) return;
+    var image = imageRef.current;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      if (entry.intersectionRatio > 0) {
+        setIsInViewport(true);
+      } else {
+        setIsInViewport(false);
+      }
+    }, {
+      root: null,
+      // 10% of the image must be visible to trigger the callback
+      // note that an edge case may occur if the image is so large
+      // that even 10% of it exceeds the viewport's height
+      threshold: 0.1
+    });
+    observer.observe(image);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      observer.unobserve(image);
+    };
+  }, [imageRef, isInViewport, setIsInViewport]);
+  (0, _react.useEffect)(function () {
+    if (initialSrc === targetSrc) return;
+    if (!isInViewport) return;
+    var img = new Image();
+    img.onload = function () {
+      return setSrc(targetSrc);
+    };
+    img.src = targetSrc;
+  }, [targetSrc, initialSrc, isInViewport]);
+  return src;
+}
+function calculateTargetSrc(referenceWidth, sources, fallbackImage) {
+  var breakpoint = breakpoints.find(function (bp) {
+    return bp >= referenceWidth;
+  }) || breakpoints[breakpoints.length - 1];
+
+  // get the index of breakpoint
+  var index = breakpoints.indexOf(breakpoint);
+  return findClosestIndex(sources, index, fallbackImage);
+}
+
+/**
+ * Find the item in an array that is closest to the specified index.
+ * If the item at the index is not defined, the function will search for
+ * the closest item higher than the index, and if not found, it will
+ * search for the closest item lower than the index. If no item is found,
+ * the fallback value will be returned.
+ */
+function findClosestIndex(arr, targetIndex, fallback) {
+  if (arr.length === 0) return fallback;
+  if (arr[targetIndex] !== undefined) return arr[targetIndex];
+  var upperIndex = targetIndex + 1;
+  var lowerIndex = targetIndex - 1;
+  while (upperIndex < arr.length) {
+    if (arr[upperIndex] !== undefined) return arr[upperIndex];
+    upperIndex += 1;
+  }
+  while (lowerIndex >= 0) {
+    if (arr[lowerIndex] !== undefined) return arr[lowerIndex];
+    lowerIndex -= 1;
+  }
+  return fallback;
+}

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

@@ -5,10 +5,20 @@ declare namespace Image {
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;
         alt: PropTypes.Requireable<string>;
         src: PropTypes.Validator<{}>;
+        dimensions: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+            width: PropTypes.Requireable<number>;
+            height: PropTypes.Requireable<number>;
+            aspectRatio: PropTypes.Requireable<number>;
+        }> | (PropTypes.InferProps<{
+            width: PropTypes.Requireable<number>;
+            height: PropTypes.Requireable<number>;
+            aspectRatio: PropTypes.Requireable<number>;
+        }> | null | undefined)[] | null | undefined>>;
         lazyload: PropTypes.Requireable<boolean>;
     };
     namespace defaultProps {
         let lazyload: boolean;
+        let dimensions: {};
     }
 }
 import React from 'react';

package/dist/components/Image/index.js

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 var _LazyLoadWrapper = _interopRequireDefault(require("./LazyLoadWrapper"));
 var _Picture = _interopRequireDefault(require("./Picture"));
+var _AdaptivePicture = _interopRequireDefault(require("./AdaptivePicture"));
 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; }
@@ -18,19 +19,27 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 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;
+  var PictureComponent = Array.isArray(props.src) ? _AdaptivePicture.default : _Picture.default;
   if (lazyload) {
     return /*#__PURE__*/_react.default.createElement(_LazyLoadWrapper.default, {
       lazyload: lazyload
-    }, /*#__PURE__*/_react.default.createElement(_Picture.default, props));
+    }, /*#__PURE__*/_react.default.createElement(PictureComponent, props));
   }
-  return /*#__PURE__*/_react.default.createElement(_Picture.default, props);
+  return /*#__PURE__*/_react.default.createElement(PictureComponent, props);
 };
+var dimensionsPropType = _propTypes.default.shape({
+  width: _propTypes.default.number,
+  height: _propTypes.default.number,
+  aspectRatio: _propTypes.default.number
+});
 Image.propTypes = _objectSpread({
-  src: _propTypes.default.oneOfType([_propTypes.default.string, _reactImmutableProptypes.default.map]).isRequired,
+  src: _propTypes.default.oneOfType([_propTypes.default.string, _reactImmutableProptypes.default.map, _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
+  dimensions: _propTypes.default.oneOfType([dimensionsPropType, _propTypes.default.arrayOf(dimensionsPropType)]),
   lazyload: _propTypes.default.bool
 }, _Picture.default.propTypes);
 Image.defaultProps = {
-  lazyload: true
+  lazyload: true,
+  dimensions: {}
 };
 var _default = Image;
 exports.default = _default;

package/dist/components/Layout/Container/style.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import '../../../styles/assets/mixins';
 @import '../../../styles/assets/grid';
 
@@ -20,7 +21,20 @@
 .container--fluid {
   // Enlarge side paddings to equal 1 gutter size.
   @include make-container;
-  @include make-container-max-widths;
+  
+  max-width: map.get($container-max-widths, sm);
+  @media #{$tablet} {
+    max-width: map.get($container-max-widths, md);
+  }
+  @media #{$normal} {
+    max-width: map.get($container-max-widths, lg);
+  }
+  @media #{$wide} {
+    max-width: map.get($container-max-widths, xl);
+  }
+  @media #{$huge} {
+    max-width: map.get($container-max-widths, xxl);
+  }
 }
 
 .container--fluid {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './style.scss';
 export interface TableRenderProps {
-    html: string;
+    element: React.ReactElement;
     mobileCards?: boolean;
     mobileCardsBreakpoint?: number;
     transposeOnMobile?: boolean;

package/dist/components/TableRender/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactHtmlParser = _interopRequireDefault(require("react-html-parser"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _useWindowDimensions2 = _interopRequireDefault(require("../../hooks/useWindowDimensions"));
 var _constants = require("../../config/constants");
@@ -15,7 +14,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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 TableRender = function TableRender(_ref) {
-  var html = _ref.html,
+  var element = _ref.element,
     _ref$mobileCards = _ref.mobileCards,
     mobileCards = _ref$mobileCards === void 0 ? false : _ref$mobileCards,
     _ref$mobileCardsBreak = _ref.mobileCardsBreakpoint,
@@ -26,7 +25,6 @@ var TableRender = function TableRender(_ref) {
     width = _useWindowDimensions.width;
   var isMobile = width < mobileCardsBreakpoint;
   var tableRef = (0, _react.useRef)(null);
-  var table = (0, _reactHtmlParser.default)(html);
   (0, _react.useEffect)(function () {
     if (isMobile && mobileCards && tableRef.current) {
       var headerArr = [];
@@ -60,7 +58,7 @@ var TableRender = function TableRender(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: tableRef,
     className: tableClassNames
-  }, table);
+  }, element);
 };
 var _default = TableRender;
 exports.default = _default;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './style.scss';
+export interface TagProps {
+    name: string;
+    removable?: boolean;
+    stretchClickableArea?: boolean;
+    deleteButtonAriaLabel?: string;
+    className?: string;
+    onDelete?: (name: string) => void;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/dist/components/Tag/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 _reactI18next = require("react-i18next");
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Tag = function Tag(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var name = props.name,
+    removable = props.removable,
+    stretchClickableArea = props.stretchClickableArea,
+    deleteButtonAriaLabel = props.deleteButtonAriaLabel,
+    className = props.className,
+    onDelete = props.onDelete;
+  var classNames = (0, _classnames.default)('Tag', {
+    'Tag--stretch-clickable-area': stretchClickableArea
+  }, className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Tag__name"
+  }, name), removable && onDelete && /*#__PURE__*/_react.default.createElement("button", {
+    className: "Tag__delete-button icon-after icon-cross icon-variant-1",
+    type: "button",
+    "aria-label": deleteButtonAriaLabel || t('atoms.tag.delete'),
+    onClick: function onClick() {
+      return onDelete(name);
+    }
+  }));
+};
+Tag.defaultProps = {
+  removable: true,
+  stretchClickableArea: true,
+  onDelete: function onDelete() {}
+};
+var _default = Tag;
+exports.default = _default;

package/dist/components/Tag/style.scss

@@ -0,0 +1,27 @@
+@import '../../styles/assets/mixins';
+
+.Tag {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center; 
+
+  &__delete-button {
+    // Expanding the clickable area by adding padding,
+    // and compensating this, using negative margin.
+    margin: -10px;
+    border: 0;
+    padding: 10px;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  &--stretch-clickable-area .Tag__delete-button {
+    margin: 0;
+    padding: 0;
+    
+    &:before {
+      @include block-content;
+    }
+  }
+}

package/dist/config/i18next/locales/en.json

@@ -26,6 +26,11 @@
   "searchkit": {
     "reset_search": "Reconfigure search"
   },
+  "atoms": {
+    "tag": {
+      "delete": "Delete tag"
+    }
+  },
   "organisms": {
     "media_player": {
       "not_supported_message": "The current file cannot be played."

package/dist/config/i18next/locales/nl.json

@@ -26,6 +26,11 @@
   "searchkit": {
     "reset_search": "Zoeken opnieuw instellen"
   },
+  "atoms": {
+    "tag": {
+      "delete": "Verwijder tag"
+    }
+  },
   "organisms": {
     "media_player": {
       "not_supported_message": "Het huidige bestand kan niet worden afgespeeld."

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as Image } from "./components/Image";
 export { default as ImageBackground } from "./components/Image/Background";
 export { default as Lottie } from "./components/Lottie";
 export { default as LottieAnimationWithMousePosition } from "./components/Lottie/LottieAnimationWithMousePosition";
+export { default as Tag } from "./components/Tag";
 export { default as WysiwygField } from "./components/WysiwygField";
 export { default as CallToAction } from "./components/CallToAction";
 export { default as ChipFacet } from "./components/SearchKit/Facets/ChipFacet";

package/dist/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "TableRender", {
     return _TableRender.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function get() {
@@ -469,6 +475,7 @@ var _Image = _interopRequireDefault(require("./components/Image"));
 var _Background = _interopRequireDefault(require("./components/Image/Background"));
 var _Lottie = _interopRequireDefault(require("./components/Lottie"));
 var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
+var _Tag = _interopRequireDefault(require("./components/Tag"));
 var _WysiwygField = _interopRequireDefault(require("./components/WysiwygField"));
 var _CallToAction = _interopRequireDefault(require("./components/CallToAction"));
 var _ChipFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ChipFacet"));

package/dist/styles/assets/_mixins.scss

@@ -103,3 +103,12 @@
     line-height: $desktop--line-height--body--large;
   }
 }
+
+// Other mixins
+
+// Useful for stretching the clickable area of links or buttons around its parent block.
+@mixin block-content {
+  content: '';
+  position: absolute;
+  inset: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",

package/dist/helpers/index.d.ts

@@ -1,14 +0,0 @@
-/**
- * Recursively converts an element object to an HTML string.
- *
- * @param {Object} element - The element object representing an HTML element.
- * @param {string} element.name - The HTML tag name.
- * @param {Object} [element.attribs] - Attributes associated with the HTML element.
- * @param {Array|Object} [element.children] - Child elements or strings.
- * @returns {string} The HTML string representation of the element and its children.
- */
-export function elementToHtml(element: {
-    name: string;
-    attribs?: Object | undefined;
-    children?: Object | any[] | undefined;
-}): string;

package/dist/helpers/index.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.elementToHtml = elementToHtml;
-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); }
-/**
- * Recursively converts an element object to an HTML string.
- *
- * @param {Object} element - The element object representing an HTML element.
- * @param {string} element.name - The HTML tag name.
- * @param {Object} [element.attribs] - Attributes associated with the HTML element.
- * @param {Array|Object} [element.children] - Child elements or strings.
- * @returns {string} The HTML string representation of the element and its children.
- */
-function elementToHtml(element) {
-  var attributes = Object.keys(element.attribs || {}).map(function (key) {
-    return "".concat(key, "=\"").concat(element.attribs[key], "\"");
-  }).join(' ');
-  var childrenHtml = (element.children || []).map(function (child) {
-    if (typeof child.data === 'string') {
-      return child.data;
-    } else if (_typeof(child) === 'object') {
-      return elementToHtml(child);
-    } else {
-      return '';
-    }
-  }).join('');
-  return "<".concat(element.name, " ").concat(attributes, ">").concat(childrenHtml, "</").concat(element.name, ">");
-}