@01.software/sdk 0.2.0 → 0.2.1

package/dist/components.cjs

@@ -43,11 +43,34 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/components/index.ts
 var components_exports = {};
 __export(components_exports, {
-  RichTextContent: () => RichTextContent
+  FormRenderer: () => FormRenderer,
+  Image: () => Image,
+  RichTextContent: () => RichTextContent,
+  toSubmissionData: () => toSubmissionData
 });
 module.exports = __toCommonJS(components_exports);
 
@@ -73,4 +96,672 @@ function RichTextContent({
     }
   );
 }
+
+// src/components/FormRenderer/index.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/components/FormRenderer/countries.ts
+var COUNTRIES = [
+  { value: "AF", label: "Afghanistan" },
+  { value: "AX", label: "\xC5land Islands" },
+  { value: "AL", label: "Albania" },
+  { value: "DZ", label: "Algeria" },
+  { value: "AS", label: "American Samoa" },
+  { value: "AD", label: "Andorra" },
+  { value: "AO", label: "Angola" },
+  { value: "AI", label: "Anguilla" },
+  { value: "AQ", label: "Antarctica" },
+  { value: "AG", label: "Antigua and Barbuda" },
+  { value: "AR", label: "Argentina" },
+  { value: "AM", label: "Armenia" },
+  { value: "AW", label: "Aruba" },
+  { value: "AU", label: "Australia" },
+  { value: "AT", label: "Austria" },
+  { value: "AZ", label: "Azerbaijan" },
+  { value: "BS", label: "Bahamas" },
+  { value: "BH", label: "Bahrain" },
+  { value: "BD", label: "Bangladesh" },
+  { value: "BB", label: "Barbados" },
+  { value: "BY", label: "Belarus" },
+  { value: "BE", label: "Belgium" },
+  { value: "BZ", label: "Belize" },
+  { value: "BJ", label: "Benin" },
+  { value: "BM", label: "Bermuda" },
+  { value: "BT", label: "Bhutan" },
+  { value: "BO", label: "Bolivia" },
+  { value: "BA", label: "Bosnia and Herzegovina" },
+  { value: "BW", label: "Botswana" },
+  { value: "BV", label: "Bouvet Island" },
+  { value: "BR", label: "Brazil" },
+  { value: "IO", label: "British Indian Ocean Territory" },
+  { value: "BN", label: "Brunei Darussalam" },
+  { value: "BG", label: "Bulgaria" },
+  { value: "BF", label: "Burkina Faso" },
+  { value: "BI", label: "Burundi" },
+  { value: "KH", label: "Cambodia" },
+  { value: "CM", label: "Cameroon" },
+  { value: "CA", label: "Canada" },
+  { value: "CV", label: "Cape Verde" },
+  { value: "KY", label: "Cayman Islands" },
+  { value: "CF", label: "Central African Republic" },
+  { value: "TD", label: "Chad" },
+  { value: "CL", label: "Chile" },
+  { value: "CN", label: "China" },
+  { value: "CX", label: "Christmas Island" },
+  { value: "CC", label: "Cocos (Keeling) Islands" },
+  { value: "CO", label: "Colombia" },
+  { value: "KM", label: "Comoros" },
+  { value: "CG", label: "Congo" },
+  { value: "CD", label: "Congo, Democratic Republic" },
+  { value: "CK", label: "Cook Islands" },
+  { value: "CR", label: "Costa Rica" },
+  { value: "CI", label: "C\xF4te d'Ivoire" },
+  { value: "HR", label: "Croatia" },
+  { value: "CU", label: "Cuba" },
+  { value: "CY", label: "Cyprus" },
+  { value: "CZ", label: "Czech Republic" },
+  { value: "DK", label: "Denmark" },
+  { value: "DJ", label: "Djibouti" },
+  { value: "DM", label: "Dominica" },
+  { value: "DO", label: "Dominican Republic" },
+  { value: "EC", label: "Ecuador" },
+  { value: "EG", label: "Egypt" },
+  { value: "SV", label: "El Salvador" },
+  { value: "GQ", label: "Equatorial Guinea" },
+  { value: "ER", label: "Eritrea" },
+  { value: "EE", label: "Estonia" },
+  { value: "ET", label: "Ethiopia" },
+  { value: "FK", label: "Falkland Islands" },
+  { value: "FO", label: "Faroe Islands" },
+  { value: "FJ", label: "Fiji" },
+  { value: "FI", label: "Finland" },
+  { value: "FR", label: "France" },
+  { value: "GF", label: "French Guiana" },
+  { value: "PF", label: "French Polynesia" },
+  { value: "TF", label: "French Southern Territories" },
+  { value: "GA", label: "Gabon" },
+  { value: "GM", label: "Gambia" },
+  { value: "GE", label: "Georgia" },
+  { value: "DE", label: "Germany" },
+  { value: "GH", label: "Ghana" },
+  { value: "GI", label: "Gibraltar" },
+  { value: "GR", label: "Greece" },
+  { value: "GL", label: "Greenland" },
+  { value: "GD", label: "Grenada" },
+  { value: "GP", label: "Guadeloupe" },
+  { value: "GU", label: "Guam" },
+  { value: "GT", label: "Guatemala" },
+  { value: "GG", label: "Guernsey" },
+  { value: "GN", label: "Guinea" },
+  { value: "GW", label: "Guinea-Bissau" },
+  { value: "GY", label: "Guyana" },
+  { value: "HT", label: "Haiti" },
+  { value: "VA", label: "Holy See (Vatican)" },
+  { value: "HN", label: "Honduras" },
+  { value: "HK", label: "Hong Kong" },
+  { value: "HU", label: "Hungary" },
+  { value: "IS", label: "Iceland" },
+  { value: "IN", label: "India" },
+  { value: "ID", label: "Indonesia" },
+  { value: "IR", label: "Iran" },
+  { value: "IQ", label: "Iraq" },
+  { value: "IE", label: "Ireland" },
+  { value: "IM", label: "Isle of Man" },
+  { value: "IL", label: "Israel" },
+  { value: "IT", label: "Italy" },
+  { value: "JM", label: "Jamaica" },
+  { value: "JP", label: "Japan" },
+  { value: "JE", label: "Jersey" },
+  { value: "JO", label: "Jordan" },
+  { value: "KZ", label: "Kazakhstan" },
+  { value: "KE", label: "Kenya" },
+  { value: "KI", label: "Kiribati" },
+  { value: "KP", label: "Korea, North" },
+  { value: "KR", label: "Korea, South" },
+  { value: "KW", label: "Kuwait" },
+  { value: "KG", label: "Kyrgyzstan" },
+  { value: "LA", label: "Laos" },
+  { value: "LV", label: "Latvia" },
+  { value: "LB", label: "Lebanon" },
+  { value: "LS", label: "Lesotho" },
+  { value: "LR", label: "Liberia" },
+  { value: "LY", label: "Libya" },
+  { value: "LI", label: "Liechtenstein" },
+  { value: "LT", label: "Lithuania" },
+  { value: "LU", label: "Luxembourg" },
+  { value: "MO", label: "Macao" },
+  { value: "MK", label: "North Macedonia" },
+  { value: "MG", label: "Madagascar" },
+  { value: "MW", label: "Malawi" },
+  { value: "MY", label: "Malaysia" },
+  { value: "MV", label: "Maldives" },
+  { value: "ML", label: "Mali" },
+  { value: "MT", label: "Malta" },
+  { value: "MH", label: "Marshall Islands" },
+  { value: "MQ", label: "Martinique" },
+  { value: "MR", label: "Mauritania" },
+  { value: "MU", label: "Mauritius" },
+  { value: "YT", label: "Mayotte" },
+  { value: "MX", label: "Mexico" },
+  { value: "FM", label: "Micronesia" },
+  { value: "MD", label: "Moldova" },
+  { value: "MC", label: "Monaco" },
+  { value: "MN", label: "Mongolia" },
+  { value: "ME", label: "Montenegro" },
+  { value: "MS", label: "Montserrat" },
+  { value: "MA", label: "Morocco" },
+  { value: "MZ", label: "Mozambique" },
+  { value: "MM", label: "Myanmar" },
+  { value: "NA", label: "Namibia" },
+  { value: "NR", label: "Nauru" },
+  { value: "NP", label: "Nepal" },
+  { value: "NL", label: "Netherlands" },
+  { value: "NC", label: "New Caledonia" },
+  { value: "NZ", label: "New Zealand" },
+  { value: "NI", label: "Nicaragua" },
+  { value: "NE", label: "Niger" },
+  { value: "NG", label: "Nigeria" },
+  { value: "NU", label: "Niue" },
+  { value: "NF", label: "Norfolk Island" },
+  { value: "MP", label: "Northern Mariana Islands" },
+  { value: "NO", label: "Norway" },
+  { value: "OM", label: "Oman" },
+  { value: "PK", label: "Pakistan" },
+  { value: "PW", label: "Palau" },
+  { value: "PS", label: "Palestine" },
+  { value: "PA", label: "Panama" },
+  { value: "PG", label: "Papua New Guinea" },
+  { value: "PY", label: "Paraguay" },
+  { value: "PE", label: "Peru" },
+  { value: "PH", label: "Philippines" },
+  { value: "PN", label: "Pitcairn" },
+  { value: "PL", label: "Poland" },
+  { value: "PT", label: "Portugal" },
+  { value: "PR", label: "Puerto Rico" },
+  { value: "QA", label: "Qatar" },
+  { value: "RE", label: "R\xE9union" },
+  { value: "RO", label: "Romania" },
+  { value: "RU", label: "Russian Federation" },
+  { value: "RW", label: "Rwanda" },
+  { value: "BL", label: "Saint Barth\xE9lemy" },
+  { value: "SH", label: "Saint Helena" },
+  { value: "KN", label: "Saint Kitts and Nevis" },
+  { value: "LC", label: "Saint Lucia" },
+  { value: "MF", label: "Saint Martin" },
+  { value: "PM", label: "Saint Pierre and Miquelon" },
+  { value: "VC", label: "Saint Vincent and the Grenadines" },
+  { value: "WS", label: "Samoa" },
+  { value: "SM", label: "San Marino" },
+  { value: "ST", label: "Sao Tome and Principe" },
+  { value: "SA", label: "Saudi Arabia" },
+  { value: "SN", label: "Senegal" },
+  { value: "RS", label: "Serbia" },
+  { value: "SC", label: "Seychelles" },
+  { value: "SL", label: "Sierra Leone" },
+  { value: "SG", label: "Singapore" },
+  { value: "SX", label: "Sint Maarten" },
+  { value: "SK", label: "Slovakia" },
+  { value: "SI", label: "Slovenia" },
+  { value: "SB", label: "Solomon Islands" },
+  { value: "SO", label: "Somalia" },
+  { value: "ZA", label: "South Africa" },
+  { value: "GS", label: "South Georgia" },
+  { value: "SS", label: "South Sudan" },
+  { value: "ES", label: "Spain" },
+  { value: "LK", label: "Sri Lanka" },
+  { value: "SD", label: "Sudan" },
+  { value: "SR", label: "Suriname" },
+  { value: "SJ", label: "Svalbard and Jan Mayen" },
+  { value: "SZ", label: "Eswatini" },
+  { value: "SE", label: "Sweden" },
+  { value: "CH", label: "Switzerland" },
+  { value: "SY", label: "Syria" },
+  { value: "TW", label: "Taiwan" },
+  { value: "TJ", label: "Tajikistan" },
+  { value: "TZ", label: "Tanzania" },
+  { value: "TH", label: "Thailand" },
+  { value: "TL", label: "Timor-Leste" },
+  { value: "TG", label: "Togo" },
+  { value: "TK", label: "Tokelau" },
+  { value: "TO", label: "Tonga" },
+  { value: "TT", label: "Trinidad and Tobago" },
+  { value: "TN", label: "Tunisia" },
+  { value: "TR", label: "Turkey" },
+  { value: "TM", label: "Turkmenistan" },
+  { value: "TC", label: "Turks and Caicos Islands" },
+  { value: "TV", label: "Tuvalu" },
+  { value: "UG", label: "Uganda" },
+  { value: "UA", label: "Ukraine" },
+  { value: "AE", label: "United Arab Emirates" },
+  { value: "GB", label: "United Kingdom" },
+  { value: "US", label: "United States" },
+  { value: "UM", label: "U.S. Minor Outlying Islands" },
+  { value: "UY", label: "Uruguay" },
+  { value: "UZ", label: "Uzbekistan" },
+  { value: "VU", label: "Vanuatu" },
+  { value: "VE", label: "Venezuela" },
+  { value: "VN", label: "Vietnam" },
+  { value: "VG", label: "Virgin Islands, British" },
+  { value: "VI", label: "Virgin Islands, U.S." },
+  { value: "WF", label: "Wallis and Futuna" },
+  { value: "EH", label: "Western Sahara" },
+  { value: "YE", label: "Yemen" },
+  { value: "ZM", label: "Zambia" },
+  { value: "ZW", label: "Zimbabwe" }
+];
+var US_STATES = [
+  { value: "AL", label: "Alabama" },
+  { value: "AK", label: "Alaska" },
+  { value: "AZ", label: "Arizona" },
+  { value: "AR", label: "Arkansas" },
+  { value: "CA", label: "California" },
+  { value: "CO", label: "Colorado" },
+  { value: "CT", label: "Connecticut" },
+  { value: "DE", label: "Delaware" },
+  { value: "FL", label: "Florida" },
+  { value: "GA", label: "Georgia" },
+  { value: "HI", label: "Hawaii" },
+  { value: "ID", label: "Idaho" },
+  { value: "IL", label: "Illinois" },
+  { value: "IN", label: "Indiana" },
+  { value: "IA", label: "Iowa" },
+  { value: "KS", label: "Kansas" },
+  { value: "KY", label: "Kentucky" },
+  { value: "LA", label: "Louisiana" },
+  { value: "ME", label: "Maine" },
+  { value: "MD", label: "Maryland" },
+  { value: "MA", label: "Massachusetts" },
+  { value: "MI", label: "Michigan" },
+  { value: "MN", label: "Minnesota" },
+  { value: "MS", label: "Mississippi" },
+  { value: "MO", label: "Missouri" },
+  { value: "MT", label: "Montana" },
+  { value: "NE", label: "Nebraska" },
+  { value: "NV", label: "Nevada" },
+  { value: "NH", label: "New Hampshire" },
+  { value: "NJ", label: "New Jersey" },
+  { value: "NM", label: "New Mexico" },
+  { value: "NY", label: "New York" },
+  { value: "NC", label: "North Carolina" },
+  { value: "ND", label: "North Dakota" },
+  { value: "OH", label: "Ohio" },
+  { value: "OK", label: "Oklahoma" },
+  { value: "OR", label: "Oregon" },
+  { value: "PA", label: "Pennsylvania" },
+  { value: "RI", label: "Rhode Island" },
+  { value: "SC", label: "South Carolina" },
+  { value: "SD", label: "South Dakota" },
+  { value: "TN", label: "Tennessee" },
+  { value: "TX", label: "Texas" },
+  { value: "UT", label: "Utah" },
+  { value: "VT", label: "Vermont" },
+  { value: "VA", label: "Virginia" },
+  { value: "WA", label: "Washington" },
+  { value: "WV", label: "West Virginia" },
+  { value: "WI", label: "Wisconsin" },
+  { value: "WY", label: "Wyoming" },
+  { value: "DC", label: "District of Columbia" }
+];
+
+// src/components/FormRenderer/index.tsx
+function toSubmissionData(values) {
+  return Object.entries(values).map(([field, value]) => ({
+    field,
+    value: String(value)
+  }));
+}
+function getInitialValues(fields) {
+  var _a, _b;
+  const values = {};
+  if (!fields) return values;
+  for (const field of fields) {
+    if (field.blockType === "message") continue;
+    if (field.blockType === "checkbox") {
+      values[field.name] = (_a = field.defaultValue) != null ? _a : false;
+    } else if (field.blockType === "number" || field.blockType === "text" || field.blockType === "textarea" || field.blockType === "select") {
+      values[field.name] = (_b = field.defaultValue) != null ? _b : "";
+    } else {
+      values[field.name] = "";
+    }
+  }
+  return values;
+}
+function FormRenderer({
+  form,
+  onSubmit,
+  className,
+  fieldClassName,
+  buttonClassName,
+  renderField,
+  renderMessage,
+  renderButton
+}) {
+  var _a;
+  const [values, setValues] = (0, import_react3.useState)(
+    () => getInitialValues(form.fields)
+  );
+  const [isSubmitting, setIsSubmitting] = (0, import_react3.useState)(false);
+  const submittingRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    setValues(getInitialValues(form.fields));
+  }, [form.id]);
+  const handleChange = (0, import_react3.useCallback)(
+    (name, value) => {
+      setValues((prev) => __spreadProps(__spreadValues({}, prev), { [name]: value }));
+    },
+    []
+  );
+  const handleSubmit = (e) => __async(null, null, function* () {
+    e.preventDefault();
+    if (submittingRef.current) return;
+    submittingRef.current = true;
+    setIsSubmitting(true);
+    try {
+      yield onSubmit(values);
+    } finally {
+      submittingRef.current = false;
+      setIsSubmitting(false);
+    }
+  });
+  const wrapField = (field, style, input) => {
+    var _a2, _b;
+    const context = {
+      value: (_a2 = values[field.name]) != null ? _a2 : "",
+      onChange: (v) => handleChange(field.name, v)
+    };
+    const el = /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        key: (_b = field.id) != null ? _b : field.name,
+        className: fieldClassName,
+        style
+      },
+      field.label && /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, field.label),
+      input
+    );
+    return renderField ? renderField(field, context, el) : el;
+  };
+  const renderSelectField = (field, style, options, placeholder) => {
+    var _a2, _b;
+    return wrapField(
+      field,
+      style,
+      /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          id: field.name,
+          name: field.name,
+          value: String((_a2 = values[field.name]) != null ? _a2 : ""),
+          required: (_b = field.required) != null ? _b : false,
+          onChange: (e) => handleChange(field.name, e.target.value)
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, placeholder || "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ import_react3.default.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+      )
+    );
+  };
+  const renderFieldElement = (field) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    const style = field.blockType !== "message" && field.width ? { width: `${field.width}%` } : void 0;
+    switch (field.blockType) {
+      case "text":
+        return wrapField(
+          field,
+          style,
+          /* @__PURE__ */ import_react3.default.createElement(
+            "input",
+            {
+              type: "text",
+              id: field.name,
+              name: field.name,
+              value: String((_a2 = values[field.name]) != null ? _a2 : ""),
+              placeholder: (_b = field.placeholder) != null ? _b : void 0,
+              required: (_c = field.required) != null ? _c : false,
+              onChange: (e) => handleChange(field.name, e.target.value)
+            }
+          )
+        );
+      case "email":
+        return wrapField(
+          field,
+          style,
+          /* @__PURE__ */ import_react3.default.createElement(
+            "input",
+            {
+              type: "email",
+              id: field.name,
+              name: field.name,
+              value: String((_d = values[field.name]) != null ? _d : ""),
+              required: (_e = field.required) != null ? _e : false,
+              onChange: (e) => handleChange(field.name, e.target.value)
+            }
+          )
+        );
+      case "number":
+        return wrapField(
+          field,
+          style,
+          /* @__PURE__ */ import_react3.default.createElement(
+            "input",
+            {
+              type: "number",
+              id: field.name,
+              name: field.name,
+              value: String((_f = values[field.name]) != null ? _f : ""),
+              required: (_g = field.required) != null ? _g : false,
+              onChange: (e) => {
+                const v = e.target.value;
+                if (v === "") return handleChange(field.name, "");
+                const n = Number(v);
+                if (Number.isFinite(n)) handleChange(field.name, n);
+              }
+            }
+          )
+        );
+      case "textarea":
+        return wrapField(
+          field,
+          style,
+          /* @__PURE__ */ import_react3.default.createElement(
+            "textarea",
+            {
+              id: field.name,
+              name: field.name,
+              value: String((_h = values[field.name]) != null ? _h : ""),
+              required: (_i = field.required) != null ? _i : false,
+              onChange: (e) => handleChange(field.name, e.target.value)
+            }
+          )
+        );
+      case "checkbox": {
+        const context = {
+          value: (_j = values[field.name]) != null ? _j : false,
+          onChange: (v) => handleChange(field.name, v)
+        };
+        const el = /* @__PURE__ */ import_react3.default.createElement(
+          "div",
+          {
+            key: (_k = field.id) != null ? _k : field.name,
+            className: fieldClassName,
+            style
+          },
+          /* @__PURE__ */ import_react3.default.createElement("label", { htmlFor: field.name }, /* @__PURE__ */ import_react3.default.createElement(
+            "input",
+            {
+              type: "checkbox",
+              id: field.name,
+              name: field.name,
+              checked: Boolean(values[field.name]),
+              required: (_l = field.required) != null ? _l : false,
+              onChange: (e) => handleChange(field.name, e.target.checked)
+            }
+          ), field.label && /* @__PURE__ */ import_react3.default.createElement("span", null, field.label))
+        );
+        return renderField ? renderField(field, context, el) : el;
+      }
+      case "select":
+        return renderSelectField(
+          field,
+          style,
+          (_m = field.options) != null ? _m : [],
+          (_n = field.placeholder) != null ? _n : void 0
+        );
+      case "country":
+        return renderSelectField(field, style, COUNTRIES);
+      case "state":
+        return renderSelectField(field, style, US_STATES);
+      case "message":
+        if (renderMessage && field.message) {
+          return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, { key: (_p = (_o = field.id) != null ? _o : field.blockName) != null ? _p : "message" }, renderMessage(field.message));
+        }
+        return null;
+      default:
+        return null;
+    }
+  };
+  const buttonLabel = form.submitButtonLabel || "Submit";
+  return /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleSubmit, className }, (_a = form.fields) == null ? void 0 : _a.map((field) => renderFieldElement(field)), renderButton ? renderButton({ isSubmitting, label: buttonLabel }) : /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: isSubmitting,
+      className: buttonClassName
+    },
+    buttonLabel
+  ));
+}
+
+// src/components/Image/index.tsx
+var import_react4 = require("react");
+
+// src/utils/image.ts
+var IMAGE_SIZES = [384, 768, 1536];
+function getImageSrcSet(image) {
+  const parts = [];
+  const sizes = image.sizes;
+  if (sizes) {
+    for (const size of IMAGE_SIZES) {
+      const entry = sizes[String(size)];
+      if ((entry == null ? void 0 : entry.url) && entry.width) {
+        parts.push(`${entry.url} ${entry.width}w`);
+      }
+    }
+  }
+  if (image.url && image.width) {
+    parts.push(`${image.url} ${image.width}w`);
+  }
+  return parts.join(", ");
+}
+function getImagePlaceholderStyle(image, options) {
+  var _a, _b, _c;
+  const type = (_a = options == null ? void 0 : options.type) != null ? _a : "blur";
+  const paletteColor = (_b = options == null ? void 0 : options.paletteColor) != null ? _b : "muted";
+  if (type === "none") return {};
+  const color = (_c = image.palette) == null ? void 0 : _c[paletteColor];
+  if (type === "blur") {
+    const lqip = image.lqip;
+    if (lqip) {
+      return {
+        backgroundImage: `url(${lqip})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      };
+    }
+    if (color) {
+      return { backgroundColor: color };
+    }
+    return {};
+  }
+  if (color) {
+    return { backgroundColor: color };
+  }
+  return {};
+}
+
+// src/components/Image/index.tsx
+function Image({
+  image,
+  width,
+  dpr = 1,
+  placeholder = "blur",
+  className,
+  style,
+  imgClassName,
+  imgStyle,
+  sizes,
+  loading = "lazy",
+  onLoad,
+  objectFit = "cover"
+}) {
+  var _a, _b;
+  const [loaded, setLoaded] = (0, import_react4.useState)(false);
+  const aspectRatio = image.width && image.height ? `${image.width} / ${image.height}` : void 0;
+  const srcSet = getImageSrcSet(image);
+  const src = (_a = image.url) != null ? _a : void 0;
+  const placeholderStyle = getImagePlaceholderStyle(image, {
+    type: placeholder
+  });
+  const hasLqip = placeholder === "blur" && !!image.lqip;
+  const hasColorPlaceholder = !hasLqip && Object.keys(placeholderStyle).length > 0;
+  const imgRef = (0, import_react4.useCallback)(
+    (node) => {
+      if (node && node.complete && node.naturalWidth > 0) {
+        setLoaded(true);
+        onLoad == null ? void 0 : onLoad();
+      }
+    },
+    [onLoad]
+  );
+  const handleLoad = (0, import_react4.useCallback)(() => {
+    setLoaded(true);
+    onLoad == null ? void 0 : onLoad();
+  }, [onLoad]);
+  const containerStyle = __spreadValues(__spreadValues(__spreadValues({
+    position: "relative",
+    overflow: "hidden"
+  }, aspectRatio ? { aspectRatio } : {}), hasColorPlaceholder ? placeholderStyle : {}), style);
+  const imgBase = {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit
+  };
+  const mainImgStyle = __spreadValues(__spreadProps(__spreadValues({}, imgBase), {
+    opacity: loaded ? 1 : 0,
+    transition: "opacity 0.3s ease"
+  }), imgStyle);
+  const lqipStyle = __spreadProps(__spreadValues({}, imgBase), {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    filter: "blur(20px)",
+    transform: "scale(1.1)",
+    opacity: loaded ? 0 : 1,
+    transition: "opacity 0.3s ease",
+    pointerEvents: "none"
+  });
+  return /* @__PURE__ */ React.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      "aria-hidden": true,
+      alt: "",
+      src: image.lqip,
+      style: lqipStyle
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      ref: imgRef,
+      alt: (_b = image.alt) != null ? _b : "",
+      src,
+      srcSet: srcSet || void 0,
+      sizes,
+      width: width ? width * dpr : void 0,
+      loading,
+      onLoad: handleLoad,
+      className: imgClassName,
+      style: mainImgStyle
+    }
+  ));
+}
 //# sourceMappingURL=components.cjs.map