@bynder/compact-view 5.2.1 → 5.2.2

package/FieldSelect.js

@@ -1,12 +1,12 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import t from "styled-components";
-import { token as l } from "@bynder/design-system";
+import t from "./styled-components.browser.esm.js";
+import { token as l } from "./token.js";
 import { Dropdown as f } from "./Dropdown.js";
 import { __ as i } from "./index2.js";
 import { useOrderingByPage as p } from "./useOrderingStore.js";
 import { useRouterSelectors as g } from "./useRouterStore.js";
 import { DropdownListItem as u } from "./DropdownListItem.js";
-function R({ options: e }) {
+function $({ options: e }) {
   const d = g.use.page(), [o, a] = p(d.page), s = {
     CREATED_AT: i("Date added"),
     NAME: i("Name"),
@@ -69,5 +69,5 @@ const S = t.ul`
 	color: ${(e) => e.$isDisabled ? "rgba(0, 34, 51, 0.5)" : "#212c40"};
 `;
 export {
-  R as FieldSelect
+  $ as FieldSelect
 };

package/FilePlaceholder.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+function p({
+  children: o,
+  ...n
+}) {
+  return /* @__PURE__ */ r(t, { ...n, children: /* @__PURE__ */ r(d, { children: o }) });
+}
+const t = i.div.withConfig({
+  displayName: "Placeholder",
+  componentId: "sc-1xjrejg-0"
+})(["display:grid;place-items:center;min-height:100px;"]), d = i.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-1xjrejg-1"
+})(["display:grid;place-items:center;width:60px;height:70px;border-radius:", ";background:", ";color:", ";"], e.brandRadiusBase, e.gray10, e.gray600);
+export {
+  p as FilePlaceholder
+};

package/FileSelector.js

@@ -1,11 +1,12 @@
 import { jsxs as p, jsx as n, Fragment as B } from "react/jsx-runtime";
 import { useState as k, useRef as U, useEffect as I } from "react";
-import a from "styled-components";
-import { IconAspectRatioOutline as E, IconImage as R, IconCrop as j } from "@bynder/icons";
-import { token as o, Badge as N } from "@bynder/design-system";
+import a from "./styled-components.browser.esm.js";
+import { IconCrop as E, IconAspectRatioOutline as R, IconImage as j } from "./index4.js";
+import { Badge as N } from "./Badge.js";
+import { token as o } from "./token.js";
 import "./AssetCard.js";
 import "./AssetList.js";
-import "./Chip.js";
+import "./Chip2.js";
 import { Dropdown as V } from "./Dropdown.js";
 import { DropdownListItem as $ } from "./DropdownListItem.js";
 import "./MetapropertyFilterContent.js";
@@ -25,7 +26,7 @@ import { logger as M } from "./logger.js";
 import { useAuth as q } from "./LoginContext.js";
 import { isErr as G, isOk as J, ok as Q, err as W } from "./result.type.js";
 import { getAsset as X } from "./getAsset.js";
-import { getDefaultKey as Z, getUrlExtension as ee, splitByCamelCase as T, getHumanReadableFileSize as te } from "./utils2.js";
+import { getDefaultKey as Z, getUrlExtension as ee, splitByCamelCase as T, getHumanReadableFileSize as te } from "./utils3.js";
 import { normalizeFilesResponse as ie } from "./normalizeResponse.js";
 import "./Dat.js";
 import { DatDropdownItem as re } from "./DatDropdownItem.js";
@@ -46,7 +47,7 @@ async function ae(s) {
   return W("Error retrieving asset files");
 }
 const A = "Custom transformation", c = "adaptiveVideo";
-function Ze({ asset: s, onChange: m }) {
+function et({ asset: s, onChange: m }) {
   const [i, f] = k({ status: "Loading" }), [v, u] = k(!1), d = U(null), w = q(), { isSelected: S, NLSSearchText: O, isNLSSelected: z } = se(), {
     assetFieldSelection: b,
     noCache: F,
@@ -181,7 +182,7 @@ function Ze({ asset: s, onChange: m }) {
 }
 function le({ state: s }) {
   return s.status === "Loading" ? /* @__PURE__ */ n(P, { width: 50 }) : s.status === "Data" ? /* @__PURE__ */ p(ce, { children: [
-    s.key === A && /* @__PURE__ */ n(j, {}),
+    s.key === A && /* @__PURE__ */ n(E, {}),
     T(s.key)
   ] }) : /* @__PURE__ */ n(B, { children: "Error" });
 }
@@ -214,10 +215,10 @@ const de = a.div`
 	border-radius: 5px;
 	background-color: rgba(0, 34, 51, 0.05);
 	margin-right: ${o.spacing4};
-`, pe = a(E)`
+`, pe = a(R)`
 	height: ${o.spacing6};
 	width: ${o.spacing6};
-`, fe = a(R)`
+`, fe = a(j)`
 	height: ${o.spacing6};
 	width: ${o.spacing6};
 `, ue = a.div`
@@ -246,5 +247,5 @@ const de = a.div`
 	z-index: 1000;
 `;
 export {
-  Ze as FileSelector
+  et as FileSelector
 };

package/Flex.js

@@ -0,0 +1,21 @@
+import { jsx as d } from "react/jsx-runtime";
+import l from "./styled-components.browser.esm.js";
+import { token as p } from "./token.js";
+function m({
+  children: t,
+  direction: i = "row",
+  wrap: e = "nowrap",
+  justifyContent: o = "flex-start",
+  alignItems: n = "stretch",
+  gap: r,
+  ...a
+}) {
+  return /* @__PURE__ */ d(s, { $direction: i, $wrap: e, $justifyContent: o, $alignItems: n, $gap: r, ...a, children: t });
+}
+const s = l.div.withConfig({
+  displayName: "FlexStyled",
+  componentId: "sc-1qk7dea-0"
+})(["display:flex;flex-direction:", ";flex-wrap:", ";gap:", ";justify-content:", ";align-items:", ";box-sizing:border-box;width:100%;height:100%;"], (t) => t.$direction, (t) => t.$wrap, (t) => t.$gap ? p[`spacing${t.$gap}`] : void 0, (t) => t.$justifyContent, (t) => t.$alignItems);
+export {
+  m as Flex
+};

package/FontPicker.js

@@ -0,0 +1,104 @@
+import { jsxs as d, Fragment as z, jsx as l } from "react/jsx-runtime";
+import { useId as L, useState as A, useMemo as H, useEffect as v, useCallback as x } from "react";
+import { produce as J } from "./immer.js";
+import { useTranslate as K, Translate as u } from "./index6.js";
+import { Form as b } from "./Form.js";
+import { Select as i } from "./Select.js";
+import { useFonts as O } from "./useFonts.js";
+function Z({
+  familyLabel: C,
+  subfamilyLabel: w,
+  initialFamilyId: M,
+  initialSubfamilyId: j,
+  hideSubfamily: D = !1,
+  onSelectFamily: h,
+  onSelectSubfamily: p,
+  filterOutItalics: G = !1
+}) {
+  const { translate: o } = K(), y = L(), k = L(), N = o("fontmanager.picker.default-family-label"), _ = o("fontmanager.picker.default-subfamily-label"), [g, S] = A(""), {
+    portal: s,
+    global: c,
+    selectedFamily: a,
+    selectedSubfamily: r,
+    setSelectedFamily: T,
+    setSelectedSubfamily: f,
+    searchFonts: F
+  } = O({ initialFamilyId: M, initialSubfamilyId: j, filterOutItalics: G }), I = H(() => new Map(s.concat(c).map((e) => [e.id, e])), [s, c]);
+  v(() => {
+    F(g);
+  }, [g, F]), v(() => {
+    h && a && h(a);
+  }, [a, h]), v(() => {
+    p && r && p(r);
+  }, [r, p]);
+  const B = x(
+    (e) => {
+      var n, t;
+      const m = I.get(e);
+      m && (T(m), (n = m.subfamilies) != null && n[0] && f((t = m.subfamilies) == null ? void 0 : t[0]));
+    },
+    [I, T, f]
+  ), E = x(
+    (e) => {
+      const n = a?.subfamilies.find((t) => t.id === e);
+      n && f(n);
+    },
+    [a, f]
+  );
+  function P() {
+    S("");
+  }
+  const q = J(a?.subfamilies || [], (e) => {
+    e.sort((n, t) => Number(n.weight) - Number(t.weight));
+  });
+  return /* @__PURE__ */ d(z, { children: [
+    /* @__PURE__ */ d(b.Group, { children: [
+      /* @__PURE__ */ l(b.Label, { id: y, children: C ?? N }),
+      /* @__PURE__ */ d(
+        i,
+        {
+          "aria-labelledby": y,
+          label: a?.name,
+          onChange: B,
+          value: a?.id || "",
+          children: [
+            /* @__PURE__ */ l(
+              i.SearchInput,
+              {
+                value: g,
+                onChange: S,
+                onBlur: P,
+                placeholder: o("fontmanager.picker.fonts.placeholder-search"),
+                "aria-label": o("fontmanager.picker.fonts.aria-label-search")
+              }
+            ),
+            /* @__PURE__ */ l(i.SectionTitle, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.uploaded-fonts" }) }),
+            s.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e)),
+            s.length === 0 && /* @__PURE__ */ l(i.Text, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.no-fonts" }) }),
+            /* @__PURE__ */ l(i.Divider, {}),
+            /* @__PURE__ */ l(i.SectionTitle, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.available-fonts" }) }),
+            c.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e)),
+            c.length === 0 && /* @__PURE__ */ l(i.Text, { children: /* @__PURE__ */ l(u, { id: "fontmanager.picker.fonts.no-fonts" }) })
+          ]
+        }
+      )
+    ] }),
+    !D && /* @__PURE__ */ d(b.Group, { children: [
+      /* @__PURE__ */ l(b.Label, { id: k, children: w ?? _ }),
+      /* @__PURE__ */ l(
+        i,
+        {
+          "aria-labelledby": k,
+          label: r?.name,
+          onChange: E,
+          value: r?.id || "",
+          isDisabled: a?.subfamilies.length === 0,
+          children: q.map(({ id: e, name: n }) => /* @__PURE__ */ l(i.Item, { value: e, children: n }, e))
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Z as FontPicker
+};

package/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "./styled-components.browser.esm.js";
+import { token as o } from "./token.js";
+function m({
+  children: r,
+  ...i
+}) {
+  return /* @__PURE__ */ t(a, { ...i, children: r });
+}
+const a = n.div.withConfig({
+  displayName: "FooterContainer",
+  componentId: "sc-109ca6m-0"
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(40%,1fr));gap:", ";box-sizing:border-box;padding:", " ", ";border-top:1px solid ", ";background-color:", ";"], o.spacing4, o.spacing5, o.spacing6, o.gray100a, o.white);
+export {
+  m as Footer
+};

package/Form.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconError as e } from "./index4.js";
+import { Group as f } from "./Group.js";
+import { HelperText as i } from "./HelperText.js";
+import { Label as n } from "./Label.js";
+import { Row as u } from "./Row.js";
+import { InputRow as l } from "./InputRow.js";
+function r({
+  children: o,
+  onSubmit: m,
+  ...p
+}) {
+  return /* @__PURE__ */ t("form", { onSubmit: m, ...p, children: o });
+}
+r.Group = f;
+r.HelperText = i;
+r.Label = n;
+r.Row = u;
+r.InputRow = l;
+r.IconError = e;
+export {
+  r as Form
+};

package/FormData.js

@@ -0,0 +1,4 @@
+const a = typeof FormData < "u" ? FormData : null;
+export {
+  a as default
+};

package/Frame.js

@@ -0,0 +1,64 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import o, { css as d } from "./styled-components.browser.esm.js";
+import { Badge as m } from "./Badge.js";
+import { token as r } from "./token.js";
+import { useCardContext as g } from "./context.js";
+function S({
+  children: e,
+  progressBar: n,
+  badge: t,
+  icon: c,
+  isCheckeredBackground: p = !1,
+  height: s = "fixed",
+  ...h
+}) {
+  const {
+    variant: l,
+    isSelected: f
+  } = g();
+  return /* @__PURE__ */ a(v, { $isCheckeredBackground: p, $height: s, ...h, children: [
+    l === "clean" && f && /* @__PURE__ */ i(b, {}),
+    /* @__PURE__ */ i(u, { $height: s, children: e }),
+    /* @__PURE__ */ i(C, {}),
+    /* @__PURE__ */ a(w, { children: [
+      /* @__PURE__ */ a(x, { children: [
+        c ? /* @__PURE__ */ i(k, { children: c }) : null,
+        t ? /* @__PURE__ */ i(y, { children: typeof t == "string" ? /* @__PURE__ */ i(m, { color: "black-alpha", children: t }) : t }) : null
+      ] }),
+      n ? /* @__PURE__ */ i(F, { $variant: l, children: n }) : null
+    ] })
+  ] });
+}
+const v = o.div.withConfig({
+  displayName: "FrameStyled",
+  componentId: "sc-13dpc3f-0"
+})(["position:relative;min-height:92px;border-radius:var(--card-frame-border-radius);background:", ";", ""], (e) => e.$isCheckeredBackground ? `url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Crect height='12' width='12' y='0' x='0' fill='%23ffffff'/%3E%3Crect height='6' width='6' y='0' x='0' fill='%23e9ecee'/%3E%3Crect height='6' width='6' y='6' x='6' fill='%23e9ecee'/%3E%3C/svg%3E%0A") ` : r.gray25, (e) => e.$height === "fixed" && d(["&::before{content:'';display:inline-block;vertical-align:top;width:0;height:0;padding-bottom:calc(100% / (16 / 10));}"])), b = o.div.withConfig({
+  displayName: "FocusRing",
+  componentId: "sc-13dpc3f-1"
+})(["position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:var(--card-selected-border-width) solid var(--card-selected-border-color);border-radius:calc(var(--card-border-radius) + 4px);"]), u = o.div.withConfig({
+  displayName: "Children",
+  componentId: "sc-13dpc3f-2"
+})(["", " display:grid;overflow:hidden;border-radius:var(--card-frame-border-radius);"], (e) => e.$height === "fixed" && d(["position:absolute;inset:0;"])), C = o.div.withConfig({
+  displayName: "Overlay",
+  componentId: "sc-13dpc3f-3"
+})(["position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border:var(--card-inner-border-width) solid var(--card-inner-border-color);border-bottom-width:var(--card-frame-border-bottom-width);border-radius:var(--card-frame-border-radius);background:var(--card-frame-overlay-color);"]), w = o.div.withConfig({
+  displayName: "FrameFooter",
+  componentId: "sc-13dpc3f-4"
+})(["position:absolute;right:0;bottom:", ";left:0;display:flex;flex-direction:column;gap:", ";"], r.spacing4, r.spacing3), x = o.div.withConfig({
+  displayName: "FrameFooterContent",
+  componentId: "sc-13dpc3f-5"
+})(["display:flex;padding:0 ", ";"], r.spacing4), y = o.div.withConfig({
+  displayName: "BadgeContainer",
+  componentId: "sc-13dpc3f-6"
+})(["margin-left:auto;"]), k = o.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-13dpc3f-7"
+})(["color:", ";path{stroke:", ";stroke-width:2px;paint-order:stroke;&[d='M0 0h24v24H0z']{stroke:none;}}"], r.white, r.gray100a), F = o.div.withConfig({
+  displayName: "ProgressContainer",
+  componentId: "sc-13dpc3f-8"
+})(["", ""], ({
+  $variant: e
+}) => e === "clean" ? d(["position:relative;padding:0 ", ";"], r.spacing4) : d(["position:absolute;right:0;bottom:calc(", " * -1);left:0;"], r.spacing4));
+export {
+  S as Frame
+};

package/Group.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import p from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { GroupContext as n } from "./useGroupContext.js";
+function a({
+  children: r,
+  ...t
+}) {
+  return /* @__PURE__ */ o(n.Provider, { value: "group", children: /* @__PURE__ */ o(e, { ...t, children: r }) });
+}
+const e = p.div.withConfig({
+  displayName: "GroupStyled",
+  componentId: "sc-1gmxpcl-0"
+})(["margin:0;padding:", " 0;border:0;"], i.spacing3);
+export {
+  a as Group
+};

package/Group2.js

@@ -0,0 +1,26 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import c from "./styled-components.browser.esm.js";
+import { token as e } from "./token.js";
+import { useId as a } from "./useId.js";
+function u({
+  title: n,
+  action: t,
+  children: d,
+  ...s
+}) {
+  const i = a("list-group-header");
+  return /* @__PURE__ */ r("div", { ...s, children: [
+    /* @__PURE__ */ r(p, { children: [
+      /* @__PURE__ */ o("span", { id: i, children: n }),
+      t
+    ] }),
+    /* @__PURE__ */ o("div", { "aria-describedby": i, children: d })
+  ] });
+}
+const p = c.div.withConfig({
+  displayName: "Header",
+  componentId: "sc-g7ra3w-0"
+})(["display:flex;justify-content:space-between;align-items:center;padding:", " 0 ", ";color:", ";"], e.spacing3, e.spacing2, e.colorText);
+export {
+  u as Group
+};

package/Header2.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { TruncatedText as l } from "./TruncatedText.js";
+import { textStyles as c } from "./textStyles.js";
+import { token as t } from "./token.js";
+import { useCardContext as g } from "./context.js";
+function N({
+  thumbnail: n,
+  title: e,
+  detail: o,
+  icon: a,
+  isNotTruncated: d = !1,
+  ...m
+}) {
+  const {
+    cardTitleId: s
+  } = g();
+  return /* @__PURE__ */ p(h, { ...m, children: [
+    n ? /* @__PURE__ */ i(f, { children: n }) : null,
+    /* @__PURE__ */ i(u, { id: s, children: d ? e : /* @__PURE__ */ i(l, { children: e }) }),
+    o ? /* @__PURE__ */ i(w, { children: d ? o : /* @__PURE__ */ i(l, { children: o }) }) : null,
+    a ? /* @__PURE__ */ i(x, { children: a }) : null
+  ] });
+}
+const h = r.div.withConfig({
+  displayName: "HeaderStyled",
+  componentId: "sc-1o0trsi-0"
+})(["display:grid;grid-template-areas:'thumbnail title icon' 'thumbnail detail icon';grid-template-columns:auto 1fr auto;padding:var(--card-content-padding);"]), f = r.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-1o0trsi-1"
+})(["grid-area:thumbnail;margin-top:2px;margin-right:", ";"], t.spacing4), u = r.div.withConfig({
+  displayName: "Title",
+  componentId: "sc-1o0trsi-2"
+})(["", " grid-area:title;min-width:0;color:", ";overflow-wrap:break-word;"], c.uiTextM, t.colorText), w = r.div.withConfig({
+  displayName: "Detail",
+  componentId: "sc-1o0trsi-3"
+})(["", " grid-area:detail;min-width:0;margin-top:", ";color:", ";overflow-wrap:break-word;"], c.uiTextS, t.spacing2, t.colorTextMuted), x = r.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-1o0trsi-4"
+})(["z-index:2;display:grid;grid-area:icon;align-items:center;margin-left:", ";color:", ";"], t.spacing2, t.gray600);
+export {
+  N as Header
+};

package/Header22.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Box as m } from "./Box.js";
+import { Item as c } from "./Item.js";
+function x({
+  rightElements: r,
+  subtext: o,
+  thumbnail: d,
+  title: n,
+  ...p
+}) {
+  return /* @__PURE__ */ i(m, { paddingBlock: "3", paddingInline: "6", ...p, children: (r || o || d || n) && /* @__PURE__ */ i(c, { thumbnail: d, rightElements: r, subtext: o, children: n }) });
+}
+export {
+  x as Header
+};

package/HelperText.js

@@ -0,0 +1,26 @@
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import o from "./styled-components.browser.esm.js";
+import { textStyles as s } from "./textStyles.js";
+import { token as t } from "./token.js";
+import { useGroupParent as a } from "./useGroupContext.js";
+function h({
+  icon: e,
+  isInvalid: n,
+  children: i,
+  ...r
+}) {
+  return a("HelperText"), /* @__PURE__ */ p(d, { $isInvalid: n, $hasIcon: !!e, ...r, children: [
+    e && /* @__PURE__ */ l(m, { children: e }),
+    i
+  ] });
+}
+const d = o.div.withConfig({
+  displayName: "HelperTextStyled",
+  componentId: "sc-16g18nz-0"
+})(["", " display:flex;align-items:center;margin-top:", ";padding-top:", ";color:", ";"], s.uiTextS, t.spacing2, (e) => e.$hasIcon ? "2px" : "0", (e) => e.$isInvalid ? t.red500 : t.colorTextMuted), m = o.div.withConfig({
+  displayName: "Icon",
+  componentId: "sc-16g18nz-1"
+})(["flex:none;align-self:flex-start;margin-top:-2px;margin-right:", ";"], t.spacing2);
+export {
+  h as HelperText
+};

package/HorizontalScroll.js

@@ -1,11 +1,11 @@
 import { jsxs as x, jsx as n } from "react/jsx-runtime";
 import { useState as g, useRef as b, useEffect as f } from "react";
-import { styled as d } from "styled-components";
-import { token as h } from "@bynder/design-system";
+import d from "./styled-components.browser.esm.js";
+import { token as h } from "./token.js";
 import { useDimensions as p } from "./useDimensions.js";
 import { RightArrow as A } from "./RightArrow.js";
 import { LeftArrow as $ } from "./LeftArrow.js";
-function W(r) {
+function j(r) {
   const [e, c] = g(0), t = b(null), { dimensions: s, remeasure: m } = p(t.current), o = t.current !== null ? t.current.scrollWidth - t.current.clientWidth : 0, l = s !== void 0 ? Math.ceil(s.width) < s.scrollWidth : !1;
   f(() => {
     m(t.current);
@@ -46,5 +46,5 @@ const z = d.div`
 	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.15);
 `;
 export {
-  W as HorizontalScroll
+  j as HorizontalScroll
 };

package/HttpHandler.js

@@ -0,0 +1,74 @@
+import { devUtils as n } from "./devUtils.js";
+import { isStringEqual as i } from "./isStringEqual.js";
+import { getStatusCodeColor as c } from "./getStatusCodeColor.js";
+import { getTimestamp as u } from "./getTimestamp.js";
+import { serializeRequest as m } from "./serializeRequest.js";
+import { serializeResponse as l } from "./serializeResponse.js";
+import { matchRequestUrl as h } from "./matchRequestUrl.js";
+import { toPublicUrl as p } from "./toPublicUrl.js";
+import { getAllRequestCookies as d } from "./getRequestCookies.js";
+import { cleanUrl as f, getSearchParams as R } from "./cleanUrl.js";
+import { RequestHandler as q } from "./RequestHandler.js";
+var g = /* @__PURE__ */ ((t) => (t.HEAD = "HEAD", t.GET = "GET", t.POST = "POST", t.PUT = "PUT", t.PATCH = "PATCH", t.OPTIONS = "OPTIONS", t.DELETE = "DELETE", t))(g || {});
+class A extends q {
+  constructor(e, r, o, s) {
+    super({
+      info: {
+        header: `${e} ${r}`,
+        path: r,
+        method: e
+      },
+      resolver: o,
+      options: s
+    }), this.checkRedundantQueryParameters();
+  }
+  checkRedundantQueryParameters() {
+    const { method: e, path: r } = this.info;
+    if (r instanceof RegExp || f(r) === r)
+      return;
+    R(r).forEach((a, P) => {
+    }), n.warn(
+      `Found a redundant usage of query parameters in the request handler URL for "${e} ${r}". Please match against a path instead and access query parameters using "new URL(request.url).searchParams" instead. Learn more: https://mswjs.io/docs/recipes/query-parameters`
+    );
+  }
+  async parse(e) {
+    var r;
+    const o = new URL(e.request.url), s = h(
+      o,
+      this.info.path,
+      (r = e.resolutionContext) == null ? void 0 : r.baseUrl
+    ), a = d(e.request);
+    return {
+      match: s,
+      cookies: a
+    };
+  }
+  predicate(e) {
+    const r = this.matchMethod(e.request.method), o = e.parsedResult.match.matches;
+    return r && o;
+  }
+  matchMethod(e) {
+    return this.info.method instanceof RegExp ? this.info.method.test(e) : i(this.info.method, e);
+  }
+  extendResolverArgs(e) {
+    var r;
+    return {
+      params: ((r = e.parsedResult.match) == null ? void 0 : r.params) || {},
+      cookies: e.parsedResult.cookies
+    };
+  }
+  async log(e) {
+    const r = p(e.request.url), o = await m(e.request), s = await l(e.response), a = c(s.status);
+    console.groupCollapsed(
+      n.formatMessage(
+        `${u()} ${e.request.method} ${r} (%c${s.status} ${s.statusText}%c)`
+      ),
+      `color:${a}`,
+      "color:inherit"
+    ), console.log("Request", o), console.log("Handler:", this), console.log("Response", s), console.groupEnd();
+  }
+}
+export {
+  A as HttpHandler,
+  g as HttpMethods
+};

package/HttpResponse.js

@@ -0,0 +1,85 @@
+import { normalizeResponseInit as s, decorateResponse as a } from "./decorators.js";
+class r extends Response {
+  constructor(t, n) {
+    const e = s(n);
+    super(t, e), a(this, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "text/plain"` body.
+   * @example
+   * HttpResponse.text('hello world')
+   * HttpResponse.text('Error', { status: 500 })
+   */
+  static text(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/plain"), e.headers.has("Content-Length") || e.headers.set(
+      "Content-Length",
+      t ? new Blob([t]).size.toString() : "0"
+    ), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "application/json"` body.
+   * @example
+   * HttpResponse.json({ firstName: 'John' })
+   * HttpResponse.json({ error: 'Not Authorized' }, { status: 401 })
+   */
+  static json(t, n) {
+    const e = s(n);
+    e.headers.has("Content-Type") || e.headers.set("Content-Type", "application/json");
+    const o = JSON.stringify(t);
+    return e.headers.has("Content-Length") || e.headers.set(
+      "Content-Length",
+      o ? new Blob([o]).size.toString() : "0"
+    ), new r(
+      o,
+      e
+    );
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "application/xml"` body.
+   * @example
+   * HttpResponse.xml(`<user name="John" />`)
+   * HttpResponse.xml(`<article id="abc-123" />`, { status: 201 })
+   */
+  static xml(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/xml"), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `Content-Type: "text/html"` body.
+   * @example
+   * HttpResponse.html(`<p class="author">Jane Doe</p>`)
+   * HttpResponse.html(`<main id="abc-123">Main text</main>`, { status: 201 })
+   */
+  static html(t, n) {
+    const e = s(n);
+    return e.headers.has("Content-Type") || e.headers.set("Content-Type", "text/html"), new r(t, e);
+  }
+  /**
+   * Create a `Response` with an `ArrayBuffer` body.
+   * @example
+   * const buffer = new ArrayBuffer(3)
+   * const view = new Uint8Array(buffer)
+   * view.set([1, 2, 3])
+   *
+   * HttpResponse.arrayBuffer(buffer)
+   */
+  static arrayBuffer(t, n) {
+    const e = s(n);
+    return t && !e.headers.has("Content-Length") && e.headers.set("Content-Length", t.byteLength.toString()), new r(t, e);
+  }
+  /**
+   * Create a `Response` with a `FormData` body.
+   * @example
+   * const data = new FormData()
+   * data.set('name', 'Alice')
+   *
+   * HttpResponse.formData(data)
+   */
+  static formData(t, n) {
+    return new r(t, s(n));
+  }
+}
+export {
+  r as HttpResponse
+};