@mastra/playground-ui 65.0.0-alpha.4 → 65.0.0-alpha.6

package/dist/components/BillingIllustration.cjs.js

@@ -0,0 +1,223 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const utils_cn = require('../cn-DlOJCxrS.cjs');
+
+const oneUnit = {
+  paths: [
+    [
+      "solid",
+      "m33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "light",
+        "m55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const serverlessArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };
+const smallArt = { viewBox: [32, 32, 56, 56], ...oneUnit };
+const mediumArt = {
+  viewBox: [20, 20, 80, 80],
+  paths: [
+    [
+      "solid",
+      "m21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z"
+      ],
+      ["edge", "m66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44"],
+      [
+        "idle",
+        "m44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44"],
+      [
+        "light",
+        "m67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const largeArt = {
+  viewBox: [9, 9, 102, 102],
+  paths: [
+    [
+      "solid",
+      "m10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "idle",
+        "m55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "idle",
+        "m33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44"],
+      [
+        "idle",
+        "m78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "light",
+        "m56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+
+const billingIllustrationHoverGroup = "group/billing-illustration";
+const artByName = {
+  serverless: serverlessArt,
+  small: smallArt,
+  medium: mediumArt,
+  large: largeArt
+};
+const inkByTone = {
+  ink: "fill-foreground",
+  muted: "fill-muted-foreground",
+  faded: "fill-fill-strong"
+};
+const maskPaintByStroke = {
+  solid: { fill: "black", stroke: "white", strokeOpacity: 0.7 },
+  edge: { stroke: "white", strokeOpacity: 0.35 },
+  line: { stroke: "white" },
+  light: { fill: "white", stroke: "white" },
+  idle: { fill: "white", stroke: "white" }
+};
+const hoverTransition = "motion-safe:duration-slow motion-safe:ease-out-custom";
+const staggerMs = 50;
+const classByStroke = {
+  idle: utils_cn.cn(
+    "[fill-opacity:0] [stroke-opacity:0.35]",
+    "group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]",
+    "group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]",
+    "motion-safe:transition-[fill-opacity,stroke-opacity]",
+    hoverTransition
+  )
+};
+const dashedClass = utils_cn.cn(
+  "[stroke-dasharray:1.5_1.25]",
+  "group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]",
+  "motion-safe:transition-[stroke-dasharray]",
+  hoverTransition
+);
+const liftClass = utils_cn.cn(
+  "motion-safe:transition-[translate]",
+  "motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]",
+  hoverTransition
+);
+const enterClass = utils_cn.cn(
+  "opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100",
+  "motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]",
+  "motion-safe:transition-[opacity,translate]",
+  hoverTransition
+);
+const countIdle = (paths) => paths.filter(([stroke]) => stroke === "idle").length;
+function ArtPaths({ paths, dashed, firstIdle }) {
+  let idle = firstIdle;
+  return paths.map(([stroke, d], index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d,
+      ...maskPaintByStroke[stroke],
+      className: utils_cn.cn(classByStroke[stroke], dashed && stroke !== "light" && dashedClass),
+      style: stroke === "idle" ? { transitionDelay: `${idle++ * staggerMs}ms` } : void 0,
+      vectorEffect: "non-scaling-stroke"
+    },
+    index
+  ));
+}
+function BillingIllustration({ name, tone = "ink", className, ...props }) {
+  const maskId = `billing-illustration-${React.useId().replace(/[^\w-]/g, "")}`;
+  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];
+  const parts = [
+    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),
+    ...enters.map((part) => ({ part, className: enterClass, delay: 0 }))
+  ];
+  const [x, y, width, height] = viewBox;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: viewBox.join(" "),
+      fill: "none",
+      "aria-hidden": "true",
+      "data-illustration": name,
+      className: utils_cn.cn(billingIllustrationHoverGroup, "block size-30 shrink-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("mask", { id: maskId, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArtPaths, { paths, dashed, firstIdle: 0 }),
+          parts.map(({ part, className: className2, delay }, index) => /* @__PURE__ */ jsxRuntime.jsx("g", { className: className2, style: { transitionDelay: `${delay}ms` }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ArtPaths,
+            {
+              paths: part,
+              dashed,
+              firstIdle: countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)
+            }
+          ) }, index))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width, height, mask: `url(#${maskId})`, className: inkByTone[tone] })
+      ]
+    }
+  );
+}
+
+exports.BillingIllustration = BillingIllustration;
+exports.billingIllustrationHoverGroup = billingIllustrationHoverGroup;
+//# sourceMappingURL=BillingIllustration.cjs.js.map

package/dist/components/BillingIllustration.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingIllustration.cjs.js","sources":["../../src/ds/components/BillingIllustration/art/project-size-art.ts","../../src/ds/components/BillingIllustration/billing-illustration.tsx"],"sourcesContent":["import type { BillingArt } from './billing-art';\n\nconst oneUnit = {\n  paths: [\n    [\n      'solid',\n      'm33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'light',\n        'm55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n} satisfies Pick<BillingArt, 'paths' | 'lifts'>;\n\nexport const serverlessArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };\n\nexport const smallArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit };\n\nexport const mediumArt: BillingArt = {\n  viewBox: [20, 20, 80, 80],\n  paths: [\n    [\n      'solid',\n      'm21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z',\n      ],\n      ['edge', 'm66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44'],\n      [\n        'idle',\n        'm44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44'],\n      [\n        'light',\n        'm67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n\nexport const largeArt: BillingArt = {\n  viewBox: [9, 9, 102, 102],\n  paths: [\n    [\n      'solid',\n      'm10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'idle',\n        'm55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'idle',\n        'm33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44'],\n      [\n        'idle',\n        'm78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'light',\n        'm56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n","import { useId } from 'react';\nimport type { ComponentProps, SVGProps } from 'react';\nimport type { BillingArt, BillingArtPaths, BillingArtStroke } from './art/billing-art';\nimport { largeArt, mediumArt, serverlessArt, smallArt } from './art/project-size-art';\nimport { cn } from '@/lib/utils';\n\nexport type BillingIllustrationName = 'serverless' | 'small' | 'medium' | 'large';\n\nexport type BillingIllustrationTone = 'ink' | 'muted' | 'faded';\n\nexport type BillingIllustrationProps = Omit<ComponentProps<'svg'>, 'children' | 'viewBox'> & {\n  name: BillingIllustrationName;\n  tone?: BillingIllustrationTone;\n};\n\nexport const billingIllustrationHoverGroup = 'group/billing-illustration';\n\nconst artByName = {\n  serverless: serverlessArt,\n  small: smallArt,\n  medium: mediumArt,\n  large: largeArt,\n} satisfies Record<BillingIllustrationName, BillingArt>;\n\nconst inkByTone = {\n  ink: 'fill-foreground',\n  muted: 'fill-muted-foreground',\n  faded: 'fill-fill-strong',\n} satisfies Record<BillingIllustrationTone, string>;\n\nconst maskPaintByStroke = {\n  solid: { fill: 'black', stroke: 'white', strokeOpacity: 0.7 },\n  edge: { stroke: 'white', strokeOpacity: 0.35 },\n  line: { stroke: 'white' },\n  light: { fill: 'white', stroke: 'white' },\n  idle: { fill: 'white', stroke: 'white' },\n} satisfies Record<BillingArtStroke, SVGProps<SVGPathElement>>;\n\nconst hoverTransition = 'motion-safe:duration-slow motion-safe:ease-out-custom';\n\nconst staggerMs = 50;\n\nconst classByStroke: Partial<Record<BillingArtStroke, string>> = {\n  idle: cn(\n    '[fill-opacity:0] [stroke-opacity:0.35]',\n    'group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]',\n    'group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]',\n    'motion-safe:transition-[fill-opacity,stroke-opacity]',\n    hoverTransition,\n  ),\n};\n\nconst dashedClass = cn(\n  '[stroke-dasharray:1.5_1.25]',\n  'group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]',\n  'motion-safe:transition-[stroke-dasharray]',\n  hoverTransition,\n);\n\nconst liftClass = cn(\n  'motion-safe:transition-[translate]',\n  'motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]',\n  hoverTransition,\n);\n\nconst enterClass = cn(\n  'opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100',\n  'motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]',\n  'motion-safe:transition-[opacity,translate]',\n  hoverTransition,\n);\n\nconst countIdle = (paths: BillingArtPaths) => paths.filter(([stroke]) => stroke === 'idle').length;\n\nfunction ArtPaths({ paths, dashed, firstIdle }: { paths: BillingArtPaths; dashed?: boolean; firstIdle: number }) {\n  let idle = firstIdle;\n  return paths.map(([stroke, d], index) => (\n    <path\n      key={index}\n      d={d}\n      {...maskPaintByStroke[stroke]}\n      className={cn(classByStroke[stroke], dashed && stroke !== 'light' && dashedClass)}\n      style={stroke === 'idle' ? { transitionDelay: `${idle++ * staggerMs}ms` } : undefined}\n      vectorEffect=\"non-scaling-stroke\"\n    />\n  ));\n}\n\nexport function BillingIllustration({ name, tone = 'ink', className, ...props }: BillingIllustrationProps) {\n  const maskId = `billing-illustration-${useId().replace(/[^\\w-]/g, '')}`;\n  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];\n  const parts = [\n    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),\n    ...enters.map(part => ({ part, className: enterClass, delay: 0 })),\n  ];\n  const [x, y, width, height] = viewBox;\n\n  return (\n    <svg\n      viewBox={viewBox.join(' ')}\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-illustration={name}\n      className={cn(billingIllustrationHoverGroup, 'block size-30 shrink-0', className)}\n      {...props}\n    >\n      <mask id={maskId}>\n        <g strokeWidth={1} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <ArtPaths paths={paths} dashed={dashed} firstIdle={0} />\n          {parts.map(({ part, className, delay }, index) => (\n            <g key={index} className={className} style={{ transitionDelay: `${delay}ms` }}>\n              <ArtPaths\n                paths={part}\n                dashed={dashed}\n                firstIdle={\n                  countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)\n                }\n              />\n            </g>\n          ))}\n        </g>\n      </mask>\n      <rect x={x} y={y} width={width} height={height} mask={`url(#${maskId})`} className={inkByTone[tone]} />\n    </svg>\n  );\n}\n"],"names":["cn","jsx","useId","jsxs","className"],"mappings":"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"}

package/dist/components/BillingIllustration.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/ds/components/BillingIllustration/index'
+export {}

package/dist/components/BillingIllustration.es.js

@@ -0,0 +1,218 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import { c as cn } from '../cn-CQUhN5Jx.js';
+
+const oneUnit = {
+  paths: [
+    [
+      "solid",
+      "m33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "light",
+        "m55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const serverlessArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };
+const smallArt = { viewBox: [32, 32, 56, 56], ...oneUnit };
+const mediumArt = {
+  viewBox: [20, 20, 80, 80],
+  paths: [
+    [
+      "solid",
+      "m21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z"
+      ],
+      ["edge", "m66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44"],
+      [
+        "idle",
+        "m44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44"],
+      [
+        "light",
+        "m67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+const largeArt = {
+  viewBox: [9, 9, 102, 102],
+  paths: [
+    [
+      "solid",
+      "m10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z"
+    ],
+    ["edge", "m108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69"]
+  ],
+  lifts: [
+    [
+      [
+        "solid",
+        "m39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "idle",
+        "m55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44"],
+      [
+        "idle",
+        "m33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44"],
+      [
+        "idle",
+        "m78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z"
+      ]
+    ],
+    [
+      [
+        "solid",
+        "m41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z"
+      ],
+      ["edge", "m79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44"],
+      [
+        "light",
+        "m56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z"
+      ]
+    ]
+  ]
+};
+
+const billingIllustrationHoverGroup = "group/billing-illustration";
+const artByName = {
+  serverless: serverlessArt,
+  small: smallArt,
+  medium: mediumArt,
+  large: largeArt
+};
+const inkByTone = {
+  ink: "fill-foreground",
+  muted: "fill-muted-foreground",
+  faded: "fill-fill-strong"
+};
+const maskPaintByStroke = {
+  solid: { fill: "black", stroke: "white", strokeOpacity: 0.7 },
+  edge: { stroke: "white", strokeOpacity: 0.35 },
+  line: { stroke: "white" },
+  light: { fill: "white", stroke: "white" },
+  idle: { fill: "white", stroke: "white" }
+};
+const hoverTransition = "motion-safe:duration-slow motion-safe:ease-out-custom";
+const staggerMs = 50;
+const classByStroke = {
+  idle: cn(
+    "[fill-opacity:0] [stroke-opacity:0.35]",
+    "group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]",
+    "group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]",
+    "motion-safe:transition-[fill-opacity,stroke-opacity]",
+    hoverTransition
+  )
+};
+const dashedClass = cn(
+  "[stroke-dasharray:1.5_1.25]",
+  "group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]",
+  "motion-safe:transition-[stroke-dasharray]",
+  hoverTransition
+);
+const liftClass = cn(
+  "motion-safe:transition-[translate]",
+  "motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]",
+  hoverTransition
+);
+const enterClass = cn(
+  "opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100",
+  "motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]",
+  "motion-safe:transition-[opacity,translate]",
+  hoverTransition
+);
+const countIdle = (paths) => paths.filter(([stroke]) => stroke === "idle").length;
+function ArtPaths({ paths, dashed, firstIdle }) {
+  let idle = firstIdle;
+  return paths.map(([stroke, d], index) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d,
+      ...maskPaintByStroke[stroke],
+      className: cn(classByStroke[stroke], dashed && stroke !== "light" && dashedClass),
+      style: stroke === "idle" ? { transitionDelay: `${idle++ * staggerMs}ms` } : void 0,
+      vectorEffect: "non-scaling-stroke"
+    },
+    index
+  ));
+}
+function BillingIllustration({ name, tone = "ink", className, ...props }) {
+  const maskId = `billing-illustration-${useId().replace(/[^\w-]/g, "")}`;
+  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];
+  const parts = [
+    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),
+    ...enters.map((part) => ({ part, className: enterClass, delay: 0 }))
+  ];
+  const [x, y, width, height] = viewBox;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: viewBox.join(" "),
+      fill: "none",
+      "aria-hidden": "true",
+      "data-illustration": name,
+      className: cn(billingIllustrationHoverGroup, "block size-30 shrink-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsxs("g", { strokeWidth: 1, strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx(ArtPaths, { paths, dashed, firstIdle: 0 }),
+          parts.map(({ part, className: className2, delay }, index) => /* @__PURE__ */ jsx("g", { className: className2, style: { transitionDelay: `${delay}ms` }, children: /* @__PURE__ */ jsx(
+            ArtPaths,
+            {
+              paths: part,
+              dashed,
+              firstIdle: countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)
+            }
+          ) }, index))
+        ] }) }),
+        /* @__PURE__ */ jsx("rect", { x, y, width, height, mask: `url(#${maskId})`, className: inkByTone[tone] })
+      ]
+    }
+  );
+}
+
+export { BillingIllustration, billingIllustrationHoverGroup };
+//# sourceMappingURL=BillingIllustration.es.js.map

package/dist/components/BillingIllustration.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingIllustration.es.js","sources":["../../src/ds/components/BillingIllustration/art/project-size-art.ts","../../src/ds/components/BillingIllustration/billing-illustration.tsx"],"sourcesContent":["import type { BillingArt } from './billing-art';\n\nconst oneUnit = {\n  paths: [\n    [\n      'solid',\n      'm33.12 65.12.41-1.04 1.17-.87 20.05-10.02 1.75-.59 2.07-.21 2.06.21 1.76.59L85.3 64.64l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.58-2.07.21-2.06-.21-1.76-.58L34.7 70.53l-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm85.12 66.55-.27.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.19-.4-22.91-11.45-.79-.6-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm40.2 46.41.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm78.05 47.84-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'light',\n        'm55.99 64.5-.01-.25-.05-.25-.07-.26-.11-.25-.12-.25-.15-.23-.17-.2-.18-.19-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.16-.07.18-.05.21-.01.23.01.24.05.26.07.26.11.25.12.24.15.23.17.21.18.18.19.15.19.12.19.08.19.04.18-.01.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n} satisfies Pick<BillingArt, 'paths' | 'lifts'>;\n\nexport const serverlessArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit, dashed: true };\n\nexport const smallArt: BillingArt = { viewBox: [32, 32, 56, 56], ...oneUnit };\n\nexport const mediumArt: BillingArt = {\n  viewBox: [20, 20, 80, 80],\n  paths: [\n    [\n      'solid',\n      'm21.19 59.15.41-1.04 1.17-.87 20.05-10.03 1.75-.58 2.07-.21 2.06.21 1.75.58L97.23 70.6l1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-20.05 10.02-1.75.59-2.07.2-2.06-.2-1.75-.59-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm97.06 72.51-.28.7-.79.59-20.05 10.02-1.18.4-1.4.14-1.39-.14-1.18-.4-46.78-23.39-.79-.59-.28-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm28.27 40.44.31-.77.87-.66 14.32-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.31-.44-17.19-8.59-.87-.66-.31-.77Z',\n      ],\n      ['edge', 'm66.11 41.87-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.19-8.59-.49-.37-.18-.44'],\n      [\n        'idle',\n        'm44.06 58.53-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.14-.23-.17-.21-.18-.18-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.1.26.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.03h.18l.17-.04.14-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm52.13 52.37.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.31.44 17.19 8.59.87.66.31.77v18.71l-.31.78-.87.65-14.32 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm89.98 53.8-.18.44-.49.38-14.32 7.16-.75.24-.88.09-.87-.09-.75-.24-17.18-8.6-.5-.37-.17-.44'],\n      [\n        'light',\n        'm67.92 70.46-.01-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.18-.19-.15-.2-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.12.25.15.22.17.21.18.18.19.15.19.12.2.08.19.04h.18l.16-.05.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n\nexport const largeArt: BillingArt = {\n  viewBox: [9, 9, 102, 102],\n  paths: [\n    [\n      'solid',\n      'm10.21 64.64.41-1.04 1.17-.87L53.8 41.72l1.75-.58 2.06-.21 2.07.21 1.75.58 46.78 23.39 1.17.88.41 1.03v3.51l-.41 1.03-1.17.88-42.01 21-1.75.58-2.06.21-2.07-.21-1.75-.58-46.78-23.39-1.17-.87-.41-1.04Z',\n    ],\n    ['edge', 'm108.03 67.02-.27.7-.79.59-42.01 21-1.18.4-1.39.14-1.4-.14-1.18-.4-46.78-23.39-.79-.59-.27-.69'],\n  ],\n  lifts: [\n    [\n      [\n        'solid',\n        'm39.24 34.95.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm77.09 36.38-.17.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'idle',\n        'm55.04 53.04-.02-.25-.04-.25-.08-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.19-.11-.2-.08-.19-.04h-.18l-.16.04-.15.08-.13.12-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.15.23.16.21.18.18.19.15.2.12.19.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.08-.18.04-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm17.29 45.93.31-.78.88-.65 14.31-7.16 1.32-.44 1.55-.16 1.55.16 1.31.44 17.18 8.59.88.66.31.77v18.71l-.31.77-.88.66-14.31 7.16-1.32.44-1.55.15-1.55-.15-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm55.14 47.36-.18.44-.5.37-14.32 7.16-.74.25-.88.09-.88-.09-.74-.25-17.18-8.59-.5-.37-.18-.44'],\n      [\n        'idle',\n        'm33.08 64.02-.01-.25-.05-.25-.07-.26-.11-.26-.12-.24-.15-.23-.17-.21-.18-.18-.19-.15-.19-.11-.19-.08-.19-.04h-.18l-.17.04-.15.08-.12.12-.11.15-.07.19-.05.21-.01.23.01.24.05.26.07.25.11.26.12.24.15.23.17.21.18.18.19.15.19.12.19.07.19.04h.18l.17-.04.15-.08.12-.12.11-.15.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm63.11 46.88.31-.77.88-.66 14.31-7.16 1.32-.44 1.55-.15 1.55.15 1.31.44 17.18 8.59.88.66.31.78v18.7l-.31.78-.88.65-14.31 7.16-1.32.44-1.55.16-1.55-.16-1.31-.44-17.18-8.59-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm100.96 48.32-.18.43-.5.38-14.32 7.16-.74.25-.88.08-.88-.08-.74-.25-17.18-8.59-.5-.38-.18-.44'],\n      [\n        'idle',\n        'm78.9 64.97-.01-.24-.05-.26-.07-.26-.11-.25-.12-.25-.15-.22-.17-.21-.18-.18-.19-.15-.19-.12-.19-.08-.19-.04h-.18l-.17.05-.15.08-.12.12-.11.15-.07.18-.05.21-.01.23.01.25.05.25.07.26.11.25.12.25.15.23.17.2.18.18.19.15.19.12.19.08.19.04h.18l.17-.04.15-.09.12-.11.11-.16.07-.18.05-.21z',\n      ],\n    ],\n    [\n      [\n        'solid',\n        'm41.15 57.86.31-.77.88-.66 14.32-7.16 1.31-.44 1.55-.15 1.55.15 1.32.44 17.18 8.59.88.66.31.77V78l-.31.77-.88.66-14.32 7.16-1.31.44-1.55.15-1.55-.15-1.32-.44L42.34 78l-.88-.66-.31-.77Z',\n      ],\n      ['edge', 'm79 59.29-.17.44-.5.37-14.32 7.16-.75.25-.87.09-.88-.09-.75-.25-17.18-8.59-.5-.37-.17-.44'],\n      [\n        'light',\n        'm56.95 75.95-.02-.25-.05-.25-.07-.26-.1-.25-.13-.25-.15-.23-.16-.2-.18-.19-.19-.15-.2-.11-.19-.08-.19-.04h-.18l-.17.04-.14.09-.13.11-.1.16-.08.18-.04.21-.02.23.02.24.04.26.08.26.1.25.13.24.14.23.17.21.18.18.19.15.19.12.2.08.19.04.18-.01.16-.04.15-.08.13-.12.1-.15.07-.18.05-.21z',\n      ],\n    ],\n  ],\n};\n","import { useId } from 'react';\nimport type { ComponentProps, SVGProps } from 'react';\nimport type { BillingArt, BillingArtPaths, BillingArtStroke } from './art/billing-art';\nimport { largeArt, mediumArt, serverlessArt, smallArt } from './art/project-size-art';\nimport { cn } from '@/lib/utils';\n\nexport type BillingIllustrationName = 'serverless' | 'small' | 'medium' | 'large';\n\nexport type BillingIllustrationTone = 'ink' | 'muted' | 'faded';\n\nexport type BillingIllustrationProps = Omit<ComponentProps<'svg'>, 'children' | 'viewBox'> & {\n  name: BillingIllustrationName;\n  tone?: BillingIllustrationTone;\n};\n\nexport const billingIllustrationHoverGroup = 'group/billing-illustration';\n\nconst artByName = {\n  serverless: serverlessArt,\n  small: smallArt,\n  medium: mediumArt,\n  large: largeArt,\n} satisfies Record<BillingIllustrationName, BillingArt>;\n\nconst inkByTone = {\n  ink: 'fill-foreground',\n  muted: 'fill-muted-foreground',\n  faded: 'fill-fill-strong',\n} satisfies Record<BillingIllustrationTone, string>;\n\nconst maskPaintByStroke = {\n  solid: { fill: 'black', stroke: 'white', strokeOpacity: 0.7 },\n  edge: { stroke: 'white', strokeOpacity: 0.35 },\n  line: { stroke: 'white' },\n  light: { fill: 'white', stroke: 'white' },\n  idle: { fill: 'white', stroke: 'white' },\n} satisfies Record<BillingArtStroke, SVGProps<SVGPathElement>>;\n\nconst hoverTransition = 'motion-safe:duration-slow motion-safe:ease-out-custom';\n\nconst staggerMs = 50;\n\nconst classByStroke: Partial<Record<BillingArtStroke, string>> = {\n  idle: cn(\n    '[fill-opacity:0] [stroke-opacity:0.35]',\n    'group-hover/billing-illustration:[fill-opacity:1] group-hover/billing-illustration:[stroke-opacity:1]',\n    'group-focus-within/billing-illustration:[fill-opacity:1] group-focus-within/billing-illustration:[stroke-opacity:1]',\n    'motion-safe:transition-[fill-opacity,stroke-opacity]',\n    hoverTransition,\n  ),\n};\n\nconst dashedClass = cn(\n  '[stroke-dasharray:1.5_1.25]',\n  'group-focus-within/billing-illustration:[stroke-dasharray:1.5_0] group-hover/billing-illustration:[stroke-dasharray:1.5_0]',\n  'motion-safe:transition-[stroke-dasharray]',\n  hoverTransition,\n);\n\nconst liftClass = cn(\n  'motion-safe:transition-[translate]',\n  'motion-safe:group-focus-within/billing-illustration:[translate:0_-3px] motion-safe:group-hover/billing-illustration:[translate:0_-3px]',\n  hoverTransition,\n);\n\nconst enterClass = cn(\n  'opacity-0 group-focus-within/billing-illustration:opacity-100 group-hover/billing-illustration:opacity-100',\n  'motion-safe:[translate:0_-8px] motion-safe:group-focus-within/billing-illustration:[translate:0_0] motion-safe:group-hover/billing-illustration:[translate:0_0]',\n  'motion-safe:transition-[opacity,translate]',\n  hoverTransition,\n);\n\nconst countIdle = (paths: BillingArtPaths) => paths.filter(([stroke]) => stroke === 'idle').length;\n\nfunction ArtPaths({ paths, dashed, firstIdle }: { paths: BillingArtPaths; dashed?: boolean; firstIdle: number }) {\n  let idle = firstIdle;\n  return paths.map(([stroke, d], index) => (\n    <path\n      key={index}\n      d={d}\n      {...maskPaintByStroke[stroke]}\n      className={cn(classByStroke[stroke], dashed && stroke !== 'light' && dashedClass)}\n      style={stroke === 'idle' ? { transitionDelay: `${idle++ * staggerMs}ms` } : undefined}\n      vectorEffect=\"non-scaling-stroke\"\n    />\n  ));\n}\n\nexport function BillingIllustration({ name, tone = 'ink', className, ...props }: BillingIllustrationProps) {\n  const maskId = `billing-illustration-${useId().replace(/[^\\w-]/g, '')}`;\n  const { viewBox, paths, lifts = [], enters = [], dashed } = artByName[name];\n  const parts = [\n    ...lifts.map((part, index) => ({ part, className: liftClass, delay: index * staggerMs })),\n    ...enters.map(part => ({ part, className: enterClass, delay: 0 })),\n  ];\n  const [x, y, width, height] = viewBox;\n\n  return (\n    <svg\n      viewBox={viewBox.join(' ')}\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-illustration={name}\n      className={cn(billingIllustrationHoverGroup, 'block size-30 shrink-0', className)}\n      {...props}\n    >\n      <mask id={maskId}>\n        <g strokeWidth={1} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <ArtPaths paths={paths} dashed={dashed} firstIdle={0} />\n          {parts.map(({ part, className, delay }, index) => (\n            <g key={index} className={className} style={{ transitionDelay: `${delay}ms` }}>\n              <ArtPaths\n                paths={part}\n                dashed={dashed}\n                firstIdle={\n                  countIdle(paths) + parts.slice(0, index).reduce((sum, earlier) => sum + countIdle(earlier.part), 0)\n                }\n              />\n            </g>\n          ))}\n        </g>\n      </mask>\n      <rect x={x} y={y} width={width} height={height} mask={`url(#${maskId})`} className={inkByTone[tone]} />\n    </svg>\n  );\n}\n"],"names":["className"],"mappings":"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"}

package/dist/components/EmptyState.cjs.js

@@ -337,7 +337,7 @@ function DeploysArt() {
   ] });
 }
 
-const hoverStyle$3 = { "--hover-shift": "10.18px -5.09px" };
+const hoverStyle$4 = { "--hover-shift": "10.18px -5.09px" };
 function DisconnectedArt() {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: "0.9", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -369,7 +369,7 @@ function DisconnectedArt() {
       "g",
       {
         className: "motion-safe:transition-[translate,transform] motion-safe:duration-slow motion-safe:ease-out-custom motion-safe:group-hover/empty-state:[translate:var(--hover-shift)]",
-        style: hoverStyle$3,
+        style: hoverStyle$4,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "path",
@@ -648,7 +648,7 @@ function EnvironmentsArt() {
   ] });
 }
 
-const hoverStyle$2 = { "--hover-shift": "0px -10.61px" };
+const hoverStyle$3 = { "--hover-shift": "0px -10.61px" };
 function LockedArt({ id }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: "0.9", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -694,7 +694,7 @@ function LockedArt({ id }) {
       "g",
       {
         className: "motion-safe:transition-[translate,transform] motion-safe:duration-slow motion-safe:ease-out-custom motion-safe:group-hover/empty-state:[translate:var(--hover-shift)]",
-        style: hoverStyle$2,
+        style: hoverStyle$3,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "path",
@@ -918,6 +918,63 @@ function LogsArt() {
   ] });
 }
 
+const hoverStyle$2 = { "--hover-shift": "0px -8.79px" };
+function NoChargesArt({ id }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: "0.9", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "m27.72 60.18.66-1.66 1.89-1.41 14.35-7.18 2.82-.94 3.33-.34 3.33.34 2.82.94 32.81 16.4 1.89 1.41.66 1.67v17.58l-.66 1.66-1.89 1.42-14.35 7.17-2.82.95-3.33.33-3.33-.33-2.82-.95-32.81-16.4-1.89-1.41-.66-1.67Z",
+        className: "fill-background",
+        stroke: "currentColor",
+        strokeOpacity: "0.7"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "m89.96 69.41-.48 1.22-1.39 1.03-14.35 7.18-2.07.69-2.44.25-2.44-.25-2.07-.69-32.81-16.4-1.39-1.04-.48-1.22",
+        stroke: "currentColor",
+        strokeOpacity: "0.35"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "m74.35 70.95-.65.22-.78.07-.78-.07-.66-.22-23.78-11.9-.44-.33-.16-.38.16-.39.44-.33.65-.22.78-.08.78.08.66.22 23.78 11.89.44.33.16.39-.16.39z",
+        stroke: "currentColor",
+        strokeOpacity: "0.35"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "m62.46 90.66-.02-.29-.05-.29-.09-.3-.11-.29-.15-.29-.17-.26-.19-.24-.21-.21-.22-.18-.22-.13-.23-.09-.22-.05-.21.01-.19.04-.17.1-.15.13-.11.18-.09.21-.05.24-.02.27.02.28.05.3.09.3.11.29.15.28.17.27.19.24.21.21.22.17.23.14.22.09.22.04h.21l.19-.05.17-.09.15-.14.11-.17.09-.22.05-.24z",
+        stroke: "currentColor",
+        strokeOpacity: "0.7",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("mask", { id: `${id}-slip`, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "120", height: "120", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m46.26-42.12 2.87-1.44 26.66 13.33V70.23l-2.87 1.43-26.66-13.32Z", fill: "white" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { mask: `url(#${id}-slip)`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "g",
+      {
+        className: "motion-safe:transition-[translate,transform] motion-safe:duration-slow motion-safe:ease-out-custom motion-safe:group-hover/empty-state:[translate:var(--hover-shift)]",
+        style: hoverStyle$2,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "m50.77 70.46 20.51 10.25V31.74l-1.71 1.9-1.71-3.61-1.71 1.91-1.71-3.62-1.71 1.91-1.7-3.62-1.71 1.91-1.71-3.62-1.71 1.91-1.71-3.62-1.71 1.91-1.71-3.62Z",
+            className: "fill-background",
+            stroke: "currentColor",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
 function NotAMemberArt() {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { strokeWidth: "0.9", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1549,6 +1606,7 @@ const artByName = {
   databases: DatabasesArt,
   threads: ThreadsArt,
   deploys: DeploysArt,
+  "no-charges": NoChargesArt,
   disconnected: DisconnectedArt,
   locked: LockedArt,
   "rate-limited": RateLimitedArt,