@adsterra-ad/react 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -74,10 +74,10 @@ function AdBanner({
     return () => window.removeEventListener("message", handler);
   }, [onLoad, onError]);
   if (adFailed && !showFallbackPlaceholder) return null;
-  const wrapperStyle = getWrapperStyle(adLabelPosition);
+  const wrapperStyle = getWrapperStyle(config);
   const labelStyle = getLabelStyle(adLabelPosition);
   const visibilityStyle = getVisibilityStyle(adLoaded || adFailed && showFallbackPlaceholder);
-  const bannerStyle = { ...parseStyle((0, import_core.getBannerStyle)(config)), overflow: "hidden", borderRadius: 6, border: "1px solid #e5e7eb", background: "#f3f4f6" };
+  const bannerStyle = { ...parseStyle((0, import_core.getBannerStyle)(config)), overflow: "hidden" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${className ?? ""}`.trim(), style: { ...wrapperStyle, ...visibilityStyle }, children: [
     showAdLabel && adLabelPosition.startsWith("top") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: labelStyle, children: adLabel }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": "ad-banner", style: bannerStyle, children: adFailed && showFallbackPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackPlaceholder, { format, text: fallbackPlaceholderText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -140,11 +140,12 @@ function parseStyle(styleString) {
     justifyContent: "center"
   };
 }
-function getWrapperStyle(position) {
+function getWrapperStyle(config) {
   return {
     display: "inline-flex",
     flexDirection: "column",
-    alignItems: position.endsWith("left") ? "flex-start" : position.endsWith("right") ? "flex-end" : "center"
+    alignItems: "flex-start",
+    width: typeof config.width === "number" ? `${config.width}px` : config.width
   };
 }
 function getLabelStyle(position) {
@@ -153,7 +154,7 @@ function getLabelStyle(position) {
     fontWeight: 600,
     letterSpacing: "0.1em",
     textTransform: "uppercase",
-    color: "#9ca3af",
+    opacity: 0.6,
     marginBottom: position.startsWith("top") ? 4 : 0,
     marginTop: position.startsWith("bottom") ? 4 : 0,
     textAlign: position.endsWith("left") ? "left" : position.endsWith("right") ? "right" : "center",
@@ -188,8 +189,9 @@ function FallbackPlaceholder({ format, text }) {
         gap: 6,
         boxSizing: "border-box",
         padding: 12,
-        color: "#475569",
-        background: "repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px)",
+        border: "1px dashed currentColor",
+        opacity: 0.7,
+        background: "transparent",
         textAlign: "center",
         fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
       },

package/dist/index.js

@@ -53,10 +53,10 @@ function AdBanner({
     return () => window.removeEventListener("message", handler);
   }, [onLoad, onError]);
   if (adFailed && !showFallbackPlaceholder) return null;
-  const wrapperStyle = getWrapperStyle(adLabelPosition);
+  const wrapperStyle = getWrapperStyle(config);
   const labelStyle = getLabelStyle(adLabelPosition);
   const visibilityStyle = getVisibilityStyle(adLoaded || adFailed && showFallbackPlaceholder);
-  const bannerStyle = { ...parseStyle(getBannerStyle(config)), overflow: "hidden", borderRadius: 6, border: "1px solid #e5e7eb", background: "#f3f4f6" };
+  const bannerStyle = { ...parseStyle(getBannerStyle(config)), overflow: "hidden" };
   return /* @__PURE__ */ jsxs("div", { className: `${className ?? ""}`.trim(), style: { ...wrapperStyle, ...visibilityStyle }, children: [
     showAdLabel && adLabelPosition.startsWith("top") ? /* @__PURE__ */ jsx("span", { style: labelStyle, children: adLabel }) : null,
     /* @__PURE__ */ jsx("div", { "data-testid": "ad-banner", style: bannerStyle, children: adFailed && showFallbackPlaceholder ? /* @__PURE__ */ jsx(FallbackPlaceholder, { format, text: fallbackPlaceholderText }) : /* @__PURE__ */ jsx(
@@ -119,11 +119,12 @@ function parseStyle(styleString) {
     justifyContent: "center"
   };
 }
-function getWrapperStyle(position) {
+function getWrapperStyle(config) {
   return {
     display: "inline-flex",
     flexDirection: "column",
-    alignItems: position.endsWith("left") ? "flex-start" : position.endsWith("right") ? "flex-end" : "center"
+    alignItems: "flex-start",
+    width: typeof config.width === "number" ? `${config.width}px` : config.width
   };
 }
 function getLabelStyle(position) {
@@ -132,7 +133,7 @@ function getLabelStyle(position) {
     fontWeight: 600,
     letterSpacing: "0.1em",
     textTransform: "uppercase",
-    color: "#9ca3af",
+    opacity: 0.6,
     marginBottom: position.startsWith("top") ? 4 : 0,
     marginTop: position.startsWith("bottom") ? 4 : 0,
     textAlign: position.endsWith("left") ? "left" : position.endsWith("right") ? "right" : "center",
@@ -167,8 +168,9 @@ function FallbackPlaceholder({ format, text }) {
         gap: 6,
         boxSizing: "border-box",
         padding: 12,
-        color: "#475569",
-        background: "repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px)",
+        border: "1px dashed currentColor",
+        opacity: 0.7,
+        background: "transparent",
         textAlign: "center",
         fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adsterra-ad/react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@adsterra-ad/core": "0.1.3"
+    "@adsterra-ad/core": "0.1.4"
   },
   "scripts": {
     "build": "tsup src/index.tsx --format esm,cjs --dts",