@photoroom/ui 0.1.1

package/index395.mjs

@@ -0,0 +1,28 @@
+import { jsxs as e } from "react/jsx-runtime";
+import { cva as c } from "./index302.mjs";
+import { cn as l } from "./index7.mjs";
+import { sellScoreColorVariants as m, getScoreLevel as i } from "./index608.mjs";
+const p = c("", {
+  variants: {
+    size: {
+      24: "component-500",
+      16: "component-300"
+    }
+  }
+}), h = ({ score: o, label: r, max: n, className: s, size: a }) => {
+  const t = i(o, n);
+  return /* @__PURE__ */ e("span", { className: l(p({ size: a }), s), children: [
+    /* @__PURE__ */ e("span", { className: "text-content-secondary", children: [
+      r,
+      ": "
+    ] }),
+    /* @__PURE__ */ e("span", { className: m({ level: t }), children: [
+      o,
+      "%"
+    ] })
+  ] });
+};
+export {
+  h as SellScoreLabel
+};
+//# sourceMappingURL=index395.mjs.map

package/index396.mjs

@@ -0,0 +1,13 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { clsx as i } from "./index296.mjs";
+const d = ({ author: e, className: l }) => e ? /* @__PURE__ */ s("div", { className: i("flex items-center gap-4", l), children: [
+  !!(e != null && e.avatar) && /* @__PURE__ */ n("div", { className: "relative shrink-0 overflow-hidden rounded-full size-400 sm:size-600 lg:size-800", children: e.avatar }),
+  /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ n("span", { className: "component-semi-strong-600 text-content-primary sm:component-semi-strong-700 lg:component-semi-strong-800", children: e == null ? void 0 : e.name }),
+    (e == null ? void 0 : e.jobTitle) && /* @__PURE__ */ n("span", { className: "component-500 text-content-tertiary", children: e == null ? void 0 : e.jobTitle })
+  ] })
+] }) : null;
+export {
+  d as ArticleAuthor
+};
+//# sourceMappingURL=index396.mjs.map

package/index397.mjs

@@ -0,0 +1,18 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { clsx as s } from "./index296.mjs";
+const c = ({ title: l, date: e, className: a }) => /* @__PURE__ */ o("div", { "data-selector": "blogpost-header", className: s("flex flex-col gap-6", a), children: [
+  /* @__PURE__ */ t("h1", { "data-selector": "blogpost-title", className: "heading-800 sm:heading-900 lg:heading-1000", children: l }),
+  !!e && /* @__PURE__ */ t(
+    "time",
+    {
+      "data-selector": "blogpost-date",
+      className: "body-600 text-content-tertiary",
+      dateTime: e,
+      children: e
+    }
+  )
+] });
+export {
+  c as ArticleTitle
+};
+//# sourceMappingURL=index397.mjs.map

package/index398.mjs

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { ArrowLeftIcon as c } from "@photoroom/icons/lib/monochromes";
+import { clsx as m } from "./index296.mjs";
+import { Button as d } from "./index10.mjs";
+const u = ({
+  title: s,
+  subtitle: t,
+  content: i,
+  backLabel: l,
+  onBack: e,
+  children: o,
+  capitalize: n = !0
+}) => /* @__PURE__ */ a("div", { className: "flex h-10 items-center gap-2", children: [
+  e && /* @__PURE__ */ r(
+    d,
+    {
+      className: "shrink-0",
+      density: "regular",
+      variant: "secondary",
+      onClick: e,
+      icon: c,
+      "aria-label": l
+    }
+  ),
+  i && !e && /* @__PURE__ */ r("div", { className: "shrink-0", children: i }),
+  /* @__PURE__ */ a("div", { className: "mr-auto flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ r(
+      "h5",
+      {
+        className: m(
+          "component-semi-strong-700 truncate text-content-primary",
+          n && "capitalize"
+        ),
+        children: s
+      }
+    ),
+    t
+  ] }),
+  o
+] });
+export {
+  u as PanelHeaderLeading
+};
+//# sourceMappingURL=index398.mjs.map

package/index399.mjs

@@ -0,0 +1,47 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cn as e } from "./index7.mjs";
+import { PullDownButton as l } from "./index27.mjs";
+import { Button as p } from "./index10.mjs";
+import { ClearButton as B } from "./index13.mjs";
+const c = f(
+  ({ type: r, children: t, className: n, onClick: o, disabled: a, icon: u, variant: s }, m) => r === "button" ? /* @__PURE__ */ i(
+    p,
+    {
+      ref: m,
+      density: "regular",
+      variant: s ?? "secondary",
+      className: e("shrink-0", n),
+      onClick: o,
+      disabled: a,
+      icon: u,
+      children: t
+    }
+  ) : r === "pullDownButton" ? /* @__PURE__ */ i(
+    l,
+    {
+      as: "button",
+      variant: "secondary",
+      className: e("shrink-0", n),
+      onClick: o,
+      disabled: a,
+      children: t
+    }
+  ) : r === "clearButton" ? /* @__PURE__ */ i(
+    B,
+    {
+      ref: m,
+      variant: "secondary",
+      size: "medium",
+      className: e("shrink-0", n),
+      onClick: o,
+      disabled: a,
+      children: t
+    }
+  ) : null
+);
+c.displayName = "PanelHeaderTrailing";
+export {
+  c as PanelHeaderTrailing
+};
+//# sourceMappingURL=index399.mjs.map

package/index4.mjs

@@ -0,0 +1,41 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { clsx as l } from "./index296.mjs";
+import { forwardRef as m } from "react";
+import { Avatar as u } from "./index151.mjs";
+import { ProBadge as p } from "./index167.mjs";
+const f = m(
+  ({ title: n, subtitle: r, avatar: c, badgeLabel: t, icon: i, className: a, ...s }, d) => /* @__PURE__ */ o(
+    "button",
+    {
+      ref: d,
+      ...s,
+      className: l(
+        "shrink-0 cursor-pointer outline-none",
+        "flex w-full items-center gap-4 rounded-300 p-3",
+        "active:bg-background-subdued-down",
+        "[&[data-radix-collection-item]]:focus:bg-background-subdued-hover",
+        "[&:not([data-radix-collection-item])]:hover:bg-background-subdued-hover",
+        "[&:not([data-radix-collection-item])]:focus-visible:bg-background-subdued-hover",
+        "[&:not([data-radix-collection-item])]:focus-visible:misc-border-size-focus-ring",
+        "[&:not([data-radix-collection-item])]:focus-visible:ring-misc-focus-indicator",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ e(u, { ...c, size: 40 }),
+        /* @__PURE__ */ o("div", { className: "flex min-w-0 grow flex-col gap-[3px] text-left", children: [
+          /* @__PURE__ */ e("span", { className: "component-semi-strong-500 min-w-0 truncate text-content-primary", children: n }),
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-1.5", children: [
+            t && /* @__PURE__ */ e(p, { size: "small", children: t }),
+            !!r && /* @__PURE__ */ e("span", { className: "component-400 min-w-0 truncate text-content-tertiary", children: r })
+          ] })
+        ] }),
+        !!i && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center", children: i })
+      ]
+    }
+  )
+);
+f.displayName = "SpaceDropdownItem";
+export {
+  f as SpaceDropdownItem
+};
+//# sourceMappingURL=index4.mjs.map

package/index40.mjs

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as i } from "./index7.mjs";
+import { FeedHeaderTitle as f } from "./index301.mjs";
+const l = ({ children: e, className: t }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: i(
+      "flex w-full items-center justify-end gap-3 pb-2 [&>*:first-child]:mr-auto [&>*:first-child]:truncate [&>*:not(:first-child)]:flex-shrink-0",
+      t
+    ),
+    children: e
+  }
+);
+l.Title = f;
+export {
+  l as FeedHeader
+};
+//# sourceMappingURL=index40.mjs.map

package/index400.mjs

@@ -0,0 +1,108 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Item as u, Indicator as x } from "./index315.mjs";
+import { cva as h } from "./index302.mjs";
+import { forwardRef as g } from "react";
+import { cn as r } from "./index7.mjs";
+import { SelectionBadge as f } from "./index181.mjs";
+const b = h(
+  [
+    "group",
+    "rounded-500 p-[1px] transition-all duration-150 ease-out focus-within:outline-none focus-within:ring focus-within:ring-misc-focus-indicator focus-visible:outline-none",
+    "radix-state-unchecked:bg-misc-border-box",
+    "hover:radix-state-unchecked:bg-misc-border-box-hover",
+    "active:radix-state-unchecked:bg-misc-border-box-down"
+  ],
+  {
+    variants: {
+      variant: {
+        pro: [
+          "bg-content-accent",
+          "radix-state-checked:bg-gradient-to-r",
+          "radix-state-checked:bg-background-pro"
+        ],
+        default: "radix-state-checked:bg-content-accent"
+      },
+      disabled: {
+        true: "opacity-50",
+        default: "opacity-100"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      disabled: !1
+    }
+  }
+), v = g(
+  ({
+    className: s,
+    title: d,
+    subtitle: n,
+    info: i,
+    additionalInfo: o,
+    footnote: a,
+    variant: l = "default",
+    disabled: c,
+    ...m
+  }, p) => /* @__PURE__ */ e(
+    u,
+    {
+      ref: p,
+      className: r(
+        b({
+          variant: l,
+          disabled: c,
+          class: s
+        })
+      ),
+      disabled: c,
+      ...m,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: r(
+            "w-full rounded-450 p-[1px] transition-all duration-150 ease-out",
+            "group-radix-state-checked:bg-transparent",
+            "group-radix-state-unchecked:bg-surface-higher"
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: r(
+                  "flex w-full items-center gap-2 bg-surface-higher p-4 transition-all duration-150 ease-out",
+                  a ? "rounded-t-400" : "rounded-400"
+                ),
+                children: [
+                  /* @__PURE__ */ e(x, { asChild: !0, forceMount: !0, children: /* @__PURE__ */ e(f, { variant: "round" }) }),
+                  /* @__PURE__ */ t("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ e("span", { className: "component-semi-strong-500 text-left text-content-primary", children: d }),
+                    n && /* @__PURE__ */ e("span", { className: "component-400 text-left text-content-tertiary", children: n })
+                  ] }),
+                  i && /* @__PURE__ */ t("div", { className: "ml-auto flex flex-col items-end gap-1", children: [
+                    /* @__PURE__ */ e("span", { className: "component-semi-strong-500 text-right text-content-primary", children: i }),
+                    o && /* @__PURE__ */ e("span", { className: "component-400 text-right text-content-primary", children: o })
+                  ] })
+                ]
+              }
+            ),
+            a && /* @__PURE__ */ e(
+              "div",
+              {
+                className: r(
+                  "component-400 -mb-[2px] -ml-[2px] -mr-[2px] rounded-b-400 bg-content-tertiary px-4 py-1.5 text-white transition duration-150 ease-out",
+                  "group-radix-state-checked:bg-transparent"
+                ),
+                children: a
+              }
+            )
+          ]
+        }
+      )
+    }
+  )
+);
+v.displayName = "OptionGroupItem";
+export {
+  v as OptionGroupItem
+};
+//# sourceMappingURL=index400.mjs.map

package/index401.mjs

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as o } from "./index7.mjs";
+const b = (e) => /* @__PURE__ */ r(
+  "button",
+  {
+    ...e,
+    type: "button",
+    className: o(
+      "flex h-10 w-10 items-center justify-center bg-surface-default outline-none",
+      "border border-misc-border-box",
+      "first:rounded-l-500 first:border-r-0",
+      "last:rounded-r-500 last:border-l-0",
+      "hover:bg-background-subdued-hover",
+      "active:bg-background-subdued-down",
+      "group-hover:border-misc-border-box-hover",
+      "group-focus-visible:border-misc-border-box-hover",
+      "disabled:pointer-events-none",
+      "group",
+      e.className
+    ),
+    tabIndex: -1,
+    children: /* @__PURE__ */ r("span", { className: "group-disabled:opacity-30", children: e.children })
+  }
+);
+export {
+  b as NumberSelectFieldButton
+};
+//# sourceMappingURL=index401.mjs.map

package/index402.mjs

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useRef as i, useEffect as l } from "react";
+import { cn as s } from "./index7.mjs";
+const b = ({
+  values: t,
+  selectedIndex: n,
+  onSelect: c
+}) => {
+  const o = i(null);
+  return l(() => {
+    if (o.current && n !== null) {
+      const r = o.current.children[n];
+      r == null || r.scrollIntoView({ block: "center" });
+    }
+  }, [n]), /* @__PURE__ */ e("ul", { ref: o, className: "max-h-80 w-[120px] overflow-auto p-1", children: t.map((r, u) => /* @__PURE__ */ e(
+    "li",
+    {
+      className: s(
+        "component-500 flex h-10 w-full items-center justify-center outline-none misc-dropdown-inner-rounding",
+        "cursor-pointer select-none outline-none",
+        "truncate px-2 text-content-primary",
+        "hover:bg-background-subdued-hover",
+        "active:bg-background-subdued-down",
+        n === u && "bg-background-subdued-hover"
+      ),
+      children: /* @__PURE__ */ e("button", { className: "h-full flex-1", onClick: () => c(r), children: r })
+    },
+    r
+  )) });
+};
+export {
+  b as NumberSelectFieldList
+};
+//# sourceMappingURL=index402.mjs.map

package/index403.mjs

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Item as a } from "./index343.mjs";
+import { cn as r } from "./index7.mjs";
+const d = ({ className: t, ...e }) => /* @__PURE__ */ o(
+  a,
+  {
+    className: r(
+      "group relative flex-1",
+      "min-h-10 min-w-0 px-1",
+      "flex items-center justify-center",
+      "rounded-500 outline-none",
+      "misc-border-size-default data-[state=off]:border-transparent data-[state=on]:border-misc-border",
+      "data-[state=off]:bg-transparent data-[state=on]:bg-surface-high",
+      "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring",
+      "component-500 data-[state=off]:text-content-secondary data-[state=on]:text-content-primary",
+      "transition-colors interaction-transition-type-1",
+      "data-[disabled:cursor-not-allowed data-[disabled]:opacity-30",
+      t
+    ),
+    ...e
+  }
+);
+export {
+  d as SegmentedControlItem
+};
+//# sourceMappingURL=index403.mjs.map

package/index404.mjs

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as l } from "./index296.mjs";
+import { isValidComponent as a } from "./index7.mjs";
+import { SegmentedControlItem as f } from "./index403.mjs";
+import { Tooltip as g } from "./index200.mjs";
+const j = ({
+  icon: e,
+  label: i,
+  tooltip: o,
+  side: s = "top",
+  disabled: m,
+  className: n,
+  ...c
+}) => {
+  const t = a(e) ? /* @__PURE__ */ r(e, { className: "icon-size-500" }) : e;
+  return /* @__PURE__ */ r(
+    f,
+    {
+      className: l("[&_svg]:icon-size-500", n),
+      "aria-label": i,
+      ...c,
+      children: !o || !i ? t : /* @__PURE__ */ r(
+        g,
+        {
+          content: i,
+          side: s,
+          sideOffset: 13,
+          isTriggerDisabled: m,
+          triggerClassName: "min-w-0 grow flex items-center justify-center",
+          children: t
+        }
+      )
+    }
+  );
+};
+export {
+  j as SegmentedControlItemIconOnly
+};
+//# sourceMappingURL=index404.mjs.map

package/index405.mjs

@@ -0,0 +1,26 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { clsx as n } from "./index296.mjs";
+import { isValidComponent as m } from "./index7.mjs";
+import { SegmentedControlItem as a } from "./index403.mjs";
+const d = ({
+  icon: e,
+  label: t,
+  badge: s,
+  className: r,
+  ...l
+}) => /* @__PURE__ */ i(
+  a,
+  {
+    className: n("flex-col gap-0.5 py-2 [&_svg]:icon-size-500", r),
+    ...l,
+    children: [
+      m(e) ? /* @__PURE__ */ o(e, { className: "icon-size-500" }) : e,
+      /* @__PURE__ */ o("span", { className: "component-400", children: t }),
+      !!s && /* @__PURE__ */ o("span", { className: "absolute right-[5px] top-[5px] flex select-none", role: "presentation", children: s })
+    ]
+  }
+);
+export {
+  d as SegmentedControlItemIconWithLabel
+};
+//# sourceMappingURL=index405.mjs.map

package/index406.mjs

@@ -0,0 +1,16 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { clsx as s } from "./index296.mjs";
+import { SegmentedControlItem as c } from "./index403.mjs";
+const i = ({
+  label: o,
+  subtitle: t,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ a(c, { className: s("flex-col justify-start py-2.5", n), ...r, children: [
+  /* @__PURE__ */ e("span", { children: o }),
+  !!t && /* @__PURE__ */ e("span", { className: "component-400 group-data-[state=off]:text-content-tertiary group-data-[state=on]:text-content-accent", children: t })
+] });
+export {
+  i as SegmentedControlItemLabelWithSub
+};
+//# sourceMappingURL=index406.mjs.map

package/index407.mjs

@@ -0,0 +1,31 @@
+import { jsxs as s, jsx as c } from "react/jsx-runtime";
+import { clsx as a } from "./index296.mjs";
+import { forwardRef as m } from "react";
+import { Badge as l } from "./index166.mjs";
+const g = m(function({ as: o = "a", label: e, isNew: n, ...r }, i) {
+  var t;
+  return /* @__PURE__ */ s(
+    o,
+    {
+      ref: i,
+      className: a(
+        "inline-flex items-center gap-1.5",
+        "cursor-pointer rounded-200 outline-none",
+        "focus-visible:ring focus-visible:ring-misc-focus-indicator",
+        "component-500 text-content-subdued-primary",
+        "hover:text-content-primary focus-visible:text-content-primary active:text-content-primary",
+        "transition-colors interaction-transition-type-1"
+      ),
+      ...r,
+      ...(t = r.href) != null && t.toString().startsWith("http") ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: [
+        e,
+        n && /* @__PURE__ */ c(l, { size: "small", variant: "moon-grape", children: "New" })
+      ]
+    }
+  );
+});
+export {
+  g as FooterV2LinkBlock
+};
+//# sourceMappingURL=index407.mjs.map

package/index408.mjs

@@ -0,0 +1,67 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { ChevronRightIcon as b } from "@photoroom/icons/lib/monochromes";
+import { clsx as f } from "./index296.mjs";
+import { useId as u, useState as g, useCallback as x } from "react";
+function C({
+  title: a,
+  className: i,
+  children: c,
+  ...l
+}) {
+  const e = u(), [d, m] = g(!1), p = x((h) => {
+    const t = h.currentTarget;
+    m(t.checked);
+    const r = t.closest("[data-groupid='footer-links-sections']");
+    r == null || r.querySelectorAll('input[name="footer-links-section-toggle"]').forEach((n) => {
+      n.id !== t.id && (n.checked = !1);
+    });
+  }, []);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      role: "region",
+      "aria-labelledby": `${e}-label`,
+      className: f(
+        "group break-inside-avoid",
+        "py-[17px] sm:py-0",
+        "border-b border-misc-divider sm:border-b-0",
+        i
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "checkbox",
+            name: "footer-links-section-toggle",
+            "aria-describedby": `${e}-label`,
+            className: "peer sr-only",
+            id: e,
+            value: a,
+            onChange: p
+          }
+        ),
+        /* @__PURE__ */ s(
+          "label",
+          {
+            htmlFor: e,
+            id: `${e}-label`,
+            role: "button",
+            "aria-expanded": d,
+            "aria-controls": e,
+            className: "flex cursor-pointer items-center justify-between gap-2 sm:cursor-auto",
+            children: [
+              /* @__PURE__ */ o("span", { className: "component-semi-strong-600 text-content-primary", children: a }),
+              /* @__PURE__ */ o(b, { className: "text-content-secondary transition-transform icon-size-400 interaction-transition-type-1 group-has-[:checked]:rotate-90 sm:hidden" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "h-0 overflow-hidden opacity-0 transition-all interaction-transition-type-1 peer-checked:h-max peer-checked:opacity-100 sm:!h-auto sm:!opacity-100 sm:transition-none", children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 pt-6", children: c }) })
+      ]
+    }
+  );
+}
+export {
+  C as FooterV2LinksSectionBlock
+};
+//# sourceMappingURL=index408.mjs.map