nestiq-component-library 1.0.0 → 1.0.1

package/dist/components/ImageListPopup/ImageListPopup.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./ImageListPopup.css";
+interface Image {
+    src: string;
+    title: string;
+}
+interface ImageListPopupProps {
+    images: Image[];
+    onClose: () => void;
+}
+declare const ImageListPopup: React.FC<ImageListPopupProps>;
+export default ImageListPopup;

package/dist/components/Popup/Popup.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./Popup.css";
+interface PopupProps {
+    children: React.ReactNode;
+    onCloseClick: () => void;
+}
+declare const Popup: React.FC<PopupProps>;
+export default Popup;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export { default as Button } from './components/Button/Button';
+export { default as Button } from "./components/Button/Button";
+export { default as Popup } from "./components/Popup/Popup";
+export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";

package/dist/index.es.js

@@ -1,9 +1,76 @@
-import React from 'react';
+import React, { useState } from 'react';
+import closeIcon from 'src/assets/images/icon_close 2.png';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 var Button = function (_a) {
     var label = _a.label;
     return React.createElement("button", null, label);
 };
 
-export { Button };
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+styleInject(css_248z$1);
+
+var Popup = function (_a) {
+    var onCloseClick = _a.onCloseClick, children = _a.children;
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
+            React.createElement("div", { className: "end-0 top-0 position-absolute " },
+                React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
+            children)));
+};
+
+var css_248z = ".popup-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n    background-color: #fff;\r\n    border-radius: 8px;\r\n    max-width: 90%;\r\n    max-height: 90%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n    padding: 1rem;\r\n    text-align: center;\r\n    border-top: 1px solid #ddd;\r\n}\r\n";
+styleInject(css_248z);
+
+var ImageListPopup = function (_a) {
+    var images = _a.images, onClose = _a.onClose;
+    var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var handlePrevious = function () {
+        setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
+    };
+    var handleNext = function () {
+        setCurrentIndex(function (prevIndex) {
+            return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
+        });
+    };
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "popup-container" },
+            React.createElement("div", { className: "popup-header" },
+                React.createElement("span", null, images[currentIndex].title),
+                React.createElement("button", { className: "btn-close", onClick: onClose })),
+            React.createElement("div", { className: "popup-body" },
+                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
+            React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
+                React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
+};
+
+export { Button, ImageListPopup, Popup };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/index.js

@@ -1,11 +1,80 @@
 'use strict';
 
 var React = require('react');
+var closeIcon = require('src/assets/images/icon_close 2.png');
+require('bootstrap/dist/css/bootstrap.min.css');
 
 var Button = function (_a) {
     var label = _a.label;
     return React.createElement("button", null, label);
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = ".popup-overlay {\r\n    position: fixed; /* Fixed position to cover the whole screen */\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n    justify-content: center; /* Center horizontally */\r\n    align-items: center; /* Center vertically */\r\n    z-index: 10000; /* Ensure it's above other content */\r\n}\r\n\r\n.popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
+styleInject(css_248z$1);
+
+var Popup = function (_a) {
+    var onCloseClick = _a.onCloseClick, children = _a.children;
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
+            React.createElement("div", { className: "end-0 top-0 position-absolute " },
+                React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
+            children)));
+};
+
+var css_248z = ".popup-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 10000;\r\n}\r\n\r\n.popup-container {\r\n    background-color: #fff;\r\n    border-radius: 8px;\r\n    max-width: 90%;\r\n    max-height: 90%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.popup-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    border-bottom: 1px solid #ddd;\r\n}\r\n\r\n.popup-body {\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 1rem;\r\n}\r\n\r\n.popup-body img {\r\n    max-width: 100%;\r\n    max-height: 100%;\r\n}\r\n\r\n.popup-footer {\r\n    padding: 1rem;\r\n    text-align: center;\r\n    border-top: 1px solid #ddd;\r\n}\r\n";
+styleInject(css_248z);
+
+var ImageListPopup = function (_a) {
+    var images = _a.images, onClose = _a.onClose;
+    var _b = React.useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
+    var handlePrevious = function () {
+        setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
+    };
+    var handleNext = function () {
+        setCurrentIndex(function (prevIndex) {
+            return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
+        });
+    };
+    return (React.createElement("div", { className: "popup-overlay" },
+        React.createElement("div", { className: "popup-container" },
+            React.createElement("div", { className: "popup-header" },
+                React.createElement("span", null, images[currentIndex].title),
+                React.createElement("button", { className: "btn-close", onClick: onClose })),
+            React.createElement("div", { className: "popup-body" },
+                React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
+            React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
+                React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
+};
+
 exports.Button = Button;
+exports.ImageListPopup = ImageListPopup;
+exports.Popup = Popup;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestiq-component-library",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "",
   "main": "dist/index.js",
@@ -18,10 +18,13 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "rollup": "^4.18.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.4.5"
   },

package/rollup.config.mjs

@@ -1,20 +1,31 @@
-import typescript from 'rollup-plugin-typescript2';
-import pkg from './package.json' assert { type: 'json' };
-
-export default {
-    input: 'src/index.tsx',
-    output: [
-        {
-            file: pkg.main,
-            format: 'cjs',
-            sourcemap: true,
-        },
-        {
-            file: pkg.module,
-            format: 'es',
-            sourcemap: true,
-        },
-    ],
-    external: ['react', 'react-dom'],
-    plugins: [typescript()],
-};
+import typescript from "rollup-plugin-typescript2";
+import url from "@rollup/plugin-url";
+import postcss from "rollup-plugin-postcss";
+import pkg from "./package.json" assert { type: "json" };
+
+export default {
+  input: "src/index.tsx",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: "es",
+      sourcemap: true,
+    },
+  ],
+  external: ["react", "react-dom"],
+  plugins: [
+    typescript(),
+    postcss({
+      extensions: [".css"],
+    }),
+    url({
+      include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif"],
+      limit: 0,
+    }),
+  ],
+};

package/src/components/ImageListPopup/ImageListPopup.css

@@ -0,0 +1,49 @@
+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+}
+
+.popup-container {
+    background-color: #fff;
+    border-radius: 8px;
+    max-width: 90%;
+    max-height: 90%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.popup-body {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+}
+
+.popup-body img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.popup-footer {
+    padding: 1rem;
+    text-align: center;
+    border-top: 1px solid #ddd;
+}

package/src/components/ImageListPopup/ImageListPopup.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./ImageListPopup.css";
+
+interface Image {
+  src: string;
+  title: string;
+}
+
+interface ImageListPopupProps {
+  images: Image[];
+  onClose: () => void;
+}
+
+const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handlePrevious = () => {
+    setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
+    );
+  };
+
+  return (
+    <div className="popup-overlay">
+      <div className="popup-container">
+        <div className="popup-header">
+          <span>{images[currentIndex].title}</span>
+          <button className="btn-close" onClick={onClose}></button>
+        </div>
+        <div className="popup-body">
+          <img
+            src={images[currentIndex].src}
+            alt={images[currentIndex].title}
+            className="img-fluid"
+          />
+        </div>
+        <div className="popup-footer">
+          {images.length > 1 && (
+            <>
+              <button
+                className="btn btn-secondary me-2"
+                onClick={handlePrevious}
+              >
+                Previous
+              </button>
+              <button className="btn btn-secondary" onClick={handleNext}>
+                Next
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageListPopup;

package/src/components/Popup/Popup.css

@@ -0,0 +1,25 @@
+.popup-overlay {
+    position: fixed; /* Fixed position to cover the whole screen */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    display: flex; /* Flexbox to center the popup */
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    z-index: 10000; /* Ensure it's above other content */
+}
+
+.popUpHeader {
+    height: 48px;
+    font-size: 32px;
+    font-weight: 600;
+    color: #1b1b1b;
+}
+
+.closeIcon {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}

package/src/components/Popup/Popup.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import closeIcon from "src/assets/images/icon_close 2.png";
+import "./Popup.css";
+
+interface PopupProps {
+  children: React.ReactNode;
+  onCloseClick: () => void;
+}
+
+const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
+  return (
+    <div className="popup-overlay">
+      <div className="shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
+        <div className="end-0 top-0 position-absolute ">
+          <img
+            src={closeIcon}
+            alt="close"
+            className="closeIcon me-2"
+            onClick={onCloseClick}
+          />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

package/src/index.tsx

@@ -1 +1,3 @@
-export { default as Button } from './components/Button/Button';
+export { default as Button } from "./components/Button/Button";
+export { default as Popup } from "./components/Popup/Popup";
+export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";

package/src/types/images.d.ts

@@ -0,0 +1,25 @@
+// src/types/images.d.ts
+declare module '*.png' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.svg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.jpeg' {
+    const value: string;
+    export default value;
+}
+
+declare module '*.gif' {
+    const value: string;
+    export default value;
+}

package/tsconfig.json

@@ -8,7 +8,13 @@
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["node_modules/*", "src/types/*"]
+    }
   },
   "include": ["src"]
 }