colibri-ui 0.7.9 → 0.7.10

package/Image/index.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var generateUniqID = require('../helpers/generateUniqID.js');
+var styles = require('./styles.js');
+
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.loading,
+    loading = _b === void 0 ? "lazy" : _b,
+    src = _a.src,
+    fallbackSrc = _a.fallbackSrc,
+    onClick = _a.onClick,
+    srcSet = _a.srcSet,
+    sizes = _a.sizes,
+    ariaLabel = _a.ariaLabel,
+    _c = _a.sources,
+    sources = _c === void 0 ? [] : _c,
+    testId = _a["data-testid"],
+    _d = _a.alt,
+    alt = _d === void 0 ? src : _d,
+    width = _a.width,
+    height = _a.height,
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
+  var _e = react.useState(false),
+    isFailed = _e[0],
+    setFailed = _e[1];
+  var imageSrc = src || emptyImage;
+  var imageSrcSet = srcSet;
+  var sizeAttrs = {};
+  if (width !== undefined) {
+    sizeAttrs.width = width;
+  }
+  if (height !== undefined) {
+    sizeAttrs.height = height;
+  }
+  var handleError = react.useCallback(function () {
+    setFailed(true);
+  }, []);
+  return jsxRuntime.jsxs(styles.BasePicture, {
+    "data-testid": testId,
+    ref: ref,
+    children: [!!sources.length && sources.map(function (source, index) {
+      return jsxRuntime.jsx("source", tslib.__assign({}, source), generateUniqID.default(index));
+    }), jsxRuntime.jsx("img", tslib.__assign({
+      alt: alt,
+      style: sizeAttrs,
+      className: className,
+      loading: loading,
+      "aria-hidden": ariaLabel ? "false" : "true",
+      "aria-label": ariaLabel,
+      onClick: onClick,
+      onError: handleError,
+      src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
+      srcSet: imageSrcSet,
+      sizes: sizes
+    }, props))]
+  });
+});
+
+exports.default = Image;

package/Image/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Image/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Image/styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var BasePicture = /*#__PURE__*/_styled__default.default("picture", process.env.NODE_ENV === "production" ? {
+  target: "e17t3ew60"
+} : {
+  target: "e17t3ew60",
+  label: "BasePicture"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")])));
+var templateObject_1;
+
+exports.BasePicture = BasePicture;

package/components/Image/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ImageProps } from "./index.props";
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

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

@@ -0,0 +1,9 @@
+import type React from "react";
+export interface BaseImageContainerProps {
+    fallbackSrc?: string;
+    ariaLabel?: string;
+    sources?: React.SourceHTMLAttributes<HTMLSourceElement>[];
+    "data-testid"?: string;
+}
+export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+}

package/components/Image/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BasePicture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/{esm → components}/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Grid } from "./Grid";
+export { default as Image } from "./Image";
 export { default as Input } from "./Input";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";

package/esm/Image/index.js

@@ -0,0 +1,62 @@
+import { __rest, __assign } from 'tslib';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, useCallback } from 'react';
+import generateUniqID from '../helpers/generateUniqID.js';
+import { BasePicture } from './styles.js';
+
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+var Image = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.loading,
+    loading = _b === void 0 ? "lazy" : _b,
+    src = _a.src,
+    fallbackSrc = _a.fallbackSrc,
+    onClick = _a.onClick,
+    srcSet = _a.srcSet,
+    sizes = _a.sizes,
+    ariaLabel = _a.ariaLabel,
+    _c = _a.sources,
+    sources = _c === void 0 ? [] : _c,
+    testId = _a["data-testid"],
+    _d = _a.alt,
+    alt = _d === void 0 ? src : _d,
+    width = _a.width,
+    height = _a.height,
+    props = __rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
+  var _e = useState(false),
+    isFailed = _e[0],
+    setFailed = _e[1];
+  var imageSrc = src || emptyImage;
+  var imageSrcSet = srcSet;
+  var sizeAttrs = {};
+  if (width !== undefined) {
+    sizeAttrs.width = width;
+  }
+  if (height !== undefined) {
+    sizeAttrs.height = height;
+  }
+  var handleError = useCallback(function () {
+    setFailed(true);
+  }, []);
+  return jsxs(BasePicture, {
+    "data-testid": testId,
+    ref: ref,
+    children: [!!sources.length && sources.map(function (source, index) {
+      return jsx("source", __assign({}, source), generateUniqID(index));
+    }), jsx("img", __assign({
+      alt: alt,
+      style: sizeAttrs,
+      className: className,
+      loading: loading,
+      "aria-hidden": ariaLabel ? "false" : "true",
+      "aria-label": ariaLabel,
+      onClick: onClick,
+      onError: handleError,
+      src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
+      srcSet: imageSrcSet,
+      sizes: sizes
+    }, props))]
+  });
+});
+
+export { Image as default };

package/esm/Image/styles.js

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+import { __makeTemplateObject } from 'tslib';
+
+var BasePicture = /*#__PURE__*/_styled("picture", process.env.NODE_ENV === "production" ? {
+  target: "e17t3ew60"
+} : {
+  target: "e17t3ew60",
+  label: "BasePicture"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")])));
+var templateObject_1;
+
+export { BasePicture };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ImageProps } from "./index.props";
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/esm/components/Image/index.props.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+export interface BaseImageContainerProps {
+    fallbackSrc?: string;
+    ariaLabel?: string;
+    sources?: React.SourceHTMLAttributes<HTMLSourceElement>[];
+    "data-testid"?: string;
+}
+export interface ImageProps extends BaseImageContainerProps, React.ImgHTMLAttributes<HTMLImageElement> {
+}

package/esm/components/Image/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const BasePicture: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/{index.d.ts → esm/components/index.d.ts}

@@ -2,6 +2,7 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Grid } from "./Grid";
+export { default as Image } from "./Image";
 export { default as Input } from "./Input";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";

package/esm/helpers/generateUniqID.d.ts

@@ -0,0 +1,2 @@
+declare const generateUniqID: (index: number) => string;
+export default generateUniqID;

package/esm/helpers/generateUniqID.js

@@ -0,0 +1,6 @@
+var generateUniqID = function generateUniqID(index) {
+  var rand = Math.pow(index + 1, 2) + 77;
+  return "uniq-id-".concat(Math.floor(rand));
+};
+
+export { generateUniqID as default };

package/esm/index.js

@@ -2,6 +2,7 @@ export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';
 export { default as Grid } from './Grid/index.js';
+export { default as Image } from './Image/index.js';
 export { default as Input } from './Input/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';

package/helpers/generateUniqID.d.ts

@@ -0,0 +1,2 @@
+declare const generateUniqID: (index: number) => string;
+export default generateUniqID;

package/helpers/generateUniqID.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var generateUniqID = function generateUniqID(index) {
+  var rand = Math.pow(index + 1, 2) + 77;
+  return "uniq-id-".concat(Math.floor(rand));
+};
+
+exports.default = generateUniqID;

package/index.js

@@ -4,11 +4,12 @@ var index = require('./Button/index.js');
 var index$1 = require('./Checkbox/index.js');
 var index$2 = require('./DotsLoader/index.js');
 var index$3 = require('./Grid/index.js');
-var index$4 = require('./Input/index.js');
-var index$5 = require('./Skeleton/index.js');
-var index$6 = require('./Switch/index.js');
-var index$7 = require('./Theme/index.js');
-var index$8 = require('./Typography/index.js');
+var index$4 = require('./Image/index.js');
+var index$5 = require('./Input/index.js');
+var index$6 = require('./Skeleton/index.js');
+var index$7 = require('./Switch/index.js');
+var index$8 = require('./Theme/index.js');
+var index$9 = require('./Typography/index.js');
 require('./Icons/index.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
@@ -25,13 +26,14 @@ exports.Button = index.default;
 exports.Checkbox = index$1.default;
 exports.DotsLoader = index$2.default;
 exports.Grid = index$3.default;
-exports.Input = index$4.default;
-exports.SkeletonRect = index$5.SkeletonRect;
-exports.SkeletonText = index$5.SkeletonText;
-exports.Switch = index$6.default;
-exports.THEMES = index$7.THEMES;
-exports.ThemeProvider = index$7.ThemeProvider;
-exports.Typography = index$8.default;
+exports.Image = index$4.default;
+exports.Input = index$5.default;
+exports.SkeletonRect = index$6.SkeletonRect;
+exports.SkeletonText = index$6.SkeletonText;
+exports.Switch = index$7.default;
+exports.THEMES = index$8.THEMES;
+exports.ThemeProvider = index$8.ThemeProvider;
+exports.Typography = index$9.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
 exports.EyeOpen = EyeOpen.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -38,6 +38,7 @@
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "11.1.6",
     "@rollup/plugin-url": "8.0.2",
     "@storybook/addon-essentials": "8.0.10",