@photoroom/ui 0.1.285 → 0.1.287

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.mjs CHANGED
@@ -47917,56 +47917,63 @@ var C3 = ({ icon: e, className: n, ref: r, ...i }) => /* @__PURE__ */ t("button"
47917
47917
  C3.displayName = "ImageWidgetButton";
47918
47918
  //#endregion
47919
47919
  //#region src/components/input/ImageWidget/ImageWidget.tsx
47920
- var w3 = .5, T3 = 2, efe = 80, tfe = 80, E3 = ({ src: e, alt: r, width: i = tfe, height: a = efe, flexibleWidth: o = !1, fill: s = !1, isLoading: c = !1, selected: l = !1, disabled: u = !1, buttonIcon: d, onButtonClick: f, buttonLabel: p, className: m, imgClassName: h, ref: g }) => {
47921
- let [_, v] = Me(null), y = B((e) => {
47920
+ var w3 = .5, T3 = 2, efe = 80, tfe = 80, E3 = ({ src: e, alt: r, width: i = tfe, height: a = efe, flexibleWidth: o = !1, fill: s = !1, isLoading: c = !1, selected: l = !1, disabled: u = !1, buttonIcon: d, onButtonClick: f, buttonLabel: p, leadingBottom: m, className: h, imgClassName: g, ref: _ }) => {
47921
+ let [v, y] = Me(null), b = B((e) => {
47922
47922
  let t = e.currentTarget;
47923
- t.naturalWidth && t.naturalHeight && v(t.naturalWidth / t.naturalHeight);
47924
- }, []), { width: b, height: x, isClamped: S } = Ae(() => o && _ !== null ? {
47925
- width: Math.round(a * Math.min(T3, Math.max(w3, _))),
47923
+ t.naturalWidth && t.naturalHeight && y(t.naturalWidth / t.naturalHeight);
47924
+ }, []), { width: x, height: S, isClamped: C } = Ae(() => o && v !== null ? {
47925
+ width: Math.round(a * Math.min(T3, Math.max(w3, v))),
47926
47926
  height: a,
47927
- isClamped: _ < w3 || _ > T3
47927
+ isClamped: v < w3 || v > T3
47928
47928
  } : {
47929
47929
  width: i,
47930
47930
  height: a,
47931
47931
  isClamped: !1
47932
47932
  }, [
47933
47933
  o,
47934
- _,
47934
+ v,
47935
47935
  a,
47936
47936
  i
47937
- ]), C = !c && d && f;
47937
+ ]), w = !c && d && f, T = !c && !!m;
47938
47938
  return /* @__PURE__ */ n("div", {
47939
- ref: g,
47940
- className: U("group", s ? "absolute inset-0" : "relative shrink-0", m),
47939
+ ref: _,
47940
+ className: U("group", s ? "absolute inset-0" : "relative shrink-0", h),
47941
47941
  style: s ? void 0 : {
47942
- width: b,
47943
- height: x
47942
+ width: x,
47943
+ height: S
47944
47944
  },
47945
- children: [/* @__PURE__ */ n("div", {
47946
- className: H("rounded-400 bg-surface-default relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", l ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
47947
- children: [c ? /* @__PURE__ */ t("div", {
47948
- className: "flex h-full w-full items-center justify-center",
47949
- children: /* @__PURE__ */ t(tG, { className: "size-6" })
47950
- }) : /* @__PURE__ */ t("img", {
47951
- src: e,
47952
- alt: r,
47953
- className: U("h-full w-full", S ? "object-contain" : "object-cover", h),
47954
- onLoad: o ? y : void 0
47955
- }), !u && /* @__PURE__ */ t("div", { className: "rounded-400 interaction-transition group-hover:bg-misc-visual-hover group-active:bg-misc-visual-down absolute inset-0 transition-colors" })]
47956
- }), C && /* @__PURE__ */ t("div", {
47957
- className: "absolute inset-e-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
47958
- children: /* @__PURE__ */ t(vs, {
47959
- content: p,
47960
- side: "top",
47961
- children: /* @__PURE__ */ t(C3, {
47962
- icon: d,
47963
- onClick: (e) => {
47964
- e.stopPropagation(), f();
47965
- },
47966
- "aria-label": p
47945
+ children: [
47946
+ /* @__PURE__ */ n("div", {
47947
+ className: H("rounded-400 bg-surface-default relative h-full w-full overflow-hidden", "after:rounded-400 after:pointer-events-none after:absolute after:inset-0 after:content-['']", l ? "after:shadow-[inset_0_0_0_2px_var(--color-content-accent)]" : "after:shadow-[inset_0_0_0_1px_var(--color-misc-border)]"),
47948
+ children: [c ? /* @__PURE__ */ t("div", {
47949
+ className: "flex h-full w-full items-center justify-center",
47950
+ children: /* @__PURE__ */ t(tG, { className: "size-6" })
47951
+ }) : /* @__PURE__ */ t("img", {
47952
+ src: e,
47953
+ alt: r,
47954
+ className: U("h-full w-full", C ? "object-contain" : "object-cover", g),
47955
+ onLoad: o ? b : void 0
47956
+ }), !u && /* @__PURE__ */ t("div", { className: "rounded-400 interaction-transition group-hover:bg-misc-visual-hover group-active:bg-misc-visual-down absolute inset-0 transition-colors" })]
47957
+ }),
47958
+ w && /* @__PURE__ */ t("div", {
47959
+ className: "absolute inset-e-1 top-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100",
47960
+ children: /* @__PURE__ */ t(vs, {
47961
+ content: p,
47962
+ side: "top",
47963
+ children: /* @__PURE__ */ t(C3, {
47964
+ icon: d,
47965
+ onClick: (e) => {
47966
+ e.stopPropagation(), f();
47967
+ },
47968
+ "aria-label": p
47969
+ })
47967
47970
  })
47971
+ }),
47972
+ T && /* @__PURE__ */ t("div", {
47973
+ className: "absolute inset-s-1.5 bottom-1.5",
47974
+ children: m
47968
47975
  })
47969
- })]
47976
+ ]
47970
47977
  });
47971
47978
  };
47972
47979
  E3.displayName = "ImageWidget";
@@ -54598,7 +54605,7 @@ var i9 = {
54598
54605
  }) : null, s9 = ({ className: e, children: n, ref: r, ...i }) => /* @__PURE__ */ t("div", {
54599
54606
  ...i,
54600
54607
  ref: r,
54601
- className: U("prose body-600 max-w-none wrap-break-word text-neutral-800", "prose-headings:text-content-primary", "prose-h2:heading-light-700 sm:prose-h2:heading-light-800", "prose-h2:mb-6 prose-h2:mt-12 sm:prose-h2:mt-14", "prose-h3:heading-light-600 sm:prose-h3:heading-light-700", "prose-h3:mb-6 prose-h3:mt-10 sm:prose-h3:mt-12", "prose-h4:heading-light-600", "prose-h4:mb-4 prose-h4:mt-10", "prose-p:my-6", "prose-ol:my-6 prose-ul:my-6", "prose-ol:pl-3 prose-ul:pl-3", "prose-li:my-0 prose-li:ml-3 prose-li:p-0", "[&_li::marker]:text-inherit", "prose-blockquote:my-12", "prose-blockquote:pl-6 sm:prose-blockquote:pl-8", "prose-blockquote:border-l-2 prose-blockquote:border-misc-border", "prose-blockquote:body-semi-strong-600 prose-blockquote:not-italic", "prose-blockquote:before:hidden prose-blockquote:after:hidden", "prose-p:before:hidden prose-p:after:hidden", "prose-figure:my-10 sm:prose-figure:my-12", "prose-img:my-0 prose-img:block prose-img:w-full prose-img:object-cover", "prose-strong:font-600", "prose-em:italic", "prose-code:inline-block prose-code:break-all", "prose-code:rounded-400 prose-code:bg-background-subdued prose-code:px-1.5", "prose-code:break-all prose-code:text-600 prose-code:font-500", "prose-code:before:[content:''] prose-code:after:[content:'']", "prose-pre:my-6", "[&_:where(pre_code):not(:where([class~='not-prose'],[class~='not-prose']_*))]:bg-inherit [&_:where(pre_code):not(:where([class~='not-prose'],[class~='not-prose']_*))]:px-0", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-200 [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:cursor-pointer", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:ring-misc-focus-indicator [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:misc-border-size-focus-ring [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:outline-hidden", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:text-content-accent [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:hover:text-content-accent-hover", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:text-content-accent-hover [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:active:text-content-accent-down", "[&_:where(a:not([href])):not(:where([class~='not-prose'],[class~='not-prose']_*))]:no-underline [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:underline", "prose-table:w-full prose-table:border-separate prose-table:border-spacing-0", "prose-table:text-component-600 prose-table:whitespace-pre-wrap prose-table:text-content-subdued-primary", "prose-th:min-w-[200px] prose-td:min-w-[200px]", "prose-th:border-b prose-th:border-misc-border prose-td:border-b prose-td:border-misc-border", "prose-th:first:border-l prose-th:last:border-r prose-td:first:border-l prose-td:last:border-r", "prose-th:px-2 prose-th:py-3 prose-th:first:pl-4 prose-th:last:pr-4", "prose-td:px-2 prose-td:py-3 prose-td:first:pl-4 prose-td:last:pr-4", "prose-th:text-left prose-th:align-top prose-th:text-content-primary", "prose-td:align-top", "[&_:where(tr:first-child>th):not(:where([class~='not-prose'],[class~='not-prose']_*))]:bg-background-subdued [&_:where(tr:first-child>th):not(:where([class~='not-prose'],[class~='not-prose']_*))]:align-middle", "[&_:where(tr:first-child>*):not(:where([class~='not-prose'],[class~='not-prose']_*))]:border-t", "[&_:where(tr:first-child>:first-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-tl-200 [&_:where(tr:first-child>:last-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-tr-200", "[&_:where(tr:last-child>:first-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-bl-200 [&_:where(tr:last-child>:last-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-br-200", "[&_:where(li_p):not(:where([class~='not-prose'],[class~='not-prose']_*))]:my-0", "[&_:where(table_p):not(:where([class~='not-prose'],[class~='not-prose']_*))]:my-0", "[&>*:first-child]:mt-0! [&>span>*:first-child]:mt-0!", "[&>*:last-child]:mb-0! [&>span>*:last-child]:mb-0!", "[&_.yt-embed]:my-10 sm:[&_.yt-embed]:my-12", "sm:prose-h1:heading-900 prose-h1:mb-6 prose-h1:mt-12 sm:prose-h1:mt-14", "[&_h1_strong]:font-700", e),
54608
+ className: U("prose body-600 max-w-none wrap-break-word text-neutral-800", "prose-headings:text-content-primary", "prose-h2:heading-light-700 sm:prose-h2:heading-light-800", "prose-h2:mb-6 prose-h2:mt-12 sm:prose-h2:mt-14", "prose-h3:heading-light-600 sm:prose-h3:heading-light-700", "prose-h3:mb-6 prose-h3:mt-10 sm:prose-h3:mt-12", "prose-h4:heading-light-600", "prose-h4:mb-4 prose-h4:mt-10", "prose-p:my-6", "prose-ol:my-6 prose-ul:my-6", "prose-ol:ps-3 prose-ul:ps-3", "prose-li:my-0 prose-li:ms-3 prose-li:p-0", "[&_li::marker]:text-inherit", "prose-blockquote:my-12", "prose-blockquote:ps-6 sm:prose-blockquote:ps-8", "prose-blockquote:border-s-2 prose-blockquote:border-misc-border", "prose-blockquote:body-semi-strong-600 prose-blockquote:not-italic", "prose-blockquote:before:hidden prose-blockquote:after:hidden", "prose-p:before:hidden prose-p:after:hidden", "prose-figure:my-10 sm:prose-figure:my-12", "prose-img:my-0 prose-img:block prose-img:w-full prose-img:object-cover", "prose-strong:font-600", "prose-em:italic", "prose-code:inline-block prose-code:break-all", "prose-code:rounded-400 prose-code:bg-background-subdued prose-code:px-1.5", "prose-code:break-all prose-code:text-600 prose-code:font-500", "prose-code:before:[content:''] prose-code:after:[content:'']", "prose-pre:my-6", "[&_:where(pre_code):not(:where([class~='not-prose'],[class~='not-prose']_*))]:bg-inherit [&_:where(pre_code):not(:where([class~='not-prose'],[class~='not-prose']_*))]:px-0", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-200 [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:cursor-pointer", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:ring-misc-focus-indicator [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:misc-border-size-focus-ring [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:outline-hidden", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:text-content-accent [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:hover:text-content-accent-hover", "[&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:focus-visible:text-content-accent-hover [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:active:text-content-accent-down", "[&_:where(a:not([href])):not(:where([class~='not-prose'],[class~='not-prose']_*))]:no-underline [&_:where(a[href]):not(:where([class~='not-prose'],[class~='not-prose']_*))]:underline", "prose-table:w-full prose-table:border-separate prose-table:border-spacing-0", "prose-table:text-component-600 prose-table:whitespace-pre-wrap prose-table:text-content-subdued-primary", "prose-th:min-w-[200px] prose-td:min-w-[200px]", "prose-th:border-b prose-th:border-misc-border prose-td:border-b prose-td:border-misc-border", "prose-th:first:border-s prose-th:last:border-e prose-td:first:border-s prose-td:last:border-e", "prose-th:px-2 prose-th:py-3 prose-th:first:ps-4 prose-th:last:pe-4", "prose-td:px-2 prose-td:py-3 prose-td:first:ps-4 prose-td:last:pe-4", "prose-th:text-start prose-th:align-top prose-th:text-content-primary", "prose-td:align-top", "[&_:where(tr:first-child>th):not(:where([class~='not-prose'],[class~='not-prose']_*))]:bg-background-subdued [&_:where(tr:first-child>th):not(:where([class~='not-prose'],[class~='not-prose']_*))]:align-middle", "[&_:where(tr:first-child>*):not(:where([class~='not-prose'],[class~='not-prose']_*))]:border-t", "[&_:where(tr:first-child>:first-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-ss-200 [&_:where(tr:first-child>:last-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-se-200", "[&_:where(tr:last-child>:first-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-es-200 [&_:where(tr:last-child>:last-child):not(:where([class~='not-prose'],[class~='not-prose']_*))]:rounded-ee-200", "[&_:where(li_p):not(:where([class~='not-prose'],[class~='not-prose']_*))]:my-0", "[&_:where(table_p):not(:where([class~='not-prose'],[class~='not-prose']_*))]:my-0", "[&>*:first-child]:mt-0! [&>span>*:first-child]:mt-0!", "[&>*:last-child]:mb-0! [&>span>*:last-child]:mb-0!", "[&_.yt-embed]:my-10 sm:[&_.yt-embed]:my-12", "sm:prose-h1:heading-900 prose-h1:mb-6 prose-h1:mt-12 sm:prose-h1:mt-14", "[&_h1_strong]:font-700", e),
54602
54609
  children: n
54603
54610
  });
54604
54611
  s9.displayName = "ArticleContent";
@@ -54659,7 +54666,7 @@ var wge = ({ title: e, date: r, className: i }) => /* @__PURE__ */ n("div", {
54659
54666
  })]
54660
54667
  })
54661
54668
  }), Ege = ({ className: i, isLoading: a, children: o }) => /* @__PURE__ */ t(e, { children: /* @__PURE__ */ n("div", {
54662
- className: H(i, "rounded-area-500 bg-white-alpha-3 relative h-full w-full overflow-hidden", "pointer-events-none", "after:rounded-area-500 after:pointer-events-none after:absolute after:top-0 after:left-0 after:h-full after:w-full after:border after:border-solid after:content-['']", "after:transition-all after:duration-300", "after:border-neutral-alpha-300"),
54669
+ className: H(i, "rounded-area-500 bg-white-alpha-3 relative h-full w-full overflow-hidden", "pointer-events-none", "after:rounded-area-500 after:pointer-events-none after:absolute after:start-0 after:top-0 after:h-full after:w-full after:border after:border-solid after:content-['']", "after:transition-all after:duration-300", "after:border-neutral-alpha-300"),
54663
54670
  children: [/* @__PURE__ */ t("div", {
54664
54671
  className: H("flex h-full w-full justify-center", "transition-opacity duration-300", a && "opacity-25"),
54665
54672
  children: o
@@ -54898,7 +54905,7 @@ var wge = ({ title: e, date: r, className: i }) => /* @__PURE__ */ n("div", {
54898
54905
  ]
54899
54906
  });
54900
54907
  }, Nge = ({ variant: e = "default", author: r, children: i, className: a, ...o }) => /* @__PURE__ */ n("blockquote", {
54901
- className: H("not-prose flex flex-col gap-4", "content-to-edge-spacious-pl-700 my-10 sm:my-12 sm:pl-[30px]", "border-misc-border border-l-2", a),
54908
+ className: H("not-prose flex flex-col gap-4", "content-to-edge-spacious-ps-700 my-10 sm:my-12 sm:ps-[30px]", "border-misc-border border-s-2", a),
54902
54909
  ...o,
54903
54910
  children: [/* @__PURE__ */ t("div", {
54904
54911
  className: H("text-content-primary", {
@@ -54909,14 +54916,14 @@ var wge = ({ title: e, date: r, className: i }) => /* @__PURE__ */ n("div", {
54909
54916
  }), !!r && /* @__PURE__ */ n("p", {
54910
54917
  className: "body-semi-strong-600 text-content-primary",
54911
54918
  children: [/* @__PURE__ */ t("span", {
54912
- className: "inline-flex pr-1.5",
54919
+ className: "inline-flex pe-1.5",
54913
54920
  children: "–"
54914
54921
  }), r]
54915
54922
  })]
54916
54923
  }), u9 = (({ as: e = "a", title: r, className: i, ref: a, ...o }) => /* @__PURE__ */ n(e, {
54917
54924
  ...o,
54918
54925
  ref: a,
54919
- className: H("not-prose", "flex items-center justify-between gap-6", "my-6 p-4 pl-6", "rounded-area-500 bg-[#F5F3F0]", "font-brand", i),
54926
+ className: H("not-prose", "flex items-center justify-between gap-6", "my-6 p-4 ps-6", "rounded-area-500 bg-[#F5F3F0]", "font-brand", i),
54920
54927
  children: [/* @__PURE__ */ t("span", {
54921
54928
  className: "component-600 text-content-primary sm:component-700",
54922
54929
  children: r
@@ -55050,7 +55057,7 @@ var Pge = ({ titleBlock: e, children: r, ...i }) => /* @__PURE__ */ n("div", {
55050
55057
  ]
55051
55058
  }, e.featureName)), /* @__PURE__ */ t("div", {
55052
55059
  "aria-hidden": "true",
55053
- className: "rounded-400 border-content-primary pointer-events-none absolute -top-12 right-0 bottom-0 w-12 border-2"
55060
+ className: "rounded-400 border-content-primary pointer-events-none absolute end-0 -top-12 bottom-0 w-12 border-2"
55054
55061
  })]
55055
55062
  })]
55056
55063
  }), Bge = ({ title: e, cards: r, cta: i, ...a }) => /* @__PURE__ */ t("div", {
@@ -55274,8 +55281,8 @@ var Vge = ({ title: e, background: r = "surface-default", children: i, className
55274
55281
  ...r,
55275
55282
  children: [e, t]
55276
55283
  }), Xge = W("mx-auto grid grid-cols-1 gap-4", { variants: { invertOrder: {
55277
- true: "lg:-order-1 lg:pr-16",
55278
- false: "lg:pl-16"
55284
+ true: "lg:-order-1 lg:pe-16",
55285
+ false: "lg:ps-16"
55279
55286
  } } }), Zge = ({ title: e, description: r, listItems: i, visualElement: a, invertOrder: o = !1, cta: s, withVisualBorder: c, ...l }) => {
55280
55287
  let u = Array.isArray(i) ? i.length > 0 : !!i;
55281
55288
  return /* @__PURE__ */ t("div", {
@@ -55284,7 +55291,7 @@ var Vge = ({ title: e, background: r = "surface-default", children: i, className
55284
55291
  children: /* @__PURE__ */ n("div", {
55285
55292
  className: H("grid grid-cols-1 items-center lg:grid-cols-2", "mx-auto gap-4 sm:gap-6", "max-w-sm sm:max-w-lg lg:max-w-[1200px]"),
55286
55293
  children: [/* @__PURE__ */ t("div", {
55287
- className: H("relative", c && "after:rounded-500 after:border-misc-border after:pointer-events-none after:absolute after:top-0 after:left-0 after:h-full after:w-full after:border after:content-['']"),
55294
+ className: H("relative", c && "after:rounded-500 after:border-misc-border after:pointer-events-none after:absolute after:start-0 after:top-0 after:h-full after:w-full after:border after:content-['']"),
55288
55295
  children: a
55289
55296
  }), /* @__PURE__ */ n("div", {
55290
55297
  className: Xge({ invertOrder: o }),
@@ -55426,7 +55433,7 @@ var Vge = ({ title: e, background: r = "surface-default", children: i, className
55426
55433
  children: /* @__PURE__ */ n("div", {
55427
55434
  className: "mx-auto flex max-w-[512px] flex-col-reverse gap-6 lg:max-w-[1200px] lg:flex-row lg:items-center",
55428
55435
  children: [/* @__PURE__ */ n("div", {
55429
- className: "basis-1/2 xl:pr-16",
55436
+ className: "basis-1/2 xl:pe-16",
55430
55437
  children: [
55431
55438
  /* @__PURE__ */ n("header", {
55432
55439
  className: "text-content-primary flex flex-col gap-1",
@@ -55613,7 +55620,7 @@ var u_e = ({ id: e, letter: r, headingLevel: i = "h2", children: a, className: o
55613
55620
  })]
55614
55621
  }), v9 = (({ as: e = "a", name: r, shortDescription: i, className: a, ref: o, ...s }) => /* @__PURE__ */ n(e, {
55615
55622
  ref: o,
55616
- className: U("rounded-500 border-misc-border flex flex-col gap-3 border px-8 pt-7 pb-8 text-left", "interaction-transition outline-hidden transition-colors", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", a),
55623
+ className: U("rounded-500 border-misc-border flex flex-col gap-3 border px-8 pt-7 pb-8 text-start", "interaction-transition outline-hidden transition-colors", "hover:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", a),
55617
55624
  ...s,
55618
55625
  children: [/* @__PURE__ */ t("span", {
55619
55626
  className: "component-semi-strong-600",
@@ -55643,7 +55650,7 @@ var y9 = {}, b9 = ({ variant: e, className: r, cssBackgroundColor: i, children:
55643
55650
  c || (d(!0), o && (sessionStorage.setItem(o, JSON.stringify(!0)), y9[o] = !0));
55644
55651
  }, [o, c]);
55645
55652
  return f ? null : /* @__PURE__ */ n("div", {
55646
- className: H("relative text-white", "pr-16 pl-4 sm:pl-6 md:pl-8 lg:px-16", !i && e === "accent" && "bg-content-accent", !i && e === "neutral" && "bg-neutral-800", r),
55653
+ className: H("relative text-white", "ps-4 pe-16 sm:ps-6 md:ps-8 lg:px-16", !i && e === "accent" && "bg-content-accent", !i && e === "neutral" && "bg-neutral-800", r),
55647
55654
  style: i ? { backgroundColor: i } : void 0,
55648
55655
  ...l,
55649
55656
  children: [/* @__PURE__ */ t("div", {
@@ -55651,7 +55658,7 @@ var y9 = {}, b9 = ({ variant: e, className: r, cssBackgroundColor: i, children:
55651
55658
  children: a
55652
55659
  }), /* @__PURE__ */ t(dr, {
55653
55660
  "aria-label": s || "Close",
55654
- className: "absolute top-5 right-5",
55661
+ className: "absolute end-5 top-5",
55655
55662
  variant: "secondary-on-dark",
55656
55663
  size: "small",
55657
55664
  onClick: p
@@ -55867,7 +55874,7 @@ var y9 = {}, b9 = ({ variant: e, className: r, cssBackgroundColor: i, children:
55867
55874
  }), /* @__PURE__ */ n("h1", {
55868
55875
  className: "text-balance",
55869
55876
  children: [!!e && /* @__PURE__ */ t("figure", {
55870
- className: H("relative inline-flex align-middle", "size-[31px] sm:size-[58px] lg:size-[71px]", "mr-2 sm:mr-3 lg:mr-4"),
55877
+ className: H("relative inline-flex align-middle", "size-[31px] sm:size-[58px] lg:size-[71px]", "me-2 sm:me-3 lg:me-4"),
55871
55878
  children: e
55872
55879
  }), /* @__PURE__ */ t("span", {
55873
55880
  className: H("inline align-middle", "heading-thin-800 sm:heading-extra-thin-1100 lg:heading-extra-thin-1200"),
@@ -55993,7 +56000,7 @@ var y9 = {}, b9 = ({ variant: e, className: r, cssBackgroundColor: i, children:
55993
56000
  ]);
55994
56001
  }, S9 = ({ children: e, ref: r, ...i }) => /* @__PURE__ */ n("button", {
55995
56002
  ref: r,
55996
- className: H("component-semi-strong-700 rounded-500 size-h-700 flex items-center gap-3 pr-3 pl-4", "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring transition-all focus-visible:outline-hidden"),
56003
+ className: H("component-semi-strong-700 rounded-500 size-h-700 flex items-center gap-3 ps-4 pe-3", "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring transition-all focus-visible:outline-hidden"),
55997
56004
  ...i,
55998
56005
  children: [e, /* @__PURE__ */ t(f, {
55999
56006
  className: "icon-size-400 shrink-0",
@@ -56715,7 +56722,7 @@ var Q_e = Object.assign(R9, {
56715
56722
  children: /* @__PURE__ */ n("div", {
56716
56723
  className: H("mx-auto w-full max-w-[1200px]", "gap-i400 flex flex-col items-center", "lg:flex-row lg:gap-3", "xl:gap-6"),
56717
56724
  children: [/* @__PURE__ */ t("div", {
56718
- className: "relative z-1 w-full flex-1 lg:pr-8",
56725
+ className: "relative z-1 w-full flex-1 lg:pe-8",
56719
56726
  children: e
56720
56727
  }), /* @__PURE__ */ n("div", {
56721
56728
  className: "w-full flex-1",
@@ -56723,7 +56730,7 @@ var Q_e = Object.assign(R9, {
56723
56730
  className: H("rounded-500 relative mx-auto max-w-[480px] overflow-hidden lg:max-w-none", !!i && "lg:hidden"),
56724
56731
  children: r
56725
56732
  }), !!i && /* @__PURE__ */ t("div", {
56726
- className: H("hidden lg:block", "absolute top-0 bottom-0 left-1/2 w-max"),
56733
+ className: H("hidden lg:block", "absolute start-1/2 top-0 bottom-0 w-max"),
56727
56734
  children: i
56728
56735
  })]
56729
56736
  })]
@@ -56858,7 +56865,7 @@ var Q_e = Object.assign(R9, {
56858
56865
  size: "large"
56859
56866
  })), [a]), l = be(i) ? !!i.props?.children : !!i;
56860
56867
  return /* @__PURE__ */ n("header", {
56861
- className: U("lg:max-w-auto mx-auto max-w-[704px] lg:mx-0", "flex flex-col items-center lg:items-start", "text-center lg:text-left", s),
56868
+ className: U("lg:max-w-auto mx-auto max-w-[704px] lg:mx-0", "flex flex-col items-center lg:items-start", "text-center lg:text-start", s),
56862
56869
  children: [
56863
56870
  !!r && /* @__PURE__ */ t("div", {
56864
56871
  className: "component-700 sm:component-800 text-content-primary mb-1 max-w-[900px] sm:mb-2",
@@ -56885,7 +56892,7 @@ var Q_e = Object.assign(R9, {
56885
56892
  }, ove = ({ title: e, overline: r, placement: i = "default" }) => /* @__PURE__ */ n("div", {
56886
56893
  className: H("mx-auto flex w-full max-w-[1200px] flex-col gap-1", {
56887
56894
  "items-center text-center": i === "default",
56888
- "items-start text-left": i === "side"
56895
+ "items-start text-start": i === "side"
56889
56896
  }),
56890
56897
  children: [!!r && /* @__PURE__ */ t("div", {
56891
56898
  className: "component-700 text-content-accent max-w-[600px]",
@@ -57126,7 +57133,7 @@ var hve = ({ title: e, children: r, cta: i, image: a, ...o }) => {
57126
57133
  ...o,
57127
57134
  className: "lg:rounded-500 lg:bg-background-subdued relative flex flex-col lg:min-h-[300px] lg:overflow-hidden lg:p-10",
57128
57135
  children: [!!a && /* @__PURE__ */ t("div", {
57129
- className: H("pointer-events-none", "absolute inset-y-0 right-0", "hidden max-w-[576px] lg:flex", "mask-[linear-gradient(to_right,transparent,black_25%)]"),
57136
+ className: H("pointer-events-none", "absolute inset-y-0 end-0", "hidden max-w-[576px] lg:flex", "mask-[linear-gradient(to_right,transparent,black_25%)]", "rtl:mask-[linear-gradient(to_left,transparent,black_25%)]"),
57130
57137
  children: a
57131
57138
  }), /* @__PURE__ */ n("div", {
57132
57139
  className: "relative z-2 flex items-center justify-between gap-4 lg:max-w-[480px] lg:flex-col lg:items-start lg:gap-6",
@@ -57195,7 +57202,7 @@ var gve = ({ titleBlock: e, selectedIndex: r, background: i = "neutral-50-bottom
57195
57202
  children: r
57196
57203
  }),
57197
57204
  /* @__PURE__ */ t("div", {
57198
- className: H("flex h-12 w-12 items-center justify-center rounded-full bg-black", "absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2"),
57205
+ className: H("flex h-12 w-12 items-center justify-center rounded-full bg-black", "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
57199
57206
  children: /* @__PURE__ */ t(s, {
57200
57207
  width: 32,
57201
57208
  height: 32,
@@ -57204,7 +57211,7 @@ var gve = ({ titleBlock: e, selectedIndex: r, background: i = "neutral-50-bottom
57204
57211
  })
57205
57212
  ]
57206
57213
  }), vve = ({ image: e, withBorder: n, ...r }) => e ? /* @__PURE__ */ t("div", {
57207
- className: H("rounded-500 relative overflow-hidden", n && "after:rounded-500 after:border-misc-border after:pointer-events-none after:absolute after:top-0 after:left-0 after:h-full after:w-full after:border after:content-['']"),
57214
+ className: H("rounded-500 relative overflow-hidden", n && "after:rounded-500 after:border-misc-border after:pointer-events-none after:absolute after:start-0 after:top-0 after:h-full after:w-full after:border after:content-['']"),
57208
57215
  ...r,
57209
57216
  children: e
57210
57217
  }) : null, yve = ({ titleBlock: e, background: r, children: i, className: a, ...o }) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@photoroom/ui",
3
- "version": "0.1.285",
3
+ "version": "0.1.287",
4
4
  "private": false,
5
5
  "description": "Photoroom design system components",
6
6
  "sideEffects": [