@manamerge/mana-atomic-ui 1.0.44 → 1.0.45

package/dist/themes/manamerge/molecules/cardSimpleRender.js

@@ -0,0 +1,35 @@
+const cardSimpleRender = {
+    "CardSimpleRender-primary": {
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "20px",
+        background: `rgba(31, 216, 22, 0.5)`,
+        gradientBackground: `radial-gradient(circle at bottom right, rgba(237, 191, 222, 0.9) 5%, pink 10%, transparent 30%)`,
+        border: "2px solid rgb(210, 16, 16)",
+        borderRadius: "25px",
+        padding: "20px 20px 0 20px",
+        height: "100%",
+        maxWidth: "350px",
+        minWidth: "200px",
+        focus: {
+            border: "2px dashed rgb(169, 189, 80)",
+            boxShadow: "5px 5px 2px 1px rgba(255, 81, 0, 0.2)",
+            transition: "box-shadow 0.1s ease"
+        },
+        hover: {
+            border: "2px dashed rgb(189, 80, 80)",
+            boxShadow: "5px 5px 2px 1px rgba(0, 0, 255, 0.2)",
+            transition: "box-shadow 0.1s ease"
+        },
+        atomIcon: {
+            variant: "medium"
+        },
+        atomHeading: {
+            variant: "secondary-h3"
+        },
+        atomText: {
+            variant: "secondary-regular"
+        }
+    }
+};
+export default cardSimpleRender;

package/dist/themes/manamerge/molecules/cardTeaser.js

@@ -0,0 +1,69 @@
+const cardTeaser = {
+    "CardTeaser-primary": {
+        background: `repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 0px,
+        rgb(9, 0, 131) 2px
+    ),
+    repeating-linear-gradient(
+        90deg,
+        transparent,
+        transparent 0px,
+        rgb(9, 0, 131) 2px
+    )`,
+        gradientBackground: `radial-gradient(circle, red 10%, pink 50%)`,
+        borderRadius: "25px",
+        maxWidth: "850px",
+        text: {
+            variant: "primary-medium",
+            color: "#ccc",
+            margin: " 8px 0"
+        },
+        icon: {
+            variant: "medium"
+        },
+        button: {
+            variant: "primary"
+        },
+        image: {
+            borderRadius: "16px"
+        },
+        list: {
+            padding: "0",
+            margin: "0"
+        },
+        leftCardContainer: {
+            responsive: {
+                tinyMobileUp: {
+                    padding: "30px",
+                    maxWidth: "350px"
+                }
+            }
+        },
+        listItem: {
+            responsive: {
+                tinyMobileUp: {
+                    gap: "20px"
+                },
+                mobileUp: {
+                    gap: "10px"
+                }
+            }
+        },
+        separator: {
+            padding: "10px 0 0 0",
+            border: "1px solid #ccc"
+        },
+        headingTitle: {
+            variant: "primary-h2",
+            color: "#ccc"
+        },
+        headingCompanyDate: {
+            variant: "primary-h5",
+            color: "#ccc",
+            textTransform: "uppercase"
+        }
+    }
+};
+export default cardTeaser;

package/dist/themes/manamerge/molecules/footer.js

@@ -0,0 +1,26 @@
+const footer = {
+    "Footer-primary": {
+        background: `linear-gradient(
+        180deg,
+        rgba(59, 60, 63, 0.6) 0%,
+        rgba(38, 38, 38, 0.8) 43.75%
+        ),
+        rgba(59, 60, 63, 0.8);`,
+        padding: "10px",
+        gap: "20px",
+        text: {
+            variant: "secondary-light",
+            color: "#1cc",
+            hover: {
+                color: "#f00"
+            }
+        },
+        links: {
+            variant: "secondary-regular"
+        },
+        icons: {
+            variant: "medium"
+        }
+    }
+};
+export default footer;

package/dist/themes/manamerge/molecules/header.js

@@ -0,0 +1,86 @@
+const header = {
+    "Header-primary": {
+        height: "350px",
+        backgroundColor: "rgba(250, 97, 97, 0.71)",
+        justifyContent: "center",
+        bannerColor: "lightgray",
+        wrapperHeader: {
+            alignItems: "center"
+        },
+        atomIconTop: {
+            variant: "large",
+            stroke: "none",
+            fill: "none",
+            hover: {
+                stroke: "gold",
+                fill: "gold"
+            }
+        },
+        atomIconDot: {
+            variant: "small",
+            size: "10px",
+            fill: "green",
+            stroke: "none",
+            hover: {
+                stroke: "none"
+            }
+        },
+        atomHeading: {
+            variant: "secondary-h1"
+        },
+        atomTextTitle: {
+            variant: "secondary-medium"
+        },
+        atomButtonLeft: {
+            variant: "primary",
+            flexDirection: "row"
+        },
+        atomButtonRight: {
+            variant: "secondary",
+            flexDirection: "row-reverse"
+        },
+        atomIconLeft: {
+            variant: "small"
+        },
+        atomIconRight: {
+            variant: "small"
+        },
+        wrapperTextTitle: {
+            alignItems: "center"
+        }
+    },
+    "Header-secondary": {
+        height: "300px",
+        backgroundColor: "rgba(186, 250, 97, 0.71)",
+        justifyContent: "flex-start",
+        bannerColor: "lightgray",
+        wrapperHeader: {
+            alignItems: "flex-start"
+        },
+        atomIconDot: {
+            variant: "small",
+            size: "10px",
+            fill: "green",
+            stroke: "none",
+            hover: {
+                stroke: "none"
+            }
+        },
+        atomHeading: {
+            variant: "secondary-h1"
+        },
+        atomTextTitle: {
+            variant: "secondary-medium"
+        },
+        wrapperTextTitle: {
+            alignItems: "flex-start"
+        },
+        gradientStyles: {
+            orientation: "180deg",
+            primaryColor: "rgba(0, 128, 0, 0) 0%",
+            secondaryColor: "rgba(0, 55, 128, 0.4) 50%",
+            tertiaryColor: "rgba(128, 0, 0, 0.7) 100%"
+        }
+    }
+};
+export default header;

package/dist/themes/manamerge/molecules/navigation.js

@@ -0,0 +1,53 @@
+const navigation = {
+    "Navigation-primary": {
+        gap: "30px",
+        background: `linear-gradient(
+      180deg,
+      rgba(59, 60, 63, 0.6) 0%,
+      rgba(38, 38, 38, 0.8) 43.75%
+    ),
+    rgba(59, 60, 63, 0.8);`,
+        atomIcon: {
+            variant: "medium",
+            color: "white",
+            focus: {
+                outline: "2px solid darkblue",
+                outlineOffset: "2px",
+                boxShadow: "2px 2px 5px yellow",
+                color: "gold"
+            },
+            hover: {
+                color: "red",
+                transition: "color 0.3s ease"
+            }
+        },
+        atomLink: {
+            variant: "primary-bold",
+            color: "#ccc",
+            fontWeight: "700",
+            currentPath: {
+                color: "green",
+                fontWeight: "900"
+            },
+            focus: {
+                color: "gold",
+                boxShadow: "2px 2px 5px yellow",
+                transform: "translateY(-5px)"
+            },
+            hover: {
+                color: "#f00",
+                transition: "color 0.3s ease"
+            }
+        },
+        navLinks: {
+            responsive: {
+                largeMobileUp: {
+                    gap: "30px",
+                    justifyContent: "flex-start",
+                    margin: "0 30px 0 0"
+                }
+            }
+        }
+    }
+};
+export default navigation;

package/dist/themes/themes/davidWeb/fonts/index.js

@@ -1,16 +1,45 @@
-"use strict";
+import { createGlobalStyle } from "styled-components";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DavidWebStyles = void 0;
-var _styledComponents = require("styled-components");
-var _GilmerRegular = _interopRequireDefault(require("./Gilmer-Regular.woff2"));
-var _GilmerBold = _interopRequireDefault(require("./Gilmer-Bold.woff2"));
-var _GilmerHeavy = _interopRequireDefault(require("./Gilmer-Heavy.woff2"));
-var _GilmerLight = _interopRequireDefault(require("./Gilmer-Light.woff2"));
-var _GilmerMedium = _interopRequireDefault(require("./Gilmer-Medium.woff2"));
-var _templateObject; // Fonts
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var DavidWebStyles = exports.DavidWebStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 300;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 400;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 500;\n  }\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 700;\n  }\n\n  @font-face {\n    font-family: ManamergeGilmer;\n    src: url(", ") format('woff2');\n    font-style: normal;\n    font-weight: 900;\n  }\n  * {\n    font-family: ManamergeGilmer, sans-serif;\n  }\n"])), _GilmerLight["default"], _GilmerRegular["default"], _GilmerMedium["default"], _GilmerBold["default"], _GilmerHeavy["default"]);
+// Fonts
+import ManamergeGilmerRegular from "./Gilmer-Regular.woff2";
+import ManamergeGilmerBold from "./Gilmer-Bold.woff2";
+import ManamergeGilmerHeavy from "./Gilmer-Heavy.woff2";
+import ManamergeGilmerLight from "./Gilmer-Light.woff2";
+import ManamergeGilmerMedium from "./Gilmer-Medium.woff2";
+
+export const DavidWebStyles = createGlobalStyle`
+  @font-face {
+    font-family: ManamergeGilmer;
+    src: url(${ManamergeGilmerLight}) format('woff2');
+    font-style: normal;
+    font-weight: 300;
+  }
+  @font-face {
+    font-family: ManamergeGilmer;
+    src: url(${ManamergeGilmerRegular}) format('woff2');
+    font-style: normal;
+    font-weight: 400;
+  }
+  @font-face {
+    font-family: ManamergeGilmer;
+    src: url(${ManamergeGilmerMedium}) format('woff2');
+    font-style: normal;
+    font-weight: 500;
+  }
+  @font-face {
+    font-family: ManamergeGilmer;
+    src: url(${ManamergeGilmerBold}) format('woff2');
+    font-style: normal;
+    font-weight: 700;
+  }
+
+  @font-face {
+    font-family: ManamergeGilmer;
+    src: url(${ManamergeGilmerHeavy}) format('woff2');
+    font-style: normal;
+    font-weight: 900;
+  }
+  * {
+    font-family: ManamergeGilmer, sans-serif;
+  }
+`;

package/dist/themes/themes/davidWeb/images/icons/modal/closeicon.svg.js

@@ -1,43 +1,38 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+import React from "react";
 // eslint-disable-next-line react/prop-types
-var CheckIcon = function CheckIcon(_ref) {
-  var color = _ref.color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M15 9L9 15",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M9 9L15 15",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-var _default = exports["default"] = CheckIcon;
+const CheckIcon = ({ color, className = "" }) => (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M15 9L9 15"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M9 9L15 15"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export default CheckIcon;

package/dist/themes/themes/davidWeb/images/icons/navigation/notification.svg.js

@@ -1,50 +1,49 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+import React from "react";
 // eslint-disable-next-line react/prop-types
-var NotificationIcon = function NotificationIcon(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "25",
-    height: "25",
-    viewBox: "0 0 25 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M10.5467 4.6875C8.42301 5.29427 7.2915 7.44792 7.2915 9.67448V16.7253H7.28499C7.28499 18.0807 6.34229 18.582 4.95947 18.582V20.3255H20.0441V18.5859C18.6613 18.5859 17.7108 18.0859 17.7108 16.7292H17.7173V9.67969C17.7173 7.44792 16.7108 5.29167 14.5832 4.6888L10.5467 4.6875Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M10.9375 2.604H14.0625",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12.5002 22.3958C12.8597 22.3958 13.1512 22.1044 13.1512 21.7448C13.1512 21.3852 12.8597 21.0938 12.5002 21.0938C12.1406 21.0938 11.8491 21.3852 11.8491 21.7448C11.8491 22.1044 12.1406 22.3958 12.5002 22.3958Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12.4998 22.1525C12.7249 22.1525 12.9074 21.97 12.9074 21.745C12.9074 21.5199 12.7249 21.3374 12.4998 21.3374C12.2748 21.3374 12.0923 21.5199 12.0923 21.745C12.0923 21.97 12.2748 22.1525 12.4998 22.1525Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12.5002 21.9076C12.5901 21.9076 12.6629 21.8347 12.6629 21.7448C12.6629 21.6549 12.5901 21.582 12.5002 21.582C12.4103 21.582 12.3374 21.6549 12.3374 21.7448C12.3374 21.8347 12.4103 21.9076 12.5002 21.9076Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-var _default = exports["default"] = NotificationIcon;
+const NotificationIcon = ({ color }) => (
+    <svg
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M10.5467 4.6875C8.42301 5.29427 7.2915 7.44792 7.2915 9.67448V16.7253H7.28499C7.28499 18.0807 6.34229 18.582 4.95947 18.582V20.3255H20.0441V18.5859C18.6613 18.5859 17.7108 18.0859 17.7108 16.7292H17.7173V9.67969C17.7173 7.44792 16.7108 5.29167 14.5832 4.6888L10.5467 4.6875Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M10.9375 2.604H14.0625"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M12.5002 22.3958C12.8597 22.3958 13.1512 22.1044 13.1512 21.7448C13.1512 21.3852 12.8597 21.0938 12.5002 21.0938C12.1406 21.0938 11.8491 21.3852 11.8491 21.7448C11.8491 22.1044 12.1406 22.3958 12.5002 22.3958Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M12.4998 22.1525C12.7249 22.1525 12.9074 21.97 12.9074 21.745C12.9074 21.5199 12.7249 21.3374 12.4998 21.3374C12.2748 21.3374 12.0923 21.5199 12.0923 21.745C12.0923 21.97 12.2748 22.1525 12.4998 22.1525Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M12.5002 21.9076C12.5901 21.9076 12.6629 21.8347 12.6629 21.7448C12.6629 21.6549 12.5901 21.582 12.5002 21.582C12.4103 21.582 12.3374 21.6549 12.3374 21.7448C12.3374 21.8347 12.4103 21.9076 12.5002 21.9076Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export default NotificationIcon;

package/dist/themes/themes/davidWeb/images/icons/navigation/profile.svg.js

@@ -1,32 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+import React from "react";
 // eslint-disable-next-line react/prop-types
-var ProfileIcon = function ProfileIcon(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "25",
-    height: "25",
-    viewBox: "0 0 25 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z",
-    stroke: color,
-    strokeWidth: "1.52",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M20 20C19.136 14.5346 15.5773 12 12.048 12C8.51867 12 4.86533 14.5334 4 19.9988",
-    stroke: color,
-    strokeWidth: "1.52",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-var _default = exports["default"] = ProfileIcon;
+const ProfileIcon = ({ color }) => (
+    <svg
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z"
+            stroke={color}
+            strokeWidth="1.52"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            d="M20 20C19.136 14.5346 15.5773 12 12.048 12C8.51867 12 4.86533 14.5334 4 19.9988"
+            stroke={color}
+            strokeWidth="1.52"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export default ProfileIcon;

package/dist/themes/themes/davidWeb/images/icons/navigation/user.svg.js

@@ -1,34 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+import React from "react";
 // eslint-disable-next-line react/prop-types
-var UserIcon = function UserIcon(_ref) {
-  var color = _ref.color;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "24",
-    height: "25",
-    viewBox: "0 0 24 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M20 21.5V19.5C20 17.2909 18.2091 15.5 16 15.5L8 15.5C5.79086 15.5 4 17.2909 4 19.5V21.5",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 11.5C14.2091 11.5 16 9.70914 16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.70914 9.79086 11.5 12 11.5Z",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-var _default = exports["default"] = UserIcon;
+const UserIcon = ({ color }) => (
+    <svg
+        width="24"
+        height="25"
+        viewBox="0 0 24 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M20 21.5V19.5C20 17.2909 18.2091 15.5 16 15.5L8 15.5C5.79086 15.5 4 17.2909 4 19.5V21.5"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 11.5C14.2091 11.5 16 9.70914 16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.70914 9.79086 11.5 12 11.5Z"
+            stroke={color}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);
+
+export default UserIcon;