@photoroom/ui 0.1.14 → 0.1.16

package/index.mjs

@@ -2708,7 +2708,7 @@ const KI = se(
       },
       variant: {
         secondary: "bg-background-subdued hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
-        "on-dark": "bg-neutral-2 hover:bg-neutral-3 focus-visible:bg-neutral-3 focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-neutral-4",
+        "on-dark": "bg-neutral-200 hover:bg-neutral-300 focus-visible:bg-neutral-300 focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-neutral-400",
         "secondary-on-dark": "bg-background-white-subdued hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover focus-visible:ring focus-visible:ring-misc-white-focus-indicator active:bg-background-white-subdued-down"
       },
       disabled: {
@@ -2717,7 +2717,7 @@ const KI = se(
     },
     compoundVariants: [
       { variant: "secondary", disabled: !0, class: "!bg-background-subdued" },
-      { variant: "on-dark", disabled: !0, class: "!bg-neutral-2" },
+      { variant: "on-dark", disabled: !0, class: "!bg-neutral-200" },
       {
         variant: "secondary-on-dark",
         disabled: !0,
@@ -2773,7 +2773,7 @@ const JI = ({ className: e, ...t }) => /* @__PURE__ */ p(
       "outline-none focus-visible:ring-0",
       "h-6 w-6",
       "flex items-center justify-center",
-      "rounded-full bg-neutral-6",
+      "rounded-full bg-neutral-600",
       "border-4 border-transparent bg-clip-padding",
       // expand click zone by 4px
       "text-content-white-primary",
@@ -6354,7 +6354,7 @@ const H3 = se(
         3: "text-secondary-sunny-mango",
         4: "text-secondary-aqua-kiwi",
         5: "text-secondary-coral-cherry",
-        neutral: "text-neutral-8"
+        neutral: "text-neutral-800"
       }
     },
     compoundVariants: [
@@ -10335,7 +10335,7 @@ const Fo = 16, Hf = 2, qf = (Fo - Hf) / 2, _d = 2 * Math.PI * qf, N5 = ({
               fill: "none",
               stroke: "currentColor",
               strokeWidth: Hf,
-              className: "text-neutral-alpha-3"
+              className: "text-neutral-alpha-300"
             }
           ),
           /* @__PURE__ */ p(
@@ -10350,7 +10350,7 @@ const Fo = 16, Hf = 2, qf = (Fo - Hf) / 2, _d = 2 * Math.PI * qf, N5 = ({
               strokeDasharray: `${i}, ${a}`,
               strokeDashoffset: _d / 4,
               strokeLinecap: "round",
-              className: "text-neutral-7",
+              className: "text-neutral-700",
               style: { transition: "stroke-dasharray 0.15s ease" }
             }
           )
@@ -10878,7 +10878,7 @@ mS.displayName = "RoundButton";
 const W5 = ({ children: e, size: t = "default", variant: r = "white", ...n }, o) => {
   const i = {
     white: "bg-surface-high shadow-500 hover:shadow-700 focus-visible:shadow-700 active:bg-surface-default",
-    gray: "box-border bg-neutral-1 border border-neutral-2 hover:bg-neutral-1 focus-visible:bg-neutral-1 active:bg-neutral-2",
+    gray: "box-border bg-neutral-100 border border-neutral-200 hover:bg-neutral-100 focus-visible:bg-neutral-100 active:bg-neutral-200",
     black: "box-border bg-black-alpha-7 border border-black-alpha-3 hover:bg-black-alpha-8 focus-visible:bg-black-alpha-8 active:bg-[rgba(0,0,0,.8)]"
   }, a = {
     small: "w-8 h-8",
@@ -10919,7 +10919,7 @@ const joe = ({
     className: I(
       "inline-flex cursor-pointer items-center justify-center",
       "rounded-500 outline-none",
-      "hover:bg-neutral-2 focus-visible:bg-neutral-2 active:bg-neutral-3",
+      "hover:bg-neutral-200 focus-visible:bg-neutral-200 active:bg-neutral-300",
       "focus-visible:ring focus-visible:ring-accent-alpha-5",
       "text-black",
       "transition-all interaction-transition",
@@ -23196,7 +23196,7 @@ const uv = te(
             {
               className: Y(
                 "flex h-5 w-5 shrink-0 items-center justify-center rounded-200 misc-border-size-selection",
-                "border-neutral-4 data-[state=checked]:border-content-accent data-[state=checked]:bg-content-accent"
+                "border-neutral-400 data-[state=checked]:border-content-accent data-[state=checked]:bg-content-accent"
               ),
               "data-state": i.checked ? "checked" : "unchecked",
               children: /* @__PURE__ */ p(Vk, { children: /* @__PURE__ */ p(vi, { strokeWidth: 3, className: "text-white icon-size-400" }) })
@@ -23240,7 +23240,7 @@ const jk = te(
           "component-500 w-full cursor-pointer outline-none misc-dropdown-inner-rounding",
           "disabled:pointer-events-none disabled:select-none disabled:opacity-30",
           "aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-30",
-          "text-content-primary hover:bg-neutral-2 focus-visible:bg-neutral-2 active:bg-neutral-3",
+          "text-content-primary hover:bg-neutral-200 focus-visible:bg-neutral-200 active:bg-neutral-300",
           "min-h-[40px] py-2.5",
           "pr-2",
           "radix-state-checked:pl-2",
@@ -24551,7 +24551,7 @@ const Hoe = ({
     direction: "vertical"
   }
 }), mH = se(
-  "relative overflow-hidden rounded-full bg-neutral-3",
+  "relative overflow-hidden rounded-full bg-neutral-300",
   {
     variants: {
       direction: {
@@ -24747,7 +24747,7 @@ const xH = se(
         class: I(
           n,
           // Display a checker background in case of transparent background color
-          r === "transparent" && "bg-damier-neutral-1 bg-damier-medium"
+          r === "transparent" && "bg-damier-neutral-100 bg-damier-medium"
         )
       }),
       style: {
@@ -24876,7 +24876,7 @@ const r_ = ({
               stroke: "currentColor",
               strokeWidth: a,
               strokeLinecap: "round",
-              className: "text-neutral-alpha-2"
+              className: "text-neutral-alpha-200"
             }
           ),
           e > 0 && /* @__PURE__ */ p(
@@ -25001,7 +25001,7 @@ const Qs = ({ variant: e = "default", className: t }) => /* @__PURE__ */ p(
       n && /* @__PURE__ */ p("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black-alpha-5", children: /* @__PURE__ */ p(Qs, { className: "size-500", variant: "on-dark" }) })
     ]
   }
-) : /* @__PURE__ */ p("div", { className: "relative flex h-20 w-20 shrink-0 overflow-hidden rounded-300 bg-neutral-1", children: /* @__PURE__ */ p("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ p(CR, { className: "text-content-tertiary icon-size-600" }) }) }), Xoe = ({
+) : /* @__PURE__ */ p("div", { className: "relative flex h-20 w-20 shrink-0 overflow-hidden rounded-300 bg-neutral-100", children: /* @__PURE__ */ p("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ p(CR, { className: "text-content-tertiary icon-size-600" }) }) }), Xoe = ({
   title: e,
   imageUrl: t,
   sellScore: r,
@@ -25653,7 +25653,7 @@ const jH = ({ variant: e = "default", className: t, children: r }) => /* @__PURE
   children: n,
   imgRef: o,
   onImageLoad: i
-}) => e ? r ? /* @__PURE__ */ p("div", { className: "absolute inset-1 flex items-center justify-center", children: /* @__PURE__ */ E("div", { className: "relative flex overflow-hidden rounded-300 border border-misc-border bg-damier-neutral-2 bg-damier-large", children: [
+}) => e ? r ? /* @__PURE__ */ p("div", { className: "absolute inset-1 flex items-center justify-center", children: /* @__PURE__ */ E("div", { className: "relative flex overflow-hidden rounded-300 border border-misc-border bg-damier-neutral-200 bg-damier-large", children: [
   /* @__PURE__ */ p(
     "img",
     {
@@ -26271,7 +26271,7 @@ const gs = 88, Or = gs / 2, pl = gs / 10, hl = (gs - pl) / 2, ml = 2 * Math.PI *
                 strokeWidth: pl,
                 strokeDasharray: `${n}, ${hq}`,
                 strokeLinecap: "round",
-                className: "text-neutral-alpha-2"
+                className: "text-neutral-alpha-200"
               }
             ),
             e.map((i, a) => {
@@ -26292,7 +26292,7 @@ const gs = 88, Or = gs / 2, pl = gs / 10, hl = (gs - pl) / 2, ml = 2 * Math.PI *
                     strokeDasharray: `${c}, ${ml - c}`,
                     transform: `rotate(${l} ${Or} ${Or})`,
                     style: {
-                      color: i.color || "var(--color-neutral-4)",
+                      color: i.color || "var(--color-neutral-400)",
                       transition: "stroke-dasharray 0.15s ease"
                     }
                   }
@@ -26655,12 +26655,12 @@ const oie = ({
     "relative box-border flex h-10 w-10 items-center justify-center rounded-full outline-none transition-all interaction-transition",
     "bg-[radial-gradient(50%_50%_at_50%_50%,_#FFF_7.29%,_rgba(255,_255,_255,_0.00)_100%),_conic-gradient(from_180deg_at_50%_50%,_#FF4040_0deg,_#FFDF40_60.00000178813934deg,_#3DF297_120.00000357627869deg,_#40DFFF_180deg,_#6040FF_240.00000715255737deg,_#FF40FF_299.9999928474426deg,_#FF4040_360deg)]",
     // Hover
-    "hover:border-neutral-alpha-3",
+    "hover:border-neutral-alpha-300",
     // Dimmer (dimmer on top via pseudo element)
     "before:absolute before:rounded-full before:content-[''] before:interaction-transition",
     "before:h-full before:w-full",
     "before:-left-0 before:-top-0",
-    "active:before:bg-neutral-alpha-3",
+    "active:before:bg-neutral-alpha-300",
     // Selection (for black border)
     "after:absolute after:rounded-full after:content-[''] after:interaction-transition",
     "after:misc-border-size-default",
@@ -27050,7 +27050,7 @@ const mn = ({
       {
         variant: "default",
         invalid: !1,
-        class: "border border-black-alpha-3 caret-content-accent hover:border-neutral-4 focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued"
+        class: "border border-black-alpha-3 caret-content-accent hover:border-neutral-400 focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued"
       }
     ],
     defaultVariants: {
@@ -27147,7 +27147,7 @@ const Uq = {
           "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
           c.disabled && "opacity-50"
         ),
-        children: /* @__PURE__ */ p(i, { className: "h-5 w-5 text-neutral-6", "aria-hidden": "true" })
+        children: /* @__PURE__ */ p(i, { className: "h-5 w-5 text-neutral-600", "aria-hidden": "true" })
       }
     ),
     /* @__PURE__ */ p(
@@ -27157,14 +27157,14 @@ const Uq = {
         ref: u,
         ...c,
         className: vu([
-          "w-full appearance-none rounded-500 bg-surface-high text-500 font-medium text-content-primary placeholder-neutral-6 outline-none transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
+          "w-full appearance-none rounded-500 bg-surface-high text-500 font-medium text-content-primary placeholder-neutral-600 outline-none transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
           "focus-visible:misc-border-size-focus-ring",
           e ? [
             "border border-content-negative caret-content-primary",
             "focus-visible:border-content-negative focus-visible:ring-background-negative-subdued-down"
           ] : [
             "border caret-content-accent",
-            "hover:border-neutral-4",
+            "hover:border-neutral-400",
             "focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued",
             n ? "border-transparent" : "border-misc-border"
           ],
@@ -27205,7 +27205,7 @@ const Uq = {
         children: /* @__PURE__ */ p(
           sw,
           {
-            className: I("h-5 w-5", e ? "text-content-negative" : "text-neutral-6"),
+            className: I("h-5 w-5", e ? "text-content-negative" : "text-neutral-600"),
             "aria-hidden": "true"
           }
         )
@@ -37889,7 +37889,7 @@ const uie = ({
         "hover:bg-background-subdued-hover active:bg-background-subdued-down",
         "focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "component-500 text-left placeholder-neutral-6 [word-break:break-word]",
+        "component-500 text-left placeholder-neutral-600 [word-break:break-word]",
         "transition duration-200",
         e
       ),
@@ -38199,7 +38199,7 @@ const yJ = ({
       className: I(
         "box-border flex w-[320px] items-center gap-2 rounded-area-500 bg-surface-high py-2 pl-3 pr-2",
         "border border-misc-border-box transition duration-200",
-        "hover:border-neutral-4",
+        "hover:border-neutral-400",
         "focus-within:border-content-accent focus-within:ring focus-within:ring-misc-focus-indicator-subdued",
         r && "cursor-not-allowed opacity-30"
       ),
@@ -38494,7 +38494,7 @@ const NJ = se(
           "group-data-[state=indeterminate]/checkbox:border-misc-border group-data-[state=indeterminate]/checkbox:bg-background-subdued"
         ],
         default: [
-          "border-neutral-4 active:border-neutral-6 active:enabled:bg-background-accent-down",
+          "border-neutral-400 active:border-neutral-600 active:enabled:bg-background-accent-down",
           "group-data-[state=checked]/checkbox:border-content-accent group-data-[state=checked]/checkbox:bg-content-accent",
           "group-data-[state=indeterminate]/checkbox:border-content-accent group-data-[state=indeterminate]/checkbox:bg-content-accent",
           "misc-border-size-selection"
@@ -38703,7 +38703,7 @@ const NJ = se(
             "text-content-negative"
           ] : [
             "border caret-content-accent",
-            "hover:border-neutral-4",
+            "hover:border-neutral-400",
             "focus-visible:border-content-accent focus-visible:ring-misc-focus-indicator-subdued",
             "border-misc-divider"
           ],
@@ -39254,7 +39254,7 @@ const DJ = (e) => e.isFile === !0, MJ = (e) => (
               "interaction-transition",
               "group/dropzone",
               "rounded-500",
-              "border border-dashed border-neutral-alpha-4",
+              "border border-dashed border-neutral-alpha-400",
               "w-full select-none appearance-none",
               "hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover active:bg-background-subdued-down",
               "outline-none focus-visible:ring-accent-alpha-5 focus-visible:misc-border-size-focus-ring",
@@ -39323,7 +39323,7 @@ const lc = te(
       className: I(
         "inline-flex shrink-0 items-center justify-center",
         "size-300",
-        "border-neutral-4 misc-border-size-selection data-[state=checked]:border-transparent",
+        "border-neutral-400 misc-border-size-selection data-[state=checked]:border-transparent",
         "data-[state=checked]:bg-content-accent",
         "text-transparent data-[state=checked]:text-white",
         "transition-colors",
@@ -39403,8 +39403,8 @@ const sg = ({
             "aria-hidden": "true",
             className: I(
               "pointer-events-none absolute mx-auto h-5 w-8 rounded-full transition-colors duration-200 ease-in-out",
-              i ? "bg-content-accent" : "bg-neutral-4",
-              "group-focus-visible/switch:bg-neutral-5",
+              i ? "bg-content-accent" : "bg-neutral-400",
+              "group-focus-visible/switch:bg-neutral-500",
               "group-focus-visible/switch:bg-content-accent-down group-data-[state=checked]/switch:bg-content-accent"
             )
           }
@@ -39900,7 +39900,7 @@ const ZJ = ({
             "span",
             {
               className: I(
-                "border-neutral-4 hover:border-neutral-5 group-data-[state=checked]/radiogroupitem:border-content-accent",
+                "border-neutral-400 hover:border-neutral-500 group-data-[state=checked]/radiogroupitem:border-content-accent",
                 "group-focus-visible/radiogroupitem:ring-accent-alpha-5 group-focus-visible/radiogroupitem:misc-border-size-focus-ring",
                 "flex h-5 w-5 shrink-0 items-center justify-center rounded-full misc-border-size-selection"
               ),
@@ -39995,9 +39995,9 @@ const a2 = te(
         "cursor-pointer outline-none",
         "flex h-10 w-full items-center gap-2 px-3",
         "rounded-500 border border-misc-border bg-surface-high",
-        "hover:border-neutral-4 focus-visible:border-content-accent",
+        "hover:border-neutral-400 focus-visible:border-content-accent",
         "invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative",
-        "component-500 font-medium text-content-primary placeholder-neutral-6",
+        "component-500 font-medium text-content-primary placeholder-neutral-600",
         "focus-visible:ring-misc-focus-indicator-subdued",
         "focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
         "transition duration-200",
@@ -40243,7 +40243,7 @@ const JJ = te(
                 onClick: i,
                 disabled: a,
                 "aria-label": "Submit",
-                className: "[&>button]:bg-background-default [&>button]:text-content-white-primary-inverted [&>button]:hover:bg-neutral-8 [&>button]:active:bg-background-default [&_svg]:-rotate-90"
+                className: "[&>button]:bg-background-default [&>button]:text-content-white-primary-inverted [&>button]:hover:bg-neutral-800 [&>button]:active:bg-background-default [&_svg]:-rotate-90"
               }
             )
           ] })
@@ -40276,7 +40276,7 @@ const gie = ({
       {
         className: I(
           "flex h-full flex-col items-center justify-center gap-4 px-6 py-5",
-          "border-len relative rounded-500 border border-dashed border-neutral-4",
+          "border-len relative rounded-500 border border-dashed border-neutral-400",
           "transition-opacity interaction-transition",
           {
             "pointer-events-none opacity-0": r
@@ -40473,7 +40473,7 @@ const bie = ({
             "span",
             {
               className: I(
-                "border-neutral-4 hover:border-neutral-5 group-data-[state=checked]/radiogroupitem:border-content-accent",
+                "border-neutral-400 hover:border-neutral-500 group-data-[state=checked]/radiogroupitem:border-content-accent",
                 "group-focus-visible/radiogroupitem:ring-accent-alpha-5 group-focus-visible/radiogroupitem:misc-border-size-focus-ring",
                 "flex h-5 w-5 shrink-0 items-center justify-center rounded-full misc-border-size-selection"
               ),
@@ -40682,7 +40682,7 @@ const oQ = ({ reaction: e, selected: t = !1, onClick: r }) => /* @__PURE__ */ p(
   {
     ...e,
     className: I(
-      "relative h-10 w-10 overflow-hidden rounded-200 bg-neutral-2 outline-none transition-all",
+      "relative h-10 w-10 overflow-hidden rounded-200 bg-neutral-200 outline-none transition-all",
       "after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded-200 after:transition-all after:content-['']",
       // Hover
       "hover:after:bg-black-alpha-3",
@@ -42005,9 +42005,9 @@ const B2 = te(
         "outline-none",
         "flex h-10 w-full items-center gap-1 px-3",
         "rounded-500 border border-misc-border bg-surface-high",
-        "hover:border-neutral-4 focus-visible:border-content-accent",
+        "hover:border-neutral-400 focus-visible:border-content-accent",
         "invalid:border-content-negative invalid:hover:border-content-negative invalid:focus-visible:border-content-negative",
-        "component-500 font-medium text-content-primary placeholder-neutral-6",
+        "component-500 font-medium text-content-primary placeholder-neutral-600",
         "focus-visible:ring-misc-focus-indicator-subdued",
         "focus-visible:misc-border-size-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
         "transition duration-200",
@@ -42248,7 +42248,7 @@ const cee = (e) => /* @__PURE__ */ p(
     className: I(
       e.invalid ? "bg-surface-high" : [
         "bg-surface-alternate",
-        "hover:border-transparent hover:bg-neutral-2",
+        "hover:border-transparent hover:bg-neutral-200",
         "focus-visible:bg-surface-high"
       ],
       e.className
@@ -42706,7 +42706,7 @@ const Nx = (e, t) => (r) => 100 * (r - e) / (t - e), Ex = ["ArrowRight", "ArrowL
         Ex.includes(s.key) && (r == null || r(s), s.stopPropagation());
       },
       children: [
-        /* @__PURE__ */ p(kee, { className: "relative h-1 grow rounded-full bg-neutral-2", children: /* @__PURE__ */ p("div", { className: "absolute h-full rounded-full bg-content-accent", style: a }) }),
+        /* @__PURE__ */ p(kee, { className: "relative h-1 grow rounded-full bg-neutral-200", children: /* @__PURE__ */ p("div", { className: "absolute h-full rounded-full bg-content-accent", style: a }) }),
         o == null ? void 0 : o.map((s, c) => /* @__PURE__ */ p(
           Y2,
           {
@@ -42823,7 +42823,7 @@ const Nx = (e, t) => (r) => 100 * (r - e) / (t - e), Ex = ["ArrowRight", "ArrowL
     {
       className: I(
         "inline-flex h-20 w-20 items-center justify-center",
-        "rounded-500 border border-dashed border-neutral-alpha-4",
+        "rounded-500 border border-dashed border-neutral-alpha-400",
         "hover:bg-background-subdued-hover focus:bg-background-subdued-hover active:bg-background-subdued-down",
         {
           "pointer-events-none opacity-30": r,
@@ -42856,7 +42856,7 @@ const Nx = (e, t) => (r) => 100 * (r - e) / (t - e), Ex = ["ArrowRight", "ArrowL
   {
     className: I(
       "h-full w-full overflow-hidden rounded-400",
-      "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-neutral-alpha-4 after:content-[''] after:misc-border-size-default"
+      "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border-neutral-alpha-400 after:content-[''] after:misc-border-size-default"
     ),
     children: [
       t,
@@ -43097,7 +43097,7 @@ const Dee = se(
         ],
         false: [
           "border caret-content-accent",
-          "group-hover:placeholder-shown:border-neutral-4",
+          "group-hover:placeholder-shown:border-neutral-400",
           "peer-focus-within:hover:border-content-accent",
           "focus-within:border-content-accent focus-within:ring-misc-focus-indicator-subdued"
         ]
@@ -43133,7 +43133,7 @@ const Dee = se(
           type: "button",
           "aria-label": "Clear all tags",
           className: I(
-            "rounded-full bg-neutral-6 p-0.5",
+            "rounded-full bg-neutral-600 p-0.5",
             "disabled:cursor-not-allowed disabled:opacity-50"
           ),
           onClick: o,
@@ -43180,7 +43180,7 @@ Lee.displayName = "TextField";
 const Bee = se(
   [
     "min-h-full min-w-full p-1.5 py-2",
-    "duration-200 active:bg-neutral-4 disabled:cursor-not-allowed disabled:opacity-50"
+    "duration-200 active:bg-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
   ],
   {
     variants: {
@@ -43893,8 +43893,8 @@ const _ie = ({
           "figure",
           {
             className: I("relative shrink-0 self-start", {
-              "before:absolute before:bottom-0 before:left-0 before:h-[90%] before:w-1/2 before:origin-bottom-left before:-rotate-[5deg] before:rounded-150 before:bg-neutral-4 before:content-['']": c,
-              "after:absolute after:bottom-0 after:right-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[5deg] after:rounded-150 after:bg-neutral-4 after:content-['']": c
+              "before:absolute before:bottom-0 before:left-0 before:h-[90%] before:w-1/2 before:origin-bottom-left before:-rotate-[5deg] before:rounded-150 before:bg-neutral-400 before:content-['']": c,
+              "after:absolute after:bottom-0 after:right-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[5deg] after:rounded-150 after:bg-neutral-400 after:content-['']": c
             }),
             children: /* @__PURE__ */ p("div", { className: "relative after:pointer-events-none after:absolute after:left-0 after:top-0 after:z-10 after:h-full after:w-full after:rounded-[3px] after:border-misc-border after:content-[''] after:misc-border-size-hairline", children: /* @__PURE__ */ p(
               "img",
@@ -44785,7 +44785,7 @@ const du = ({ label: e, imageSrc: t, className: r, children: n, ...o }) => /* @_
             "rounded-200 misc-border-size-selection",
             "group-radix-state-unchecked:bg-transparent",
             "group-radix-state-checked:bg-content-accent",
-            "group-radix-state-unchecked:border-neutral-4",
+            "group-radix-state-unchecked:border-neutral-400",
             "group-radix-state-checked:border-accent-500",
             "transition-colors duration-150 ease-out"
           ),
@@ -45156,7 +45156,7 @@ const Lie = ({
       children: /* @__PURE__ */ p(t, { "aria-hidden": "true", className: "text-content-white-primary-inverted icon-size-400" })
     }
   );
-}, $ie = (e) => /* @__PURE__ */ p("span", { className: "relative aspect-square rounded-200 bg-neutral-2 after:pointer-events-none after:absolute after:inset-0 after:z-[2] after:rounded-[inherit] after:border-misc-border after:content-[''] after:misc-border-size-hairline", children: /* @__PURE__ */ p("img", { ...e }) }), Vte = ({
+}, $ie = (e) => /* @__PURE__ */ p("span", { className: "relative aspect-square rounded-200 bg-neutral-200 after:pointer-events-none after:absolute after:inset-0 after:z-[2] after:rounded-[inherit] after:border-misc-border after:content-[''] after:misc-border-size-hairline", children: /* @__PURE__ */ p("img", { ...e }) }), Vte = ({
   type: e,
   preview: t,
   label: r,
@@ -45181,8 +45181,8 @@ const Lie = ({
             className: I(
               "&[_img]:!block relative shrink-0 rounded-200 [&_img]:!relative [&_img]:!z-[1] [&_img]:!h-8 [&_img]:!w-8 [&_img]:!rounded-[inherit] [&_img]:!object-cover",
               {
-                "before:absolute before:bottom-0 before:left-0 before:h-[90%] before:w-1/2 before:origin-bottom-left before:-rotate-[6deg] before:rounded-[inherit] before:bg-neutral-4 before:content-['']": i,
-                "after:absolute after:bottom-0 after:right-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[6deg] after:rounded-[inherit] after:bg-neutral-4 after:content-['']": i
+                "before:absolute before:bottom-0 before:left-0 before:h-[90%] before:w-1/2 before:origin-bottom-left before:-rotate-[6deg] before:rounded-[inherit] before:bg-neutral-400 before:content-['']": i,
+                "after:absolute after:bottom-0 after:right-0 after:h-[90%] after:w-1/2 after:origin-bottom-right after:rotate-[6deg] after:rounded-[inherit] after:bg-neutral-400 after:content-['']": i
               }
             ),
             children: t
@@ -46112,7 +46112,7 @@ function Uie({
       className: Y(
         "relative overflow-hidden",
         "h-12 w-full min-w-0",
-        "rounded-full bg-neutral-8 shadow-400",
+        "rounded-full bg-neutral-800 shadow-400",
         "component-500 text-content-white-primary-inverted",
         e
       ),
@@ -47804,7 +47804,7 @@ const La = {
         // NOTE: using `&_:where(selector):not(:where([class~='not-prose'],[class~='not-prose']_*))` to replicate what `.prose-*` does when I need advanced selectors
         // See: https://github.com/tailwindlabs/tailwindcss-typography/blob/e002ab89ad8f4202638249c1c300c0cf0b3739c5/src/index.test.js#L143
         // all `.prose-*` selector skip styling content under `.not-prose` class
-        "prose body-600 max-w-none break-words text-neutral-8",
+        "prose body-600 max-w-none break-words text-neutral-800",
         // headings
         "prose-headings:text-content-primary",
         "prose-h2:heading-light-700 sm:prose-h2:heading-light-800",
@@ -47924,7 +47924,7 @@ const Jre = ({ title: e, date: t, className: r }) => /* @__PURE__ */ E("div", {
       // overlapping border hack
       "after:pointer-events-none after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded-area-500 after:border after:border-solid after:content-['']",
       "after:transition-all after:duration-300",
-      "after:border-neutral-alpha-3"
+      "after:border-neutral-alpha-300"
     ),
     children: [
       /* @__PURE__ */ p(
@@ -48090,7 +48090,7 @@ const Jre = ({ title: e, date: t, className: r }) => /* @__PURE__ */ E("div", {
           {
             className: I(
               "mx-[10px] flex flex-col items-center gap-1 sm:mx-0 sm:w-[130px]",
-              "text-center text-neutral-8"
+              "text-center text-neutral-800"
             ),
             children: [
               e,
@@ -48100,7 +48100,7 @@ const Jre = ({ title: e, date: t, className: r }) => /* @__PURE__ */ E("div", {
         ),
         /* @__PURE__ */ p(Fx, { className: I("sm:h-[60px] sm:w-[30px]", "h-8 w-4 shrink-0 -scale-x-100") })
       ] }),
-      t && /* @__PURE__ */ p("div", { className: "component-semi-strong-500 text-neutral-8 sm:hidden", children: t })
+      t && /* @__PURE__ */ p("div", { className: "component-semi-strong-500 text-neutral-800 sm:hidden", children: t })
     ]
   }
 ), rae = ({
@@ -48109,8 +48109,8 @@ const Jre = ({ title: e, date: t, className: r }) => /* @__PURE__ */ E("div", {
   downloadsCount: r,
   ...n
 }) => /* @__PURE__ */ p("section", { className: I("py-e400", e), ...n, children: /* @__PURE__ */ p("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ E("div", { className: "flex w-full max-w-xs flex-wrap items-center justify-center gap-x-12 gap-y-6 sm:max-w-mdlg lg:max-w-2.5xl", children: [
-  /* @__PURE__ */ p("div", { className: "order-1", children: /* @__PURE__ */ p(Sf, { subline: t, children: /* @__PURE__ */ p(Qre, { className: "h-8 w-10 fill-neutral-8" }) }) }),
-  /* @__PURE__ */ p("div", { className: "order-2 lg:order-3", children: /* @__PURE__ */ p(Sf, { subline: t, children: /* @__PURE__ */ p(ene, { className: "h-8 w-10 fill-neutral-8" }) }) }),
+  /* @__PURE__ */ p("div", { className: "order-1", children: /* @__PURE__ */ p(Sf, { subline: t, children: /* @__PURE__ */ p(Qre, { className: "h-8 w-10 fill-neutral-800" }) }) }),
+  /* @__PURE__ */ p("div", { className: "order-2 lg:order-3", children: /* @__PURE__ */ p(Sf, { subline: t, children: /* @__PURE__ */ p(ene, { className: "h-8 w-10 fill-neutral-800" }) }) }),
   /* @__PURE__ */ p("div", { className: "xs:mx-auto order-3 lg:order-2", children: /* @__PURE__ */ p(Sf, { children: /* @__PURE__ */ p("div", { className: "component-semi-strong-500 max-w-[130px] text-center", children: r }) }) })
 ] }) }) }), nae = ({ title: e, children: t, cta: r, className: n }) => {
   const o = me(() => r ? St(r, {
@@ -48244,7 +48244,7 @@ const iae = ({ titleBlock: e, children: t, ...r }) => /* @__PURE__ */ E(
     className: I("flex flex-col", "px-4 sm:px-6 md:px-8 xl:px-10", "py-e500", "gap-i500"),
     children: [
       e,
-      !!t && /* @__PURE__ */ p("div", { className: "mx-auto w-full max-w-3xl", children: /* @__PURE__ */ p("div", { className: "flex flex-col divide-y divide-neutral-alpha-3 overflow-hidden rounded-area-500 shadow-600", children: t }) })
+      !!t && /* @__PURE__ */ p("div", { className: "mx-auto w-full max-w-3xl", children: /* @__PURE__ */ p("div", { className: "flex flex-col divide-y divide-neutral-alpha-300 overflow-hidden rounded-area-500 shadow-600", children: t }) })
     ]
   }
 ), cae = ({ title: e, description: t, ...r }) => /* @__PURE__ */ E("div", { ...r, className: "px-4 py-4 sm:space-x-2 sm:px-6 sm:py-6", children: [
@@ -48974,7 +48974,7 @@ const Ba = {}, lne = ({
         "relative text-white",
         "pl-4 pr-16 sm:pl-6 md:pl-8 lg:px-16",
         !r && e === "accent" && "bg-content-accent",
-        !r && e === "neutral" && "bg-neutral-8",
+        !r && e === "neutral" && "bg-neutral-800",
         t
       ),
       style: r ? { backgroundColor: r } : void 0,
@@ -49211,9 +49211,9 @@ const Ba = {}, lne = ({
   );
 }, Oae = ({ title: e, assets: t, className: r, ...n }) => /* @__PURE__ */ E("div", { className: Y("flex flex-col gap-i400", r), ...n, children: [
   /* @__PURE__ */ E("div", { className: "flex w-full items-center justify-center gap-10", children: [
-    /* @__PURE__ */ p("div", { className: "hidden h-px flex-1 bg-neutral-3 sm:block", "aria-hidden": "true" }),
+    /* @__PURE__ */ p("div", { className: "hidden h-px flex-1 bg-neutral-300 sm:block", "aria-hidden": "true" }),
     /* @__PURE__ */ p("p", { className: "body-700 text-center font-medium text-content-primary", children: e }),
-    /* @__PURE__ */ p("div", { className: "hidden h-px flex-1 bg-neutral-3 sm:block", "aria-hidden": "true" })
+    /* @__PURE__ */ p("div", { className: "hidden h-px flex-1 bg-neutral-300 sm:block", "aria-hidden": "true" })
   ] }),
   /* @__PURE__ */ p("div", { className: "flex flex-wrap justify-center gap-2 lg:gap-4 xl:gap-8", children: t.map((o, i) => /* @__PURE__ */ p(
     "figure",
@@ -49355,7 +49355,7 @@ const Ba = {}, lne = ({
       {
         className: I(
           "flex flex-col gap-1 sm:hidden",
-          "rounded-500 border border-dashed border-neutral-5",
+          "rounded-500 border border-dashed border-neutral-500",
           "min-h-[160px] items-center justify-center px-2 py-4 text-center"
         ),
         children: [
@@ -49603,7 +49603,7 @@ const jae = ({
       {
         className: I(
           "group",
-          "relative flex w-full overflow-hidden rounded-area-500 border border-neutral-4",
+          "relative flex w-full overflow-hidden rounded-area-500 border border-neutral-400",
           "flex-col sm:flex-row lg:flex-col"
         ),
         ...f,
@@ -49698,7 +49698,7 @@ const jae = ({
   /* @__PURE__ */ p("span", { className: "block xl:hidden", children: t }),
   /* @__PURE__ */ p("span", { className: "hidden xl:block", children: e })
 ] }) : e }) }) }), qae = ({ title: e, items: t, ...r }) => /* @__PURE__ */ E("div", { className: "flex flex-col", ...r, children: [
-  e && /* @__PURE__ */ p("div", { className: "component-semi-strong-700 border-b border-neutral-9 py-2", children: e }),
+  e && /* @__PURE__ */ p("div", { className: "component-semi-strong-700 border-b border-neutral-900 py-2", children: e }),
   t
 ] }), Zae = ({
   featureName: e,
@@ -50087,7 +50087,7 @@ const Xae = ({
                 className: I(
                   "flex items-center justify-center",
                   "h-12 content-to-edge-spacious-px-600",
-                  "rounded-500 border border-dashed border-neutral-alpha-4",
+                  "rounded-500 border border-dashed border-neutral-alpha-400",
                   "component-500 text-content-secondary"
                 ),
                 children: C
@@ -50176,7 +50176,7 @@ const Xae = ({
   variants: {
     selected: {
       true: "text-[#7883FF]",
-      false: "text-neutral-4"
+      false: "text-neutral-400"
     }
   },
   defaultVariants: {
@@ -50359,7 +50359,7 @@ const _ne = ({ children: e }) => /* @__PURE__ */ p("span", { className: "block s
       "article",
       {
         className: I(
-          "flex h-full w-full flex-col gap-6 rounded-area-500 bg-neutral-1",
+          "flex h-full w-full flex-col gap-6 rounded-area-500 bg-neutral-100",
           "p-5 sm:p-8"
         ),
         children: [
@@ -50807,7 +50807,7 @@ const yse = ({
   "div",
   {
     className: I(
-      "bg-gradient-to-b from-white to-neutral-1",
+      "bg-gradient-to-b from-white to-neutral-100",
       "flex flex-col items-center",
       "px-4 sm:px-6 md:px-8 xl:px-10",
       "py-e500",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -37,7 +37,7 @@
   "dependencies": {
     "@img-comparison-slider/react": "^8.0.0",
     "@lottiefiles/react-lottie-player": "^3.5.4",
-    "@photoroom/icons": "0.1.5",
+    "@photoroom/icons": "0.1.6",
     "@radix-ui/react-accordion": "^1.0.4",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",