@photoroom/ui 0.1.543 → 0.1.544

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.
Files changed (5) hide show
  1. package/colors.css +64 -62
  2. package/index.css +1 -1
  3. package/index.mjs +40 -40
  4. package/package.json +1 -1
  5. package/theme.css +25 -23
package/index.mjs CHANGED
@@ -6910,7 +6910,7 @@ var sd = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit
6910
6910
  secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
6911
6911
  borderless: "text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down",
6912
6912
  "secondary-outline": "border-misc-border misc-border-size-default text-content-primary hover:bg-background-borderless-subdued-hover focus-visible:bg-background-borderless-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-borderless-subdued-down bg-transparent",
6913
- negative: "bg-negative-alpha-1 text-content-negative hover:bg-negative-alpha-2 focus-visible:bg-negative-alpha-2 focus-visible:ring-misc-focus-indicator active:bg-negative-alpha-3",
6913
+ negative: "bg-negative-alpha-100 text-content-negative hover:bg-negative-alpha-200 focus-visible:bg-negative-alpha-200 focus-visible:ring-misc-focus-indicator active:bg-negative-alpha-300",
6914
6914
  pro: "bg-content-accent! bg-background-pro hover:bg-background-pro-hover focus-visible:ring-misc-focus-indicator focus-visible:bg-background-pro-hover active:bg-background-pro-down text-white",
6915
6915
  flash: "bg-background-flash hover:bg-background-flash-hover focus-visible:bg-background-flash-hover focus-visible:ring-misc-focus-indicator active:bg-background-flash-down text-content-black-primary",
6916
6916
  "on-dark": "bg-background-white hover:bg-background-white-hover focus-visible:bg-background-white-hover focus-visible:ring-misc-white-focus-indicator active:bg-background-white text-black",
@@ -11027,7 +11027,7 @@ var _h = Jm, vh = Qm, yh = eh, bh = ih, xh = oh, Sh = uh, Ch = /* @__PURE__ */ x
11027
11027
  }), t && /* @__PURE__ */ I(g, { children: /* @__PURE__ */ L(xh, {
11028
11028
  side: o,
11029
11029
  sideOffset: l,
11030
- className: U("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-3 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-3 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", o === "bottom" && "animate-tooltip-slide-down", o === "top" && "animate-tooltip-slide-up", o === "left" && "animate-tooltip-slide-left", o === "right" && "animate-tooltip-slide-right", r),
11030
+ className: U("component-400 rounded-250 bg-background-tooltip z-50 px-1.5 pt-[5px] pb-1.5 [word-break:break-word] text-white", "max-w-[100vw]", "[&_strong]:component-400 [&_strong]:bg-white-alpha-300 [&_strong]:rounded-[2px] [&_strong]:px-[2px]", "[&_b]:component-400 [&_b]:bg-white-alpha-300 [&_b]:rounded-[2px] [&_b]:px-[2px]", "[&_a]:underline", o === "bottom" && "animate-tooltip-slide-down", o === "top" && "animate-tooltip-slide-up", o === "left" && "animate-tooltip-slide-left", o === "right" && "animate-tooltip-slide-right", r),
11031
11031
  id: f,
11032
11032
  ...d,
11033
11033
  children: [t, /* @__PURE__ */ I(Sh, {
@@ -11388,7 +11388,7 @@ var tg = W("inline-flex items-center justify-center", {
11388
11388
  large: "component-semi-strong-500 rounded-300 size-h-300 gap-1 py-[3px]"
11389
11389
  },
11390
11390
  variant: {
11391
- default: "bg-black-alpha-7 text-white",
11391
+ default: "bg-black-alpha-700 text-white",
11392
11392
  accent: "bg-accent-400 text-white",
11393
11393
  pro: "border-misc-border text-accent-500 shadow-400 misc-border-size-hairline bg-background-inverted",
11394
11394
  "pro-alt": "bg-background-pro text-white",
@@ -12441,7 +12441,7 @@ var f_ = ({ title: e, imageSrc: t, imageAlt: n, onClick: r, className: i, varian
12441
12441
  })]
12442
12442
  }), p_ = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ I("button", {
12443
12443
  ref: t,
12444
- className: U("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-4 hover:bg-black-alpha-5 active:bg-black-alpha-6", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
12444
+ className: U("inline-flex items-center justify-center", "h-12 w-12", "shadow-500 rounded-full", "bg-black-alpha-400 hover:bg-black-alpha-500 active:bg-black-alpha-600", "text-white", "appearance-none outline-hidden transition-colors", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30", e),
12445
12445
  ...n,
12446
12446
  children: /* @__PURE__ */ I(ie, {
12447
12447
  className: "h-5 w-5",
@@ -31882,7 +31882,7 @@ var QU = ({ selection: e, reserveSelection: t, productLabel: n, imagesLabel: r,
31882
31882
  onImageLoad: o,
31883
31883
  children: i
31884
31884
  }), n && /* @__PURE__ */ I("div", {
31885
- className: "bg-black-alpha-3 pointer-events-none absolute inset-0 flex items-center justify-center",
31885
+ className: "bg-black-alpha-300 pointer-events-none absolute inset-0 flex items-center justify-center",
31886
31886
  children: /* @__PURE__ */ I(eW, { variant: "on-dark" })
31887
31887
  })]
31888
31888
  });
@@ -32233,7 +32233,7 @@ var cW = /* @__PURE__ */ xt((() => {
32233
32233
  ]
32234
32234
  });
32235
32235
  }, dW = ({ children: e, className: t }) => /* @__PURE__ */ I("div", {
32236
- className: U("rounded-200 bg-white-alpha-8 px-2 py-[5px]", "component-semi-strong-500", "text-content-black-primary", t),
32236
+ className: U("rounded-200 bg-white-alpha-800 px-2 py-[5px]", "component-semi-strong-500", "text-content-black-primary", t),
32237
32237
  children: e
32238
32238
  }), fW = ({ visualLarge: e, visualSmall: t, cssBackgroundColor: n, badgeLabel: r, logo: i, authorName: a, authorJobTitle: o, content: s, cta: c, ...l }) => {
32239
32239
  let u = Ne(() => c ? ye(c, { variant: "primary" }) : null, [c]);
@@ -32963,14 +32963,14 @@ var QW = W("rounded-300 component-semi-strong-300 inline-flex h-5 w-fit items-ce
32963
32963
  imgClassName: a ? "size-full object-cover" : void 0
32964
32964
  }),
32965
32965
  n != null && /* @__PURE__ */ I("div", {
32966
- className: "bg-black-alpha-8 pointer-events-none absolute inset-e-1 bottom-1 flex h-5 w-5 items-center justify-center rounded-full",
32966
+ className: "bg-black-alpha-800 pointer-events-none absolute inset-e-1 bottom-1 flex h-5 w-5 items-center justify-center rounded-full",
32967
32967
  children: /* @__PURE__ */ I("span", {
32968
32968
  className: H("font-600 text-content-white-primary", n > 99 ? "component-300" : "component-400"),
32969
32969
  children: n > 99 ? "99+" : n
32970
32970
  })
32971
32971
  }),
32972
32972
  r && /* @__PURE__ */ I("div", {
32973
- className: "bg-black-alpha-5 pointer-events-none absolute inset-0 flex items-center justify-center",
32973
+ className: "bg-black-alpha-500 pointer-events-none absolute inset-0 flex items-center justify-center",
32974
32974
  children: /* @__PURE__ */ I(eW, {
32975
32975
  className: "size-500",
32976
32976
  variant: "on-dark"
@@ -33492,7 +33492,7 @@ var WG = /* @__PURE__ */ R.forwardRef(/* @__PURE__ */ vG(function(e, t) {
33492
33492
  ...a,
33493
33493
  "aria-labelledby": o,
33494
33494
  ref: i,
33495
- className: H("group relative block appearance-none outline-hidden", "bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:after:bg-black-alpha-2", "active:after:bg-black-alpha-3", "focus-visible:after:bg-black-alpha-2", "after:border", "radix-state-unchecked:after:border-misc-border", "aria-[checked=false]:after:border-misc-border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "aria-checked:after:border-content-accent aria-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "aria-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", {
33495
+ className: H("group relative block appearance-none outline-hidden", "bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:after:bg-black-alpha-200", "active:after:bg-black-alpha-300", "focus-visible:after:bg-black-alpha-200", "after:border", "radix-state-unchecked:after:border-misc-border", "aria-[checked=false]:after:border-misc-border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "aria-checked:after:border-content-accent aria-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "aria-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", {
33496
33496
  "rounded-400": e === "default",
33497
33497
  "rounded-200": e === "compact"
33498
33498
  }, t),
@@ -33812,7 +33812,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
33812
33812
  children: n !== "error" && f
33813
33813
  }),
33814
33814
  n === "loading" && /* @__PURE__ */ I("div", {
33815
- className: H("bg-black-alpha-4 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 px-4 text-center", { "backdrop-blur-2xl": i }),
33815
+ className: H("bg-black-alpha-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center gap-2 px-4 text-center", { "backdrop-blur-2xl": i }),
33816
33816
  children: a === void 0 ? /* @__PURE__ */ I(e, { className: "size-8 text-white" }) : /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ L("span", {
33817
33817
  className: "component-semi-strong-500",
33818
33818
  children: [a, "%"]
@@ -33822,7 +33822,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
33822
33822
  })] })
33823
33823
  }),
33824
33824
  n === "error" && /* @__PURE__ */ I("div", {
33825
- className: "bg-black-alpha-4 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center text-center",
33825
+ className: "bg-black-alpha-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center text-center",
33826
33826
  children: d ? /* @__PURE__ */ I(p_, {
33827
33827
  onClick: m,
33828
33828
  className: "shadow-none",
@@ -33833,8 +33833,8 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
33833
33833
  className: "component-400 text-content-white-primary absolute inset-0 z-5 flex flex-col items-center justify-center bg-black text-center",
33834
33834
  children: r
33835
33835
  }),
33836
- n === "blocked" && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: "bg-black-alpha-7 absolute inset-0 z-4" }), /* @__PURE__ */ L("div", {
33837
- className: H("absolute inset-x-0 bottom-0 z-5", "flex items-center justify-center gap-1", "px-2 pt-4 pb-2", "to-black-alpha-5 bg-linear-to-b from-transparent", {
33836
+ n === "blocked" && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: "bg-black-alpha-700 absolute inset-0 z-4" }), /* @__PURE__ */ L("div", {
33837
+ className: H("absolute inset-x-0 bottom-0 z-5", "flex items-center justify-center gap-1", "px-2 pt-4 pb-2", "to-black-alpha-500 bg-linear-to-b from-transparent", {
33838
33838
  "text-content-white-primary": c === "default",
33839
33839
  "text-content-negative": c === "urgent"
33840
33840
  }),
@@ -33844,7 +33844,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
33844
33844
  })]
33845
33845
  })] }),
33846
33846
  n === "fidelity-check" && /* @__PURE__ */ I("div", {
33847
- className: "to-black-alpha-8 absolute inset-0 z-5 flex flex-col items-center justify-center bg-linear-to-b from-transparent backdrop-blur-xs",
33847
+ className: "to-black-alpha-800 absolute inset-0 z-5 flex flex-col items-center justify-center bg-linear-to-b from-transparent backdrop-blur-xs",
33848
33848
  children: /* @__PURE__ */ L("div", {
33849
33849
  className: "flex w-full flex-col items-center gap-3 px-3",
33850
33850
  children: [/* @__PURE__ */ I("div", {
@@ -33860,7 +33860,7 @@ function TK({ className: t, status: n = "default", nsfwLabel: r, loadingBlur: i,
33860
33860
  children: l
33861
33861
  })
33862
33862
  }), u && /* @__PURE__ */ I("p", {
33863
- className: "component-light-300 text-white-alpha-5 text-center",
33863
+ className: "component-light-300 text-white-alpha-500 text-center",
33864
33864
  children: u
33865
33865
  })]
33866
33866
  })]
@@ -34081,7 +34081,7 @@ var PK = W("rounded-400 interaction-transition focus-visible:ring-misc-focus-ind
34081
34081
  });
34082
34082
  }, IK = ({ label: e, onClick: t }) => /* @__PURE__ */ I("button", {
34083
34083
  "aria-label": e,
34084
- className: H("bg-black-alpha-8 flex h-24 w-24 items-center justify-center rounded-full outline-hidden transition-all", "hover:bg-black", "active:bg-black", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"),
34084
+ className: H("bg-black-alpha-800 flex h-24 w-24 items-center justify-center rounded-full outline-hidden transition-all", "hover:bg-black", "active:bg-black", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring"),
34085
34085
  onClick: t,
34086
34086
  children: /* @__PURE__ */ I("svg", {
34087
34087
  width: "48",
@@ -34129,7 +34129,7 @@ var PK = W("rounded-400 interaction-transition focus-visible:ring-misc-focus-ind
34129
34129
  controls: s && !l,
34130
34130
  children: m.map((e) => c ? /* @__PURE__ */ I("source", { "data-src": e }, e) : /* @__PURE__ */ I("source", { src: e }, e))
34131
34131
  }), l && /* @__PURE__ */ I("div", {
34132
- className: "bg-black-alpha-8 absolute inset-0 flex cursor-pointer items-center justify-center",
34132
+ className: "bg-black-alpha-800 absolute inset-0 flex cursor-pointer items-center justify-center",
34133
34133
  onClick: p,
34134
34134
  children: /* @__PURE__ */ I(IK, {
34135
34135
  label: e,
@@ -34186,15 +34186,15 @@ function HK({ messages: e, totalExpectedDuration: t, generationStartedAt: n, loa
34186
34186
  return /* @__PURE__ */ I("p", {
34187
34187
  className: U("truncate", {
34188
34188
  "progress-timer-shimmer text-content-white-primary": n,
34189
- "text-white-alpha-5": t === g.length - 2,
34190
- "text-white-alpha-3": t < g.length - 2
34189
+ "text-white-alpha-500": t === g.length - 2,
34190
+ "text-white-alpha-300": t < g.length - 2
34191
34191
  }),
34192
34192
  children: e
34193
34193
  }, `${t}-${e}`);
34194
34194
  })
34195
34195
  }),
34196
34196
  /* @__PURE__ */ I("div", {
34197
- className: "bg-white-alpha-3 h-1.5 w-full overflow-hidden rounded-full",
34197
+ className: "bg-white-alpha-300 h-1.5 w-full overflow-hidden rounded-full",
34198
34198
  children: /* @__PURE__ */ I("div", {
34199
34199
  className: "bg-white-1 h-full rounded-full transition-[width] duration-300",
34200
34200
  style: { width: `${m * 100}%` }
@@ -36897,7 +36897,7 @@ var nX = ({ left: e, top: t, width: n, height: r, rotation: i, users: a, ...o })
36897
36897
  })
36898
36898
  });
36899
36899
  }, rX = () => /* @__PURE__ */ I("svg", {
36900
- className: "text-white-alpha-7 pointer-events-none absolute inset-0 size-full",
36900
+ className: "text-white-alpha-700 pointer-events-none absolute inset-0 size-full",
36901
36901
  viewBox: "0 0 100 100",
36902
36902
  preserveAspectRatio: "none",
36903
36903
  "aria-hidden": "true",
@@ -46859,7 +46859,7 @@ var h4 = /* @__PURE__ */ new Set(), g4 = ({ label: t, previewUrl: n, previewBitm
46859
46859
  ...f,
46860
46860
  "aria-labelledby": p,
46861
46861
  ref: d,
46862
- className: H("relative block appearance-none outline-hidden", "h-full w-full", "rounded-400 bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:radix-state-unchecked:after:bg-black-alpha-2", "active:radix-state-unchecked:after:bg-black-alpha-3", "focus-visible:radix-state-unchecked:after:bg-black-alpha-2", "radix-state-unchecked:after:border-misc-border after:border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", l),
46862
+ className: H("relative block appearance-none outline-hidden", "h-full w-full", "rounded-400 bg-background-subdued overflow-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-['']", "hover:radix-state-unchecked:after:bg-black-alpha-200", "active:radix-state-unchecked:after:bg-black-alpha-300", "focus-visible:radix-state-unchecked:after:bg-black-alpha-200", "radix-state-unchecked:after:border-misc-border after:border", "radix-state-checked:after:border-content-accent radix-state-checked:after:misc-border-size-selection", "radix-state-checked:after:misc-shadow-selection", "after:interaction-transition after:transition-colors", l),
46863
46863
  children: [/* @__PURE__ */ I("div", {
46864
46864
  className: "pointer-events-none relative flex h-full w-full items-center justify-center select-none",
46865
46865
  style: { aspectRatio: c },
@@ -47030,7 +47030,7 @@ function Mhe({ children: e, icon: t, visible: n = !0, className: r }) {
47030
47030
  opacity: 0,
47031
47031
  transition: { duration: .15 }
47032
47032
  },
47033
- className: U("pointer-events-none flex w-fit max-w-[400px] items-center", "bg-black-alpha-7 rounded-full px-4 py-[14px] backdrop-blur-xs", t && "gap-2", r),
47033
+ className: U("pointer-events-none flex w-fit max-w-[400px] items-center", "bg-black-alpha-700 rounded-full px-4 py-[14px] backdrop-blur-xs", t && "gap-2", r),
47034
47034
  children: [t && /* @__PURE__ */ I(t, { className: "text-content-white-primary size-[18px] shrink-0" }), /* @__PURE__ */ I("span", {
47035
47035
  className: "component-500 text-content-white-primary min-w-0 flex-1",
47036
47036
  children: e
@@ -48495,10 +48495,10 @@ var b3 = ({ label: e, weight: t, italic: n = !1, selected: r, ref: i, ...a }) =>
48495
48495
  b3.displayName = "FontWeightSelectorItem";
48496
48496
  //#endregion
48497
48497
  //#region src/components/input/IconSwitch/IconSwitch.tsx
48498
- var x3 = "relative z-10 flex h-8 w-10 items-center justify-center text-white-alpha-7 transition-colors", S3 = "transition-all icon-size-400", C3 = ({ icons: e, label: t, tooltips: n, isTooltipDisabled: r, className: i, ref: a, ...o }) => /* @__PURE__ */ L(mP, {
48498
+ var x3 = "relative z-10 flex h-8 w-10 items-center justify-center text-white-alpha-700 transition-colors", S3 = "transition-all icon-size-400", C3 = ({ icons: e, label: t, tooltips: n, isTooltipDisabled: r, className: i, ref: a, ...o }) => /* @__PURE__ */ L(mP, {
48499
48499
  ref: a,
48500
48500
  "aria-label": t,
48501
- className: U("group/icon-switch rounded-500 bg-black-alpha-7 relative inline-flex h-8 w-fit items-center", "active:bg-black-alpha-8 disabled:cursor-not-allowed disabled:opacity-30", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "interaction-transition transition-colors", i),
48501
+ className: U("group/icon-switch rounded-500 bg-black-alpha-700 relative inline-flex h-8 w-fit items-center", "active:bg-black-alpha-800 disabled:cursor-not-allowed disabled:opacity-30", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:outline-hidden", "interaction-transition transition-colors", i),
48502
48502
  ...o,
48503
48503
  children: [
48504
48504
  /* @__PURE__ */ I(gP, {
@@ -48564,7 +48564,7 @@ var xge = W([
48564
48564
  }
48565
48565
  }), Sge = W(["pointer-events-none absolute -inset-px transition-[opacity,background-color]", "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"], {
48566
48566
  variants: { error: {
48567
- true: "bg-black-alpha-3 group-hover:bg-black-alpha-3 group-focus-visible:bg-black-alpha-3 group-active:bg-black-alpha-4",
48567
+ true: "bg-black-alpha-300 group-hover:bg-black-alpha-300 group-focus-visible:bg-black-alpha-300 group-active:bg-black-alpha-400",
48568
48568
  false: "bg-misc-visual-hover group-hover:bg-misc-visual-hover group-focus-visible:bg-misc-visual-hover group-active:bg-misc-visual-down"
48569
48569
  } },
48570
48570
  defaultVariants: { error: !1 }
@@ -48660,7 +48660,7 @@ var xge = W([
48660
48660
  variant: "primary",
48661
48661
  icon: ie,
48662
48662
  onClick: E,
48663
- className: "bg-black-alpha-4 hover:bg-black-alpha-6 active:bg-black-alpha-6 absolute top-1/2 left-1/2 size-600 -translate-x-1/2 -translate-y-1/2 rounded-full",
48663
+ className: "bg-black-alpha-400 hover:bg-black-alpha-600 active:bg-black-alpha-600 absolute top-1/2 left-1/2 size-600 -translate-x-1/2 -translate-y-1/2 rounded-full",
48664
48664
  "aria-label": "Retry"
48665
48665
  })
48666
48666
  ]
@@ -49423,14 +49423,14 @@ var Pge = ({ reaction: e, selected: t = !1, onClick: n }) => /* @__PURE__ */ I("
49423
49423
  className: "component-semi-strong-500 text-content-white-primary",
49424
49424
  children: n.length
49425
49425
  })]
49426
- }), r !== e.length - 1 && /* @__PURE__ */ I("span", { className: "bg-white-alpha-3 mx-1.5 h-5 w-px rounded-full" })]
49426
+ }), r !== e.length - 1 && /* @__PURE__ */ I("span", { className: "bg-white-alpha-300 mx-1.5 h-5 w-px rounded-full" })]
49427
49427
  }, t))
49428
49428
  }),
49429
49429
  children: o
49430
49430
  });
49431
49431
  }, Lge = (e) => /* @__PURE__ */ I("button", {
49432
49432
  ...e,
49433
- className: H("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-3", "active:after:bg-black-alpha-6", "focus-visible:after:bg-black-alpha-3", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
49433
+ className: H("rounded-200 relative h-10 w-10 overflow-hidden bg-neutral-200 outline-hidden transition-all", "after:rounded-200 after:absolute after:inset-0 after:transition-all after:content-['']", "hover:after:bg-black-alpha-300", "active:after:bg-black-alpha-600", "focus-visible:after:bg-black-alpha-300", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring", e.disabled && "opacity-50")
49434
49434
  }), H3 = ({ title: e, children: t }) => /* @__PURE__ */ L("div", {
49435
49435
  className: "flex flex-col items-center gap-3",
49436
49436
  children: [!!e && /* @__PURE__ */ I("div", {
@@ -50879,7 +50879,7 @@ F6.displayName = "TagField";
50879
50879
  //#region src/components/input/TextEditionBox/TextEditionBox.tsx
50880
50880
  var I6 = ({ className: e, ref: t, ...n }) => /* @__PURE__ */ I(EP, {
50881
50881
  ref: t,
50882
- className: H("component-500 rounded-500 bg-black-alpha-8", "max-w-full", "text-content-white-primary placeholder-content-white-secondary", "icon-to-edge-py-450 px-[10px]", "backdrop-blur-2xl", "border-none! ring-0!", e),
50882
+ className: H("component-500 rounded-500 bg-black-alpha-800", "max-w-full", "text-content-white-primary placeholder-content-white-secondary", "icon-to-edge-py-450 px-[10px]", "backdrop-blur-2xl", "border-none! ring-0!", e),
50883
50883
  minRows: 1,
50884
50884
  ...n
50885
50885
  });
@@ -53736,7 +53736,7 @@ function O5({ label: e, status: t = "pending", stepNumber: n, value: r, classNam
53736
53736
  O5.displayName = "ProgressStep";
53737
53737
  //#endregion
53738
53738
  //#region src/components/status/ToastProgress/ToastProgress.tsx
53739
- var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-2 rounded-full", "focus-visible:bg-black-alpha-2 active:bg-black-alpha-3", "text-content-white-primary-inverted", "transition-colors duration-200");
53739
+ var k5 = H("absolute inset-0 z-1", "flex h-full items-center gap-1.5 p-1 ps-5", "transition-all duration-200 ease-[cubic-bezier(0.2,0.82,0.61,1)]"), A5 = "min-w-0 grow overflow-hidden text-ellipsis whitespace-nowrap text-start", j5 = H("shrink-0 appearance-none outline-hidden", "flex h-full items-center px-4", "hover:bg-black-alpha-200 rounded-full", "focus-visible:bg-black-alpha-200 active:bg-black-alpha-300", "text-content-white-primary-inverted", "transition-colors duration-200");
53740
53740
  function abe({ className: e, inProgressLabel: t, completedLabel: n, actionLabel: r, cancelLabel: i, onAction: a, onCancel: s, ...c }) {
53741
53741
  let l = Math.min(100, Math.max(0, c.value ?? 0)), u = l === 100, d = ke();
53742
53742
  return /* @__PURE__ */ L(SK, {
@@ -54858,7 +54858,7 @@ var h7 = {
54858
54858
  children: [r && /* @__PURE__ */ I(h7.Trigger, {
54859
54859
  asChild: !0,
54860
54860
  children: r
54861
- }), /* @__PURE__ */ L(h7.Portal, { children: [/* @__PURE__ */ I(h7.Overlay, { className: U("bg-black-alpha-6 fixed inset-0", e) }), /* @__PURE__ */ I(h7.Content, {
54861
+ }), /* @__PURE__ */ L(h7.Portal, { children: [/* @__PURE__ */ I(h7.Overlay, { className: U("bg-black-alpha-600 fixed inset-0", e) }), /* @__PURE__ */ I(h7.Content, {
54862
54862
  className: U("rounded-t-600 fixed inset-x-0 bottom-0 bg-white outline-hidden", t),
54863
54863
  children: /* @__PURE__ */ L("div", {
54864
54864
  className: "rounded-t-600 bg-white",
@@ -55264,7 +55264,7 @@ var Jbe = ({ title: e, date: t, className: n }) => /* @__PURE__ */ L("div", {
55264
55264
  })]
55265
55265
  })
55266
55266
  }), Xbe = ({ className: t, isLoading: n, children: r }) => /* @__PURE__ */ I(me, { children: /* @__PURE__ */ L("div", {
55267
- className: H(t, "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"),
55267
+ className: H(t, "rounded-area-500 bg-white-alpha-300 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"),
55268
55268
  children: [/* @__PURE__ */ I("div", {
55269
55269
  className: H("flex h-full w-full justify-center", "transition-opacity duration-300", n && "opacity-25"),
55270
55270
  children: r
@@ -55562,7 +55562,7 @@ var axe = ({ badge: e, brandName: t, brandDescription: n, backgroundImage: r, pr
55562
55562
  children: [/* @__PURE__ */ L("div", {
55563
55563
  "aria-hidden": !0,
55564
55564
  className: "absolute inset-0",
55565
- children: [r, /* @__PURE__ */ I("div", { className: "bg-black-alpha-7 absolute inset-0" })]
55565
+ children: [r, /* @__PURE__ */ I("div", { className: "bg-black-alpha-700 absolute inset-0" })]
55566
55566
  }), /* @__PURE__ */ L("div", {
55567
55567
  className: "relative z-10 mx-auto flex w-full max-w-300 flex-col gap-8 lg:flex-row lg:items-center lg:gap-6",
55568
55568
  children: [/* @__PURE__ */ I("div", {
@@ -55789,10 +55789,10 @@ var T7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
55789
55789
  }), /* @__PURE__ */ L("div", {
55790
55790
  className: "flex flex-row sm:inline sm:gap-2",
55791
55791
  children: [/* @__PURE__ */ I("span", {
55792
- className: H("text-neutral-alpha-6 component-semi-strong-600", "hidden sm:inline"),
55792
+ className: H("text-neutral-alpha-600 component-semi-strong-600", "hidden sm:inline"),
55793
55793
  children: "-"
55794
55794
  }), /* @__PURE__ */ I("span", {
55795
- className: "text-neutral-alpha-6 component-semi-strong-600",
55795
+ className: "text-neutral-alpha-600 component-semi-strong-600",
55796
55796
  children: t
55797
55797
  })]
55798
55798
  })]
@@ -56045,7 +56045,7 @@ var T7 = ({ label: e, value: t, max: n = 5, tooltip: r, className: i }) => {
56045
56045
  ]
56046
56046
  })
56047
56047
  }), Sxe = ({ className: e, header: t, title: n, description: r, ...i }) => /* @__PURE__ */ L("div", {
56048
- className: U("bg-white-alpha-2 rounded-500 flex flex-col justify-between gap-6 overflow-clip p-6 sm:min-h-[360px]", e),
56048
+ className: U("bg-white-alpha-200 rounded-500 flex flex-col justify-between gap-6 overflow-clip p-6 sm:min-h-[360px]", e),
56049
56049
  ...i,
56050
56050
  children: [/* @__PURE__ */ I("div", {
56051
56051
  className: "relative h-18 w-full shrink-0 [&_img]:size-full [&_img]:object-contain ltr:[&_img]:object-left rtl:[&_img]:object-right",
@@ -57669,7 +57669,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
57669
57669
  }, zSe = ({ planType: e, description: t, cta: n, propLists: r, billingPeriod: i, specialOfferLabel: a, clientLogos: o, planPriceLabelOverride: s, planPriceSubLabel: c, planName: l, showYearlyPriceAsMonthly: u, tagLabel: d, tagVariant: f = "neutral", variant: p = "default", perMonthLabel: m, perYearLabel: h, billedAnnuallyLabel: g, subscriptionOptions: _, isUnavailable: v, unavailableLabel: y, subscriptionType: b, onSubscriptionTypeChange: x, resolvedPrice: S, isError: C, isSelectorLoading: w, ...T }) => {
57670
57670
  let [E, D] = Pe(_?.[0]?.value), O = b ?? E, k = x ?? D, A = i === "yearly" && u, { value: j, originalValue: M } = S ?? {}, N = p === "dark";
57671
57671
  return /* @__PURE__ */ L("div", {
57672
- className: H("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", N ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", N ? "border-white-alpha-3" : "border-misc-border", d && "max-xl:pt-0", !d && "sm:max-xl:pt-0"),
57672
+ className: H("relative flex w-full flex-col gap-6", "px-4 py-7", "rounded-500", N ? "bg-background-default text-content-white-primary" : "bg-background-inverted", "border", N ? "border-white-alpha-300" : "border-misc-border", d && "max-xl:pt-0", !d && "sm:max-xl:pt-0"),
57673
57673
  ...T,
57674
57674
  children: [/* @__PURE__ */ L("div", {
57675
57675
  className: "flex flex-col",
@@ -57760,7 +57760,7 @@ var CSe = ({ lang: e, monthlyProcessedImages: t = 1e3, items: n, partnerCard: r,
57760
57760
  ]
57761
57761
  }), /* @__PURE__ */ L("div", {
57762
57762
  className: H("flex flex-1 flex-col justify-between gap-6", N && "[&_svg]:text-content-white-primary"),
57763
- children: [r && r.length > 0 && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: H("h-px w-full shrink-0", N ? "bg-white-alpha-3" : "bg-misc-divider") }), /* @__PURE__ */ I("div", {
57763
+ children: [r && r.length > 0 && /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", { className: H("h-px w-full shrink-0", N ? "bg-white-alpha-300" : "bg-misc-divider") }), /* @__PURE__ */ I("div", {
57764
57764
  className: H("flex flex-1 flex-col justify-between gap-8", r.length > 1 && "[&>*:last-child]:justify-end"),
57765
57765
  children: r
57766
57766
  })] }), o && o.length > 0 && /* @__PURE__ */ I("div", {
@@ -59377,7 +59377,7 @@ function owe({ logo: e, sections: t, ctas: n, mobileSections: r, mobileCtas: i,
59377
59377
  return /* @__PURE__ */ L(me, { children: [/* @__PURE__ */ I("div", {
59378
59378
  className: "overflow-x-clip",
59379
59379
  children: /* @__PURE__ */ I("header", {
59380
- className: U("relative flex h-(--header-height) items-center px-4 sm:px-6 md:px-8 2xl:px-10", "bg-white-alpha-8 backdrop-blur-md", "before:bg-black-alpha-1 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:transition-opacity before:duration-300 before:content-['']", l ? "before:opacity-100" : "before:opacity-0", u),
59380
+ className: U("relative flex h-(--header-height) items-center px-4 sm:px-6 md:px-8 2xl:px-10", "bg-white-alpha-800 backdrop-blur-md", "before:bg-black-alpha-100 before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:h-px before:transition-opacity before:duration-300 before:content-['']", l ? "before:opacity-100" : "before:opacity-0", u),
59381
59381
  ...d,
59382
59382
  children: /* @__PURE__ */ L("div", {
59383
59383
  className: "mx-auto flex w-full max-w-[1200px] items-center justify-between gap-1",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@photoroom/ui",
3
- "version": "0.1.543",
3
+ "version": "0.1.544",
4
4
  "private": false,
5
5
  "description": "Photoroom design system components",
6
6
  "sideEffects": [
package/theme.css CHANGED
@@ -21,26 +21,27 @@
21
21
  @theme inline {
22
22
  /* Base */
23
23
  --color-black: var(--color-black);
24
- --color-black-alpha-1: var(--color-black-alpha-1);
25
- --color-black-alpha-2: var(--color-black-alpha-2);
26
- --color-black-alpha-3: var(--color-black-alpha-3);
27
- --color-black-alpha-4: var(--color-black-alpha-4);
28
- --color-black-alpha-5: var(--color-black-alpha-5);
29
- --color-black-alpha-6: var(--color-black-alpha-6);
30
- --color-black-alpha-7: var(--color-black-alpha-7);
31
- --color-black-alpha-8: var(--color-black-alpha-8);
24
+ --color-black-alpha-100: var(--color-black-alpha-100);
25
+ --color-black-alpha-200: var(--color-black-alpha-200);
26
+ --color-black-alpha-300: var(--color-black-alpha-300);
27
+ --color-black-alpha-400: var(--color-black-alpha-400);
28
+ --color-black-alpha-500: var(--color-black-alpha-500);
29
+ --color-black-alpha-600: var(--color-black-alpha-600);
30
+ --color-black-alpha-700: var(--color-black-alpha-700);
31
+ --color-black-alpha-800: var(--color-black-alpha-800);
32
+ --color-black-alpha-900: var(--color-black-alpha-900);
32
33
  --color-white: var(--color-white);
33
34
  --color-white-1: var(--color-white-1);
34
35
  --color-white-2: var(--color-white-2);
35
- --color-white-alpha-1: var(--color-white-alpha-1);
36
- --color-white-alpha-2: var(--color-white-alpha-2);
37
- --color-white-alpha-3: var(--color-white-alpha-3);
38
- --color-white-alpha-4: var(--color-white-alpha-4);
39
- --color-white-alpha-5: var(--color-white-alpha-5);
40
- --color-white-alpha-6: var(--color-white-alpha-6);
41
- --color-white-alpha-7: var(--color-white-alpha-7);
42
- --color-white-alpha-8: var(--color-white-alpha-8);
43
- --color-white-alpha-9: var(--color-white-alpha-9);
36
+ --color-white-alpha-100: var(--color-white-alpha-100);
37
+ --color-white-alpha-200: var(--color-white-alpha-200);
38
+ --color-white-alpha-300: var(--color-white-alpha-300);
39
+ --color-white-alpha-400: var(--color-white-alpha-400);
40
+ --color-white-alpha-500: var(--color-white-alpha-500);
41
+ --color-white-alpha-600: var(--color-white-alpha-600);
42
+ --color-white-alpha-700: var(--color-white-alpha-700);
43
+ --color-white-alpha-800: var(--color-white-alpha-800);
44
+ --color-white-alpha-900: var(--color-white-alpha-900);
44
45
 
45
46
  /* Neutral */
46
47
  --color-neutral-0: var(--color-neutral-0);
@@ -59,6 +60,7 @@
59
60
  --color-neutral-alpha-300: var(--color-neutral-alpha-300);
60
61
  --color-neutral-alpha-400: var(--color-neutral-alpha-400);
61
62
  --color-neutral-alpha-500: var(--color-neutral-alpha-500);
63
+ --color-neutral-alpha-600: var(--color-neutral-alpha-600);
62
64
 
63
65
  /* Sand */
64
66
  --color-sand-50: var(--color-sand-50);
@@ -78,17 +80,17 @@
78
80
  --color-positive-400: var(--color-positive-400);
79
81
  --color-positive-500: var(--color-positive-500);
80
82
  --color-positive-600: var(--color-positive-600);
81
- --color-positive-alpha-1: var(--color-positive-alpha-1);
82
- --color-positive-alpha-2: var(--color-positive-alpha-2);
83
- --color-positive-alpha-3: var(--color-positive-alpha-3);
83
+ --color-positive-alpha-100: var(--color-positive-alpha-100);
84
+ --color-positive-alpha-200: var(--color-positive-alpha-200);
85
+ --color-positive-alpha-300: var(--color-positive-alpha-300);
84
86
 
85
87
  /* Negative */
86
88
  --color-negative-400: var(--color-negative-400);
87
89
  --color-negative-500: var(--color-negative-500);
88
90
  --color-negative-600: var(--color-negative-600);
89
- --color-negative-alpha-1: var(--color-negative-alpha-1);
90
- --color-negative-alpha-2: var(--color-negative-alpha-2);
91
- --color-negative-alpha-3: var(--color-negative-alpha-3);
91
+ --color-negative-alpha-100: var(--color-negative-alpha-100);
92
+ --color-negative-alpha-200: var(--color-negative-alpha-200);
93
+ --color-negative-alpha-300: var(--color-negative-alpha-300);
92
94
 
93
95
  /* Magic accent */
94
96
  --color-magic-accent-400: var(--color-magic-accent-400);