@obolnetwork/obol-ui 1.0.5 → 1.0.6

package/dist/index.es.js

@@ -2,8 +2,8 @@ import { createStitches } from '@stitches/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import Image$1 from 'next/image';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useEffect } from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
@@ -1096,46 +1096,25 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
                         gap: "14px",
                     } }, { children: [props.links.map(function (item) { return (jsx(Link, __assign({ variant: "docs", target: "_blank", href: item.link }, { children: item.network === "twitter" ? jsx(TwitterIcon, {}) : jsx(GithubIcon, {}) }), "icon-".concat(item.network))); }), " "] })))] }))] }))); };
 
-function useMediaQuery(query) {
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    useEffect(function () {
-        if (typeof window !== "undefined") {
-            var media_1 = window.matchMedia(query);
-            if (media_1.matches !== matches) {
-                setMatches(media_1.matches);
-            }
-            var listener_1 = function () {
-                setMatches(media_1.matches);
-            };
-            media_1.addListener(listener_1);
-            return function () { return media_1.removeListener(listener_1); };
-        }
-    }, [matches, query]);
-    return matches;
-}
-var MediaQueryKeys = {
-    xs: '(max-width: 520px)',
-    sm: '(max-width: 900px)',
-    md: '(max-width: 1200px)',
-    lg: '(max-width: 1800px)',
-};
-
 var LogoCard = function (props) {
-    var screenDownSm = useMediaQuery(MediaQueryKeys.sm);
     return (jsx(Box, __assign({ as: "a", className: "logo-card", css: {
-            position: "relative",
             width: "288px",
             height: "120px",
+            maxWidth: "288px",
+            maxHeight: "120px",
             borderRadius: "$4",
             backgroundColor: "$bg04",
-            "&:hover": { cursor: "pointer", backgroundColor: "$bg05" },
             p: "$sm",
+            "&:hover": { cursor: "pointer", backgroundColor: "$bg05" },
             "@sm": {
-                width: "42%",
-                height: "auto",
-                p: "$xxs",
+                width: "100%",
+                height: "120px",
+            },
+            "@xs": {
+                width: "auto",
+                height: "60px",
             },
-        }, target: "_blank", href: props.logoCardLink }, { children: !screenDownSm ? (jsx(Image$1, { src: props.image, layout: "fill", objectFit: "scale-down", alt: props.heading })) : (jsx(Image$1, { src: props.image, layout: "responsive", objectFit: "fill", width: props.width, height: props.height, alt: props.heading })) })));
+        }, target: "_blank", href: props.logoCardLink }, { children: jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsx(Image, { src: props.image, layout: "fill", objectFit: "contain", alt: props.heading, quality: 100 }) })) })));
 };
 
 // Exports
@@ -1364,6 +1343,30 @@ var Accordion = /*#__PURE__*/Object.freeze({
     Content: Content
 });
 
+function useMediaQuery(query) {
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    useEffect(function () {
+        if (typeof window !== "undefined") {
+            var media_1 = window.matchMedia(query);
+            if (media_1.matches !== matches) {
+                setMatches(media_1.matches);
+            }
+            var listener_1 = function () {
+                setMatches(media_1.matches);
+            };
+            media_1.addListener(listener_1);
+            return function () { return media_1.removeListener(listener_1); };
+        }
+    }, [matches, query]);
+    return matches;
+}
+var MediaQueryKeys = {
+    xs: '(max-width: 520px)',
+    sm: '(max-width: 900px)',
+    md: '(max-width: 1200px)',
+    lg: '(max-width: 1800px)',
+};
+
 var BASE_PATH = "/assets/hexapod.svg";
 var MOBILE_PATH = "/assets/hexapod-mobile.svg";
 var HeroSection = function (_a) {

package/dist/index.js

@@ -6,8 +6,8 @@ var react = require('@stitches/react');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Image$1 = require('next/image');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var React = require('react');
 var router = require('next/router');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 
@@ -33,8 +33,8 @@ function _interopNamespace(e) {
 
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image$1);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 /*! *****************************************************************************
@@ -1126,46 +1126,25 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
                         gap: "14px",
                     } }, { children: [props.links.map(function (item) { return (jsxRuntime.jsx(Link, __assign({ variant: "docs", target: "_blank", href: item.link }, { children: item.network === "twitter" ? jsxRuntime.jsx(TwitterIcon, {}) : jsxRuntime.jsx(GithubIcon, {}) }), "icon-".concat(item.network))); }), " "] })))] }))] }))); };
 
-function useMediaQuery(query) {
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    React.useEffect(function () {
-        if (typeof window !== "undefined") {
-            var media_1 = window.matchMedia(query);
-            if (media_1.matches !== matches) {
-                setMatches(media_1.matches);
-            }
-            var listener_1 = function () {
-                setMatches(media_1.matches);
-            };
-            media_1.addListener(listener_1);
-            return function () { return media_1.removeListener(listener_1); };
-        }
-    }, [matches, query]);
-    return matches;
-}
-var MediaQueryKeys = {
-    xs: '(max-width: 520px)',
-    sm: '(max-width: 900px)',
-    md: '(max-width: 1200px)',
-    lg: '(max-width: 1800px)',
-};
-
 var LogoCard = function (props) {
-    var screenDownSm = useMediaQuery(MediaQueryKeys.sm);
     return (jsxRuntime.jsx(Box, __assign({ as: "a", className: "logo-card", css: {
-            position: "relative",
             width: "288px",
             height: "120px",
+            maxWidth: "288px",
+            maxHeight: "120px",
             borderRadius: "$4",
             backgroundColor: "$bg04",
-            "&:hover": { cursor: "pointer", backgroundColor: "$bg05" },
             p: "$sm",
+            "&:hover": { cursor: "pointer", backgroundColor: "$bg05" },
             "@sm": {
-                width: "42%",
-                height: "auto",
-                p: "$xxs",
+                width: "100%",
+                height: "120px",
             },
-        }, target: "_blank", href: props.logoCardLink }, { children: !screenDownSm ? (jsxRuntime.jsx(Image__default["default"], { src: props.image, layout: "fill", objectFit: "scale-down", alt: props.heading })) : (jsxRuntime.jsx(Image__default["default"], { src: props.image, layout: "responsive", objectFit: "fill", width: props.width, height: props.height, alt: props.heading })) })));
+            "@xs": {
+                width: "auto",
+                height: "60px",
+            },
+        }, target: "_blank", href: props.logoCardLink }, { children: jsxRuntime.jsx(Box, __assign({ css: { position: "relative", width: "100%", height: "100%" } }, { children: jsxRuntime.jsx(Image, { src: props.image, layout: "fill", objectFit: "contain", alt: props.heading, quality: 100 }) })) })));
 };
 
 // Exports
@@ -1394,6 +1373,30 @@ var Accordion = /*#__PURE__*/Object.freeze({
     Content: Content
 });
 
+function useMediaQuery(query) {
+    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
+    React.useEffect(function () {
+        if (typeof window !== "undefined") {
+            var media_1 = window.matchMedia(query);
+            if (media_1.matches !== matches) {
+                setMatches(media_1.matches);
+            }
+            var listener_1 = function () {
+                setMatches(media_1.matches);
+            };
+            media_1.addListener(listener_1);
+            return function () { return media_1.removeListener(listener_1); };
+        }
+    }, [matches, query]);
+    return matches;
+}
+var MediaQueryKeys = {
+    xs: '(max-width: 520px)',
+    sm: '(max-width: 900px)',
+    md: '(max-width: 1200px)',
+    lg: '(max-width: 1800px)',
+};
+
 var BASE_PATH = "/assets/hexapod.svg";
 var MOBILE_PATH = "/assets/hexapod-mobile.svg";
 var HeroSection = function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",